diff --git a/041c71b07bfd4f73cf83.module.wasm b/041c71b07bfd4f73cf83.module.wasm new file mode 100644 index 000000000..c91f8255f Binary files /dev/null and b/041c71b07bfd4f73cf83.module.wasm differ diff --git a/1a911272d3f169df80dc.module.wasm b/1a911272d3f169df80dc.module.wasm deleted file mode 100644 index c0803074e..000000000 Binary files a/1a911272d3f169df80dc.module.wasm and /dev/null differ diff --git a/2061b59377974277759b.module.wasm b/2061b59377974277759b.module.wasm new file mode 100644 index 000000000..bea28eff1 Binary files /dev/null and b/2061b59377974277759b.module.wasm differ diff --git a/21d6849224c07f4740b3.module.wasm b/21d6849224c07f4740b3.module.wasm deleted file mode 100644 index 0a4c4a5e1..000000000 Binary files a/21d6849224c07f4740b3.module.wasm and /dev/null differ diff --git a/371c12967e78c41b17cc.module.wasm b/371c12967e78c41b17cc.module.wasm deleted file mode 100644 index 28241dc23..000000000 Binary files a/371c12967e78c41b17cc.module.wasm and /dev/null differ diff --git a/3d1853c0aa872ea2d538.module.wasm b/3d1853c0aa872ea2d538.module.wasm new file mode 100644 index 000000000..862a4fca8 Binary files /dev/null and b/3d1853c0aa872ea2d538.module.wasm differ diff --git a/3f8e523842c22a20056a.module.wasm b/3f8e523842c22a20056a.module.wasm deleted file mode 100644 index 8f542bf30..000000000 Binary files a/3f8e523842c22a20056a.module.wasm and /dev/null differ diff --git a/404.html b/404.html index c37621014..47ab0fb2b 100644 --- a/404.html +++ b/404.html @@ -8,11 +8,11 @@ - + -

404

Looks like we've got some broken links.
Take me home.
- +

404

There's nothing here.
Take me home.
+ diff --git a/489b062169a7114aff59.module.wasm b/489b062169a7114aff59.module.wasm deleted file mode 100644 index 5e006cefe..000000000 Binary files a/489b062169a7114aff59.module.wasm and /dev/null differ diff --git a/5bf1edc009b95ca92db9.module.wasm b/5bf1edc009b95ca92db9.module.wasm deleted file mode 100644 index aa708122b..000000000 Binary files a/5bf1edc009b95ca92db9.module.wasm and /dev/null differ diff --git a/749ebab83dcade9d2650.module.wasm b/749ebab83dcade9d2650.module.wasm new file mode 100644 index 000000000..7f0a3749e Binary files /dev/null and b/749ebab83dcade9d2650.module.wasm differ diff --git a/77288b3d7642f9c164ef.module.wasm b/77288b3d7642f9c164ef.module.wasm deleted file mode 100644 index a2434c5b2..000000000 Binary files a/77288b3d7642f9c164ef.module.wasm and /dev/null differ diff --git a/04b18edece8482db7da7.module.wasm b/823b63515de7137e8b1e.module.wasm similarity index 75% rename from 04b18edece8482db7da7.module.wasm rename to 823b63515de7137e8b1e.module.wasm index 0e15eb694..7b21dab5e 100644 Binary files a/04b18edece8482db7da7.module.wasm and b/823b63515de7137e8b1e.module.wasm differ diff --git a/8a35e1b30ac9082dc754.module.wasm b/8a35e1b30ac9082dc754.module.wasm new file mode 100644 index 000000000..aa78d858b Binary files /dev/null and b/8a35e1b30ac9082dc754.module.wasm differ diff --git a/8bfadb20d3012d949171.module.wasm b/8bfadb20d3012d949171.module.wasm new file mode 100644 index 000000000..b0e9a8e65 Binary files /dev/null and b/8bfadb20d3012d949171.module.wasm differ diff --git a/9c400ad387b82bcbf0d4.module.wasm b/9c400ad387b82bcbf0d4.module.wasm deleted file mode 100644 index 471bf1733..000000000 Binary files a/9c400ad387b82bcbf0d4.module.wasm and /dev/null differ diff --git a/9e627ab815856e4398cd.module.wasm b/9e627ab815856e4398cd.module.wasm new file mode 100644 index 000000000..cfbdf4094 Binary files /dev/null and b/9e627ab815856e4398cd.module.wasm differ diff --git a/a1eef6fc1ec1a88e0293.module.wasm b/a1eef6fc1ec1a88e0293.module.wasm deleted file mode 100644 index 614c80244..000000000 Binary files a/a1eef6fc1ec1a88e0293.module.wasm and /dev/null differ diff --git a/88d61cb6a48e4cc68116.module.wasm b/a4654b0e16813b34c0ed.module.wasm similarity index 75% rename from 88d61cb6a48e4cc68116.module.wasm rename to a4654b0e16813b34c0ed.module.wasm index 2e4888ff1..923498379 100644 Binary files a/88d61cb6a48e4cc68116.module.wasm and b/a4654b0e16813b34c0ed.module.wasm differ diff --git a/ab5857a601b6cfb14f6f.module.wasm b/ab5857a601b6cfb14f6f.module.wasm new file mode 100644 index 000000000..f8c46f97c Binary files /dev/null and b/ab5857a601b6cfb14f6f.module.wasm differ diff --git a/assets/js/1.13a921cc.js b/assets/js/1.970078d9.js similarity index 71% rename from assets/js/1.13a921cc.js rename to assets/js/1.970078d9.js index 45d5b79ab..d94502455 100644 --- a/assets/js/1.13a921cc.js +++ b/assets/js/1.970078d9.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{260:function(r,t){r.exports=function(r){if(!r.webpackPolyfill){var t=Object.create(r);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}},261:function(r,t,e){"use strict";var n=e(4),o=e(297),i=e(306),u=ArrayBuffer.prototype;n&&!("detached"in u)&&o(u,"detached",{configurable:!0,get:function(){return i(this)}})},262:function(r,t,e){"use strict";var n=e(25),o=e(308);o&&n({target:"ArrayBuffer",proto:!0},{transfer:function(){return o(this,arguments.length?arguments[0]:void 0,!0)}})},263:function(r,t,e){"use strict";var n=e(25),o=e(308);o&&n({target:"ArrayBuffer",proto:!0},{transferToFixedLength:function(){return o(this,arguments.length?arguments[0]:void 0,!1)}})},264:function(r,t,e){"use strict";var n=e(281),o=e(24),i=e(46),u=n.aTypedArray;(0,n.exportTypedArrayMethod)("at",(function(r){var t=u(this),e=o(t),n=i(r),a=n>=0?n:e+n;return a<0||a>=e?void 0:t[a]}))},265:function(r,t,e){"use strict";var n=e(281),o=e(311).findLast,i=n.aTypedArray;(0,n.exportTypedArrayMethod)("findLast",(function(r){return o(i(this),r,arguments.length>1?arguments[1]:void 0)}))},266:function(r,t,e){"use strict";var n=e(281),o=e(311).findLastIndex,i=n.aTypedArray;(0,n.exportTypedArrayMethod)("findLastIndex",(function(r){return o(i(this),r,arguments.length>1?arguments[1]:void 0)}))},267:function(r,t,e){"use strict";var n=e(0),o=e(28),i=e(281),u=e(24),a=e(398),c=e(26),f=e(3),s=n.RangeError,y=n.Int8Array,p=y&&y.prototype,d=p&&p.set,v=i.aTypedArray,h=i.exportTypedArrayMethod,A=!f((function(){var r=new Uint8ClampedArray(2);return o(d,r,{length:1,0:3},1),3!==r[1]})),l=A&&i.NATIVE_ARRAY_BUFFER_VIEWS&&f((function(){var r=new y(2);return r.set(1),r.set("2",1),0!==r[0]||2!==r[1]}));h("set",(function(r){v(this);var t=a(arguments.length>1?arguments[1]:void 0,1),e=c(r);if(A)return o(d,this,e,t);var n=this.length,i=u(e),f=0;if(i+t>n)throw new s("Wrong length");for(;f=i&&(!e||A))n=g(r,0,i);else{var l=e&&!A&&T?{maxByteLength:T(r)}:void 0;n=new p(i,l);for(var I=new d(r),B=new d(n),E=h(i,o),m=0;m92||c&&i>94||u&&i>97)return!1;var r=new ArrayBuffer(8),t=f(r,{transfer:[r]});return 0!==r.byteLength||8!==t.byteLength}))},310:function(r,t,e){"use strict";r.exports="object"==typeof Deno&&Deno&&"object"==typeof Deno.version},311:function(r,t,e){"use strict";var n=e(396),o=e(47),i=e(26),u=e(24),a=function(r){var t=1===r;return function(e,a,c){for(var f,s=i(e),y=o(s),p=u(y),d=n(a,c);p-- >0;)if(d(f=y[p],p,s))switch(r){case 0:return f;case 1:return p}return t?-1:void 0}};r.exports={findLast:a(0),findLastIndex:a(1)}},389:function(r,t,e){"use strict";var n=e(46),o=e(102),i=RangeError;r.exports=function(r){if(void 0===r)return 0;var t=n(r),e=o(t);if(t!==e)throw new i("Wrong length or index");return e}},390:function(r,t,e){"use strict";var n,o,i,u,a=e(0),c=e(391),f=e(309),s=a.structuredClone,y=a.ArrayBuffer,p=a.MessageChannel,d=!1;if(f)d=function(r){s(r,{transfer:[r]})};else if(y)try{p||(n=c("worker_threads"))&&(p=n.MessageChannel),p&&(o=new p,i=new y(2),u=function(r){o.port1.postMessage(null,[r])},2===i.byteLength&&(u(i),0===i.byteLength&&(d=u)))}catch(r){}r.exports=d},391:function(r,t,e){"use strict";var n=e(93);r.exports=function(r){try{if(n)return Function('return require("'+r+'")')()}catch(r){}}},392:function(r,t,e){"use strict";var n=e(310),o=e(93);r.exports=!n&&!o&&"object"==typeof window&&"object"==typeof document},393:function(r,t,e){"use strict";r.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},394:function(r,t,e){"use strict";var n=e(9),o=e(1),i=e(26),u=e(101),a=e(395),c=u("IE_PROTO"),f=Object,s=f.prototype;r.exports=a?f.getPrototypeOf:function(r){var t=i(r);if(n(t,c))return t[c];var e=t.constructor;return o(e)&&t instanceof e?e.prototype:t instanceof f?s:null}},395:function(r,t,e){"use strict";var n=e(3);r.exports=!n((function(){function r(){}return r.prototype.constructor=null,Object.getPrototypeOf(new r)!==r.prototype}))},396:function(r,t,e){"use strict";var n=e(397),o=e(27),i=e(29),u=n(n.bind);r.exports=function(r,t){return o(r),void 0===t?r:i?u(r,t):function(){return r.apply(t,arguments)}}},397:function(r,t,e){"use strict";var n=e(15),o=e(2);r.exports=function(r){if("Function"===n(r))return o(r)}},398:function(r,t,e){"use strict";var n=e(399),o=RangeError;r.exports=function(r,t){var e=n(r);if(e%t)throw new o("Wrong offset");return e}},399:function(r,t,e){"use strict";var n=e(46),o=RangeError;r.exports=function(r){var t=n(r);if(t<0)throw new o("The argument can't be less than 0");return t}},400:function(r,t,e){"use strict";var n=e(24);r.exports=function(r,t){for(var e=n(r),o=new t(e),i=0;i2?e:n(t),u=new r(i);i>o;)u[o]=t[o++];return u}},402:function(r,t,e){"use strict";var n=e(24),o=e(46),i=RangeError;r.exports=function(r,t,e,u){var a=n(r),c=o(e),f=c<0?a+c:c;if(f>=a||f<0)throw new i("Incorrect index");for(var s=new t(a),y=0;y=0?n:e+n;return a<0||a>=e?void 0:t[a]}))},265:function(r,t,e){"use strict";var n=e(280),o=e(310).findLast,i=n.aTypedArray;(0,n.exportTypedArrayMethod)("findLast",(function(r){return o(i(this),r,arguments.length>1?arguments[1]:void 0)}))},266:function(r,t,e){"use strict";var n=e(280),o=e(310).findLastIndex,i=n.aTypedArray;(0,n.exportTypedArrayMethod)("findLastIndex",(function(r){return o(i(this),r,arguments.length>1?arguments[1]:void 0)}))},267:function(r,t,e){"use strict";var n=e(0),o=e(28),i=e(280),u=e(24),a=e(397),c=e(26),f=e(3),s=n.RangeError,y=n.Int8Array,p=y&&y.prototype,d=p&&p.set,v=i.aTypedArray,h=i.exportTypedArrayMethod,A=!f((function(){var r=new Uint8ClampedArray(2);return o(d,r,{length:1,0:3},1),3!==r[1]})),l=A&&i.NATIVE_ARRAY_BUFFER_VIEWS&&f((function(){var r=new y(2);return r.set(1),r.set("2",1),0!==r[0]||2!==r[1]}));h("set",(function(r){v(this);var t=a(arguments.length>1?arguments[1]:void 0,1),e=c(r);if(A)return o(d,this,e,t);var n=this.length,i=u(e),f=0;if(i+t>n)throw new s("Wrong length");for(;f=i&&(!e||A))n=g(r,0,i);else{var l=e&&!A&&T?{maxByteLength:T(r)}:void 0;n=new p(i,l);for(var I=new d(r),B=new d(n),E=h(i,o),m=0;m92||c&&i>94||u&&i>97)return!1;var r=new ArrayBuffer(8),t=f(r,{transfer:[r]});return 0!==r.byteLength||8!==t.byteLength}))},309:function(r,t,e){"use strict";r.exports="object"==typeof Deno&&Deno&&"object"==typeof Deno.version},310:function(r,t,e){"use strict";var n=e(395),o=e(47),i=e(26),u=e(24),a=function(r){var t=1===r;return function(e,a,c){for(var f,s=i(e),y=o(s),p=u(y),d=n(a,c);p-- >0;)if(d(f=y[p],p,s))switch(r){case 0:return f;case 1:return p}return t?-1:void 0}};r.exports={findLast:a(0),findLastIndex:a(1)}},388:function(r,t,e){"use strict";var n=e(46),o=e(102),i=RangeError;r.exports=function(r){if(void 0===r)return 0;var t=n(r),e=o(t);if(t!==e)throw new i("Wrong length or index");return e}},389:function(r,t,e){"use strict";var n,o,i,u,a=e(0),c=e(390),f=e(308),s=a.structuredClone,y=a.ArrayBuffer,p=a.MessageChannel,d=!1;if(f)d=function(r){s(r,{transfer:[r]})};else if(y)try{p||(n=c("worker_threads"))&&(p=n.MessageChannel),p&&(o=new p,i=new y(2),u=function(r){o.port1.postMessage(null,[r])},2===i.byteLength&&(u(i),0===i.byteLength&&(d=u)))}catch(r){}r.exports=d},390:function(r,t,e){"use strict";var n=e(93);r.exports=function(r){try{if(n)return Function('return require("'+r+'")')()}catch(r){}}},391:function(r,t,e){"use strict";var n=e(309),o=e(93);r.exports=!n&&!o&&"object"==typeof window&&"object"==typeof document},392:function(r,t,e){"use strict";r.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},393:function(r,t,e){"use strict";var n=e(9),o=e(1),i=e(26),u=e(101),a=e(394),c=u("IE_PROTO"),f=Object,s=f.prototype;r.exports=a?f.getPrototypeOf:function(r){var t=i(r);if(n(t,c))return t[c];var e=t.constructor;return o(e)&&t instanceof e?e.prototype:t instanceof f?s:null}},394:function(r,t,e){"use strict";var n=e(3);r.exports=!n((function(){function r(){}return r.prototype.constructor=null,Object.getPrototypeOf(new r)!==r.prototype}))},395:function(r,t,e){"use strict";var n=e(396),o=e(27),i=e(29),u=n(n.bind);r.exports=function(r,t){return o(r),void 0===t?r:i?u(r,t):function(){return r.apply(t,arguments)}}},396:function(r,t,e){"use strict";var n=e(15),o=e(2);r.exports=function(r){if("Function"===n(r))return o(r)}},397:function(r,t,e){"use strict";var n=e(398),o=RangeError;r.exports=function(r,t){var e=n(r);if(e%t)throw new o("Wrong offset");return e}},398:function(r,t,e){"use strict";var n=e(46),o=RangeError;r.exports=function(r){var t=n(r);if(t<0)throw new o("The argument can't be less than 0");return t}},399:function(r,t,e){"use strict";var n=e(24);r.exports=function(r,t){for(var e=n(r),o=new t(e),i=0;i2?e:n(t),u=new r(i);i>o;)u[o]=t[o++];return u}},401:function(r,t,e){"use strict";var n=e(24),o=e(46),i=RangeError;r.exports=function(r,t,e,u){var a=n(r),c=o(e),f=c<0?a+c:c;if(f>=a||f<0)throw new i("Incorrect index");for(var s=new t(a),y=0;y")]),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")]),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 class-name"}},[t._v("State")]),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("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(342),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(343),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(344),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(345),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(346),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(347),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(348),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(349),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(350),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(351),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(352),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(353),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(354),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/10.bf8e83fa.js b/assets/js/10.bf8e83fa.js new file mode 100644 index 000000000..4d94ee908 --- /dev/null +++ b/assets/js/10.bf8e83fa.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{341:function(t,s,a){t.exports=a.p+"assets/img/light-in-scene.7c329d72.png"},342:function(t,s,a){t.exports=a.p+"assets/img/ambient_lighting.8bece8d1.png"},343:function(t,s,a){t.exports=a.p+"assets/img/normal_diagram.dfa577f7.png"},344:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_wrong.dab00d9a.png"},345:function(t,s,a){t.exports=a.p+"assets/img/diffuse_wrong.ce856a2c.png"},346: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=="},347:function(t,s,a){t.exports=a.p+"assets/img/diffuse_right.e3a6b793.png"},348:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_lighting.98735034.png"},349:function(t,s,a){t.exports=a.p+"assets/img/normal-scale-issue.7631ac97.png"},350: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="},351:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_specular_lighting.76386148.png"},352:function(t,s,a){t.exports=a.p+"assets/img/specular_lighting.b3869eb1.png"},353:function(t,s,a){t.exports=a.p+"assets/img/half_dir.bbcc23b8.png"},449:function(t,s,a){"use strict";a.r(s);var n=a(8),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 compilation_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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("\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 compilation_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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("\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")]),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 class-name"}},[t._v("State")]),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("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(341),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(342),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(343),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(344),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(345),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(346),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(347),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(348),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(349),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(350),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(351),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(352),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(353),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/11.9f2fc759.js b/assets/js/11.ca557b6d.js similarity index 86% rename from assets/js/11.9f2fc759.js rename to assets/js/11.ca557b6d.js index be89c6493..65a09699a 100644 --- a/assets/js/11.9f2fc759.js +++ b/assets/js/11.ca557b6d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11,12,40,46],{258: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(91);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"})}},259:function(t,e,n){},272:function(t,e,n){"use strict";n.r(e);var i=n(258),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(8),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},273: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(274),n(8)),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},274:function(t,e,n){"use strict";n(259)},275:function(t,e,n){},277:function(t,e,n){},279:function(t,e,n){"use strict";n(275)},283:function(t,e,n){"use strict";n.r(e);var i=n(272),r=n(273),s={components:{NavLink:i.default,DropdownTransition:r.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(279),n(8)),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},286:function(t,e,n){"use strict";n(277)},291:function(t,e,n){"use strict";n.r(e);var i=n(283),r=n(258),s={components:{NavLink:n(272).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"})}},258:function(t,e,n){},259:function(t,e,n){"use strict";n.r(e);var i=n(257),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(8),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},272: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(273),n(8)),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},273:function(t,e,n){"use strict";n(258)},274:function(t,e,n){},276:function(t,e,n){},278:function(t,e,n){"use strict";n(274)},282:function(t,e,n){"use strict";n.r(e);var i=n(259),r=n(272),s={components:{NavLink:i.default,DropdownTransition:r.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(278),n(8)),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},285:function(t,e,n){"use strict";n(276)},290:function(t,e,n){"use strict";n.r(e);var i=n(282),r=n(257),s={components:{NavLink:n(259).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"})}},259:function(t,e,n){},272:function(t,e,n){"use strict";n.r(e);var i=n(258),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(8),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},273: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(274),n(8)),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},274:function(t,e,n){"use strict";n(259)},275:function(t,e,n){},279:function(t,e,n){"use strict";n(275)},283:function(t,e,n){"use strict";n.r(e);var i=n(272),r=n(273),s={components:{NavLink:i.default,DropdownTransition:r.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(279),n(8)),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([[12,39,45],{257: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(91);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"})}},258:function(t,e,n){},259:function(t,e,n){"use strict";n.r(e);var i=n(257),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(8),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},272: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(273),n(8)),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},273:function(t,e,n){"use strict";n(258)},274:function(t,e,n){},278:function(t,e,n){"use strict";n(274)},282:function(t,e,n){"use strict";n.r(e);var i=n(259),r=n(272),s={components:{NavLink:i.default,DropdownTransition:r.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(278),n(8)),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/13.48059ad1.js b/assets/js/13.d66b251f.js similarity index 99% rename from assets/js/13.48059ad1.js rename to assets/js/13.d66b251f.js index 6df630092..af4394cfb 100644 --- a/assets/js/13.48059ad1.js +++ b/assets/js/13.d66b251f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{355:function(t,s,a){t.exports=a.p+"assets/img/cube-normal.025f2b53.png"},356:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_wrong.4b8065ba.png"},357:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_specular_lighting.76386148.png"},358: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="},359:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_correct.c1f96315.png"},360:function(t,s,a){t.exports=a.p+"assets/img/no_srgb.2f9f1450.png"},361:function(t,s,a){t.exports=a.p+"assets/img/debug_material.b374492b.png"},453:function(t,s,a){"use strict";a.r(s);var n=a(8),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(355),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(356),alt:""}}),t._v(" "),s("img",{attrs:{src:a(357),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(358),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(359),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. Srgb is a non-linear color space. It is ideal for monitors because human color perception isn't linear either and Srgb was designed to match the quirkiness of our human color perception.")]),t._v(" "),s("p",[t._v("But Srgb is an inappropriate color space for data that must be operated on mathematically. Such data should be in a linear (not gamma-corrected) color space. When a GPU samples a texture with Srgb in the name, it converts the data from non-linear gamma-corrected Srgb to a linear non-gamma-corrected color space first so that you can do math on it (and it does the opposite conversion if you write back to a Srgb texture).")]),t._v(" "),s("p",[t._v("Normal maps are already stored in a linear format. So we should be specifying the linear space for the texture so it doesn't do an inappropriate conversion when we read from it.")]),t._v(" "),s("p",[t._v("We need to specify "),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 Texture 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(360),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")]),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 class-name"}},[t._v("State")]),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("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(361),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 +(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{354:function(t,s,a){t.exports=a.p+"assets/img/cube-normal.025f2b53.png"},355:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_wrong.4b8065ba.png"},356:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_specular_lighting.76386148.png"},357: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="},358:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_correct.c1f96315.png"},359:function(t,s,a){t.exports=a.p+"assets/img/no_srgb.2f9f1450.png"},360:function(t,s,a){t.exports=a.p+"assets/img/debug_material.b374492b.png"},450:function(t,s,a){"use strict";a.r(s);var n=a(8),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(354),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(355),alt:""}}),t._v(" "),s("img",{attrs:{src:a(356),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(357),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(358),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. Srgb is a non-linear color space. It is ideal for monitors because human color perception isn't linear either and Srgb was designed to match the quirkiness of our human color perception.")]),t._v(" "),s("p",[t._v("But Srgb is an inappropriate color space for data that must be operated on mathematically. Such data should be in a linear (not gamma-corrected) color space. When a GPU samples a texture with Srgb in the name, it converts the data from non-linear gamma-corrected Srgb to a linear non-gamma-corrected color space first so that you can do math on it (and it does the opposite conversion if you write back to a Srgb texture).")]),t._v(" "),s("p",[t._v("Normal maps are already stored in a linear format. So we should be specifying the linear space for the texture so it doesn't do an inappropriate conversion when we read from it.")]),t._v(" "),s("p",[t._v("We need to specify "),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 Texture 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(359),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")]),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 class-name"}},[t._v("State")]),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("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(360),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/14.4ef3efbf.js b/assets/js/14.92f4a7b6.js similarity index 56% rename from assets/js/14.4ef3efbf.js rename to assets/js/14.92f4a7b6.js index 87077e55b..cc44026a9 100644 --- a/assets/js/14.4ef3efbf.js +++ b/assets/js/14.92f4a7b6.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{368:function(t,s,a){t.exports=a.p+"assets/img/before-hdr.18896278.png"},369:function(t,s,a){t.exports=a.p+"assets/img/after-hdr.81564a1d.png"},370:function(t,s,a){t.exports=a.p+"assets/img/equirectangular.c308e566.svg"},371:function(t,s,a){t.exports=a.p+"assets/img/kloofendal_43d_clear_puresky.d293e891.jpg"},372:function(t,s,a){t.exports=a.p+"assets/img/project-error.00a25de7.png"},373:function(t,s,a){t.exports=a.p+"assets/img/just-reflections.e704b658.png"},374:function(t,s,a){t.exports=a.p+"assets/img/with-reflections.6bbd4b38.png"},456:function(t,s,a){"use strict";a.r(s);var n=a(8),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:"high-dynamic-range-rendering"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#high-dynamic-range-rendering"}},[t._v("#")]),t._v(" High Dynamic Range Rendering")]),t._v(" "),s("p",[t._v("Up to this point, we've been using the sRGB colorspace to render our scene. While this is fine, it limits what we can do with our lighting. We are using "),s("code",[t._v("TextureFormat::Bgra8UnormSrgb")]),t._v(" (on most systems) for our surface texture. This means we have 8 bits for each red, green, blue and alpha channel. While the channels are stored as integers between 0 and 255 inclusively, they get converted to and from floating point values between 0.0 and 1.0. The TL:DR of this is that using 8-bit textures, we only get 256 possible values in each channel.")]),t._v(" "),s("p",[t._v("The kicker with this is most of the precision gets used to represent darker values of the scene. This means that bright objects like light bulbs have the same value as exceedingly bright objects like the sun. This inaccuracy makes realistic lighting difficult to do right. Because of this, we are going to switch our rendering system to use high dynamic range in order to give our scene more flexibility and enable us to leverage more advanced techniques such as Physically Based Rendering.")]),t._v(" "),s("h2",{attrs:{id:"what-is-high-dynamic-range"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-is-high-dynamic-range"}},[t._v("#")]),t._v(" What is High Dynamic Range?")]),t._v(" "),s("p",[t._v("In layman's terms, a High Dynamic Range texture is a texture with more bits per pixel. In addition to this, HDR textures are stored as floating point values instead of integer values. This means that the texture can have brightness values greater than 1.0, meaning you can have a dynamic range of brighter objects.")]),t._v(" "),s("h2",{attrs:{id:"switching-to-hdr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#switching-to-hdr"}},[t._v("#")]),t._v(" Switching to HDR")]),t._v(" "),s("p",[t._v("As of writing, wgpu doesn't allow us to use a floating point format such as "),s("code",[t._v("TextureFormat::Rgba16Float")]),t._v(" as the surface texture format (not all monitors support that anyway), so we will have to render our scene in an HDR format, then convert the values to a supported format, such as "),s("code",[t._v("TextureFormat::Bgra8UnormSrgb")]),t._v(" using a technique called tonemapping.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("There are some talks about implementing HDR surface texture support in wgpu. Here is a GitHub issue if you want to contribute to that effort: https://github.com/gfx-rs/wgpu/issues/2920")])]),t._v(" "),s("p",[t._v("Before we do that, though, we need to switch to using an HDR texture for rendering.")]),t._v(" "),s("p",[t._v("To start, we'll create a file called "),s("code",[t._v("hdr.rs")]),t._v(" and put some code in 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("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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")]),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("create_render_pipeline"),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 comment"}},[t._v("/// Owns the render texture and controls tonemapping")]),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("HdrPipeline")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n 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 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 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 width"),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 height"),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 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 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("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("\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("HdrPipeline")]),t._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("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(" config"),s("span",{pre:!0,attrs:{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("SurfaceConfiguration")]),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(" width "),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("width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" height "),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 punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We could use `Rgba32Float`, but that requires some extra")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// features to be enabled for rendering.")]),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 namespace"}},[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("Rgba16Float")]),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 "),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("create_2d_texture")]),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 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("\n format"),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("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("RENDER_ATTACHMENT")]),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("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 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('"Hdr::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 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(" 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 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('"Hdr::layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("// This is the HDR 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("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 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 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 "),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 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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 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('"Hdr::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 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("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("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("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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("// We'll cover the shader next")]),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 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('"hdr.wgsl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" 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("None")]),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("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\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),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("(")]),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("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(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add_srgb_suffix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll use some math to generate the vertex data in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the shader, so we don't need any vertex buffers")]),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 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("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 shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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 pipeline"),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 layout"),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 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("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 comment"}},[t._v("/// Resize the HDR texture")]),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(" 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(" width"),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(" height"),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(" "),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("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("create_2d_texture")]),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 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("\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("Rgba16Float")]),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("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("RENDER_ATTACHMENT")]),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("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 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('"Hdr::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 punctuation"}},[t._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("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 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('"Hdr::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 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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("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("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"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("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),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("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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("width "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("height "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// Exposes the HDR texture")]),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("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 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 namespace"}},[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")]),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("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view\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("/// The format of the HDR texture")]),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("format")]),s("span",{pre:!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("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),t._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("format\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("/// This renders the internal HDR texture to the [TextureView]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// supplied as parameter.")]),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("process")]),s("span",{pre:!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(" encoder"),s("span",{pre:!0,attrs:{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 namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoder")]),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(" "),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("TextureView")]),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(" "),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('"Hdr::process"')]),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("output"),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 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("]")]),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 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("pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n 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("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 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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("You may have noticed that we added a new parameter to "),s("code",[t._v("create_render_pipeline")]),t._v(". Here a the changes to that 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("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 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(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[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 comment"}},[t._v("// NEW!")]),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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"tonemapping"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tonemapping"}},[t._v("#")]),t._v(" Tonemapping")]),t._v(" "),s("p",[t._v("The process of tonemapping is taking an HDR image and converting it to a Standard Dynamic Range (SDR), which is usually sRGB. The exact tonemapping curve you use is ultimately up to your artistic needs, but for this tutorial, we'll use a popular one known as the Academy Color Encoding System or ACES used throughout the game industry as well as the film industry.")]),t._v(" "),s("p",[t._v("With that, let's jump into the the shader. Create a file called "),s("code",[t._v("hdr.wgsl")]),t._v(" and add the following code:")]),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("// Maps HDR values to linear values")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Based on http://www.oscars.org/science-technology/sci-tech-projects/aces")]),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("aces_tone_map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hdr"),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 operator"}},[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(">")]),t._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(" m1 "),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("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.59719")]),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.07600")]),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.02840")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.35458")]),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.90834")]),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.13383")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.04823")]),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.01566")]),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.83777")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" m2 "),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("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.60475")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.10208")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.00327")]),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 decimal-float-literal number"}},[t._v("0.53108")]),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.10813")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.07276")]),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 decimal-float-literal number"}},[t._v("0.07367")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.00605")]),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.07602")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" v "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" m1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" 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("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.0245786")]),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.000090537")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" b "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" 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 decimal-float-literal number"}},[t._v("0.983729")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" 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.4329510")]),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.238081")]),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("clamp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("m2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),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 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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(")")]),s("span",{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 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(" uv"),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 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(" vi"),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 comment"}},[t._v("// Generate a triangle that covers the whole screen")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uv "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 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("vi "),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("2u")]),s("span",{pre:!0,attrs:{class:"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("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vi "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2u")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),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("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("out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uv "),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(" "),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 comment"}},[t._v("// We need to invert the y coordinate so the image")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// is not upside down")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uv"),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(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),t._v(" "),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("uv"),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 "),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 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("\n"),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(" hdr_image"),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\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("\n"),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(" hdr_sampler"),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("vs"),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(" hdr "),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("hdr_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hdr_sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" vs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" sdr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("aces_tone_map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rgb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("(")]),t._v("sdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hdr"),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 those in place, we can start using our HDR texture in our core render pipeline. First, we need to add the new "),s("code",[t._v("HdrPipeline")]),t._v(" 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\n"),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("hdr")]),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"),s("span",{pre:!0,attrs:{class:"token comment"}},[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 "),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 hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HdrPipeline")]),s("span",{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 operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),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("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("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 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 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(" hdr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HdrPipeline")]),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 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\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 hdr"),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("Then, when we resize the window, we need to call "),s("code",[t._v("resize()")]),t._v(" on our "),s("code",[t._v("HdrPipeline")]),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("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 comment"}},[t._v("// UPDATED!")]),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 comment"}},[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("hdr\n "),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 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(" 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(" 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(")")]),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("Next, in "),s("code",[t._v("render()")]),t._v(", we need to switch the "),s("code",[t._v("RenderPass")]),t._v(" to use our HDR texture instead of the surface texture:")]),t._v(" "),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 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("[")]),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 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("Some")]),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(";")]),t._v("\n")])])]),s("p",[t._v("Finally, after we draw all the objects in the frame, we can run our tonemapper with the surface texture as the output:")]),t._v(" "),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 comment"}},[t._v("// Apply tonemapping")]),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("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("process")]),s("span",{pre:!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(" encoder"),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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("It's a pretty easy switch. Here's the image before using HDR:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(368),alt:"before hdr"}})]),t._v(" "),s("p",[t._v("Here's what it looks like after implementing HDR:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(369),alt:"after hdr"}})]),t._v(" "),s("h2",{attrs:{id:"loading-hdr-textures"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#loading-hdr-textures"}},[t._v("#")]),t._v(" Loading HDR textures")]),t._v(" "),s("p",[t._v("Now that we have an HDR render buffer, we can start leveraging HDR textures to their fullest. One of the primary uses for HDR textures is to store lighting information in the form of an environment map.")]),t._v(" "),s("p",[t._v("This map can be used to light objects, display reflections and also to make a skybox. We're going to create a skybox using HDR texture, but first, we need to talk about how environment maps are stored.")]),t._v(" "),s("h2",{attrs:{id:"equirectangular-textures"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#equirectangular-textures"}},[t._v("#")]),t._v(" Equirectangular textures")]),t._v(" "),s("p",[t._v("An equirectangular texture is a texture where a sphere is stretched across a rectangular surface using what's known as an equirectangular projection. This map of the Earth is an example of this projection.")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1024px-Equirectangular_projection_SW.jpg",alt:"map of the earth"}})]),t._v(" "),s("p",[t._v("This projection maps the latitude values of the sphere to the horizontal coordinates of the texture. The longitude values get mapped to the vertical coordinates. This means that the vertical middle of the texture is the equator (0° longitude) of the sphere, the horizontal middle is the prime meridian (0° latitude) of the sphere, the left and right edges of the texture are the anti-meridian (+180°/-180° latitude) the top and bottom edges of the texture are the north pole (90° longitude) and south pole (-90° longitude), respectively.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(370),alt:"equirectangular diagram"}})]),t._v(" "),s("p",[t._v("This simple projection is easy to use, making it one of the most popular projections for storing spherical textures. You can see the particular environment map we are going to use below.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(371),alt:"equirectangular skybox"}})]),t._v(" "),s("h2",{attrs:{id:"cube-maps"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cube-maps"}},[t._v("#")]),t._v(" Cube Maps")]),t._v(" "),s("p",[t._v("While we can technically use an equirectangular map directly, as long as we do some math to figure out the correct coordinates, it is a lot more convenient to convert our environment map into a cube map.")]),t._v(" "),s("div",{staticClass:"info"},[s("p",[t._v("A cube map is a special kind of texture that has six layers. Each layer corresponds to a different face of an imaginary cube that is aligned to the X, Y and Z axes. The layers are stored in the following order: +X, -X, +Y, -Y, +Z, -Z.")])]),t._v(" "),s("p",[t._v("To prepare to store the cube texture, we are going to create a new struct called "),s("code",[t._v("CubeTexture")]),t._v(" in "),s("code",[t._v("texture.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("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("CubeTexture")]),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 namespace"}},[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 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 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 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("CubeTexture")]),t._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("create_2d")]),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 width"),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 height"),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 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 mip_level_count"),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 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(",")]),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(",")]),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 "),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(" 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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A cube has 6 sides, so we need 6 layers")]),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("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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("\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("\n usage"),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 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")]),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 dimension"),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("TextureViewDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cube")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n array_layer_count"),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("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"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 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("(")]),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 label"),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("\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\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 texture"),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 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\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("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 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 namespace"}},[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")]),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 keyword"}},[t._v("self")]),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 \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("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 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 namespace"}},[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")]),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 keyword"}},[t._v("self")]),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\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("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 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 namespace"}},[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")]),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),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("}")]),t._v("\n")])])]),s("p",[t._v("With this, we can now write the code to load the HDR into a cube texture.")]),t._v(" "),s("h2",{attrs:{id:"compute-shaders"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#compute-shaders"}},[t._v("#")]),t._v(" Compute shaders")]),t._v(" "),s("p",[t._v("Up to this point, we've been exclusively using render pipelines, but I felt this was a good time to introduce the compute pipelines and, by extension, compute shaders. Compute pipelines are a lot easier to set up. All you need is to tell the pipeline what resources you want to use, what code you want to run, and how many threads you'd like the GPU to use when running your code. We're going to use a compute shader to give each pixel in our cube texture a color from the HDR image.")]),t._v(" "),s("p",[t._v("Before we can use compute shaders, we need to enable them in wgpu. We can do that by changing the line where we specify what features we want to use. In "),s("code",[t._v("lib.rs")]),t._v(", change the code where we request a device:")]),t._v(" "),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 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("(")]),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 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 comment"}},[t._v("// UPDATED!")]),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("all_webgpu_mask")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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 required_limits"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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_defaults")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"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(")")]),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("div",{staticClass:"warn"},[s("p",[t._v("You may have noted that we have switched from "),s("code",[t._v("downlevel_webgl2_defaults()")]),t._v(" to "),s("code",[t._v("downlevel_defaults()")]),t._v(". This means that we are dropping support for WebGL2. The reason for this is that WebGL2 doesn't support the compute shaders. WebGPU was built with compute shaders in mind. As of writing, the only browser that supports WebGPU is Chrome and some experimental browsers such as Firefox Nightly.")]),t._v(" "),s("p",[t._v("Consequently, we are going to remove the WebGL feature from "),s("code",[t._v("Cargo.toml")]),t._v(". This line in particular:")]),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("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.19"')]),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")])])])]),t._v(" "),s("p",[t._v("Now that we've told wgpu that we want to use the compute shaders, let's create a struct in "),s("code",[t._v("resource.rs")]),t._v(" that we'll use to load the HDR image into our cube map.")]),t._v(" "),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("HdrLoader")]),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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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 equirect_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("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n equirect_to_cubemap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ComputePipeline")]),s("span",{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("HdrLoader")]),t._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("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(" "),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(" 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 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('"equirectangular.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 "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_format "),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("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba32Float")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" equirect_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 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('"HdrLoader::equirect_layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("COMPUTE")]),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 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("false")]),t._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 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 "),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("COMPUTE")]),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("StorageTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n access"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StorageTextureAccess")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WriteOnly")]),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_format"),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 class-name"}},[t._v("D2Array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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 punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" 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("None")]),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("equirect_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\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" equirect_to_cubemap "),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_compute_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("ComputePipelineDescriptor")]),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('"equirect_to_cubemap"')]),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("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 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("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('"compute_equirect_to_cubemap"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 equirect_to_cubemap"),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("\n equirect_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("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_equirectangular_bytes")]),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("\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 data"),s("span",{pre:!0,attrs:{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 dst_size"),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 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 "),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("CubeTexture")]),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(" hdr_decoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HdrDecoder")]),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("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 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(" meta "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" hdr_decoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("metadata")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 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("let")]),t._v(" pixels "),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(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" pixels "),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 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(",")]),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(" meta"),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("usize")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" meta"),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("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n hdr_decoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("read_image_transform")]),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("pix"),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(" rgb "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pix"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_hdr")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("rgb"),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("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rgb"),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(" rgb"),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("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.0f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"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 keyword"}},[t._v("mut")]),t._v(" pixels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!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 pixels\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\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("let")]),t._v(" pixels "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" hdr_decoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("read_image_native")]),s("span",{pre:!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("\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("pix"),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(" rgb "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pix"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_hdr")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("rgb"),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("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rgb"),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(" rgb"),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("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.0f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"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(" src "),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("create_2d_texture")]),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 meta"),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 meta"),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("texture_format"),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("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 "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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 "),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\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 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("src"),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 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 operator"}},[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("pixels"),s("span",{pre:!0,attrs:{class:"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("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("(")]),t._v("src"),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 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 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 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 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("src"),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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n src"),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\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dst "),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("CubeTexture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_2d")]),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 dst_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dst_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("texture_format"),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("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We are going to write to `dst` texture so we")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// need to use a `STORAGE_BINDING`.")]),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("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("STORAGE_BINDING")]),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("TEXTURE_BINDING")]),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("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 label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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(" dst_view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("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 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")]),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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Normally, you'd use `TextureViewDimension::Cube`")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// for a cube texture, but we can't use that")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// view dimension with a `STORAGE_BINDING`.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need to access the cube texture layers")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// directly.")]),t._v("\n dimension"),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("TextureViewDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("D2Array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"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 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 label"),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("equirect_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("src"),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("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("dst_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 punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" 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 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(" "),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_compute_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("ComputePassDescriptor")]),t._v(" "),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(")")]),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(" num_workgroups "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dst_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("15")]),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("16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n 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("equirect_to_cubemap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n 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("&")]),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 pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch_workgroups")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("num_workgroups"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" num_workgroups"),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(")")]),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("pass"),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 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 class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("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("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("dispatch_workgroups")]),t._v(" call tells the GPU to run our code in batches called workgroups. Each workgroup has a number of worker threads called invocations that run the code in parallel. Workgroups are organized as a 3d grid with the dimensions we pass to "),s("code",[t._v("dispatch_workgroups")]),t._v(".")]),t._v(" "),s("p",[t._v("In this example, we have a workgroup grid divided into 16x16 chunks and storing the layer in the z dimension.")]),t._v(" "),s("h2",{attrs:{id:"the-compute-shader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-compute-shader"}},[t._v("#")]),t._v(" The compute shader")]),t._v(" "),s("p",[t._v("Now, let's write a compute shader that will convert our equirectangular texture to a cube texture. Create a file called "),s("code",[t._v("equirectangular.wgsl")]),t._v(". We're going to break it down chunk by chunk.")]),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("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PI")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),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("3.1415926535897932384626433832795")]),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("Face")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n forward"),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 up"),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 right"),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("p",[t._v("Two things here:")]),t._v(" "),s("ol",[s("li",[t._v("WGSL doesn't have a built-in for PI, so we need to specify it ourselves.")]),t._v(" "),s("li",[t._v("each face of the cube map has an orientation to it, so we need to store that.")])]),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("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("\n"),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(" src"),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\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("\n"),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(" dst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_storage_2d_array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rgba32float"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" write"),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 have the only two bindings we need. The equirectangular "),s("code",[t._v("src")]),t._v(" texture and our "),s("code",[t._v("dst")]),t._v(" cube texture. Some things to note about "),s("code",[t._v("dst")]),t._v(":")]),t._v(" "),s("ol",[s("li",[t._v("While "),s("code",[t._v("dst")]),t._v(" is a cube texture, it's stored as an array of 2d textures.")]),t._v(" "),s("li",[t._v("The type of binding we're using here is a storage texture. An array storage texture, to be precise. This is a unique binding only available to compute shaders. It allows us to write directly to the texture.")]),t._v(" "),s("li",[t._v("When using a storage texture binding, we need to specify the format of the texture. If you try to bind a texture with a different format, wgpu will panic.")])]),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("compute")]),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("workgroup_size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("16")]),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("\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("compute_equirect_to_cubemap")]),s("span",{pre:!0,attrs:{class:"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("global_invocation_id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v("\n gid"),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("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("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("// If texture size is not divisible by 32, we")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// need to make sure we don't try to write to")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// pixels that don't exist.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" gid"),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(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureDimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dst"),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(" "),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\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FACES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("array")]),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(",")]),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(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// FACES +X")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("Face")]),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 decimal-float-literal number"}},[t._v("1.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("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("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 comment"}},[t._v("// forward")]),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 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(",")]),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 comment"}},[t._v("// 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 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("0.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 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("// right")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"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("// FACES -X")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),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 operator"}},[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(" "),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("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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(",")]),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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("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 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("// FACES +Y")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),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 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 operator"}},[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(" "),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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" "),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("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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// FACES -Y")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),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 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(",")]),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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("0.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 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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" "),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("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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// FACES +Z")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),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 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("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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(",")]),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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" "),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("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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// FACES -Z")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),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 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("0.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 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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(",")]),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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[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(" "),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("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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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("// Get texture coords relative to cubemap face")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dst_dimensions "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureDimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" cube_uv "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("gid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" dst_dimensions "),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\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Get spherical coordinate from cube_uv")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" face "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FACES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("gid"),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 "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" spherical "),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("face"),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(" face"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" cube_uv"),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(" face"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("up "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" cube_uv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),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("// Get coordinate on the equirectangular texture")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" inv_atan "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 decimal-float-literal number"}},[t._v("0.1591")]),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.3183")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" eq_uv "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("atan2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("spherical"),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(" spherical"),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(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("asin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("spherical"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{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(" inv_atan "),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(" eq_pixel "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("eq_uv "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureDimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("src"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("// We use textureLoad() as textureSample() is not allowed in compute shaders")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sample "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureLoad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("src"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" eq_pixel"),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("\n\n "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" gid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" gid"),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(" sample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!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 I commented in the previous code, there are some things I want to go over that wouldn't fit well in a comment.")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("workgroup_size")]),t._v(" decorator tells the dimensions of the workgroup's local grid of invocations. Because we are dispatching one workgroup for every pixel in the texture, we have each workgroup be a 16x16x1 grid. This means that each workgroup can have 256 threads to work with.")]),t._v(" "),s("div",{staticClass:"warn"},[s("p",[t._v("For WebGPU, each workgroup can only have a max of 256 threads (also called invocations).")])]),t._v(" "),s("p",[t._v("With this, we can load the environment map in the "),s("code",[t._v("new()")]),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 keyword"}},[t._v("let")]),t._v(" hdr_loader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),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 class-name"}},[t._v("HdrLoader")]),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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sky_bytes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),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_binary")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pure-sky.hdr"')]),s("span",{pre:!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(" sky_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" hdr_loader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_equirectangular_bytes")]),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("queue"),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("sky_bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1080")]),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 string"}},[t._v('"Sky 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 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("h2",{attrs:{id:"skybox"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#skybox"}},[t._v("#")]),t._v(" Skybox")]),t._v(" "),s("p",[t._v("Now that we have an environment map to render let's use it to make our skybox. There are different ways to render a skybox. A standard way is to render a cube and map the environment map on it. While that method works, it can have some artifacts in the corners and edges where the cube's faces meet.")]),t._v(" "),s("p",[t._v("Instead, we are going to render to the entire screen, compute the view direction from each pixel and use that to sample the texture. First, we need to create a bindgroup for the environment map so that we can use it for rendering. Add the following to "),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("let")]),t._v(" environment_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 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('"environment_layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 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("false")]),t._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 class-name"}},[t._v("Cube")]),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 "),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 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("NonFiltering")]),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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" environment_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 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('"environment_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 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("environment_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("sky_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"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("(")]),t._v("sky_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 that we have the bindgroup, we need a render pipeline to render the skybox.")]),t._v(" "),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(" sky_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('"Sky 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("environment_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 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('"sky.wgsl"')]),s("span",{pre:!0,attrs:{class:"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 hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("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 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("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 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("One thing to note here. We added the primitive format to "),s("code",[t._v("create_render_pipeline()")]),t._v(". Also, we changed the depth compare function to "),s("code",[t._v("CompareFunction::LessEqual")]),t._v(" (we'll discuss why when we go over the sky shader). Here are the changes to 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("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 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(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[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 comment"}},[t._v("// NEW!")]),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"),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("LessEqual")]),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 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 "),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("}")]),t._v("\n")])])]),s("p",[t._v("Don't forget to add the new bindgroup and pipeline to the 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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HdrPipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n environment_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 sky_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\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")]),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 class-name"}},[t._v("State")]),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("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 lifetime-annotation symbol"}},[t._v("'a")]),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 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("State")]),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 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 "),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 hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n environment_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sky_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n debug"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 let's cover "),s("code",[t._v("sky.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("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"),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 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 inv_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 inv_view"),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 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("\n"),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(" env_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_cube")]),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("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 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(" env_sampler"),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 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(" frag_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(" 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("}")]),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(" id"),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("let")]),t._v(" uv "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("(")]),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("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n id "),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("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id "),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("1u")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("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 comment"}},[t._v("// out.clip_position = vec4(uv * vec2(4.0, -4.0) + vec2(-1.0, 1.0), 0.0, 1.0);")]),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("(")]),t._v("uv "),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("4.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(" "),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(" "),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("frag_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("(")]),t._v("uv "),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("4.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(" "),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(" "),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 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(" view_pos_homogeneous "),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("inv_proj "),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("clip_position"),s("span",{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_ray_direction "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" view_pos_homogeneous"),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(" view_pos_homogeneous"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("w"),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(" ray_direction "),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("(")]),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("inv_view "),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("(")]),t._v("view_ray_direction"),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(")")]),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(" sample "),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("env_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" env_sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ray_direction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" sample"),s("span",{pre:!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("Let's break this down:")]),t._v(" "),s("ol",[s("li",[t._v("We create a triangle twice the size of the screen.")]),t._v(" "),s("li",[t._v("In the fragment shader, we get the view direction from the clip position. We use the inverse projection matrix to convert the clip coordinates to view direction. Then, we use the inverse view matrix to get the direction into world space, as that's what we need to sample the sky box correctly.")]),t._v(" "),s("li",[t._v("We then sample the sky texture with the view direction.")])]),t._v(" "),s("p",[t._v("For this to work, we need to change our camera uniforms a bit. We need to add the inverse view matrix and inverse projection matrix to "),s("code",[t._v("CameraUniform")]),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, 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"),s("span",{pre:!0,attrs:{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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),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 inv_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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n inv_view"),s("span",{pre:!0,attrs:{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(" "),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\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"),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 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 inv_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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n inv_view"),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(" "),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\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("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 namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" projection"),s("span",{pre:!0,attrs:{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("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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_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("position"),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("let")]),t._v(" proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" projection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_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(";")]),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(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_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(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view_proj "),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" view"),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(" view_proj"),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("inv_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("invert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!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(".")]),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("inv_view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transpose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!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("Make sure to change the "),s("code",[t._v("Camera")]),t._v(" definition in "),s("code",[t._v("shader.wgsl")]),t._v(", and "),s("code",[t._v("light.wgsl")]),t._v(". Just as a reminder, it looks like this:")]),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"),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 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 inv_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 inv_view"),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 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:"info"},[s("p",[t._v("You may have noticed that we removed the "),s("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(". The reason for this is that it was messing with the projection of the skybox.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(372),alt:"projection error"}})]),t._v(" "),s("p",[t._v("Technically, it wasn't needed, so I felt fine removing it.")])]),t._v(" "),s("h2",{attrs:{id:"reflections"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#reflections"}},[t._v("#")]),t._v(" Reflections")]),t._v(" "),s("p",[t._v("Now that we have a sky, we can mess around with using it for lighting. This won't be physically accurate (we'll look into that later). That being said, we have the environment map, so we might as well use it.")]),t._v(" "),s("p",[t._v("In order to do that though, we need to change our shader to do lighting in world space instead of tangent space because our environment map is in world space. Because there are a lot of changes I'll post the whole shader here:")]),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("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"),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 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 inv_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 inv_view"),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("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\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("@")]),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("}")]),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("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 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("}")]),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 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(" 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 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_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 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(" world_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("4")]),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("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_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("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_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("}")]),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 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("// UPDATED!")]),t._v("\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("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 out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),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 out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),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 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("world_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("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 "),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("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("group")]),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 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(" env_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_cube")]),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("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 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(" env_sampler"),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("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Adjust the tangent and bitangent using the Gramm-Schmidt process")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This makes sure that they are perpendicular to each other and the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// normal of the surface.")]),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("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),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("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_tangent"),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(" "),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_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_bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("cross")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("world_tangent"),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\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Convert the normal sample to world space")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TBN")]),t._v(" "),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("(")]),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 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("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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_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(" world_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TBN")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" tangent_normal"),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(" 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("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_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("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("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\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("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("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 comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Calculate reflections")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" world_reflect "),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("view_dir"),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("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" reflection "),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("env_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" env_sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" world_reflect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rgb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shininess "),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\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("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 operator"}},[t._v("+")]),t._v(" reflection "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" shininess"),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("A little note on the reflection math. The "),s("code",[t._v("view_dir")]),t._v(" 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 "),s("code",[t._v("view_dir")]),t._v(". We then use "),s("code",[t._v("wgsl")]),t._v("'s built-in "),s("code",[t._v("reflect")]),t._v(" function to reflect the inverted "),s("code",[t._v("view_dir")]),t._v(" about the "),s("code",[t._v("world_normal")]),t._v(". 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:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(373),alt:"just-reflections"}})]),t._v(" "),s("p",[t._v("Here's the finished scene:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(374),alt:"with-reflections"}})]),t._v(" "),s("h2",{attrs:{id:"output-too-dark-on-webgpu"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#output-too-dark-on-webgpu"}},[t._v("#")]),t._v(" Output too dark on WebGPU?")]),t._v(" "),s("p",[t._v("WebGPU doesn't support using sRGB texture formats as the\noutput for a surface. We can get around this by making the\ntexture view used to render use the sRGB version of the\nformat. To do this we need to change the surface config\nwe use to allow view formats with sRGB.")]),t._v(" "),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(" 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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),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("[")]),t._v("surface_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add_srgb_suffix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n desired_maximum_frame_latency"),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"),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 need to create a view with sRGB enabled in\n"),s("code",[t._v("State::render()")]),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(" view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture\n "),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")]),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(" "),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 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("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add_srgb_suffix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"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("You may have noticed as well that in "),s("code",[t._v("HdrPipeline::new()")]),t._v("\nwe use "),s("code",[t._v("config.format.add_srgb_suffix()")]),t._v(" when creating\nthe render pipeline. This is required as if we don't\nthe sRGB enabled "),s("code",[t._v("TextureView")]),t._v(" won't work with the\nrender pipeline.")]),t._v(" "),s("p",[t._v("With that you should get the sRGB output as expected.")]),t._v(" "),s("h2",{attrs:{id:"demo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#demo"}},[t._v("#")]),t._v(" Demo")]),t._v(" "),s("div",{staticClass:"warn"},[s("p",[t._v("If your browser doesn't support WebGPU, this example won't work for you.")])]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial13_hdr"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{363:function(t,s,a){t.exports=a.p+"assets/img/before-hdr.18896278.png"},364:function(t,s,a){t.exports=a.p+"assets/img/after-hdr.81564a1d.png"},365:function(t,s,a){t.exports=a.p+"assets/img/equirectangular.c308e566.svg"},366:function(t,s,a){t.exports=a.p+"assets/img/kloofendal_43d_clear_puresky.d293e891.jpg"},367:function(t,s,a){t.exports=a.p+"assets/img/project-error.00a25de7.png"},368:function(t,s,a){t.exports=a.p+"assets/img/just-reflections.e704b658.png"},369:function(t,s,a){t.exports=a.p+"assets/img/with-reflections.6bbd4b38.png"},452:function(t,s,a){"use strict";a.r(s);var n=a(8),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:"high-dynamic-range-rendering"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#high-dynamic-range-rendering"}},[t._v("#")]),t._v(" High Dynamic Range Rendering")]),t._v(" "),s("p",[t._v("Up to this point, we've been using the sRGB colorspace to render our scene. While this is fine, it limits what we can do with our lighting. We are using "),s("code",[t._v("TextureFormat::Bgra8UnormSrgb")]),t._v(" (on most systems) for our surface texture. This means we have 8 bits for each red, green, blue and alpha channel. While the channels are stored as integers between 0 and 255 inclusively, they get converted to and from floating point values between 0.0 and 1.0. The TL:DR of this is that using 8-bit textures, we only get 256 possible values in each channel.")]),t._v(" "),s("p",[t._v("The kicker with this is most of the precision gets used to represent darker values of the scene. This means that bright objects like light bulbs have the same value as exceedingly bright objects like the sun. This inaccuracy makes realistic lighting difficult to do right. Because of this, we are going to switch our rendering system to use high dynamic range in order to give our scene more flexibility and enable us to leverage more advanced techniques such as Physically Based Rendering.")]),t._v(" "),s("h2",{attrs:{id:"what-is-high-dynamic-range"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-is-high-dynamic-range"}},[t._v("#")]),t._v(" What is High Dynamic Range?")]),t._v(" "),s("p",[t._v("In layman's terms, a High Dynamic Range texture is a texture with more bits per pixel. In addition to this, HDR textures are stored as floating point values instead of integer values. This means that the texture can have brightness values greater than 1.0, meaning you can have a dynamic range of brighter objects.")]),t._v(" "),s("h2",{attrs:{id:"switching-to-hdr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#switching-to-hdr"}},[t._v("#")]),t._v(" Switching to HDR")]),t._v(" "),s("p",[t._v("As of writing, wgpu doesn't allow us to use a floating point format such as "),s("code",[t._v("TextureFormat::Rgba16Float")]),t._v(" as the surface texture format (not all monitors support that anyway), so we will have to render our scene in an HDR format, then convert the values to a supported format, such as "),s("code",[t._v("TextureFormat::Bgra8UnormSrgb")]),t._v(" using a technique called tonemapping.")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("There are some talks about implementing HDR surface texture support in wgpu. Here is a GitHub issue if you want to contribute to that effort: https://github.com/gfx-rs/wgpu/issues/2920")])]),t._v(" "),s("p",[t._v("Before we do that, though, we need to switch to using an HDR texture for rendering.")]),t._v(" "),s("p",[t._v("To start, we'll create a file called "),s("code",[t._v("hdr.rs")]),t._v(" and put some code in 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("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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")]),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("create_render_pipeline"),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 comment"}},[t._v("/// Owns the render texture and controls tonemapping")]),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("HdrPipeline")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n 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 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 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 width"),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 height"),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 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 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("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("\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("HdrPipeline")]),t._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("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(" config"),s("span",{pre:!0,attrs:{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("SurfaceConfiguration")]),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(" width "),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("width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" height "),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 punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We could use `Rgba32Float`, but that requires some extra")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// features to be enabled for rendering.")]),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 namespace"}},[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("Rgba16Float")]),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 "),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("create_2d_texture")]),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 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("\n format"),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("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("RENDER_ATTACHMENT")]),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("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 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('"Hdr::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 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(" 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 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('"Hdr::layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("// This is the HDR 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("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 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 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 "),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 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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 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('"Hdr::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 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("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("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("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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("// We'll cover the shader next")]),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 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('"hdr.wgsl"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" 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("None")]),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("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\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pipeline "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),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("(")]),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("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(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add_srgb_suffix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll use some math to generate the vertex data in")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the shader, so we don't need any vertex buffers")]),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 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("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 shader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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 pipeline"),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 layout"),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 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("\n format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 comment"}},[t._v("/// Resize the HDR texture")]),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(" 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(" width"),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(" height"),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(" "),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("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("create_2d_texture")]),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 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("\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("Rgba16Float")]),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("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("RENDER_ATTACHMENT")]),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("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 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('"Hdr::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 punctuation"}},[t._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("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 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('"Hdr::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 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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("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("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"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("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),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("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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("width "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("height "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// Exposes the HDR texture")]),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("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 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 namespace"}},[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")]),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("texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view\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("/// The format of the HDR texture")]),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("format")]),s("span",{pre:!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("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),t._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("format\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("/// This renders the internal HDR texture to the [TextureView]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/// supplied as parameter.")]),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("process")]),s("span",{pre:!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(" encoder"),s("span",{pre:!0,attrs:{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 namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoder")]),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(" "),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("TextureView")]),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(" "),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('"Hdr::process"')]),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("output"),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 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("]")]),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 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("pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n 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("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 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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("You may have noticed that we added a new parameter to "),s("code",[t._v("create_render_pipeline")]),t._v(". Here a the changes to that 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("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 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(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[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 comment"}},[t._v("// NEW!")]),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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"tonemapping"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tonemapping"}},[t._v("#")]),t._v(" Tonemapping")]),t._v(" "),s("p",[t._v("The process of tonemapping is taking an HDR image and converting it to a Standard Dynamic Range (SDR), which is usually sRGB. The exact tonemapping curve you use is ultimately up to your artistic needs, but for this tutorial, we'll use a popular one known as the Academy Color Encoding System or ACES used throughout the game industry as well as the film industry.")]),t._v(" "),s("p",[t._v("With that, let's jump into the the shader. Create a file called "),s("code",[t._v("hdr.wgsl")]),t._v(" and add the following code:")]),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("// Maps HDR values to linear values")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Based on http://www.oscars.org/science-technology/sci-tech-projects/aces")]),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("aces_tone_map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hdr"),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 operator"}},[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(">")]),t._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(" m1 "),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("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.59719")]),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.07600")]),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.02840")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.35458")]),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.90834")]),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.13383")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.04823")]),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.01566")]),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.83777")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" m2 "),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("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.60475")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.10208")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.00327")]),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 decimal-float-literal number"}},[t._v("0.53108")]),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.10813")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.07276")]),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 decimal-float-literal number"}},[t._v("0.07367")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("0.00605")]),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.07602")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" v "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" m1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" 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("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.0245786")]),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.000090537")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" b "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" 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 decimal-float-literal number"}},[t._v("0.983729")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" 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.4329510")]),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.238081")]),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("clamp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("m2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),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 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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(")")]),s("span",{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 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(" uv"),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 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(" vi"),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 comment"}},[t._v("// Generate a triangle that covers the whole screen")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uv "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 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("vi "),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("2u")]),s("span",{pre:!0,attrs:{class:"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("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vi "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("2u")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),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("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("out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uv "),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(" "),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 comment"}},[t._v("// We need to invert the y coordinate so the image")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// is not upside down")]),t._v("\n out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uv"),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(" "),s("span",{pre:!0,attrs:{class:"token decimal-float-literal number"}},[t._v("1.0")]),t._v(" "),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("uv"),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 "),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 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("\n"),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(" hdr_image"),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\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("\n"),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(" hdr_sampler"),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("vs"),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(" hdr "),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("hdr_image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hdr_sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" vs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("uv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" sdr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("aces_tone_map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rgb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("(")]),t._v("sdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hdr"),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 those in place, we can start using our HDR texture in our core render pipeline. First, we need to add the new "),s("code",[t._v("HdrPipeline")]),t._v(" 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\n"),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("hdr")]),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"),s("span",{pre:!0,attrs:{class:"token comment"}},[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 "),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 hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HdrPipeline")]),s("span",{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 operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),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("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("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 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 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(" hdr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HdrPipeline")]),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 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\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 hdr"),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("Then, when we resize the window, we need to call "),s("code",[t._v("resize()")]),t._v(" on our "),s("code",[t._v("HdrPipeline")]),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("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 comment"}},[t._v("// UPDATED!")]),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 comment"}},[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("hdr\n "),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 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(" 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(" 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(")")]),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("Next, in "),s("code",[t._v("render()")]),t._v(", we need to switch the "),s("code",[t._v("RenderPass")]),t._v(" to use our HDR texture instead of the surface texture:")]),t._v(" "),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 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("[")]),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 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("Some")]),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(";")]),t._v("\n")])])]),s("p",[t._v("Finally, after we draw all the objects in the frame, we can run our tonemapper with the surface texture as the output:")]),t._v(" "),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 comment"}},[t._v("// Apply tonemapping")]),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("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("process")]),s("span",{pre:!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(" encoder"),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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("It's a pretty easy switch. Here's the image before using HDR:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(363),alt:"before hdr"}})]),t._v(" "),s("p",[t._v("Here's what it looks like after implementing HDR:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(364),alt:"after hdr"}})]),t._v(" "),s("h2",{attrs:{id:"loading-hdr-textures"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#loading-hdr-textures"}},[t._v("#")]),t._v(" Loading HDR textures")]),t._v(" "),s("p",[t._v("Now that we have an HDR render buffer, we can start leveraging HDR textures to their fullest. One of the primary uses for HDR textures is to store lighting information in the form of an environment map.")]),t._v(" "),s("p",[t._v("This map can be used to light objects, display reflections and also to make a skybox. We're going to create a skybox using HDR texture, but first, we need to talk about how environment maps are stored.")]),t._v(" "),s("h2",{attrs:{id:"equirectangular-textures"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#equirectangular-textures"}},[t._v("#")]),t._v(" Equirectangular textures")]),t._v(" "),s("p",[t._v("An equirectangular texture is a texture where a sphere is stretched across a rectangular surface using what's known as an equirectangular projection. This map of the Earth is an example of this projection.")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1024px-Equirectangular_projection_SW.jpg",alt:"map of the earth"}})]),t._v(" "),s("p",[t._v("This projection maps the latitude values of the sphere to the horizontal coordinates of the texture. The longitude values get mapped to the vertical coordinates. This means that the vertical middle of the texture is the equator (0° longitude) of the sphere, the horizontal middle is the prime meridian (0° latitude) of the sphere, the left and right edges of the texture are the anti-meridian (+180°/-180° latitude) the top and bottom edges of the texture are the north pole (90° longitude) and south pole (-90° longitude), respectively.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(365),alt:"equirectangular diagram"}})]),t._v(" "),s("p",[t._v("This simple projection is easy to use, making it one of the most popular projections for storing spherical textures. You can see the particular environment map we are going to use below.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(366),alt:"equirectangular skybox"}})]),t._v(" "),s("h2",{attrs:{id:"cube-maps"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cube-maps"}},[t._v("#")]),t._v(" Cube Maps")]),t._v(" "),s("p",[t._v("While we can technically use an equirectangular map directly, as long as we do some math to figure out the correct coordinates, it is a lot more convenient to convert our environment map into a cube map.")]),t._v(" "),s("div",{staticClass:"info"},[s("p",[t._v("A cube map is a special kind of texture that has six layers. Each layer corresponds to a different face of an imaginary cube that is aligned to the X, Y and Z axes. The layers are stored in the following order: +X, -X, +Y, -Y, +Z, -Z.")])]),t._v(" "),s("p",[t._v("To prepare to store the cube texture, we are going to create a new struct called "),s("code",[t._v("CubeTexture")]),t._v(" in "),s("code",[t._v("texture.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("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("CubeTexture")]),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 namespace"}},[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 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 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 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("CubeTexture")]),t._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("create_2d")]),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 width"),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 height"),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 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 mip_level_count"),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 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(",")]),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(",")]),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 "),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(" 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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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("\n height"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A cube has 6 sides, so we need 6 layers")]),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("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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("\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("\n usage"),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 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")]),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 dimension"),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("TextureViewDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cube")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n array_layer_count"),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("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"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 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("(")]),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 label"),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("\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\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 texture"),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 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\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("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 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 namespace"}},[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")]),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 keyword"}},[t._v("self")]),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 \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("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 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 namespace"}},[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")]),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 keyword"}},[t._v("self")]),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\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("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 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 namespace"}},[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")]),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),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("}")]),t._v("\n")])])]),s("p",[t._v("With this, we can now write the code to load the HDR into a cube texture.")]),t._v(" "),s("h2",{attrs:{id:"compute-shaders"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#compute-shaders"}},[t._v("#")]),t._v(" Compute shaders")]),t._v(" "),s("p",[t._v("Up to this point, we've been exclusively using render pipelines, but I felt this was a good time to introduce the compute pipelines and, by extension, compute shaders. Compute pipelines are a lot easier to set up. All you need is to tell the pipeline what resources you want to use, what code you want to run, and how many threads you'd like the GPU to use when running your code. We're going to use a compute shader to give each pixel in our cube texture a color from the HDR image.")]),t._v(" "),s("p",[t._v("Before we can use compute shaders, we need to enable them in wgpu. We can do that by changing the line where we specify what features we want to use. In "),s("code",[t._v("lib.rs")]),t._v(", change the code where we request a device:")]),t._v(" "),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 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("(")]),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 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 comment"}},[t._v("// UPDATED!")]),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("all_webgpu_mask")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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 required_limits"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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_defaults")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"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(")")]),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("div",{staticClass:"warn"},[s("p",[t._v("You may have noted that we have switched from "),s("code",[t._v("downlevel_webgl2_defaults()")]),t._v(" to "),s("code",[t._v("downlevel_defaults()")]),t._v(". This means that we are dropping support for WebGL2. The reason for this is that WebGL2 doesn't support the compute shaders. WebGPU was built with compute shaders in mind. As of writing, the only browser that supports WebGPU is Chrome and some experimental browsers such as Firefox Nightly.")]),t._v(" "),s("p",[t._v("Consequently, we are going to remove the WebGL feature from "),s("code",[t._v("Cargo.toml")]),t._v(". This line in particular:")]),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("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('"22.0"')]),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")])])])]),t._v(" "),s("p",[t._v("Now that we've told wgpu that we want to use the compute shaders, let's create a struct in "),s("code",[t._v("resource.rs")]),t._v(" that we'll use to load the HDR image into our cube map.")]),t._v(" "),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("HdrLoader")]),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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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 equirect_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("BindGroupLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n equirect_to_cubemap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ComputePipeline")]),s("span",{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("HdrLoader")]),t._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("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(" "),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(" 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 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('"equirectangular.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 "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_format "),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("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba32Float")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" equirect_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 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('"HdrLoader::equirect_layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("COMPUTE")]),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 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("false")]),t._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 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 "),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("COMPUTE")]),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("StorageTexture")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n access"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StorageTextureAccess")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WriteOnly")]),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_format"),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 class-name"}},[t._v("D2Array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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 punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" 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("None")]),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("equirect_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\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" equirect_to_cubemap "),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_compute_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("ComputePipelineDescriptor")]),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('"equirect_to_cubemap"')]),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("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 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("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('"compute_equirect_to_cubemap"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compilation_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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("\n cache"),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("Self")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n equirect_to_cubemap"),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("\n equirect_layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("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_equirectangular_bytes")]),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("\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 data"),s("span",{pre:!0,attrs:{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 dst_size"),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 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 "),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("CubeTexture")]),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(" hdr_decoder "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HdrDecoder")]),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("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 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(" meta "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" hdr_decoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("metadata")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 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("let")]),t._v(" pixels "),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(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" pixels "),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 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(",")]),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(" meta"),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("usize")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" meta"),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("usize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n hdr_decoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("read_image_transform")]),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("pix"),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(" rgb "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pix"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_hdr")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("rgb"),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("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rgb"),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(" rgb"),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("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.0f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"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 keyword"}},[t._v("mut")]),t._v(" pixels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!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 pixels\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\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("let")]),t._v(" pixels "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" hdr_decoder"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("read_image_native")]),s("span",{pre:!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("\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("pix"),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(" rgb "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pix"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_hdr")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("rgb"),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("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rgb"),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(" rgb"),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("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.0f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"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(" src "),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("create_2d_texture")]),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 meta"),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 meta"),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("texture_format"),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("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 "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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 "),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\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 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("src"),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 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 operator"}},[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("pixels"),s("span",{pre:!0,attrs:{class:"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("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("(")]),t._v("src"),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 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 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 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 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("src"),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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n src"),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\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dst "),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("CubeTexture")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_2d")]),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 dst_size"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dst_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("texture_format"),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("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We are going to write to `dst` texture so we")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// need to use a `STORAGE_BINDING`.")]),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("TextureUsages")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("STORAGE_BINDING")]),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("TEXTURE_BINDING")]),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("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 label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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(" dst_view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("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 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")]),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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Normally, you'd use `TextureViewDimension::Cube`")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// for a cube texture, but we can't use that")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// view dimension with a `STORAGE_BINDING`.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need to access the cube texture layers")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// directly.")]),t._v("\n dimension"),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("TextureViewDimension")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("D2Array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"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 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 label"),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("equirect_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("src"),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("TextureView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("dst_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 punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" 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 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(" "),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_compute_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("ComputePassDescriptor")]),t._v(" "),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(")")]),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(" num_workgroups "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dst_size "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("15")]),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("16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n 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("equirect_to_cubemap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n 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("&")]),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 pass"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch_workgroups")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("num_workgroups"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" num_workgroups"),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(")")]),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("pass"),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 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 class-name"}},[t._v("Ok")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("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("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("dispatch_workgroups")]),t._v(" call tells the GPU to run our code in batches called workgroups. Each workgroup has a number of worker threads called invocations that run the code in parallel. Workgroups are organized as a 3d grid with the dimensions we pass to "),s("code",[t._v("dispatch_workgroups")]),t._v(".")]),t._v(" "),s("p",[t._v("In this example, we have a workgroup grid divided into 16x16 chunks and storing the layer in the z dimension.")]),t._v(" "),s("h2",{attrs:{id:"the-compute-shader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-compute-shader"}},[t._v("#")]),t._v(" The compute shader")]),t._v(" "),s("p",[t._v("Now, let's write a compute shader that will convert our equirectangular texture to a cube texture. Create a file called "),s("code",[t._v("equirectangular.wgsl")]),t._v(". We're going to break it down chunk by chunk.")]),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("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PI")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),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("3.1415926535897932384626433832795")]),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("Face")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n forward"),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 up"),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 right"),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("p",[t._v("Two things here:")]),t._v(" "),s("ol",[s("li",[t._v("WGSL doesn't have a built-in for PI, so we need to specify it ourselves.")]),t._v(" "),s("li",[t._v("each face of the cube map has an orientation to it, so we need to store that.")])]),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("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("\n"),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(" src"),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\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("\n"),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(" dst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_storage_2d_array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rgba32float"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" write"),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 have the only two bindings we need. The equirectangular "),s("code",[t._v("src")]),t._v(" texture and our "),s("code",[t._v("dst")]),t._v(" cube texture. Some things to note about "),s("code",[t._v("dst")]),t._v(":")]),t._v(" "),s("ol",[s("li",[t._v("While "),s("code",[t._v("dst")]),t._v(" is a cube texture, it's stored as an array of 2d textures.")]),t._v(" "),s("li",[t._v("The type of binding we're using here is a storage texture. An array storage texture, to be precise. This is a unique binding only available to compute shaders. It allows us to write directly to the texture.")]),t._v(" "),s("li",[t._v("When using a storage texture binding, we need to specify the format of the texture. If you try to bind a texture with a different format, wgpu will panic.")])]),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("compute")]),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("workgroup_size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("16")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token int-literal number"}},[t._v("16")]),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("\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("compute_equirect_to_cubemap")]),s("span",{pre:!0,attrs:{class:"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("global_invocation_id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v("\n gid"),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("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("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("// If texture size is not divisible by 32, we")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// need to make sure we don't try to write to")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// pixels that don't exist.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" gid"),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(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureDimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dst"),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(" "),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\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FACES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("array")]),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(",")]),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(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// FACES +X")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function-calls function"}},[t._v("Face")]),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 decimal-float-literal number"}},[t._v("1.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("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("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 comment"}},[t._v("// forward")]),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 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(",")]),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 comment"}},[t._v("// 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 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("0.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 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("// right")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"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("// FACES -X")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),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 operator"}},[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(" "),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("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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(",")]),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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("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 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("// FACES +Y")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),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 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 operator"}},[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(" "),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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" "),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("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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// FACES -Y")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),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 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(",")]),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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("0.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 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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" "),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("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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// FACES +Z")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),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 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("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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(",")]),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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" "),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("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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// FACES -Z")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),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 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("0.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 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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(",")]),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 builtin"}},[t._v("vec3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[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(" "),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("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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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("// Get texture coords relative to cubemap face")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dst_dimensions "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureDimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" cube_uv "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("gid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" dst_dimensions "),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\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Get spherical coordinate from cube_uv")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" face "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FACES")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("gid"),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 "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" spherical "),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("face"),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(" face"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" cube_uv"),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(" face"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("up "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" cube_uv"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),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("// Get coordinate on the equirectangular texture")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" inv_atan "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 decimal-float-literal number"}},[t._v("0.1591")]),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.3183")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" eq_uv "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("atan2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("spherical"),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(" spherical"),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(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("asin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("spherical"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),s("span",{pre:!0,attrs:{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(" inv_atan "),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(" eq_pixel "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("i32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("eq_uv "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("(")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureDimensions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("src"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("// We use textureLoad() as textureSample() is not allowed in compute shaders")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sample "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureLoad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("src"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" eq_pixel"),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("\n\n "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("textureStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" gid"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" gid"),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(" sample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!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 I commented in the previous code, there are some things I want to go over that wouldn't fit well in a comment.")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("workgroup_size")]),t._v(" decorator tells the dimensions of the workgroup's local grid of invocations. Because we are dispatching one workgroup for every pixel in the texture, we have each workgroup be a 16x16x1 grid. This means that each workgroup can have 256 threads to work with.")]),t._v(" "),s("div",{staticClass:"warn"},[s("p",[t._v("For WebGPU, each workgroup can only have a max of 256 threads (also called invocations).")])]),t._v(" "),s("p",[t._v("With this, we can load the environment map in the "),s("code",[t._v("new()")]),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 keyword"}},[t._v("let")]),t._v(" hdr_loader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),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 class-name"}},[t._v("HdrLoader")]),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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sky_bytes "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),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_binary")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pure-sky.hdr"')]),s("span",{pre:!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(" sky_texture "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" hdr_loader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_equirectangular_bytes")]),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("queue"),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("sky_bytes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1080")]),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 string"}},[t._v('"Sky 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 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("h2",{attrs:{id:"skybox"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#skybox"}},[t._v("#")]),t._v(" Skybox")]),t._v(" "),s("p",[t._v("Now that we have an environment map to render let's use it to make our skybox. There are different ways to render a skybox. A standard way is to render a cube and map the environment map on it. While that method works, it can have some artifacts in the corners and edges where the cube's faces meet.")]),t._v(" "),s("p",[t._v("Instead, we are going to render to the entire screen, compute the view direction from each pixel and use that to sample the texture. First, we need to create a bindgroup for the environment map so that we can use it for rendering. Add the following to "),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("let")]),t._v(" environment_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 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('"environment_layout"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 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("false")]),t._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 class-name"}},[t._v("Cube")]),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 "),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 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("NonFiltering")]),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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" environment_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 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('"environment_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 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("environment_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("sky_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"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("(")]),t._v("sky_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sampler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 that we have the bindgroup, we need a render pipeline to render the skybox.")]),t._v(" "),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(" sky_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('"Sky 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("environment_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 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('"sky.wgsl"')]),s("span",{pre:!0,attrs:{class:"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 hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("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 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("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 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("One thing to note here. We added the primitive format to "),s("code",[t._v("create_render_pipeline()")]),t._v(". Also, we changed the depth compare function to "),s("code",[t._v("CompareFunction::LessEqual")]),t._v(" (we'll discuss why when we go over the sky shader). Here are the changes to 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("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 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(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[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 comment"}},[t._v("// NEW!")]),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"),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("LessEqual")]),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 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 "),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("}")]),t._v("\n")])])]),s("p",[t._v("Don't forget to add the new bindgroup and pipeline to the 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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HdrPipeline")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n environment_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 sky_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\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")]),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 class-name"}},[t._v("State")]),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("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 lifetime-annotation symbol"}},[t._v("'a")]),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 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("State")]),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 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 "),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 hdr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n environment_bind_group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sky_pipeline"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n debug"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 let's cover "),s("code",[t._v("sky.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("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"),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 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 inv_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 inv_view"),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 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("\n"),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(" env_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_cube")]),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("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 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(" env_sampler"),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 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(" frag_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(" 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("}")]),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(" id"),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("let")]),t._v(" uv "),s("span",{pre:!0,attrs:{class:"token operator"}},[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("(")]),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("u32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n id "),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("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id "),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("1u")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("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 comment"}},[t._v("// out.clip_position = vec4(uv * vec2(4.0, -4.0) + vec2(-1.0, 1.0), 0.0, 1.0);")]),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("(")]),t._v("uv "),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("4.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(" "),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(" "),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("frag_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("(")]),t._v("uv "),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("4.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(" "),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(" "),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 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(" view_pos_homogeneous "),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("inv_proj "),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("clip_position"),s("span",{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_ray_direction "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" view_pos_homogeneous"),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(" view_pos_homogeneous"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("w"),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(" ray_direction "),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("(")]),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("inv_view "),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("(")]),t._v("view_ray_direction"),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(")")]),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(" sample "),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("env_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" env_sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ray_direction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" sample"),s("span",{pre:!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("Let's break this down:")]),t._v(" "),s("ol",[s("li",[t._v("We create a triangle twice the size of the screen.")]),t._v(" "),s("li",[t._v("In the fragment shader, we get the view direction from the clip position. We use the inverse projection matrix to convert the clip coordinates to view direction. Then, we use the inverse view matrix to get the direction into world space, as that's what we need to sample the sky box correctly.")]),t._v(" "),s("li",[t._v("We then sample the sky texture with the view direction.")])]),t._v(" "),s("p",[t._v("For this to work, we need to change our camera uniforms a bit. We need to add the inverse view matrix and inverse projection matrix to "),s("code",[t._v("CameraUniform")]),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, 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"),s("span",{pre:!0,attrs:{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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),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 inv_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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n inv_view"),s("span",{pre:!0,attrs:{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(" "),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\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"),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 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 inv_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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n inv_view"),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(" "),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\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("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 namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" projection"),s("span",{pre:!0,attrs:{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("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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_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("position"),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("let")]),t._v(" proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" projection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_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(";")]),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(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_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(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view_proj "),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" view"),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(" view_proj"),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("inv_proj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" proj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("invert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!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(".")]),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("inv_view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transpose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!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("Make sure to change the "),s("code",[t._v("Camera")]),t._v(" definition in "),s("code",[t._v("shader.wgsl")]),t._v(", and "),s("code",[t._v("light.wgsl")]),t._v(". Just as a reminder, it looks like this:")]),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"),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 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 inv_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 inv_view"),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 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:"info"},[s("p",[t._v("You may have noticed that we removed the "),s("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(". The reason for this is that it was messing with the projection of the skybox.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(367),alt:"projection error"}})]),t._v(" "),s("p",[t._v("Technically, it wasn't needed, so I felt fine removing it.")])]),t._v(" "),s("h2",{attrs:{id:"reflections"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#reflections"}},[t._v("#")]),t._v(" Reflections")]),t._v(" "),s("p",[t._v("Now that we have a sky, we can mess around with using it for lighting. This won't be physically accurate (we'll look into that later). That being said, we have the environment map, so we might as well use it.")]),t._v(" "),s("p",[t._v("In order to do that though, we need to change our shader to do lighting in world space instead of tangent space because our environment map is in world space. Because there are a lot of changes I'll post the whole shader here:")]),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("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"),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 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 inv_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 inv_view"),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("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\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("@")]),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("}")]),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("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 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("}")]),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 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(" 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 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_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 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(" world_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("4")]),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("5")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_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("6")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" world_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("}")]),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 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("// UPDATED!")]),t._v("\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("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 out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),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 out"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),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 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("world_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("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 "),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("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("group")]),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 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(" env_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("texture_cube")]),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("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 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(" env_sampler"),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("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Adjust the tangent and bitangent using the Gramm-Schmidt process")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This makes sure that they are perpendicular to each other and the")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// normal of the surface.")]),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("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),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("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_tangent"),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(" "),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_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_bitangent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("cross")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("world_tangent"),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\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Convert the normal sample to world space")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TBN")]),t._v(" "),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("(")]),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 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("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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_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(" world_normal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TBN")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" tangent_normal"),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(" 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("in"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world_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("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("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\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("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("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 comment"}},[t._v("// NEW!")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Calculate reflections")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" world_reflect "),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("view_dir"),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("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" reflection "),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("env_map"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" env_sampler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" world_reflect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rgb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shininess "),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\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("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 operator"}},[t._v("+")]),t._v(" reflection "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" shininess"),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("A little note on the reflection math. The "),s("code",[t._v("view_dir")]),t._v(" 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 "),s("code",[t._v("view_dir")]),t._v(". We then use "),s("code",[t._v("wgsl")]),t._v("'s built-in "),s("code",[t._v("reflect")]),t._v(" function to reflect the inverted "),s("code",[t._v("view_dir")]),t._v(" about the "),s("code",[t._v("world_normal")]),t._v(". 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:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(368),alt:"just-reflections"}})]),t._v(" "),s("p",[t._v("Here's the finished scene:")]),t._v(" "),s("p",[s("img",{attrs:{src:a(369),alt:"with-reflections"}})]),t._v(" "),s("h2",{attrs:{id:"output-too-dark-on-webgpu"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#output-too-dark-on-webgpu"}},[t._v("#")]),t._v(" Output too dark on WebGPU?")]),t._v(" "),s("p",[t._v("WebGPU doesn't support using sRGB texture formats as the\noutput for a surface. We can get around this by making the\ntexture view used to render use the sRGB version of the\nformat. To do this we need to change the surface config\nwe use to allow view formats with sRGB.")]),t._v(" "),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(" 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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),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("[")]),t._v("surface_format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add_srgb_suffix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n desired_maximum_frame_latency"),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"),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 need to create a view with sRGB enabled in\n"),s("code",[t._v("State::render()")]),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(" view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture\n "),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")]),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(" "),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 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("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add_srgb_suffix")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"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("You may have noticed as well that in "),s("code",[t._v("HdrPipeline::new()")]),t._v("\nwe use "),s("code",[t._v("config.format.add_srgb_suffix()")]),t._v(" when creating\nthe render pipeline. This is required as if we don't\nthe sRGB enabled "),s("code",[t._v("TextureView")]),t._v(" won't work with the\nrender pipeline.")]),t._v(" "),s("p",[t._v("With that you should get the sRGB output as expected.")]),t._v(" "),s("h2",{attrs:{id:"demo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#demo"}},[t._v("#")]),t._v(" Demo")]),t._v(" "),s("div",{staticClass:"warn"},[s("p",[t._v("If your browser doesn't support WebGPU, this example won't work for you.")])]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial13_hdr"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/15.6080e8de.js b/assets/js/15.fe92aa76.js similarity index 78% rename from assets/js/15.6080e8de.js rename to assets/js/15.fe92aa76.js index 741effda0..a7ff02d28 100644 --- a/assets/js/15.6080e8de.js +++ b/assets/js/15.fe92aa76.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{330:function(t,s,a){t.exports=a.p+"assets/img/happy-tree.bdff8a19.png"},331:function(t,s,a){t.exports=a.p+"assets/img/address_mode.66a7cd1a.png"},332:function(t,s,a){t.exports=a.p+"assets/img/upside-down.d50c3643.png"},333:function(t,s,a){t.exports=a.p+"assets/img/happy-tree-uv-coords.aa3b7d36.png"},334:function(t,s,a){t.exports=a.p+"assets/img/rightside-up.eb2186c8.png"},446:function(t,s,a){"use strict";a.r(s);var n=a(8),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(330),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(331),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")]),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 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 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(">")]),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")]),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 class-name"}},[t._v("State")]),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("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(332),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(333),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(334),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 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.29"')]),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('"rwh_05"')]),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("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.19"')]),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")]),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 class-name"}},[t._v("State")]),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("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([[15],{329:function(t,s,a){t.exports=a.p+"assets/img/happy-tree.bdff8a19.png"},330:function(t,s,a){t.exports=a.p+"assets/img/address_mode.66a7cd1a.png"},331:function(t,s,a){t.exports=a.p+"assets/img/upside-down.d50c3643.png"},332:function(t,s,a){t.exports=a.p+"assets/img/happy-tree-uv-coords.aa3b7d36.png"},333:function(t,s,a){t.exports=a.p+"assets/img/rightside-up.eb2186c8.png"},443:function(t,s,a){"use strict";a.r(s);var n=a(8),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(329),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(330),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")]),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 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 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(">")]),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")]),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 class-name"}},[t._v("State")]),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("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(331),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(332),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(333),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 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.29"')]),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('"rwh_05"')]),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("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('"22.0"')]),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.16"')]),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 attribute attr-name"}},[t._v("#[allow(unused)]")]),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")]),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 class-name"}},[t._v("State")]),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("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/16.19b2f095.js b/assets/js/16.d3d0bba5.js similarity index 92% rename from assets/js/16.19b2f095.js rename to assets/js/16.d3d0bba5.js index 886a739a9..a24f951c0 100644 --- a/assets/js/16.19b2f095.js +++ b/assets/js/16.d3d0bba5.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[16,46],{258: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(91);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"})}},272:function(t,e,n){"use strict";n.r(e);var r=n(258),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(8),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},285:function(t,e,n){},293:function(t,e,n){"use strict";n(285)},312:function(t,e,n){"use strict";n.r(e);var r={components:{NavLink:n(272).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},i=(n(293),n(8)),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([[16,45],{257: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(91);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"})}},259:function(t,e,n){"use strict";n.r(e);var r=n(257),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(8),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},284:function(t,e,n){},292:function(t,e,n){"use strict";n(284)},311:function(t,e,n){"use strict";n.r(e);var r={components:{NavLink:n(259).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},i=(n(292),n(8)),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/17.aee2df89.js b/assets/js/17.b0415c79.js similarity index 99% rename from assets/js/17.aee2df89.js rename to assets/js/17.b0415c79.js index 066b618b2..caca733eb 100644 --- a/assets/js/17.aee2df89.js +++ b/assets/js/17.b0415c79.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{326:function(t,s,a){t.exports=a.p+"assets/img/vb_desc.63afb652.png"},327:function(t,s,a){t.exports=a.p+"assets/img/triangle.11560f32.png"},328:function(t,s,a){t.exports=a.p+"assets/img/pentagon.2c2be93b.png"},329: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="},445:function(t,s,a){"use strict";a.r(s);var n=a(8),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(326),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")]),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 class-name"}},[t._v("State")]),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("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(327),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(328),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")]),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 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 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(">")]),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(329),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("Most software that uses colors stores them in sRGB format (or a similar proprietary one). Wgpu expects values in linear color space, so we have to convert the values.")]),t._v(" "),s("p",[t._v("You get the correct color using the following formula: "),s("code",[t._v("rgb_color = ((srgb_color / 255 + 0.055) / 1.055) ^ 2.4")]),t._v(". Doing this with an sRGB 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 if they are store in an sRGB texture, the conversion to linear will happen automatically. 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([[17],{325:function(t,s,a){t.exports=a.p+"assets/img/vb_desc.63afb652.png"},326:function(t,s,a){t.exports=a.p+"assets/img/triangle.11560f32.png"},327:function(t,s,a){t.exports=a.p+"assets/img/pentagon.2c2be93b.png"},328: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="},442:function(t,s,a){"use strict";a.r(s);var n=a(8),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.16"')]),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(325),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")]),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 class-name"}},[t._v("State")]),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("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(326),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(327),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")]),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 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 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(">")]),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(328),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("Most software that uses colors stores them in sRGB format (or a similar proprietary one). Wgpu expects values in linear color space, so we have to convert the values.")]),t._v(" "),s("p",[t._v("You get the correct color using the following formula: "),s("code",[t._v("rgb_color = ((srgb_color / 255 + 0.055) / 1.055) ^ 2.4")]),t._v(". Doing this with an sRGB 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 if they are store in an sRGB texture, the conversion to linear will happen automatically. 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/18.f0758b8d.js b/assets/js/18.48f2682d.js similarity index 99% rename from assets/js/18.f0758b8d.js rename to assets/js/18.48f2682d.js index 2371ea873..156bb1c8b 100644 --- a/assets/js/18.f0758b8d.js +++ b/assets/js/18.48f2682d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{364:function(t,a,s){t.exports=s.p+"assets/img/figure_no-fbm.1931fe05.png"},365:function(t,a,s){t.exports=s.p+"assets/img/figure_fbm.28310498.png"},366:function(t,a,s){t.exports=s.p+"assets/img/figure_spiky.46babb7a.png"},367:function(t,a,s){t.exports=s.p+"assets/img/figure_work-groups.af52f221.jpg"},455:function(t,a,s){"use strict";s.r(a);var n=s(8),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(364),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(365),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(366),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(367),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([[18],{370:function(t,a,s){t.exports=s.p+"assets/img/figure_no-fbm.1931fe05.png"},371:function(t,a,s){t.exports=s.p+"assets/img/figure_fbm.28310498.png"},372:function(t,a,s){t.exports=s.p+"assets/img/figure_spiky.46babb7a.png"},373:function(t,a,s){t.exports=s.p+"assets/img/figure_work-groups.af52f221.jpg"},453:function(t,a,s){"use strict";s.r(a);var n=s(8),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(370),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(371),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(372),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(373),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/19.0400ce5d.js b/assets/js/19.9bc17dbb.js similarity index 98% rename from assets/js/19.0400ce5d.js rename to assets/js/19.9bc17dbb.js index 5f0bd613a..17f3a751e 100644 --- a/assets/js/19.0400ce5d.js +++ b/assets/js/19.9bc17dbb.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{376:function(t,s,a){t.exports=a.p+"assets/img/corruption.675b1eca.png"},377:function(t,s,a){t.exports=a.p+"assets/img/black_triangles.df338b97.png"},378:function(t,s,a){t.exports=a.p+"assets/img/render_doc_output.e0c8b298.png"},379:function(t,s,a){t.exports=a.p+"assets/img/results.7918efc1.png"},467:function(t,s,a){"use strict";a.r(s);var n=a(8),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(376),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(377),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(378),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(379),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([[19],{375:function(t,s,a){t.exports=a.p+"assets/img/corruption.675b1eca.png"},376:function(t,s,a){t.exports=a.p+"assets/img/black_triangles.df338b97.png"},377:function(t,s,a){t.exports=a.p+"assets/img/render_doc_output.e0c8b298.png"},378:function(t,s,a){t.exports=a.p+"assets/img/results.7918efc1.png"},464:function(t,s,a){"use strict";a.r(s);var n=a(8),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(375),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(376),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(377),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(378),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/2.476d94c5.js b/assets/js/2.7217a470.js similarity index 88% rename from assets/js/2.476d94c5.js rename to assets/js/2.7217a470.js index a7ee94811..032ead877 100644 --- a/assets/js/2.476d94c5.js +++ b/assets/js/2.7217a470.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2,11,12,40,41,46],{258: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(91);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"})}},259:function(t,e,n){},272:function(t,e,n){"use strict";n.r(e);var s=n(258),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(8),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},273: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(274),n(8)),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},274:function(t,e,n){"use strict";n(259)},275:function(t,e,n){},277:function(t,e,n){},279:function(t,e,n){"use strict";n(275)},283:function(t,e,n){"use strict";n.r(e);var s=n(272),i=n(273),r={components:{NavLink:s.default,DropdownTransition:i.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(279),n(8)),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},286:function(t,e,n){"use strict";n(277)},287:function(t,e,n){},291:function(t,e,n){"use strict";n.r(e);var s=n(283),i=n(258),r={components:{NavLink:n(272).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(315),h=n(291);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(318),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([[2,11,12,39,40,45],{257: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(91);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"})}},258:function(t,e,n){},259:function(t,e,n){"use strict";n.r(e);var s=n(257),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(8),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},272: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(273),n(8)),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},273:function(t,e,n){"use strict";n(258)},274:function(t,e,n){},276:function(t,e,n){},278:function(t,e,n){"use strict";n(274)},282:function(t,e,n){"use strict";n.r(e);var s=n(259),i=n(272),r={components:{NavLink:s.default,DropdownTransition:i.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},o=(n(278),n(8)),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},285:function(t,e,n){"use strict";n(276)},286:function(t,e,n){},290:function(t,e,n){"use strict";n.r(e);var s=n(282),i=n(257),r={components:{NavLink:n(259).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(314),h=n(290);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(317),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/20.90ed33c8.js b/assets/js/20.90ed33c8.js deleted file mode 100644 index 521f98e59..000000000 --- a/assets/js/20.90ed33c8.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{305:function(e,t,o){},385:function(e,t,o){var r={"./pong/demo.js":[387,1,24],"./tutorial10_lighting/demo.js":[405,1,25],"./tutorial11_normals/demo.js":[407,1,26],"./tutorial12_camera/demo.js":[409,1,27],"./tutorial13_hdr/demo.js":[411,1,28],"./tutorial1_window/demo.js":[413,1,29],"./tutorial2_surface/demo.js":[415,1,30],"./tutorial3_pipeline/demo.js":[417,1,31],"./tutorial4_buffer/demo.js":[419,1,32],"./tutorial5_textures/demo.js":[421,1,33],"./tutorial6_uniforms/demo.js":[423,1,34],"./tutorial7_instancing/demo.js":[425,1,35],"./tutorial8_depth/demo.js":[427,1,36],"./tutorial9_models/demo.js":[429,1,37]};function a(e){if(!o.o(r,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=r[e],a=t[0];return Promise.all(t.slice(1).map(o.e)).then((function(){return o(a)}))}a.keys=function(){return Object.keys(r)},a.id=385,e.exports=a},386:function(e,t,o){"use strict";o(305)},439:function(e,t,o){"use strict";o.r(t);var r={name:"WasmExample",props:{example:"",autoLoad:!1},data:()=>({error:"",loading:!1,exampleStarted:!1}),computed:{exampleName(){return this.example.replace(/\w\S*/g,(function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()}))}},methods:{async loadExample(){this.loading=!0;try{await o(385)(`./${this.example}/demo.js`)}catch(e){""+e!="Error: Using exceptions for control flow, don't mind me. This isn't actually an error!"?(this.error=`An error occurred loading "${this.example}": ${e}`,console.error(e),this.exampleStarted=!1):this.exampleStarted=!0}this.loading=!1}},async mounted(){await this.$nextTick(),this.autoLoad&&await this.loadExample()}},a=(o(386),o(8)),n=Object(a.a)(r,(function(){var e=this,t=e._self._c;return t("div",{attrs:{id:"wasm-example"}},[e.error?t("div",{staticClass:"error"},[e._v("\n "+e._s(e.error)+"\n ")]):e._e(),e._v(" "),e.exampleStarted||e.autoLoad?e._e():t("button",{attrs:{disabled:e.loading},on:{click:function(t){return e.loadExample()}}},[e._v("Try "+e._s(e.exampleName)+"!")])])}),[],!1,null,null,null);t.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/20.d3f63fde.js b/assets/js/20.d3f63fde.js new file mode 100644 index 000000000..f6fe02583 --- /dev/null +++ b/assets/js/20.d3f63fde.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{304:function(e,t,o){},384:function(e,t,o){var r={"./tutorial10_lighting/demo.js":[386,1,24],"./tutorial11_normals/demo.js":[404,1,25],"./tutorial12_camera/demo.js":[406,1,26],"./tutorial13_hdr/demo.js":[408,1,27],"./tutorial1_window/demo.js":[410,1,28],"./tutorial2_surface/demo.js":[412,1,29],"./tutorial3_pipeline/demo.js":[414,1,30],"./tutorial4_buffer/demo.js":[416,1,31],"./tutorial5_textures/demo.js":[418,1,32],"./tutorial6_uniforms/demo.js":[420,1,33],"./tutorial7_instancing/demo.js":[422,1,34],"./tutorial8_depth/demo.js":[424,1,35],"./tutorial9_models/demo.js":[426,1,36]};function a(e){if(!o.o(r,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=r[e],a=t[0];return Promise.all(t.slice(1).map(o.e)).then((function(){return o(a)}))}a.keys=function(){return Object.keys(r)},a.id=384,e.exports=a},385:function(e,t,o){"use strict";o(304)},436:function(e,t,o){"use strict";o.r(t);var r={name:"WasmExample",props:{example:"",autoLoad:!1},data:()=>({error:"",loading:!1,exampleStarted:!1}),computed:{exampleName(){return this.example.replace(/\w\S*/g,(function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()}))}},methods:{async loadExample(){this.loading=!0;try{await o(384)(`./${this.example}/demo.js`)}catch(e){""+e!="Error: Using exceptions for control flow, don't mind me. This isn't actually an error!"?(this.error=`An error occurred loading "${this.example}": ${e}`,console.error(e),this.exampleStarted=!1):this.exampleStarted=!0}this.loading=!1}},async mounted(){await this.$nextTick(),this.autoLoad&&await this.loadExample()}},a=(o(385),o(8)),i=Object(a.a)(r,(function(){var e=this,t=e._self._c;return t("div",{attrs:{id:"wasm-example"}},[e.error?t("div",{staticClass:"error"},[e._v("\n "+e._s(e.error)+"\n ")]):e._e(),e._v(" "),e.exampleStarted||e.autoLoad?e._e():t("button",{attrs:{disabled:e.loading},on:{click:function(t){return e.loadExample()}}},[e._v("Try "+e._s(e.exampleName)+"!")])])}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/21.93434775.js b/assets/js/21.91d915f1.js similarity index 95% rename from assets/js/21.93434775.js rename to assets/js/21.91d915f1.js index 1cf72ed35..f5361a42a 100644 --- a/assets/js/21.93434775.js +++ b/assets/js/21.91d915f1.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{258: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(91);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"})}},288:function(t,e,n){},295:function(t,e,n){"use strict";n(288)},313:function(t,e,n){"use strict";n.r(e);n(91);var r=n(258);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"})}},287:function(t,e,n){},294:function(t,e,n){"use strict";n(287)},312:function(t,e,n){"use strict";n.r(e);n(91);var r=n(257);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"})}},276:function(t,e,n){},280:function(t,e,n){"use strict";n(276)},284:function(t,e,n){"use strict";n.r(e);var r=n(258);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(280),n(8)),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([[22],{257: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(91);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"})}},275:function(t,e,n){},279:function(t,e,n){"use strict";n(275)},283:function(t,e,n){"use strict";n.r(e);var r=n(257);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(279),n(8)),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/23.3e3cf765.js b/assets/js/23.1c3bf250.js similarity index 99% rename from assets/js/23.3e3cf765.js rename to assets/js/23.1c3bf250.js index 97b31f930..3e6374397 100644 --- a/assets/js/23.3e3cf765.js +++ b/assets/js/23.1c3bf250.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{339:function(t,s,a){t.exports=a.p+"assets/img/cubes.988d14be.png"},340:function(t,s,a){t.exports=a.p+"assets/img/cube-diffuse.03fc55af.jpg"},341:function(t,s,a){t.exports=a.p+"assets/img/cubes-correct.2db711eb.png"},450:function(t,s,a){"use strict";a.r(s);var n=a(8),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 punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),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("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_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 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("[")]),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(",")]),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("else")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\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("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("}")]),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 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(339),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(340),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(341),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([[23],{338:function(t,s,a){t.exports=a.p+"assets/img/cubes.988d14be.png"},339:function(t,s,a){t.exports=a.p+"assets/img/cube-diffuse.03fc55af.jpg"},340:function(t,s,a){t.exports=a.p+"assets/img/cubes-correct.2db711eb.png"},447:function(t,s,a){"use strict";a.r(s);var n=a(8),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 punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),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("normals"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_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 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("[")]),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(",")]),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("else")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\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("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("}")]),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 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(338),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(339),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(340),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/24.8bd8cfd0.js b/assets/js/24.8bd8cfd0.js new file mode 100644 index 000000000..95e4f787f --- /dev/null +++ b/assets/js/24.8bd8cfd0.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{246:function(n,t,e){"use strict";(function(n){e.d(t,"Ki",(function(){return u})),e.d(t,"Dl",(function(){return F})),e.d(t,"zl",(function(){return W})),e.d(t,"Al",(function(){return q})),e.d(t,"Sk",(function(){return z})),e.d(t,"ul",(function(){return U})),e.d(t,"yl",(function(){return K})),e.d(t,"Bl",(function(){return Q})),e.d(t,"Ng",(function(){return N})),e.d(t,"Wi",(function(){return X})),e.d(t,"Qd",(function(){return Y})),e.d(t,"Vd",(function(){return H})),e.d(t,"eh",(function(){return J})),e.d(t,"fh",(function(){return Z})),e.d(t,"b",(function(){return $})),e.d(t,"Ik",(function(){return nn})),e.d(t,"yh",(function(){return tn})),e.d(t,"ei",(function(){return en})),e.d(t,"pe",(function(){return rn})),e.d(t,"Vh",(function(){return un})),e.d(t,"Yh",(function(){return fn})),e.d(t,"hh",(function(){return cn})),e.d(t,"Jk",(function(){return on})),e.d(t,"Wh",(function(){return _n})),e.d(t,"di",(function(){return dn})),e.d(t,"vh",(function(){return an})),e.d(t,"xl",(function(){return bn})),e.d(t,"jh",(function(){return gn})),e.d(t,"Zg",(function(){return wn})),e.d(t,"nf",(function(){return sn})),e.d(t,"mf",(function(){return ln})),e.d(t,"pf",(function(){return mn})),e.d(t,"of",(function(){return pn})),e.d(t,"Vi",(function(){return hn})),e.d(t,"sk",(function(){return xn})),e.d(t,"bd",(function(){return yn})),e.d(t,"Ae",(function(){return Sn})),e.d(t,"Nf",(function(){return kn})),e.d(t,"pk",(function(){return vn})),e.d(t,"nd",(function(){return Bn})),e.d(t,"md",(function(){return Pn})),e.d(t,"Md",(function(){return In})),e.d(t,"ui",(function(){return jn})),e.d(t,"li",(function(){return An})),e.d(t,"ni",(function(){return Dn})),e.d(t,"me",(function(){return Tn})),e.d(t,"lf",(function(){return Cn})),e.d(t,"af",(function(){return Mn})),e.d(t,"Ee",(function(){return Fn})),e.d(t,"Sh",(function(){return En})),e.d(t,"le",(function(){return Rn})),e.d(t,"vg",(function(){return Ln})),e.d(t,"Xd",(function(){return On})),e.d(t,"ae",(function(){return Gn})),e.d(t,"mi",(function(){return Vn})),e.d(t,"ki",(function(){return Wn})),e.d(t,"Ed",(function(){return qn})),e.d(t,"Ad",(function(){return zn})),e.d(t,"yd",(function(){return Un})),e.d(t,"Cd",(function(){return Kn})),e.d(t,"ri",(function(){return Qn})),e.d(t,"si",(function(){return Nn})),e.d(t,"wi",(function(){return Xn})),e.d(t,"Ei",(function(){return Yn})),e.d(t,"Di",(function(){return Hn})),e.d(t,"Td",(function(){return Jn})),e.d(t,"Ff",(function(){return Zn})),e.d(t,"Fh",(function(){return $n})),e.d(t,"Mf",(function(){return nt})),e.d(t,"Ni",(function(){return tt})),e.d(t,"Tb",(function(){return et})),e.d(t,"Sb",(function(){return rt})),e.d(t,"Wb",(function(){return ut})),e.d(t,"Xb",(function(){return ft})),e.d(t,"Yb",(function(){return ct})),e.d(t,"cc",(function(){return it})),e.d(t,"fc",(function(){return ot})),e.d(t,"hc",(function(){return _t})),e.d(t,"ic",(function(){return dt})),e.d(t,"mc",(function(){return at})),e.d(t,"nc",(function(){return bt})),e.d(t,"rc",(function(){return gt})),e.d(t,"cd",(function(){return wt})),e.d(t,"rh",(function(){return st})),e.d(t,"zh",(function(){return lt})),e.d(t,"vc",(function(){return mt})),e.d(t,"dd",(function(){return pt})),e.d(t,"Fj",(function(){return ht})),e.d(t,"gh",(function(){return xt})),e.d(t,"Bf",(function(){return yt})),e.d(t,"Gf",(function(){return St})),e.d(t,"tg",(function(){return kt})),e.d(t,"Gb",(function(){return vt})),e.d(t,"we",(function(){return Bt})),e.d(t,"Kh",(function(){return Pt})),e.d(t,"ug",(function(){return It})),e.d(t,"Ld",(function(){return jt})),e.d(t,"Rd",(function(){return At})),e.d(t,"pi",(function(){return Dt})),e.d(t,"zi",(function(){return Tt})),e.d(t,"Ai",(function(){return Ct})),e.d(t,"Hi",(function(){return Mt})),e.d(t,"ji",(function(){return Ft})),e.d(t,"oi",(function(){return Et})),e.d(t,"Fd",(function(){return Rt})),e.d(t,"Bd",(function(){return Lt})),e.d(t,"zd",(function(){return Ot})),e.d(t,"Dd",(function(){return Gt})),e.d(t,"qi",(function(){return Vt})),e.d(t,"ti",(function(){return Wt})),e.d(t,"vi",(function(){return qt})),e.d(t,"Gi",(function(){return zt})),e.d(t,"Fi",(function(){return Ut})),e.d(t,"qe",(function(){return Kt})),e.d(t,"Af",(function(){return Qt})),e.d(t,"q",(function(){return Nt})),e.d(t,"s",(function(){return Xt})),e.d(t,"ib",(function(){return Yt})),e.d(t,"jb",(function(){return Ht})),e.d(t,"Kb",(function(){return Jt})),e.d(t,"Lb",(function(){return Zt})),e.d(t,"Qb",(function(){return $t})),e.d(t,"Rb",(function(){return ne})),e.d(t,"Zd",(function(){return te})),e.d(t,"Yd",(function(){return ee})),e.d(t,"Zh",(function(){return re})),e.d(t,"Pd",(function(){return ue})),e.d(t,"cf",(function(){return fe})),e.d(t,"kg",(function(){return ce})),e.d(t,"lg",(function(){return ie})),e.d(t,"mg",(function(){return oe})),e.d(t,"jg",(function(){return _e})),e.d(t,"Qf",(function(){return de})),e.d(t,"Rf",(function(){return ae})),e.d(t,"cg",(function(){return be})),e.d(t,"bg",(function(){return ge})),e.d(t,"eg",(function(){return we})),e.d(t,"fg",(function(){return se})),e.d(t,"hg",(function(){return le})),e.d(t,"ig",(function(){return me})),e.d(t,"og",(function(){return pe})),e.d(t,"ng",(function(){return he})),e.d(t,"gg",(function(){return xe})),e.d(t,"rg",(function(){return ye})),e.d(t,"Sf",(function(){return Se})),e.d(t,"pg",(function(){return ke})),e.d(t,"qg",(function(){return ve})),e.d(t,"Ag",(function(){return Be})),e.d(t,"zg",(function(){return Pe})),e.d(t,"dg",(function(){return Ie})),e.d(t,"Uf",(function(){return je})),e.d(t,"Tf",(function(){return Ae})),e.d(t,"Zf",(function(){return De})),e.d(t,"Vf",(function(){return Te})),e.d(t,"Wf",(function(){return Ce})),e.d(t,"Xf",(function(){return Me})),e.d(t,"Yf",(function(){return Fe})),e.d(t,"ag",(function(){return Ee})),e.d(t,"tl",(function(){return Re})),e.d(t,"a",(function(){return Le})),e.d(t,"c",(function(){return Oe})),e.d(t,"Uh",(function(){return Ge})),e.d(t,"Sd",(function(){return Ve})),e.d(t,"Ef",(function(){return We})),e.d(t,"wg",(function(){return qe})),e.d(t,"Pk",(function(){return ze})),e.d(t,"Qk",(function(){return Ue})),e.d(t,"Mb",(function(){return Ke})),e.d(t,"jj",(function(){return Qe})),e.d(t,"Eh",(function(){return Ne})),e.d(t,"Dh",(function(){return Xe})),e.d(t,"sl",(function(){return Ye})),e.d(t,"Rk",(function(){return He})),e.d(t,"wl",(function(){return Je})),e.d(t,"tf",(function(){return Ze})),e.d(t,"r",(function(){return $e})),e.d(t,"v",(function(){return nr})),e.d(t,"C",(function(){return tr})),e.d(t,"G",(function(){return er})),e.d(t,"R",(function(){return rr})),e.d(t,"U",(function(){return ur})),e.d(t,"X",(function(){return fr})),e.d(t,"Y",(function(){return cr})),e.d(t,"kb",(function(){return ir})),e.d(t,"lb",(function(){return or})),e.d(t,"mb",(function(){return _r})),e.d(t,"ub",(function(){return dr})),e.d(t,"Db",(function(){return ar})),e.d(t,"Bb",(function(){return br})),e.d(t,"Eb",(function(){return gr})),e.d(t,"Fb",(function(){return wr})),e.d(t,"Jb",(function(){return sr})),e.d(t,"Pb",(function(){return lr})),e.d(t,"gc",(function(){return mr})),e.d(t,"lc",(function(){return pr})),e.d(t,"uc",(function(){return hr})),e.d(t,"Hc",(function(){return xr})),e.d(t,"Kc",(function(){return yr})),e.d(t,"Nc",(function(){return Sr})),e.d(t,"Rc",(function(){return kr})),e.d(t,"rd",(function(){return vr})),e.d(t,"vd",(function(){return Br})),e.d(t,"xd",(function(){return Pr})),e.d(t,"Kd",(function(){return Ir})),e.d(t,"Ud",(function(){return jr})),e.d(t,"ge",(function(){return Ar})),e.d(t,"ne",(function(){return Dr})),e.d(t,"ze",(function(){return Tr})),e.d(t,"Ke",(function(){return Cr})),e.d(t,"Re",(function(){return Mr})),e.d(t,"Se",(function(){return Fr})),e.d(t,"vf",(function(){return Er})),e.d(t,"Gh",(function(){return Rr})),e.d(t,"Hh",(function(){return Lr})),e.d(t,"Jh",(function(){return Or})),e.d(t,"Oh",(function(){return Gr})),e.d(t,"bi",(function(){return Vr})),e.d(t,"ci",(function(){return Wr})),e.d(t,"kj",(function(){return qr})),e.d(t,"mj",(function(){return zr})),e.d(t,"pj",(function(){return Ur})),e.d(t,"qj",(function(){return Kr})),e.d(t,"uj",(function(){return Qr})),e.d(t,"vj",(function(){return Nr})),e.d(t,"rj",(function(){return Xr})),e.d(t,"tj",(function(){return Yr})),e.d(t,"wj",(function(){return Hr})),e.d(t,"zj",(function(){return Jr})),e.d(t,"yj",(function(){return Zr})),e.d(t,"Aj",(function(){return $r})),e.d(t,"xj",(function(){return nu})),e.d(t,"Bj",(function(){return tu})),e.d(t,"Kj",(function(){return eu})),e.d(t,"Lj",(function(){return ru})),e.d(t,"Nj",(function(){return uu})),e.d(t,"Pj",(function(){return fu})),e.d(t,"Qj",(function(){return cu})),e.d(t,"Tj",(function(){return iu})),e.d(t,"Uj",(function(){return ou})),e.d(t,"Xj",(function(){return _u})),e.d(t,"ak",(function(){return du})),e.d(t,"bk",(function(){return au})),e.d(t,"ck",(function(){return bu})),e.d(t,"ek",(function(){return gu})),e.d(t,"fk",(function(){return wu})),e.d(t,"gk",(function(){return su})),e.d(t,"ik",(function(){return lu})),e.d(t,"jk",(function(){return mu})),e.d(t,"kk",(function(){return pu})),e.d(t,"lk",(function(){return hu})),e.d(t,"nk",(function(){return xu})),e.d(t,"ok",(function(){return yu})),e.d(t,"yk",(function(){return Su})),e.d(t,"zk",(function(){return ku})),e.d(t,"g",(function(){return vu})),e.d(t,"o",(function(){return Bu})),e.d(t,"u",(function(){return Pu})),e.d(t,"x",(function(){return Iu})),e.d(t,"y",(function(){return ju})),e.d(t,"A",(function(){return Au})),e.d(t,"D",(function(){return Du})),e.d(t,"H",(function(){return Tu})),e.d(t,"L",(function(){return Cu})),e.d(t,"J",(function(){return Mu})),e.d(t,"P",(function(){return Fu})),e.d(t,"N",(function(){return Eu})),e.d(t,"sb",(function(){return Ru})),e.d(t,"ob",(function(){return Lu})),e.d(t,"qb",(function(){return Ou})),e.d(t,"yb",(function(){return Gu})),e.d(t,"Ab",(function(){return Vu})),e.d(t,"Ob",(function(){return Wu})),e.d(t,"Vb",(function(){return qu})),e.d(t,"bc",(function(){return zu})),e.d(t,"dc",(function(){return Uu})),e.d(t,"jc",(function(){return Ku})),e.d(t,"pc",(function(){return Qu})),e.d(t,"qc",(function(){return Nu})),e.d(t,"zc",(function(){return Xu})),e.d(t,"Cc",(function(){return Yu})),e.d(t,"Ec",(function(){return Hu})),e.d(t,"Gc",(function(){return Ju})),e.d(t,"Ic",(function(){return Zu})),e.d(t,"Lc",(function(){return $u})),e.d(t,"Oc",(function(){return nf})),e.d(t,"Wc",(function(){return tf})),e.d(t,"Xc",(function(){return ef})),e.d(t,"ad",(function(){return rf})),e.d(t,"jd",(function(){return uf})),e.d(t,"hd",(function(){return ff})),e.d(t,"sd",(function(){return cf})),e.d(t,"Jd",(function(){return of})),e.d(t,"Hd",(function(){return _f})),e.d(t,"ce",(function(){return df})),e.d(t,"fe",(function(){return af})),e.d(t,"ie",(function(){return bf})),e.d(t,"ye",(function(){return gf})),e.d(t,"De",(function(){return wf})),e.d(t,"Fe",(function(){return sf})),e.d(t,"Ie",(function(){return lf})),e.d(t,"Me",(function(){return mf})),e.d(t,"Ne",(function(){return pf})),e.d(t,"Pe",(function(){return hf})),e.d(t,"Te",(function(){return xf})),e.d(t,"If",(function(){return yf})),e.d(t,"mh",(function(){return Sf})),e.d(t,"qh",(function(){return kf})),e.d(t,"Qh",(function(){return vf})),e.d(t,"fi",(function(){return Bf})),e.d(t,"Ri",(function(){return Pf})),e.d(t,"aj",(function(){return If})),e.d(t,"dj",(function(){return jf})),e.d(t,"bj",(function(){return Af})),e.d(t,"fj",(function(){return Df})),e.d(t,"nj",(function(){return Tf})),e.d(t,"Hj",(function(){return Cf})),e.d(t,"Jj",(function(){return Mf})),e.d(t,"Vj",(function(){return Ff})),e.d(t,"tk",(function(){return Ef})),e.d(t,"Ak",(function(){return Rf})),e.d(t,"Fk",(function(){return Lf})),e.d(t,"uf",(function(){return Of})),e.d(t,"od",(function(){return Gf})),e.d(t,"Jf",(function(){return Vf})),e.d(t,"Eg",(function(){return Wf})),e.d(t,"fd",(function(){return qf})),e.d(t,"gb",(function(){return zf})),e.d(t,"re",(function(){return Uf})),e.d(t,"Of",(function(){return Kf})),e.d(t,"Xh",(function(){return Qf})),e.d(t,"fb",(function(){return Nf})),e.d(t,"Th",(function(){return Xf})),e.d(t,"rb",(function(){return Yf})),e.d(t,"Ci",(function(){return Hf})),e.d(t,"Bi",(function(){return Jf})),e.d(t,"T",(function(){return Zf})),e.d(t,"Gk",(function(){return $f})),e.d(t,"e",(function(){return nc})),e.d(t,"ke",(function(){return tc})),e.d(t,"Zb",(function(){return ec})),e.d(t,"xe",(function(){return rc})),e.d(t,"Ch",(function(){return uc})),e.d(t,"Bh",(function(){return fc})),e.d(t,"ii",(function(){return cc})),e.d(t,"xi",(function(){return ic})),e.d(t,"Dg",(function(){return oc})),e.d(t,"Wd",(function(){return _c})),e.d(t,"ij",(function(){return dc})),e.d(t,"be",(function(){return ac})),e.d(t,"W",(function(){return bc})),e.d(t,"V",(function(){return gc})),e.d(t,"Z",(function(){return wc})),e.d(t,"Cb",(function(){return sc})),e.d(t,"Ih",(function(){return lc})),e.d(t,"lj",(function(){return mc})),e.d(t,"sj",(function(){return pc})),e.d(t,"Mj",(function(){return hc})),e.d(t,"Oj",(function(){return xc})),e.d(t,"Rj",(function(){return yc})),e.d(t,"Sj",(function(){return Sc})),e.d(t,"Yj",(function(){return kc})),e.d(t,"Zj",(function(){return vc})),e.d(t,"dk",(function(){return Bc})),e.d(t,"hk",(function(){return Pc})),e.d(t,"mk",(function(){return Ic})),e.d(t,"f",(function(){return jc})),e.d(t,"p",(function(){return Ac})),e.d(t,"t",(function(){return Dc})),e.d(t,"w",(function(){return Tc})),e.d(t,"z",(function(){return Cc})),e.d(t,"B",(function(){return Mc})),e.d(t,"E",(function(){return Fc})),e.d(t,"I",(function(){return Ec})),e.d(t,"M",(function(){return Rc})),e.d(t,"K",(function(){return Lc})),e.d(t,"Q",(function(){return Oc})),e.d(t,"O",(function(){return Gc})),e.d(t,"tb",(function(){return Vc})),e.d(t,"nb",(function(){return Wc})),e.d(t,"pb",(function(){return qc})),e.d(t,"xb",(function(){return zc})),e.d(t,"zb",(function(){return Uc})),e.d(t,"Nb",(function(){return Kc})),e.d(t,"Ub",(function(){return Qc})),e.d(t,"ac",(function(){return Nc})),e.d(t,"ec",(function(){return Xc})),e.d(t,"kc",(function(){return Yc})),e.d(t,"oc",(function(){return Hc})),e.d(t,"sc",(function(){return Jc})),e.d(t,"yc",(function(){return Zc})),e.d(t,"Bc",(function(){return $c})),e.d(t,"Dc",(function(){return ni})),e.d(t,"Fc",(function(){return ti})),e.d(t,"Jc",(function(){return ei})),e.d(t,"Mc",(function(){return ri})),e.d(t,"Pc",(function(){return ui})),e.d(t,"Vc",(function(){return fi})),e.d(t,"Yc",(function(){return ci})),e.d(t,"Zc",(function(){return ii})),e.d(t,"id",(function(){return oi})),e.d(t,"gd",(function(){return _i})),e.d(t,"td",(function(){return di})),e.d(t,"Id",(function(){return ai})),e.d(t,"Gd",(function(){return bi})),e.d(t,"de",(function(){return gi})),e.d(t,"ee",(function(){return wi})),e.d(t,"je",(function(){return si})),e.d(t,"Ce",(function(){return li})),e.d(t,"Ge",(function(){return mi})),e.d(t,"He",(function(){return pi})),e.d(t,"Le",(function(){return hi})),e.d(t,"Oe",(function(){return xi})),e.d(t,"Ue",(function(){return yi})),e.d(t,"Hf",(function(){return Si})),e.d(t,"lh",(function(){return ki})),e.d(t,"ph",(function(){return vi})),e.d(t,"Ph",(function(){return Bi})),e.d(t,"gi",(function(){return Pi})),e.d(t,"Qi",(function(){return Ii})),e.d(t,"Zi",(function(){return ji})),e.d(t,"ej",(function(){return Ai})),e.d(t,"cj",(function(){return Di})),e.d(t,"gj",(function(){return Ti})),e.d(t,"oj",(function(){return Ci})),e.d(t,"Gj",(function(){return Mi})),e.d(t,"Ij",(function(){return Fi})),e.d(t,"Wj",(function(){return Ei})),e.d(t,"uk",(function(){return Ri})),e.d(t,"Bk",(function(){return Li})),e.d(t,"Ek",(function(){return Oi})),e.d(t,"qd",(function(){return Gi})),e.d(t,"wd",(function(){return Vi})),e.d(t,"xk",(function(){return Wi})),e.d(t,"Je",(function(){return qi})),e.d(t,"Nh",(function(){return zi})),e.d(t,"yi",(function(){return Ui})),e.d(t,"Ig",(function(){return Ki})),e.d(t,"ld",(function(){return Qi})),e.d(t,"ah",(function(){return Ni})),e.d(t,"l",(function(){return Xi})),e.d(t,"Hb",(function(){return Yi})),e.d(t,"Ve",(function(){return Hi})),e.d(t,"ud",(function(){return Ji})),e.d(t,"Dk",(function(){return Zi})),e.d(t,"Ck",(function(){return $i})),e.d(t,"sh",(function(){return no})),e.d(t,"th",(function(){return to})),e.d(t,"Hg",(function(){return eo})),e.d(t,"he",(function(){return ro})),e.d(t,"wf",(function(){return uo})),e.d(t,"Ib",(function(){return fo})),e.d(t,"ed",(function(){return co})),e.d(t,"kf",(function(){return io})),e.d(t,"S",(function(){return oo})),e.d(t,"Ac",(function(){return _o})),e.d(t,"Od",(function(){return ao})),e.d(t,"Nd",(function(){return bo})),e.d(t,"jf",(function(){return go})),e.d(t,"Lf",(function(){return wo})),e.d(t,"Hk",(function(){return so})),e.d(t,"Ui",(function(){return lo})),e.d(t,"Fg",(function(){return mo})),e.d(t,"d",(function(){return po})),e.d(t,"vb",(function(){return ho})),e.d(t,"uh",(function(){return xo})),e.d(t,"Xi",(function(){return yo})),e.d(t,"Lk",(function(){return So})),e.d(t,"ff",(function(){return ko})),e.d(t,"qf",(function(){return vo})),e.d(t,"Nk",(function(){return Bo})),e.d(t,"Oi",(function(){return Po})),e.d(t,"gf",(function(){return Io})),e.d(t,"Mi",(function(){return jo})),e.d(t,"ue",(function(){return Ao})),e.d(t,"ve",(function(){return Do})),e.d(t,"Kk",(function(){return To})),e.d(t,"hf",(function(){return Co})),e.d(t,"k",(function(){return Mo})),e.d(t,"xc",(function(){return Fo})),e.d(t,"Ti",(function(){return Eo})),e.d(t,"xg",(function(){return Ro})),e.d(t,"Kf",(function(){return Lo})),e.d(t,"Rh",(function(){return Oo})),e.d(t,"zf",(function(){return Go})),e.d(t,"wb",(function(){return Vo})),e.d(t,"Mk",(function(){return Wo})),e.d(t,"Pi",(function(){return qo})),e.d(t,"ef",(function(){return zo})),e.d(t,"Li",(function(){return Uo})),e.d(t,"se",(function(){return Ko})),e.d(t,"te",(function(){return Qo})),e.d(t,"kh",(function(){return No})),e.d(t,"h",(function(){return Xo})),e.d(t,"Lh",(function(){return Yo})),e.d(t,"Jg",(function(){return Ho})),e.d(t,"kd",(function(){return Jo})),e.d(t,"bh",(function(){return Zo})),e.d(t,"ch",(function(){return $o})),e.d(t,"qk",(function(){return n_})),e.d(t,"Mg",(function(){return t_})),e.d(t,"m",(function(){return e_})),e.d(t,"ih",(function(){return r_})),e.d(t,"Tc",(function(){return u_})),e.d(t,"Uc",(function(){return f_})),e.d(t,"Sc",(function(){return c_})),e.d(t,"F",(function(){return i_})),e.d(t,"tc",(function(){return o_})),e.d(t,"Qc",(function(){return __})),e.d(t,"Wg",(function(){return d_})),e.d(t,"sf",(function(){return a_})),e.d(t,"rk",(function(){return b_})),e.d(t,"Yi",(function(){return g_})),e.d(t,"df",(function(){return w_})),e.d(t,"n",(function(){return s_})),e.d(t,"Cj",(function(){return l_})),e.d(t,"Qe",(function(){return m_})),e.d(t,"xh",(function(){return p_})),e.d(t,"sg",(function(){return h_})),e.d(t,"Pf",(function(){return x_})),e.d(t,"i",(function(){return y_})),e.d(t,"Mh",(function(){return S_})),e.d(t,"wc",(function(){return k_})),e.d(t,"Si",(function(){return v_})),e.d(t,"j",(function(){return B_})),e.d(t,"yg",(function(){return P_})),e.d(t,"cb",(function(){return I_})),e.d(t,"db",(function(){return j_})),e.d(t,"Bg",(function(){return A_})),e.d(t,"Cg",(function(){return D_})),e.d(t,"nh",(function(){return T_})),e.d(t,"wh",(function(){return C_})),e.d(t,"oh",(function(){return M_})),e.d(t,"oe",(function(){return F_})),e.d(t,"We",(function(){return E_})),e.d(t,"Df",(function(){return R_})),e.d(t,"Gg",(function(){return L_})),e.d(t,"Og",(function(){return O_})),e.d(t,"Yg",(function(){return G_})),e.d(t,"Xg",(function(){return V_})),e.d(t,"pd",(function(){return W_})),e.d(t,"wk",(function(){return q_})),e.d(t,"yf",(function(){return z_})),e.d(t,"Xe",(function(){return U_})),e.d(t,"eb",(function(){return K_})),e.d(t,"Lg",(function(){return Q_})),e.d(t,"hi",(function(){return N_})),e.d(t,"Ok",(function(){return X_})),e.d(t,"Ye",(function(){return Y_})),e.d(t,"Ze",(function(){return H_})),e.d(t,"if",(function(){return J_})),e.d(t,"dh",(function(){return Z_})),e.d(t,"Ah",(function(){return $_})),e.d(t,"rf",(function(){return nd})),e.d(t,"Be",(function(){return td})),e.d(t,"xf",(function(){return ed})),e.d(t,"vk",(function(){return rd})),e.d(t,"ai",(function(){return ud})),e.d(t,"hb",(function(){return fd})),e.d(t,"Dj",(function(){return cd})),e.d(t,"Ej",(function(){return id})),e.d(t,"ab",(function(){return od})),e.d(t,"Qg",(function(){return _d})),e.d(t,"Tg",(function(){return dd})),e.d(t,"Rg",(function(){return ad})),e.d(t,"Vg",(function(){return bd})),e.d(t,"Kg",(function(){return gd})),e.d(t,"Ji",(function(){return wd})),e.d(t,"Cf",(function(){return sd})),e.d(t,"Ug",(function(){return ld})),e.d(t,"Pg",(function(){return md})),e.d(t,"Sg",(function(){return pd})),e.d(t,"bb",(function(){return hd})),e.d(t,"bf",(function(){return xd})),e.d(t,"Ii",(function(){return yd})),e.d(t,"hj",(function(){return Sd})),e.d(t,"rl",(function(){return kd})),e.d(t,"Cl",(function(){return vd})),e.d(t,"vl",(function(){return Bd})),e.d(t,"kl",(function(){return Pd})),e.d(t,"ll",(function(){return Id})),e.d(t,"ml",(function(){return jd})),e.d(t,"nl",(function(){return Ad})),e.d(t,"ol",(function(){return Dd})),e.d(t,"pl",(function(){return Td})),e.d(t,"ql",(function(){return Cd})),e.d(t,"Tk",(function(){return Md})),e.d(t,"Uk",(function(){return Fd})),e.d(t,"Vk",(function(){return Ed})),e.d(t,"Wk",(function(){return Rd})),e.d(t,"Xk",(function(){return Ld})),e.d(t,"Yk",(function(){return Od})),e.d(t,"Zk",(function(){return Gd})),e.d(t,"al",(function(){return Vd})),e.d(t,"bl",(function(){return Wd})),e.d(t,"cl",(function(){return qd})),e.d(t,"dl",(function(){return zd})),e.d(t,"el",(function(){return Ud})),e.d(t,"fl",(function(){return Kd})),e.d(t,"gl",(function(){return Qd})),e.d(t,"hl",(function(){return Nd})),e.d(t,"il",(function(){return Xd})),e.d(t,"jl",(function(){return Yd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=0,d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}let b=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof b.encodeInto?function(n,t){return b.encodeInto(n,t)}:function(n,t){const e=b.encode(n);return t.set(e),{read:n.length,written:e.length}};function w(n,t,e){if(void 0===e){const e=b.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),_=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=g(n,t).written,u=e(u,r,c,1)>>>0}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}function p(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=n,t}let h=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function x(n,t){return n>>>=0,h.decode(a().subarray(n,n+t))}h.decode();let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h7590a694eefaf8db(n,t,p(e))}function B(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hf190f30469916d04(n,t,p(e),p(u))}function P(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2274ceaa8d10d396(n,t)}function I(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h024eb7d9c1801afe(n,t,p(e))}function j(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2fa4fb8c9d7ff90b(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hf255a53d0f0e0ed1(n,t,p(e),p(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,p(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,p(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,p(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(p(n))}}function W(n){o(n)}function q(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function z(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return void 0===c(n)}function K(n){return p(c(n))}function Q(n,t){return p(x(n,t))}function N(){return p(new Error)}function X(n,t){const e=w(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Y(n,t){let e,u;try{e=n,u=t,console.error(x(n,t))}finally{r.__wbindgen_free(e,u,1)}}function H(n){return p(fetch(c(n)))}function J(n){return c(n).offsetX}function Z(n){return c(n).offsetY}function $(n){return p(c(n).Window)}function nn(n){const t=c(n).webkitFullscreenElement;return s(t)?0:p(t)}function tn(){return p(ResizeObserverEntry.prototype)}function en(n){return p(c(n).scheduler)}function rn(n){return p(c(n).getCoalescedEvents)}function un(n){return p(c(n).requestFullscreen)}function fn(n){return p(c(n).requestIdleCallback)}function cn(n){return p(c(n).onpointerrawupdate)}function on(n){c(n).webkitRequestFullscreen()}function _n(n){return p(c(n).requestFullscreen())}function dn(n){return p(c(n).scheduler)}function an(n,t,e){return p(c(n).postTask(c(t),c(e)))}function bn(n){return p(n)}function gn(n){return p(c(n).performance)}function wn(n){return c(n).now()}function sn(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function mn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function pn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function hn(n){return c(n).size}function xn(n){return c(n).usage}function yn(n){c(n).destroy()}function Sn(n,t,e){return p(c(n).getMappedRange(t,e))}function kn(n,t,e,r){return p(c(n).mapAsync(t>>>0,e,r))}function vn(n){c(n).unmap()}function Bn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function Pn(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function In(n){c(n).end()}function jn(n,t){c(n).setPipeline(c(t))}function An(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Dn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Tn(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Cn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function Mn(n){return p(c(n).gpu)}function Fn(n){return p(c(n).getPreferredCanvasFormat())}function En(n,t){return p(c(n).requestAdapter(c(t)))}function Rn(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Ln(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function On(n){return p(c(n).finish())}function Gn(n,t){return p(c(n).finish(c(t)))}function Vn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Wn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function qn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function zn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Un(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Kn(n,t,e){c(n).drawIndirect(c(t),e)}function Qn(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Nn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Xn(n,t){c(n).setPipeline(c(t))}function Yn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Hn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Jn(n){return p(c(n).features)}function Zn(n){return p(c(n).limits)}function $n(n){return p(c(n).queue)}function nt(n){return p(c(n).lost)}function tt(n,t){c(n).onuncapturederror=c(t)}function et(n,t){return p(c(n).createBindGroup(c(t)))}function rt(n,t){return p(c(n).createBindGroupLayout(c(t)))}function ut(n,t){return p(c(n).createBuffer(c(t)))}function ft(n,t){return p(c(n).createCommandEncoder(c(t)))}function ct(n,t){return p(c(n).createComputePipeline(c(t)))}function it(n,t){return p(c(n).createPipelineLayout(c(t)))}function ot(n,t){return p(c(n).createQuerySet(c(t)))}function _t(n,t){return p(c(n).createRenderBundleEncoder(c(t)))}function dt(n,t){return p(c(n).createRenderPipeline(c(t)))}function at(n,t){return p(c(n).createSampler(c(t)))}function bt(n,t){return p(c(n).createShaderModule(c(t)))}function gt(n,t){return p(c(n).createTexture(c(t)))}function wt(n){c(n).destroy()}function st(n){return p(c(n).popErrorScope())}function lt(n,t){c(n).pushErrorScope(o(t))}function mt(n,t){return p(c(n).createView(c(t)))}function pt(n){c(n).destroy()}function ht(n){return p(c(n).type)}function xt(n){return c(n).offset}function yt(n){return c(n).length}function St(n){return c(n).lineNum}function kt(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function vt(n,t){c(n).configure(c(t))}function Bt(n){return p(c(n).getCurrentTexture())}function Pt(n){return p(c(n).reason)}function It(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function jt(n){c(n).end()}function At(n,t){c(n).executeBundles(c(t))}function Dt(n,t){c(n).setBlendConstant(c(t))}function Tt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Ct(n,t){c(n).setStencilReference(t>>>0)}function Mt(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Ft(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Et(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Rt(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Lt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Ot(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Gt(n,t,e){c(n).drawIndirect(c(t),e)}function Vt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Wt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function qt(n,t){c(n).setPipeline(c(t))}function zt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Ut(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Kt(n){return p(c(n).getCompilationInfo())}function Qt(n,t){const e=w(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Nt(n,t){return p(c(n).beginComputePass(c(t)))}function Xt(n,t){return p(c(n).beginRenderPass(c(t)))}function Yt(n,t,e){c(n).clearBuffer(c(t),e)}function Ht(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Jt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Zt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function $t(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function ne(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function te(n){return p(c(n).finish())}function ee(n,t){return p(c(n).finish(c(t)))}function re(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function ue(n){return p(c(n).error)}function fe(n,t,e){return c(n).has(x(t,e))}function ce(n){return c(n).maxTextureDimension1D}function ie(n){return c(n).maxTextureDimension2D}function oe(n){return c(n).maxTextureDimension3D}function _e(n){return c(n).maxTextureArrayLayers}function de(n){return c(n).maxBindGroups}function ae(n){return c(n).maxBindingsPerBindGroup}function be(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function ge(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function we(n){return c(n).maxSampledTexturesPerShaderStage}function se(n){return c(n).maxSamplersPerShaderStage}function le(n){return c(n).maxStorageBuffersPerShaderStage}function me(n){return c(n).maxStorageTexturesPerShaderStage}function pe(n){return c(n).maxUniformBuffersPerShaderStage}function he(n){return c(n).maxUniformBufferBindingSize}function xe(n){return c(n).maxStorageBufferBindingSize}function ye(n){return c(n).maxVertexBuffers}function Se(n){return c(n).maxBufferSize}function ke(n){return c(n).maxVertexAttributes}function ve(n){return c(n).maxVertexBufferArrayStride}function Be(n){return c(n).minUniformBufferOffsetAlignment}function Pe(n){return c(n).minStorageBufferOffsetAlignment}function Ie(n){return c(n).maxInterStageShaderComponents}function je(n){return c(n).maxColorAttachments}function Ae(n){return c(n).maxColorAttachmentBytesPerSample}function De(n){return c(n).maxComputeWorkgroupStorageSize}function Te(n){return c(n).maxComputeInvocationsPerWorkgroup}function Ce(n){return c(n).maxComputeWorkgroupSizeX}function Me(n){return c(n).maxComputeWorkgroupSizeY}function Fe(n){return c(n).maxComputeWorkgroupSizeZ}function Ee(n){return c(n).maxComputeWorkgroupsPerDimension}function Re(n){const t=c(n);return"object"==typeof t&&null!==t}function Le(n){return p(c(n).Window)}function Oe(n){return p(c(n).WorkerGlobalScope)}function Ge(n,t){return p(c(n).requestDevice(c(t)))}function Ve(n){return p(c(n).features)}function We(n){return p(c(n).limits)}function qe(n){return p(c(n).messages)}function ze(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Ue(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ke(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Qe(n,t){c(n).submit(c(t))}function Ne(n){queueMicrotask(c(n))}function Xe(n){return p(c(n).queueMicrotask)}function Ye(n){return"function"==typeof c(n)}function He(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Je(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function Ze(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function $e(n,t,e){c(n).beginQuery(t>>>0,c(e))}function nr(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function tr(n,t,e){c(n).bindSampler(t>>>0,c(e))}function er(n,t){c(n).bindVertexArray(c(t))}function rr(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function ur(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function fr(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function cr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function ir(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function or(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function _r(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function dr(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function ar(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function br(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function gr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function wr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function sr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function lr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function mr(n){const t=c(n).createQuery();return s(t)?0:p(t)}function pr(n){const t=c(n).createSampler();return s(t)?0:p(t)}function hr(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function xr(n,t){c(n).deleteQuery(c(t))}function yr(n,t){c(n).deleteSampler(c(t))}function Sr(n,t){c(n).deleteSync(c(t))}function kr(n,t){c(n).deleteVertexArray(c(t))}function vr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function Br(n,t){c(n).drawBuffers(c(t))}function Pr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function Ir(n,t){c(n).endQuery(t>>>0)}function jr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return s(r)?0:p(r)}function Ar(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Dr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Tr(){return V((function(n,t,e){return p(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Cr(n,t,e){return p(c(n).getQueryParameter(c(t),e>>>0))}function Mr(n,t,e){return p(c(n).getSyncParameter(c(t),e>>>0))}function Fr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),x(e,r))}function Er(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Rr(n,t){c(n).readBuffer(t>>>0)}function Lr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Or(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Gr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Vr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Wr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Ur(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Kr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function nu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function tu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function eu(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function ru(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function uu(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function fu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function cu(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function iu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function ou(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function _u(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function du(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function au(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function bu(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function gu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function hu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function xu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function yu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function Su(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ku(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function vu(n,t){c(n).activeTexture(t>>>0)}function Bu(n,t,e){c(n).attachShader(c(t),c(e))}function Pu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function Iu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function ju(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Au(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Du(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Tu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Cu(n,t){c(n).blendEquation(t>>>0)}function Mu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Fu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Eu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ru(n,t){c(n).clear(t>>>0)}function Lu(n,t){c(n).clearDepth(t)}function Ou(n,t){c(n).clearStencil(t)}function Gu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Vu(n,t){c(n).compileShader(c(t))}function Wu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function qu(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function zu(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Uu(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Ku(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Qu(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Nu(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Xu(n,t){c(n).cullFace(t>>>0)}function Yu(n,t){c(n).deleteBuffer(c(t))}function Hu(n,t){c(n).deleteFramebuffer(c(t))}function Ju(n,t){c(n).deleteProgram(c(t))}function Zu(n,t){c(n).deleteRenderbuffer(c(t))}function $u(n,t){c(n).deleteShader(c(t))}function nf(n,t){c(n).deleteTexture(c(t))}function tf(n,t){c(n).depthFunc(t>>>0)}function ef(n,t){c(n).depthMask(0!==t)}function rf(n,t,e){c(n).depthRange(t,e)}function uf(n,t){c(n).disable(t>>>0)}function ff(n,t){c(n).disableVertexAttribArray(t>>>0)}function cf(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function of(n,t){c(n).enable(t>>>0)}function _f(n,t){c(n).enableVertexAttribArray(t>>>0)}function df(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function af(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function bf(n,t){c(n).frontFace(t>>>0)}function gf(){return V((function(n,t,e){const r=c(n).getExtension(x(t,e));return s(r)?0:p(r)}),arguments)}function wf(){return V((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function sf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function lf(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function mf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function pf(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function hf(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function xf(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function yf(n,t){c(n).linkProgram(c(t))}function Sf(n,t,e){c(n).pixelStorei(t>>>0,e)}function kf(n,t,e){c(n).polygonOffset(t,e)}function vf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Bf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Pf(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function If(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function jf(n,t){c(n).stencilMask(t>>>0)}function Af(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Df(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Tf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Cf(n,t,e){c(n).uniform1f(c(t),e)}function Mf(n,t,e){c(n).uniform1i(c(t),e)}function Ff(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ef(n,t){c(n).useProgram(c(t))}function Rf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Lf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Of(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Gf(n){const t=c(n).document;return s(t)?0:p(t)}function Vf(n){return p(c(n).location)}function Wf(n){return p(c(n).navigator)}function qf(n){return c(n).devicePixelRatio}function zf(n,t){c(n).cancelIdleCallback(t>>>0)}function Uf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return s(e)?0:p(e)}),arguments)}function Kf(){return V((function(n,t,e){const r=c(n).matchMedia(x(t,e));return s(r)?0:p(r)}),arguments)}function Qf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Nf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Xf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Yf(n,t){c(n).clearTimeout(t)}function Hf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Jf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Zf(n){const t=c(n).body;return s(t)?0:p(t)}function $f(n){return p(c(n).visibilityState)}function nc(n){const t=c(n).activeElement;return s(t)?0:p(t)}function tc(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function ec(){return V((function(n,t,e){return p(c(n).createElement(x(t,e)))}),arguments)}function rc(n,t,e){const r=c(n).getElementById(x(t,e));return s(r)?0:p(r)}function uc(){return V((function(n,t,e){const r=c(n).querySelector(x(t,e));return s(r)?0:p(r)}),arguments)}function fc(){return V((function(n,t,e){return p(c(n).querySelectorAll(x(t,e)))}),arguments)}function cc(){return V((function(n,t,e,r,u){c(n).setAttribute(x(t,e),x(r,u))}),arguments)}function ic(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function oc(n){return p(c(n).navigator)}function _c(n,t){return p(c(n).fetch(c(t)))}function dc(n){return p(c(n).style)}function ac(){return V((function(n){c(n).focus()}),arguments)}function bc(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function gc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function wc(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function sc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function lc(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function mc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function pc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function hc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function xc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function yc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function Sc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function kc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function vc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function Bc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function Pc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function Ic(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function jc(n,t){c(n).activeTexture(t>>>0)}function Ac(n,t,e){c(n).attachShader(c(t),c(e))}function Dc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function Tc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Cc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Mc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Fc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Ec(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Rc(n,t){c(n).blendEquation(t>>>0)}function Lc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Oc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Gc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Vc(n,t){c(n).clear(t>>>0)}function Wc(n,t){c(n).clearDepth(t)}function qc(n,t){c(n).clearStencil(t)}function zc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Uc(n,t){c(n).compileShader(c(t))}function Kc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Qc(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function Nc(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Xc(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Yc(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Hc(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Jc(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Zc(n,t){c(n).cullFace(t>>>0)}function $c(n,t){c(n).deleteBuffer(c(t))}function ni(n,t){c(n).deleteFramebuffer(c(t))}function ti(n,t){c(n).deleteProgram(c(t))}function ei(n,t){c(n).deleteRenderbuffer(c(t))}function ri(n,t){c(n).deleteShader(c(t))}function ui(n,t){c(n).deleteTexture(c(t))}function fi(n,t){c(n).depthFunc(t>>>0)}function ci(n,t){c(n).depthMask(0!==t)}function ii(n,t,e){c(n).depthRange(t,e)}function oi(n,t){c(n).disable(t>>>0)}function _i(n,t){c(n).disableVertexAttribArray(t>>>0)}function di(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ai(n,t){c(n).enable(t>>>0)}function bi(n,t){c(n).enableVertexAttribArray(t>>>0)}function gi(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function wi(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function si(n,t){c(n).frontFace(t>>>0)}function li(){return V((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function mi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function pi(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function hi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function xi(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function yi(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function Si(n,t){c(n).linkProgram(c(t))}function ki(n,t,e){c(n).pixelStorei(t>>>0,e)}function vi(n,t,e){c(n).polygonOffset(t,e)}function Bi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Pi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Ii(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function ji(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Ai(n,t){c(n).stencilMask(t>>>0)}function Di(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Ti(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ci(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Mi(n,t,e){c(n).uniform1f(c(t),e)}function Fi(n,t,e){c(n).uniform1i(c(t),e)}function Ei(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ri(n,t){c(n).useProgram(c(t))}function Li(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Oi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Gi(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Vi(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Wi(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function qi(){return V((function(n,t,e,u){const f=w(c(t).getPropertyValue(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function zi(){return V((function(n,t,e,u){const f=w(c(t).removeProperty(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Ui(){return V((function(n,t,e,r,u){c(n).setProperty(x(t,e),x(r,u))}),arguments)}function Ki(){return V((function(n){return p(new IntersectionObserver(c(n)))}),arguments)}function Qi(n){c(n).disconnect()}function Ni(n,t){c(n).observe(c(t))}function Xi(){return V((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function Yi(n,t){return c(n).contains(c(t))}function Hi(n,t){const e=c(n)[t>>>0];return s(e)?0:p(e)}function Ji(n,t){c(n).drawBuffersWEBGL(c(t))}function Zi(n){return c(n).videoWidth}function $i(n){return c(n).videoHeight}function no(n){return p(c(n).port1)}function to(n){return p(c(n).port2)}function eo(){return V((function(){return p(new MessageChannel)}),arguments)}function ro(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function uo(n){return c(n).isIntersecting}function fo(n){return p(c(n).contentRect)}function co(n){return p(c(n).devicePixelContentBoxSize)}function io(n){return c(n).inlineSize}function oo(n){return c(n).blockSize}function _o(n){console.debug(c(n))}function ao(n){console.error(c(n))}function bo(n,t){console.error(c(n),c(t))}function go(n){console.info(c(n))}function wo(n){console.log(c(n))}function so(n){console.warn(c(n))}function lo(n){return p(c(n).signal)}function mo(){return V((function(){return p(new AbortController)}),arguments)}function po(n){c(n).abort()}function ho(n){c(n).close()}function xo(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function yo(n){c(n).start()}function So(n){return c(n).width}function ko(n){return c(n).height}function vo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function Bo(n){return c(n).width}function Po(n,t){c(n).width=t>>>0}function Io(n){return c(n).height}function jo(n,t){c(n).height=t>>>0}function Ao(){return V((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function Do(){return V((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function To(n){return c(n).width}function Co(n){return c(n).height}function Mo(n){return c(n).altKey}function Fo(n){return c(n).ctrlKey}function Eo(n){return c(n).shiftKey}function Ro(n){return c(n).metaKey}function Lo(n){return c(n).location}function Oo(n){return c(n).repeat}function Go(n,t){const e=w(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Vo(n,t){const e=w(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Wo(n){return c(n).width}function qo(n,t){c(n).width=t>>>0}function zo(n){return c(n).height}function Uo(n,t){c(n).height=t>>>0}function Ko(){return V((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function Qo(){return V((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function No(n){return c(n).persisted}function Xo(){return V((function(n,t,e,r){c(n).addEventListener(x(t,e),c(r))}),arguments)}function Yo(){return V((function(n,t,e,r){c(n).removeEventListener(x(t,e),c(r))}),arguments)}function Ho(){return V((function(n){return p(new ResizeObserver(c(n)))}),arguments)}function Jo(n){c(n).disconnect()}function Zo(n,t){c(n).observe(c(t))}function $o(n,t,e){c(n).observe(c(t),c(e))}function n_(n,t){c(n).unobserve(c(t))}function t_(){return V((function(){return p(new Headers)}),arguments)}function e_(){return V((function(n,t,e,r,u){c(n).append(x(t,e),x(r,u))}),arguments)}function r_(){return V((function(n,t){const e=w(c(t).origin,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}),arguments)}function u_(n){return c(n).deltaX}function f_(n){return c(n).deltaY}function c_(n){return c(n).deltaMode}function i_(n,t){c(n).bindVertexArrayOES(c(t))}function o_(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function __(n,t){c(n).deleteVertexArrayOES(c(t))}function d_(){return V((function(n,t,e){return p(new Request(x(n,t),c(e)))}),arguments)}function a_(n){let t;try{t=c(n)instanceof Response}catch(n){t=!1}return t}function b_(n,t){const e=w(c(t).url,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function g_(n){return c(n).status}function w_(n){return p(c(n).headers)}function s_(){return V((function(n){return p(c(n).arrayBuffer())}),arguments)}function l_(){return V((function(n){return p(c(n).text())}),arguments)}function m_(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function p_(n){c(n).preventDefault()}function h_(n,t){const e=w(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function x_(n){return c(n).matches}function y_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function S_(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function k_(n){return c(n).ctrlKey}function v_(n){return c(n).shiftKey}function B_(n){return c(n).altKey}function P_(n){return c(n).metaKey}function I_(n){return c(n).button}function j_(n){return c(n).buttons}function A_(n){return c(n).movementX}function D_(n){return c(n).movementY}function T_(n){return c(n).pointerId}function C_(n){return c(n).pressure}function M_(n,t){const e=w(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function F_(n){return p(c(n).getCoalescedEvents())}function E_(n,t){return p(c(n)[t>>>0])}function R_(n){return c(n).length}function L_(){return p(new Array)}function O_(n,t){return p(new Function(x(n,t)))}function G_(n){return p(c(n).next)}function V_(){return V((function(n){return p(c(n).next())}),arguments)}function W_(n){return c(n).done}function q_(n){return p(c(n).value)}function z_(){return p(Symbol.iterator)}function U_(){return V((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function K_(){return V((function(n,t){return p(c(n).call(c(t)))}),arguments)}function Q_(){return p(new Object)}function N_(){return V((function(){return p(self.self)}),arguments)}function X_(){return V((function(){return p(window.window)}),arguments)}function Y_(){return V((function(){return p(globalThis.globalThis)}),arguments)}function H_(){return V((function(){return p(global.global)}),arguments)}function J_(n,t,e){return c(n).includes(c(t),e)}function Z_(n){return p(Array.of(c(n)))}function $_(n,t){return c(n).push(c(t))}function nd(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function td(n,t){return p(Object.getOwnPropertyDescriptor(c(n),c(t)))}function ed(n,t){return Object.is(c(n),c(t))}function rd(n){return p(c(n).valueOf())}function ud(n){return p(Promise.resolve(c(n)))}function fd(n,t){return p(c(n).catch(c(t)))}function cd(n,t){return p(c(n).then(c(t)))}function id(n,t,e){return p(c(n).then(c(t),c(e)))}function od(n){return p(c(n).buffer)}function _d(n,t,e){return p(new Int8Array(c(n),t>>>0,e>>>0))}function dd(n,t,e){return p(new Int16Array(c(n),t>>>0,e>>>0))}function ad(n,t,e){return p(new Int32Array(c(n),t>>>0,e>>>0))}function bd(n,t,e){return p(new Uint8Array(c(n),t>>>0,e>>>0))}function gd(n){return p(new Uint8Array(c(n)))}function wd(n,t,e){c(n).set(c(t),e>>>0)}function sd(n){return c(n).length}function ld(n,t,e){return p(new Uint16Array(c(n),t>>>0,e>>>0))}function md(n,t,e){return p(new Uint32Array(c(n),t>>>0,e>>>0))}function pd(n,t,e){return p(new Float32Array(c(n),t>>>0,e>>>0))}function hd(n){return p(c(n).buffer)}function xd(){return V((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function yd(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function Sd(){return V((function(n){return p(JSON.stringify(c(n)))}),arguments)}function kd(n,t){const e=w(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=_;m()[n/4+1]=u,m()[n/4+0]=e}function vd(n,t){throw new Error(x(n,t))}function Bd(){return p(r.memory)}function Pd(n,t,e){return p(k(n,t,49,v))}function Id(n,t,e){return p(k(n,t,49,B))}function jd(n,t,e){return p(k(n,t,49,v))}function Ad(n,t,e){return p(k(n,t,49,v))}function Dd(n,t,e){return p(k(n,t,49,P))}function Td(n,t,e){return p(k(n,t,49,v))}function Cd(n,t,e){return p(k(n,t,49,v))}function Md(n,t,e){return p(k(n,t,280,I))}function Fd(n,t,e){return p(k(n,t,280,I))}function Ed(n,t,e){return p(k(n,t,280,I))}function Rd(n,t,e){return p(k(n,t,280,I))}function Ld(n,t,e){return p(k(n,t,280,j))}function Od(n,t,e){return p(k(n,t,280,A))}function Gd(n,t,e){return p(k(n,t,280,I))}function Vd(n,t,e){return p(k(n,t,892,D))}function Wd(n,t,e){return p(k(n,t,892,D))}function qd(n,t,e){return p(k(n,t,892,T))}function zd(n,t,e){return p(k(n,t,892,D))}function Ud(n,t,e){return p(k(n,t,892,D))}function Kd(n,t,e){return p(k(n,t,892,D))}function Qd(n,t,e){return p(k(n,t,892,D))}function Nd(n,t,e){return p(k(n,t,2027,C))}function Xd(n,t,e){return p(k(n,t,2027,C))}function Yd(n,t,e){return p(k(n,t,2204,M))}}).call(this,e(260)(n))},386:function(n,t,e){"use strict";e.r(t);var r=e(387),u=e(246);e.d(t,"__wbg_set_wasm",(function(){return u.Ki})),e.d(t,"run",(function(){return u.Dl})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.zl})),e.d(t,"__wbindgen_string_get",(function(){return u.Al})),e.d(t,"__wbindgen_cb_drop",(function(){return u.Sk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.ul})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.yl})),e.d(t,"__wbindgen_string_new",(function(){return u.Bl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Ng})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Wi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Qd})),e.d(t,"__wbg_fetch_386f87a3ebf5003c",(function(){return u.Vd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.eh})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.fh})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.Ik})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.yh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.ei})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.pe})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Vh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Yh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.hh})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.Jk})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Wh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.di})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.vh})),e.d(t,"__wbindgen_number_new",(function(){return u.xl})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.jh})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Zg})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.nf})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.mf})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.pf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.of})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Vi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.sk})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.bd})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.Ae})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Nf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.pk})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.nd})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.md})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Md})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.ui})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.li})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.ni})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.me})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.lf})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.af})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.Ee})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Sh})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.le})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.vg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Xd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.ae})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.mi})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.ki})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Ed})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.Cd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.ri})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.si})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.wi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.Ei})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.Di})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Td})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.Ff})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.Fh})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Mf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.Ni})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Tb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Sb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Wb})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Xb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Yb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.cc})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.fc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.hc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.ic})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.mc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.nc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.rc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.cd})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.rh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.zh})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.vc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.dd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.Fj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.gh})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.Bf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.Gf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.tg})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Gb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.we})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.Kh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.ug})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Ld})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Rd})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.pi})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.zi})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.Ai})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.Hi})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.ji})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.oi})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Fd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Dd})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.qi})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.ti})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.vi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.Gi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.Fi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.qe})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.Af})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.q})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.s})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.ib})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.jb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Kb})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Lb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Qb})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Rb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Zd})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Yd})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.Zh})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Pd})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.cf})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.kg})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.lg})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.mg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.jg})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Qf})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.cg})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.bg})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.eg})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.fg})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.hg})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.ig})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.og})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.ng})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.gg})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.rg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Sf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.pg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.qg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.Ag})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.zg})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.dg})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Uf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.Tf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Zf})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Vf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Wf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Xf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Yf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.ag})),e.d(t,"__wbindgen_is_object",(function(){return u.tl})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Uh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Sd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.Ef})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.wg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.Pk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.Qk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Mb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.jj})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.Eh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.Dh})),e.d(t,"__wbindgen_is_function",(function(){return u.sl})),e.d(t,"__wbindgen_boolean_get",(function(){return u.Rk})),e.d(t,"__wbindgen_number_get",(function(){return u.wl})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.tf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.r})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.v})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.C})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.G})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.R})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.U})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.X})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.Y})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.kb})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.lb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.mb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.ub})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Eb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Fb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Jb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Pb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.gc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.lc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.uc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Hc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Kc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Nc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Rc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.rd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.vd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.xd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Kd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Ud})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ge})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ne})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ze})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Ke})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Re})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Se})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.vf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.Gh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.Hh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.Jh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.Oh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.bi})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.ci})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.kj})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.mj})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.pj})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.qj})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.uj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.vj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.rj})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.tj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.wj})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.zj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.yj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Aj})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.xj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Bj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.Kj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.Lj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.Nj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.Pj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.Qj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Tj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Uj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Xj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.ak})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.bk})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.ck})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.ek})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.fk})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.gk})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.ik})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.jk})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.kk})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.lk})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.nk})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.ok})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.yk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.zk})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.o})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.u})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.x})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.y})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.A})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.D})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.H})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.L})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.J})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.P})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.N})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.sb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.ob})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.qb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.yb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.Ab})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Ob})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Vb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.bc})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.jc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.pc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.qc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.zc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Cc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Ec})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Gc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Wc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.ad})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.jd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.hd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.sd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Jd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Hd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.ce})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.fe})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ie})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.ye})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.De})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Fe})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.Ie})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.Me})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ne})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Pe})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Te})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.If})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.mh})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.qh})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Qh})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.fi})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Ri})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.aj})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.dj})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.bj})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.fj})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.nj})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.Hj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.Jj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Vj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.tk})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Ak})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Fk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.uf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.od})),e.d(t,"__wbg_location_2951b5ee34f19221",(function(){return u.Jf})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.Eg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.fd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.gb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.re})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Of})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Xh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.fb})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Th})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.rb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.Ci})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.Bi})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.T})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Gk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ke})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Zb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.xe})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.Ch})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.Bh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.ii})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.xi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.Dg})),e.d(t,"__wbg_fetch_921fad6ef9e883dd",(function(){return u.Wd})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.ij})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.be})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.W})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.Z})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Cb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.Ih})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.lj})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.sj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.Mj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.Oj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.Rj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.Sj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Yj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Zj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.dk})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.hk})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.mk})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.p})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.t})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.w})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.z})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.B})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.E})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.I})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.M})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.K})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.Q})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.O})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.tb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.pb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.xb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.ac})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.ec})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.kc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.oc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.sc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Jc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Mc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Pc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Yc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Zc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.td})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Id})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Gd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.de})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ee})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.je})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.Ce})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Ge})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.He})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Le})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Oe})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Ue})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.Hf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.lh})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.ph})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.Ph})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.gi})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Qi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Zi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.ej})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.cj})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.gj})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.oj})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.Gj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.Ij})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Wj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.uk})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Bk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Ek})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.qd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.wd})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.xk})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Je})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Nh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.yi})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.Ig})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.ld})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.ah})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Hb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Ve})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.ud})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Dk})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Ck})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.sh})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.th})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.Hg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.he})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.wf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Ib})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.ed})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.kf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.S})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.Ac})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Od})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Nd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.jf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Lf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.Hk})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ui})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.Fg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.vb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.uh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Xi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.Lk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.ff})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.qf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.Nk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.Oi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.gf})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.Mi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.ue})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.ve})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.Kk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.hf})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.xc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Ti})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.xg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.Kf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Rh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.zf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.wb})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.Mk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.Pi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.ef})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.Li})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.se})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.te})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.kh})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Lh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.Jg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.kd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.bh})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.ch})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.qk})),e.d(t,"__wbg_new_ab6fd82b10560829",(function(){return u.Mg})),e.d(t,"__wbg_append_7bfcb4937d1d5e29",(function(){return u.m})),e.d(t,"__wbg_origin_ee93e29ace71f568",(function(){return u.ih})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Tc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Uc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Sc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.F})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.tc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Qc})),e.d(t,"__wbg_newwithstrandinit_3fd6fba4083ff2d0",(function(){return u.Wg})),e.d(t,"__wbg_instanceof_Response_849eb93e75734b6e",(function(){return u.sf})),e.d(t,"__wbg_url_5f6dc4009ac5f99d",(function(){return u.rk})),e.d(t,"__wbg_status_61a01141acd3cf74",(function(){return u.Yi})),e.d(t,"__wbg_headers_9620bfada380764a",(function(){return u.df})),e.d(t,"__wbg_arrayBuffer_29931d52c7206b02",(function(){return u.n})),e.d(t,"__wbg_text_450a059667fd91fd",(function(){return u.Cj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Qe})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.xh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.sg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Pf})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Mh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Si})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.yg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.cb})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.db})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.Bg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.Cg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.nh})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.wh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.oh})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.oe})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.We})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.Df})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.Gg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Og})),e.d(t,"__wbg_next_40fc327bfc8770e6",(function(){return u.Yg})),e.d(t,"__wbg_next_196c84450b364254",(function(){return u.Xg})),e.d(t,"__wbg_done_298b57d23c0fc80c",(function(){return u.pd})),e.d(t,"__wbg_value_d93c65011f51a456",(function(){return u.wk})),e.d(t,"__wbg_iterator_2cee6dadfd956dfa",(function(){return u.yf})),e.d(t,"__wbg_get_e3c254076557e348",(function(){return u.Xe})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.eb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Lg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.hi})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.Ok})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Ye})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Ze})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.if})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.dh})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.Ah})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.rf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Be})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.xf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.vk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.ai})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.hb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Dj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.Ej})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.ab})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Qg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Tg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Rg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Vg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.Kg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.Ji})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.Cf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Pg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Sg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.bb})),e.d(t,"__wbg_has_0af94d20077affa2",(function(){return u.bf})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.Ii})),e.d(t,"__wbg_stringify_8887fe74e1c50d81",(function(){return u.hj})),e.d(t,"__wbindgen_debug_string",(function(){return u.rl})),e.d(t,"__wbindgen_throw",(function(){return u.Cl})),e.d(t,"__wbindgen_memory",(function(){return u.vl})),e.d(t,"__wbindgen_closure_wrapper642",(function(){return u.kl})),e.d(t,"__wbindgen_closure_wrapper643",(function(){return u.ll})),e.d(t,"__wbindgen_closure_wrapper644",(function(){return u.ml})),e.d(t,"__wbindgen_closure_wrapper645",(function(){return u.nl})),e.d(t,"__wbindgen_closure_wrapper646",(function(){return u.ol})),e.d(t,"__wbindgen_closure_wrapper647",(function(){return u.pl})),e.d(t,"__wbindgen_closure_wrapper648",(function(){return u.ql})),e.d(t,"__wbindgen_closure_wrapper1114",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper1115",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper1116",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper1117",(function(){return u.Wk})),e.d(t,"__wbindgen_closure_wrapper1118",(function(){return u.Xk})),e.d(t,"__wbindgen_closure_wrapper1119",(function(){return u.Yk})),e.d(t,"__wbindgen_closure_wrapper1120",(function(){return u.Zk})),e.d(t,"__wbindgen_closure_wrapper2454",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper2455",(function(){return u.bl})),e.d(t,"__wbindgen_closure_wrapper2456",(function(){return u.cl})),e.d(t,"__wbindgen_closure_wrapper2457",(function(){return u.dl})),e.d(t,"__wbindgen_closure_wrapper2458",(function(){return u.el})),e.d(t,"__wbindgen_closure_wrapper2459",(function(){return u.fl})),e.d(t,"__wbindgen_closure_wrapper2460",(function(){return u.gl})),e.d(t,"__wbindgen_closure_wrapper4539",(function(){return u.hl})),e.d(t,"__wbindgen_closure_wrapper4541",(function(){return u.il})),e.d(t,"__wbindgen_closure_wrapper5274",(function(){return u.jl})),Object(u.Ki)(r),r.__wbindgen_start()},387:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(246);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/24.c0a67efd.js b/assets/js/24.c0a67efd.js deleted file mode 100644 index 373f678bc..000000000 --- a/assets/js/24.c0a67efd.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{257:function(n,t,r){"use strict";(function(n){r.d(t,"ab",(function(){return u})),r.d(t,"vb",(function(){return q})),r.d(t,"C",(function(){return C})),r.d(t,"cb",(function(){return j})),r.d(t,"r",(function(){return A})),r.d(t,"sb",(function(){return E})),r.d(t,"tb",(function(){return M})),r.d(t,"qb",(function(){return F})),r.d(t,"rb",(function(){return I})),r.d(t,"pb",(function(){return P})),r.d(t,"jb",(function(){return R})),r.d(t,"U",(function(){return L})),r.d(t,"R",(function(){return W})),r.d(t,"L",(function(){return D})),r.d(t,"a",(function(){return S})),r.d(t,"K",(function(){return $})),r.d(t,"T",(function(){return z})),r.d(t,"M",(function(){return J})),r.d(t,"N",(function(){return V})),r.d(t,"ob",(function(){return B})),r.d(t,"x",(function(){return N})),r.d(t,"o",(function(){return U})),r.d(t,"l",(function(){return G})),r.d(t,"f",(function(){return H})),r.d(t,"Q",(function(){return K})),r.d(t,"e",(function(){return Q})),r.d(t,"h",(function(){return X})),r.d(t,"Y",(function(){return Y})),r.d(t,"X",(function(){return Z})),r.d(t,"eb",(function(){return nn})),r.d(t,"t",(function(){return tn})),r.d(t,"W",(function(){return rn})),r.d(t,"bb",(function(){return en})),r.d(t,"z",(function(){return un})),r.d(t,"b",(function(){return cn})),r.d(t,"P",(function(){return on})),r.d(t,"c",(function(){return _n})),r.d(t,"O",(function(){return fn})),r.d(t,"m",(function(){return dn})),r.d(t,"F",(function(){return bn})),r.d(t,"gb",(function(){return an})),r.d(t,"k",(function(){return sn})),r.d(t,"q",(function(){return ln})),r.d(t,"p",(function(){return gn})),r.d(t,"w",(function(){return wn})),r.d(t,"y",(function(){return pn})),r.d(t,"hb",(function(){return yn})),r.d(t,"H",(function(){return hn})),r.d(t,"I",(function(){return mn})),r.d(t,"A",(function(){return vn})),r.d(t,"i",(function(){return kn})),r.d(t,"J",(function(){return Tn})),r.d(t,"db",(function(){return On})),r.d(t,"n",(function(){return qn})),r.d(t,"j",(function(){return xn})),r.d(t,"G",(function(){return Cn})),r.d(t,"E",(function(){return jn})),r.d(t,"D",(function(){return An})),r.d(t,"d",(function(){return En})),r.d(t,"B",(function(){return Mn})),r.d(t,"V",(function(){return Fn})),r.d(t,"ib",(function(){return In})),r.d(t,"u",(function(){return Pn})),r.d(t,"v",(function(){return Rn})),r.d(t,"s",(function(){return Ln})),r.d(t,"S",(function(){return Wn})),r.d(t,"g",(function(){return Dn})),r.d(t,"fb",(function(){return Sn})),r.d(t,"Z",(function(){return $n})),r.d(t,"nb",(function(){return zn})),r.d(t,"ub",(function(){return Jn})),r.d(t,"kb",(function(){return Vn})),r.d(t,"lb",(function(){return Bn})),r.d(t,"mb",(function(){return Nn}));r(92),r(91),r(261),r(262),r(263),r(264),r(265),r(266),r(267),r(268),r(269),r(270),r(271);let e;function u(n){e=n}const c=new Array(128).fill(void 0);function o(n){return c[n]}c.push(void 0,null,!0,!1);let i=c.length;function _(n){const t=o(n);return function(n){n<132||(c[n]=i,i=n)}(n),t}let f=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});f.decode();let d=null;function b(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(e.memory.buffer)),d}function a(n,t){return n>>>=0,f.decode(b().subarray(n,n+t))}function s(n){i===c.length&&c.push(c.length+1);const t=i;return i=c[t],c[t]=n,t}let l=0;let g=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const w="function"==typeof g.encodeInto?function(n,t){return g.encodeInto(n,t)}:function(n,t){const r=g.encode(n);return t.set(r),{read:n.length,written:r.length}};function p(n,t,r){if(void 0===r){const r=g.encode(n),e=t(r.length,1)>>>0;return b().subarray(e,e+r.length).set(r),l=r.length,e}let e=n.length,u=t(e,1)>>>0;const c=b();let o=0;for(;o127)break;c[u+o]=t}if(o!==e){0!==o&&(n=n.slice(o)),u=r(u,e,e=o+3*n.length,1)>>>0;const t=b().subarray(u+o,u+e);o+=w(n,t).written,u=r(u,e,o,1)>>>0}return l=o,u}let y=null;function h(){return null!==y&&0!==y.byteLength||(y=new Int32Array(e.memory.buffer)),y}const m="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{e.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function v(n,t,r,u){const c={a:n,b:t,cnt:1,dtor:r},o=(...n)=>{c.cnt++;const t=c.a;c.a=0;try{return u(t,c.b,...n)}finally{0==--c.cnt?(e.__wbindgen_export_2.get(c.dtor)(t,c.b),m.unregister(c)):c.a=t}};return o.original=c,m.register(o,c,c),o}function k(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,s(r))}function T(n,t){e._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function O(n,t,r){e._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,s(r))}function q(){e.start()}function x(n,t){try{return n.apply(this,t)}catch(n){e.__wbindgen_exn_store(s(n))}}function C(){return s(new Error)}function j(n,t){const r=p(o(t).stack,e.__wbindgen_malloc,e.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=r}function A(n,t){let r,u;try{r=n,u=t,console.error(a(n,t))}finally{e.__wbindgen_free(r,u,1)}}function E(n){_(n)}function M(n,t){return s(a(n,t))}function F(n){return s(n)}function I(n){return s(o(n))}function P(n){return void 0===o(n)}function R(n){const t=_(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function L(n){return s(o(n).scheduler)}function W(n){return s(o(n).requestIdleCallback)}function D(){return s(ResizeObserverEntry.prototype)}function S(n){return s(o(n).Window)}function $(n,t,r){return s(o(n).postTask(o(t),o(r)))}function z(n){return s(o(n).scheduler)}function J(n){queueMicrotask(o(n))}function V(n){return s(o(n).queueMicrotask)}function B(n){return"function"==typeof o(n)}function N(n){let t;try{t=o(n)instanceof Window}catch(n){t=!1}return t}function U(n){const t=o(n).document;return null==t?0:s(t)}function G(n){return o(n).devicePixelRatio}function H(n,t){o(n).cancelIdleCallback(t>>>0)}function K(){return x((function(n,t){return o(n).requestIdleCallback(o(t))}),arguments)}function Q(){return x((function(n,t){o(n).cancelAnimationFrame(t)}),arguments)}function X(n,t){o(n).clearTimeout(t)}function Y(){return x((function(n,t){return o(n).setTimeout(o(t))}),arguments)}function Z(){return x((function(n,t,r){return o(n).setTimeout(o(t),r)}),arguments)}function nn(n){return s(o(n).style)}function tn(){return x((function(n,t,r,u){const c=p(o(t).getPropertyValue(a(r,u)),e.__wbindgen_malloc,e.__wbindgen_realloc),i=l;h()[n/4+1]=i,h()[n/4+0]=c}),arguments)}function rn(){return x((function(n,t,r,e,u){o(n).setProperty(a(t,r),a(e,u))}),arguments)}function en(n){return s(o(n).signal)}function un(){return x((function(){return s(new AbortController)}),arguments)}function cn(n){o(n).abort()}function on(){return x((function(n,t){o(n).removeListener(o(t))}),arguments)}function _n(){return x((function(n,t,r,e){o(n).addEventListener(a(t,r),o(e))}),arguments)}function fn(){return x((function(n,t,r,e){o(n).removeEventListener(a(t,r),o(e))}),arguments)}function dn(n){o(n).disconnect()}function bn(n,t){o(n).observe(o(t))}function an(n,t){o(n).unobserve(o(t))}function sn(n){console.debug(o(n))}function ln(n){console.error(o(n))}function gn(n,t){console.error(o(n),o(t))}function wn(n){console.info(o(n))}function pn(n){console.log(o(n))}function yn(n){console.warn(o(n))}function hn(n){return s(o(n).port1)}function mn(n){return s(o(n).port2)}function vn(){return x((function(){return s(new MessageChannel)}),arguments)}function kn(n){o(n).close()}function Tn(){return x((function(n,t){o(n).postMessage(o(t))}),arguments)}function On(n){o(n).start()}function qn(n){o(n).disconnect()}function xn(n,t){return o(n).contains(o(t))}function Cn(n){return s(o(n).performance)}function jn(n){return o(n).now()}function An(n,t){return s(new Function(a(n,t)))}function En(){return x((function(n,t){return s(o(n).call(o(t)))}),arguments)}function Mn(){return s(new Object)}function Fn(){return x((function(){return s(self.self)}),arguments)}function In(){return x((function(){return s(window.window)}),arguments)}function Pn(){return x((function(){return s(globalThis.globalThis)}),arguments)}function Rn(){return x((function(){return s(global.global)}),arguments)}function Ln(n,t){return s(Object.getOwnPropertyDescriptor(o(n),o(t)))}function Wn(n){return s(Promise.resolve(o(n)))}function Dn(n,t){return s(o(n).catch(o(t)))}function Sn(n,t){return s(o(n).then(o(t)))}function $n(){return x((function(n,t,r){return Reflect.set(o(n),o(t),o(r))}),arguments)}function zn(n,t){const r=p(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}(o(t)),e.__wbindgen_malloc,e.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=r}function Jn(n,t){throw new Error(a(n,t))}function Vn(n,t,r){return s(v(n,t,56,k))}function Bn(n,t,r){return s(v(n,t,56,T))}function Nn(n,t,r){return s(v(n,t,89,O))}}).call(this,r(260)(n))},387:function(n,t,r){"use strict";r.r(t);var e=r(388),u=r(257);r.d(t,"__wbg_set_wasm",(function(){return u.ab})),r.d(t,"start",(function(){return u.vb})),r.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.C})),r.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.cb})),r.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.r})),r.d(t,"__wbindgen_object_drop_ref",(function(){return u.sb})),r.d(t,"__wbindgen_string_new",(function(){return u.tb})),r.d(t,"__wbindgen_number_new",(function(){return u.qb})),r.d(t,"__wbindgen_object_clone_ref",(function(){return u.rb})),r.d(t,"__wbindgen_is_undefined",(function(){return u.pb})),r.d(t,"__wbindgen_cb_drop",(function(){return u.jb})),r.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.U})),r.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.R})),r.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.L})),r.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.a})),r.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.K})),r.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.T})),r.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.M})),r.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.N})),r.d(t,"__wbindgen_is_function",(function(){return u.ob})),r.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.x})),r.d(t,"__wbg_document_5100775d18896c16",(function(){return u.o})),r.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.l})),r.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.f})),r.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Q})),r.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.e})),r.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.h})),r.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.Y})),r.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.X})),r.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.eb})),r.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.t})),r.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.W})),r.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.bb})),r.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.z})),r.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.b})),r.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.P})),r.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.c})),r.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.O})),r.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.m})),r.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.F})),r.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.gb})),r.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.k})),r.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.q})),r.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.p})),r.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.w})),r.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.y})),r.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.hb})),r.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.H})),r.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.I})),r.d(t,"__wbg_new_34615e164dc78975",(function(){return u.A})),r.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.i})),r.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.J})),r.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.db})),r.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.n})),r.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.j})),r.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.G})),r.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.E})),r.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.D})),r.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.d})),r.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.B})),r.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.V})),r.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.ib})),r.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.u})),r.d(t,"__wbg_global_207b558942527489",(function(){return u.v})),r.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.s})),r.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.S})),r.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.g})),r.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.fb})),r.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.Z})),r.d(t,"__wbindgen_debug_string",(function(){return u.nb})),r.d(t,"__wbindgen_throw",(function(){return u.ub})),r.d(t,"__wbindgen_closure_wrapper541",(function(){return u.kb})),r.d(t,"__wbindgen_closure_wrapper542",(function(){return u.lb})),r.d(t,"__wbindgen_closure_wrapper608",(function(){return u.mb})),Object(u.ab)(e),e.__wbindgen_start()},388:function(n,t,r){"use strict";var e=r.w[n.i];for(var u in r.r(t),e)"__webpack_init__"!=u&&(t[u]=e[u]);r(257);e.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/25.2cc8dd81.js b/assets/js/25.2cc8dd81.js new file mode 100644 index 000000000..51af15e55 --- /dev/null +++ b/assets/js/25.2cc8dd81.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{247:function(n,t,e){"use strict";(function(n){e.d(t,"Ki",(function(){return u})),e.d(t,"Dl",(function(){return F})),e.d(t,"zl",(function(){return W})),e.d(t,"Al",(function(){return q})),e.d(t,"Sk",(function(){return z})),e.d(t,"ul",(function(){return U})),e.d(t,"yl",(function(){return K})),e.d(t,"Bl",(function(){return Q})),e.d(t,"Ng",(function(){return N})),e.d(t,"Wi",(function(){return X})),e.d(t,"Qd",(function(){return Y})),e.d(t,"Vd",(function(){return H})),e.d(t,"eh",(function(){return J})),e.d(t,"fh",(function(){return Z})),e.d(t,"b",(function(){return $})),e.d(t,"Ik",(function(){return nn})),e.d(t,"yh",(function(){return tn})),e.d(t,"ei",(function(){return en})),e.d(t,"pe",(function(){return rn})),e.d(t,"Vh",(function(){return un})),e.d(t,"Yh",(function(){return fn})),e.d(t,"hh",(function(){return cn})),e.d(t,"Jk",(function(){return on})),e.d(t,"Wh",(function(){return _n})),e.d(t,"di",(function(){return dn})),e.d(t,"vh",(function(){return an})),e.d(t,"xl",(function(){return bn})),e.d(t,"jh",(function(){return gn})),e.d(t,"Zg",(function(){return wn})),e.d(t,"nf",(function(){return sn})),e.d(t,"mf",(function(){return ln})),e.d(t,"pf",(function(){return mn})),e.d(t,"of",(function(){return pn})),e.d(t,"Vi",(function(){return hn})),e.d(t,"sk",(function(){return xn})),e.d(t,"bd",(function(){return yn})),e.d(t,"Ae",(function(){return Sn})),e.d(t,"Nf",(function(){return kn})),e.d(t,"pk",(function(){return vn})),e.d(t,"nd",(function(){return Bn})),e.d(t,"md",(function(){return Pn})),e.d(t,"Md",(function(){return In})),e.d(t,"ui",(function(){return jn})),e.d(t,"li",(function(){return An})),e.d(t,"ni",(function(){return Dn})),e.d(t,"me",(function(){return Tn})),e.d(t,"lf",(function(){return Cn})),e.d(t,"af",(function(){return Mn})),e.d(t,"Ee",(function(){return Fn})),e.d(t,"Sh",(function(){return En})),e.d(t,"le",(function(){return Rn})),e.d(t,"vg",(function(){return Ln})),e.d(t,"Xd",(function(){return On})),e.d(t,"ae",(function(){return Gn})),e.d(t,"mi",(function(){return Vn})),e.d(t,"ki",(function(){return Wn})),e.d(t,"Ed",(function(){return qn})),e.d(t,"Ad",(function(){return zn})),e.d(t,"yd",(function(){return Un})),e.d(t,"Cd",(function(){return Kn})),e.d(t,"ri",(function(){return Qn})),e.d(t,"si",(function(){return Nn})),e.d(t,"wi",(function(){return Xn})),e.d(t,"Ei",(function(){return Yn})),e.d(t,"Di",(function(){return Hn})),e.d(t,"Td",(function(){return Jn})),e.d(t,"Ff",(function(){return Zn})),e.d(t,"Fh",(function(){return $n})),e.d(t,"Mf",(function(){return nt})),e.d(t,"Ni",(function(){return tt})),e.d(t,"Tb",(function(){return et})),e.d(t,"Sb",(function(){return rt})),e.d(t,"Wb",(function(){return ut})),e.d(t,"Xb",(function(){return ft})),e.d(t,"Yb",(function(){return ct})),e.d(t,"cc",(function(){return it})),e.d(t,"fc",(function(){return ot})),e.d(t,"hc",(function(){return _t})),e.d(t,"ic",(function(){return dt})),e.d(t,"mc",(function(){return at})),e.d(t,"nc",(function(){return bt})),e.d(t,"rc",(function(){return gt})),e.d(t,"cd",(function(){return wt})),e.d(t,"rh",(function(){return st})),e.d(t,"zh",(function(){return lt})),e.d(t,"vc",(function(){return mt})),e.d(t,"dd",(function(){return pt})),e.d(t,"Fj",(function(){return ht})),e.d(t,"gh",(function(){return xt})),e.d(t,"Bf",(function(){return yt})),e.d(t,"Gf",(function(){return St})),e.d(t,"tg",(function(){return kt})),e.d(t,"Gb",(function(){return vt})),e.d(t,"we",(function(){return Bt})),e.d(t,"Kh",(function(){return Pt})),e.d(t,"ug",(function(){return It})),e.d(t,"Ld",(function(){return jt})),e.d(t,"Rd",(function(){return At})),e.d(t,"pi",(function(){return Dt})),e.d(t,"zi",(function(){return Tt})),e.d(t,"Ai",(function(){return Ct})),e.d(t,"Hi",(function(){return Mt})),e.d(t,"ji",(function(){return Ft})),e.d(t,"oi",(function(){return Et})),e.d(t,"Fd",(function(){return Rt})),e.d(t,"Bd",(function(){return Lt})),e.d(t,"zd",(function(){return Ot})),e.d(t,"Dd",(function(){return Gt})),e.d(t,"qi",(function(){return Vt})),e.d(t,"ti",(function(){return Wt})),e.d(t,"vi",(function(){return qt})),e.d(t,"Gi",(function(){return zt})),e.d(t,"Fi",(function(){return Ut})),e.d(t,"qe",(function(){return Kt})),e.d(t,"Af",(function(){return Qt})),e.d(t,"q",(function(){return Nt})),e.d(t,"s",(function(){return Xt})),e.d(t,"ib",(function(){return Yt})),e.d(t,"jb",(function(){return Ht})),e.d(t,"Kb",(function(){return Jt})),e.d(t,"Lb",(function(){return Zt})),e.d(t,"Qb",(function(){return $t})),e.d(t,"Rb",(function(){return ne})),e.d(t,"Zd",(function(){return te})),e.d(t,"Yd",(function(){return ee})),e.d(t,"Zh",(function(){return re})),e.d(t,"Pd",(function(){return ue})),e.d(t,"cf",(function(){return fe})),e.d(t,"kg",(function(){return ce})),e.d(t,"lg",(function(){return ie})),e.d(t,"mg",(function(){return oe})),e.d(t,"jg",(function(){return _e})),e.d(t,"Qf",(function(){return de})),e.d(t,"Rf",(function(){return ae})),e.d(t,"cg",(function(){return be})),e.d(t,"bg",(function(){return ge})),e.d(t,"eg",(function(){return we})),e.d(t,"fg",(function(){return se})),e.d(t,"hg",(function(){return le})),e.d(t,"ig",(function(){return me})),e.d(t,"og",(function(){return pe})),e.d(t,"ng",(function(){return he})),e.d(t,"gg",(function(){return xe})),e.d(t,"rg",(function(){return ye})),e.d(t,"Sf",(function(){return Se})),e.d(t,"pg",(function(){return ke})),e.d(t,"qg",(function(){return ve})),e.d(t,"Ag",(function(){return Be})),e.d(t,"zg",(function(){return Pe})),e.d(t,"dg",(function(){return Ie})),e.d(t,"Uf",(function(){return je})),e.d(t,"Tf",(function(){return Ae})),e.d(t,"Zf",(function(){return De})),e.d(t,"Vf",(function(){return Te})),e.d(t,"Wf",(function(){return Ce})),e.d(t,"Xf",(function(){return Me})),e.d(t,"Yf",(function(){return Fe})),e.d(t,"ag",(function(){return Ee})),e.d(t,"tl",(function(){return Re})),e.d(t,"a",(function(){return Le})),e.d(t,"c",(function(){return Oe})),e.d(t,"Uh",(function(){return Ge})),e.d(t,"Sd",(function(){return Ve})),e.d(t,"Ef",(function(){return We})),e.d(t,"wg",(function(){return qe})),e.d(t,"Pk",(function(){return ze})),e.d(t,"Qk",(function(){return Ue})),e.d(t,"Mb",(function(){return Ke})),e.d(t,"jj",(function(){return Qe})),e.d(t,"Eh",(function(){return Ne})),e.d(t,"Dh",(function(){return Xe})),e.d(t,"sl",(function(){return Ye})),e.d(t,"Rk",(function(){return He})),e.d(t,"wl",(function(){return Je})),e.d(t,"tf",(function(){return Ze})),e.d(t,"r",(function(){return $e})),e.d(t,"v",(function(){return nr})),e.d(t,"C",(function(){return tr})),e.d(t,"G",(function(){return er})),e.d(t,"R",(function(){return rr})),e.d(t,"U",(function(){return ur})),e.d(t,"X",(function(){return fr})),e.d(t,"Y",(function(){return cr})),e.d(t,"kb",(function(){return ir})),e.d(t,"lb",(function(){return or})),e.d(t,"mb",(function(){return _r})),e.d(t,"ub",(function(){return dr})),e.d(t,"Db",(function(){return ar})),e.d(t,"Bb",(function(){return br})),e.d(t,"Eb",(function(){return gr})),e.d(t,"Fb",(function(){return wr})),e.d(t,"Jb",(function(){return sr})),e.d(t,"Pb",(function(){return lr})),e.d(t,"gc",(function(){return mr})),e.d(t,"lc",(function(){return pr})),e.d(t,"uc",(function(){return hr})),e.d(t,"Hc",(function(){return xr})),e.d(t,"Kc",(function(){return yr})),e.d(t,"Nc",(function(){return Sr})),e.d(t,"Rc",(function(){return kr})),e.d(t,"rd",(function(){return vr})),e.d(t,"vd",(function(){return Br})),e.d(t,"xd",(function(){return Pr})),e.d(t,"Kd",(function(){return Ir})),e.d(t,"Ud",(function(){return jr})),e.d(t,"ge",(function(){return Ar})),e.d(t,"ne",(function(){return Dr})),e.d(t,"ze",(function(){return Tr})),e.d(t,"Ke",(function(){return Cr})),e.d(t,"Re",(function(){return Mr})),e.d(t,"Se",(function(){return Fr})),e.d(t,"vf",(function(){return Er})),e.d(t,"Gh",(function(){return Rr})),e.d(t,"Hh",(function(){return Lr})),e.d(t,"Jh",(function(){return Or})),e.d(t,"Oh",(function(){return Gr})),e.d(t,"bi",(function(){return Vr})),e.d(t,"ci",(function(){return Wr})),e.d(t,"kj",(function(){return qr})),e.d(t,"mj",(function(){return zr})),e.d(t,"pj",(function(){return Ur})),e.d(t,"qj",(function(){return Kr})),e.d(t,"uj",(function(){return Qr})),e.d(t,"vj",(function(){return Nr})),e.d(t,"rj",(function(){return Xr})),e.d(t,"tj",(function(){return Yr})),e.d(t,"wj",(function(){return Hr})),e.d(t,"zj",(function(){return Jr})),e.d(t,"yj",(function(){return Zr})),e.d(t,"Aj",(function(){return $r})),e.d(t,"xj",(function(){return nu})),e.d(t,"Bj",(function(){return tu})),e.d(t,"Kj",(function(){return eu})),e.d(t,"Lj",(function(){return ru})),e.d(t,"Nj",(function(){return uu})),e.d(t,"Pj",(function(){return fu})),e.d(t,"Qj",(function(){return cu})),e.d(t,"Tj",(function(){return iu})),e.d(t,"Uj",(function(){return ou})),e.d(t,"Xj",(function(){return _u})),e.d(t,"ak",(function(){return du})),e.d(t,"bk",(function(){return au})),e.d(t,"ck",(function(){return bu})),e.d(t,"ek",(function(){return gu})),e.d(t,"fk",(function(){return wu})),e.d(t,"gk",(function(){return su})),e.d(t,"ik",(function(){return lu})),e.d(t,"jk",(function(){return mu})),e.d(t,"kk",(function(){return pu})),e.d(t,"lk",(function(){return hu})),e.d(t,"nk",(function(){return xu})),e.d(t,"ok",(function(){return yu})),e.d(t,"yk",(function(){return Su})),e.d(t,"zk",(function(){return ku})),e.d(t,"g",(function(){return vu})),e.d(t,"o",(function(){return Bu})),e.d(t,"u",(function(){return Pu})),e.d(t,"x",(function(){return Iu})),e.d(t,"y",(function(){return ju})),e.d(t,"A",(function(){return Au})),e.d(t,"D",(function(){return Du})),e.d(t,"H",(function(){return Tu})),e.d(t,"L",(function(){return Cu})),e.d(t,"J",(function(){return Mu})),e.d(t,"P",(function(){return Fu})),e.d(t,"N",(function(){return Eu})),e.d(t,"sb",(function(){return Ru})),e.d(t,"ob",(function(){return Lu})),e.d(t,"qb",(function(){return Ou})),e.d(t,"yb",(function(){return Gu})),e.d(t,"Ab",(function(){return Vu})),e.d(t,"Ob",(function(){return Wu})),e.d(t,"Vb",(function(){return qu})),e.d(t,"bc",(function(){return zu})),e.d(t,"dc",(function(){return Uu})),e.d(t,"jc",(function(){return Ku})),e.d(t,"pc",(function(){return Qu})),e.d(t,"qc",(function(){return Nu})),e.d(t,"zc",(function(){return Xu})),e.d(t,"Cc",(function(){return Yu})),e.d(t,"Ec",(function(){return Hu})),e.d(t,"Gc",(function(){return Ju})),e.d(t,"Ic",(function(){return Zu})),e.d(t,"Lc",(function(){return $u})),e.d(t,"Oc",(function(){return nf})),e.d(t,"Wc",(function(){return tf})),e.d(t,"Xc",(function(){return ef})),e.d(t,"ad",(function(){return rf})),e.d(t,"jd",(function(){return uf})),e.d(t,"hd",(function(){return ff})),e.d(t,"sd",(function(){return cf})),e.d(t,"Jd",(function(){return of})),e.d(t,"Hd",(function(){return _f})),e.d(t,"ce",(function(){return df})),e.d(t,"fe",(function(){return af})),e.d(t,"ie",(function(){return bf})),e.d(t,"ye",(function(){return gf})),e.d(t,"De",(function(){return wf})),e.d(t,"Fe",(function(){return sf})),e.d(t,"Ie",(function(){return lf})),e.d(t,"Me",(function(){return mf})),e.d(t,"Ne",(function(){return pf})),e.d(t,"Pe",(function(){return hf})),e.d(t,"Te",(function(){return xf})),e.d(t,"If",(function(){return yf})),e.d(t,"mh",(function(){return Sf})),e.d(t,"qh",(function(){return kf})),e.d(t,"Qh",(function(){return vf})),e.d(t,"fi",(function(){return Bf})),e.d(t,"Ri",(function(){return Pf})),e.d(t,"aj",(function(){return If})),e.d(t,"dj",(function(){return jf})),e.d(t,"bj",(function(){return Af})),e.d(t,"fj",(function(){return Df})),e.d(t,"nj",(function(){return Tf})),e.d(t,"Hj",(function(){return Cf})),e.d(t,"Jj",(function(){return Mf})),e.d(t,"Vj",(function(){return Ff})),e.d(t,"tk",(function(){return Ef})),e.d(t,"Ak",(function(){return Rf})),e.d(t,"Fk",(function(){return Lf})),e.d(t,"uf",(function(){return Of})),e.d(t,"od",(function(){return Gf})),e.d(t,"Jf",(function(){return Vf})),e.d(t,"Eg",(function(){return Wf})),e.d(t,"fd",(function(){return qf})),e.d(t,"gb",(function(){return zf})),e.d(t,"re",(function(){return Uf})),e.d(t,"Of",(function(){return Kf})),e.d(t,"Xh",(function(){return Qf})),e.d(t,"fb",(function(){return Nf})),e.d(t,"Th",(function(){return Xf})),e.d(t,"rb",(function(){return Yf})),e.d(t,"Ci",(function(){return Hf})),e.d(t,"Bi",(function(){return Jf})),e.d(t,"T",(function(){return Zf})),e.d(t,"Gk",(function(){return $f})),e.d(t,"e",(function(){return nc})),e.d(t,"ke",(function(){return tc})),e.d(t,"Zb",(function(){return ec})),e.d(t,"xe",(function(){return rc})),e.d(t,"Ch",(function(){return uc})),e.d(t,"Bh",(function(){return fc})),e.d(t,"ii",(function(){return cc})),e.d(t,"xi",(function(){return ic})),e.d(t,"Dg",(function(){return oc})),e.d(t,"Wd",(function(){return _c})),e.d(t,"ij",(function(){return dc})),e.d(t,"be",(function(){return ac})),e.d(t,"W",(function(){return bc})),e.d(t,"V",(function(){return gc})),e.d(t,"Z",(function(){return wc})),e.d(t,"Cb",(function(){return sc})),e.d(t,"Ih",(function(){return lc})),e.d(t,"lj",(function(){return mc})),e.d(t,"sj",(function(){return pc})),e.d(t,"Mj",(function(){return hc})),e.d(t,"Oj",(function(){return xc})),e.d(t,"Rj",(function(){return yc})),e.d(t,"Sj",(function(){return Sc})),e.d(t,"Yj",(function(){return kc})),e.d(t,"Zj",(function(){return vc})),e.d(t,"dk",(function(){return Bc})),e.d(t,"hk",(function(){return Pc})),e.d(t,"mk",(function(){return Ic})),e.d(t,"f",(function(){return jc})),e.d(t,"p",(function(){return Ac})),e.d(t,"t",(function(){return Dc})),e.d(t,"w",(function(){return Tc})),e.d(t,"z",(function(){return Cc})),e.d(t,"B",(function(){return Mc})),e.d(t,"E",(function(){return Fc})),e.d(t,"I",(function(){return Ec})),e.d(t,"M",(function(){return Rc})),e.d(t,"K",(function(){return Lc})),e.d(t,"Q",(function(){return Oc})),e.d(t,"O",(function(){return Gc})),e.d(t,"tb",(function(){return Vc})),e.d(t,"nb",(function(){return Wc})),e.d(t,"pb",(function(){return qc})),e.d(t,"xb",(function(){return zc})),e.d(t,"zb",(function(){return Uc})),e.d(t,"Nb",(function(){return Kc})),e.d(t,"Ub",(function(){return Qc})),e.d(t,"ac",(function(){return Nc})),e.d(t,"ec",(function(){return Xc})),e.d(t,"kc",(function(){return Yc})),e.d(t,"oc",(function(){return Hc})),e.d(t,"sc",(function(){return Jc})),e.d(t,"yc",(function(){return Zc})),e.d(t,"Bc",(function(){return $c})),e.d(t,"Dc",(function(){return ni})),e.d(t,"Fc",(function(){return ti})),e.d(t,"Jc",(function(){return ei})),e.d(t,"Mc",(function(){return ri})),e.d(t,"Pc",(function(){return ui})),e.d(t,"Vc",(function(){return fi})),e.d(t,"Yc",(function(){return ci})),e.d(t,"Zc",(function(){return ii})),e.d(t,"id",(function(){return oi})),e.d(t,"gd",(function(){return _i})),e.d(t,"td",(function(){return di})),e.d(t,"Id",(function(){return ai})),e.d(t,"Gd",(function(){return bi})),e.d(t,"de",(function(){return gi})),e.d(t,"ee",(function(){return wi})),e.d(t,"je",(function(){return si})),e.d(t,"Ce",(function(){return li})),e.d(t,"Ge",(function(){return mi})),e.d(t,"He",(function(){return pi})),e.d(t,"Le",(function(){return hi})),e.d(t,"Oe",(function(){return xi})),e.d(t,"Ue",(function(){return yi})),e.d(t,"Hf",(function(){return Si})),e.d(t,"lh",(function(){return ki})),e.d(t,"ph",(function(){return vi})),e.d(t,"Ph",(function(){return Bi})),e.d(t,"gi",(function(){return Pi})),e.d(t,"Qi",(function(){return Ii})),e.d(t,"Zi",(function(){return ji})),e.d(t,"ej",(function(){return Ai})),e.d(t,"cj",(function(){return Di})),e.d(t,"gj",(function(){return Ti})),e.d(t,"oj",(function(){return Ci})),e.d(t,"Gj",(function(){return Mi})),e.d(t,"Ij",(function(){return Fi})),e.d(t,"Wj",(function(){return Ei})),e.d(t,"uk",(function(){return Ri})),e.d(t,"Bk",(function(){return Li})),e.d(t,"Ek",(function(){return Oi})),e.d(t,"qd",(function(){return Gi})),e.d(t,"wd",(function(){return Vi})),e.d(t,"xk",(function(){return Wi})),e.d(t,"Je",(function(){return qi})),e.d(t,"Nh",(function(){return zi})),e.d(t,"yi",(function(){return Ui})),e.d(t,"Ig",(function(){return Ki})),e.d(t,"ld",(function(){return Qi})),e.d(t,"ah",(function(){return Ni})),e.d(t,"l",(function(){return Xi})),e.d(t,"Hb",(function(){return Yi})),e.d(t,"Ve",(function(){return Hi})),e.d(t,"ud",(function(){return Ji})),e.d(t,"Dk",(function(){return Zi})),e.d(t,"Ck",(function(){return $i})),e.d(t,"sh",(function(){return no})),e.d(t,"th",(function(){return to})),e.d(t,"Hg",(function(){return eo})),e.d(t,"he",(function(){return ro})),e.d(t,"wf",(function(){return uo})),e.d(t,"Ib",(function(){return fo})),e.d(t,"ed",(function(){return co})),e.d(t,"kf",(function(){return io})),e.d(t,"S",(function(){return oo})),e.d(t,"Ac",(function(){return _o})),e.d(t,"Od",(function(){return ao})),e.d(t,"Nd",(function(){return bo})),e.d(t,"jf",(function(){return go})),e.d(t,"Lf",(function(){return wo})),e.d(t,"Hk",(function(){return so})),e.d(t,"Ui",(function(){return lo})),e.d(t,"Fg",(function(){return mo})),e.d(t,"d",(function(){return po})),e.d(t,"vb",(function(){return ho})),e.d(t,"uh",(function(){return xo})),e.d(t,"Xi",(function(){return yo})),e.d(t,"Lk",(function(){return So})),e.d(t,"ff",(function(){return ko})),e.d(t,"qf",(function(){return vo})),e.d(t,"Nk",(function(){return Bo})),e.d(t,"Oi",(function(){return Po})),e.d(t,"gf",(function(){return Io})),e.d(t,"Mi",(function(){return jo})),e.d(t,"ue",(function(){return Ao})),e.d(t,"ve",(function(){return Do})),e.d(t,"Kk",(function(){return To})),e.d(t,"hf",(function(){return Co})),e.d(t,"k",(function(){return Mo})),e.d(t,"xc",(function(){return Fo})),e.d(t,"Ti",(function(){return Eo})),e.d(t,"xg",(function(){return Ro})),e.d(t,"Kf",(function(){return Lo})),e.d(t,"Rh",(function(){return Oo})),e.d(t,"zf",(function(){return Go})),e.d(t,"wb",(function(){return Vo})),e.d(t,"Mk",(function(){return Wo})),e.d(t,"Pi",(function(){return qo})),e.d(t,"ef",(function(){return zo})),e.d(t,"Li",(function(){return Uo})),e.d(t,"se",(function(){return Ko})),e.d(t,"te",(function(){return Qo})),e.d(t,"kh",(function(){return No})),e.d(t,"h",(function(){return Xo})),e.d(t,"Lh",(function(){return Yo})),e.d(t,"Jg",(function(){return Ho})),e.d(t,"kd",(function(){return Jo})),e.d(t,"bh",(function(){return Zo})),e.d(t,"ch",(function(){return $o})),e.d(t,"qk",(function(){return n_})),e.d(t,"Mg",(function(){return t_})),e.d(t,"m",(function(){return e_})),e.d(t,"ih",(function(){return r_})),e.d(t,"Tc",(function(){return u_})),e.d(t,"Uc",(function(){return f_})),e.d(t,"Sc",(function(){return c_})),e.d(t,"F",(function(){return i_})),e.d(t,"tc",(function(){return o_})),e.d(t,"Qc",(function(){return __})),e.d(t,"Wg",(function(){return d_})),e.d(t,"sf",(function(){return a_})),e.d(t,"rk",(function(){return b_})),e.d(t,"Yi",(function(){return g_})),e.d(t,"df",(function(){return w_})),e.d(t,"n",(function(){return s_})),e.d(t,"Cj",(function(){return l_})),e.d(t,"Qe",(function(){return m_})),e.d(t,"xh",(function(){return p_})),e.d(t,"sg",(function(){return h_})),e.d(t,"Pf",(function(){return x_})),e.d(t,"i",(function(){return y_})),e.d(t,"Mh",(function(){return S_})),e.d(t,"wc",(function(){return k_})),e.d(t,"Si",(function(){return v_})),e.d(t,"j",(function(){return B_})),e.d(t,"yg",(function(){return P_})),e.d(t,"cb",(function(){return I_})),e.d(t,"db",(function(){return j_})),e.d(t,"Bg",(function(){return A_})),e.d(t,"Cg",(function(){return D_})),e.d(t,"nh",(function(){return T_})),e.d(t,"wh",(function(){return C_})),e.d(t,"oh",(function(){return M_})),e.d(t,"oe",(function(){return F_})),e.d(t,"We",(function(){return E_})),e.d(t,"Df",(function(){return R_})),e.d(t,"Gg",(function(){return L_})),e.d(t,"Og",(function(){return O_})),e.d(t,"Yg",(function(){return G_})),e.d(t,"Xg",(function(){return V_})),e.d(t,"pd",(function(){return W_})),e.d(t,"wk",(function(){return q_})),e.d(t,"yf",(function(){return z_})),e.d(t,"Xe",(function(){return U_})),e.d(t,"eb",(function(){return K_})),e.d(t,"Lg",(function(){return Q_})),e.d(t,"hi",(function(){return N_})),e.d(t,"Ok",(function(){return X_})),e.d(t,"Ye",(function(){return Y_})),e.d(t,"Ze",(function(){return H_})),e.d(t,"if",(function(){return J_})),e.d(t,"dh",(function(){return Z_})),e.d(t,"Ah",(function(){return $_})),e.d(t,"rf",(function(){return nd})),e.d(t,"Be",(function(){return td})),e.d(t,"xf",(function(){return ed})),e.d(t,"vk",(function(){return rd})),e.d(t,"ai",(function(){return ud})),e.d(t,"hb",(function(){return fd})),e.d(t,"Dj",(function(){return cd})),e.d(t,"Ej",(function(){return id})),e.d(t,"ab",(function(){return od})),e.d(t,"Qg",(function(){return _d})),e.d(t,"Tg",(function(){return dd})),e.d(t,"Rg",(function(){return ad})),e.d(t,"Vg",(function(){return bd})),e.d(t,"Kg",(function(){return gd})),e.d(t,"Ji",(function(){return wd})),e.d(t,"Cf",(function(){return sd})),e.d(t,"Ug",(function(){return ld})),e.d(t,"Pg",(function(){return md})),e.d(t,"Sg",(function(){return pd})),e.d(t,"bb",(function(){return hd})),e.d(t,"bf",(function(){return xd})),e.d(t,"Ii",(function(){return yd})),e.d(t,"hj",(function(){return Sd})),e.d(t,"rl",(function(){return kd})),e.d(t,"Cl",(function(){return vd})),e.d(t,"vl",(function(){return Bd})),e.d(t,"kl",(function(){return Pd})),e.d(t,"ll",(function(){return Id})),e.d(t,"ml",(function(){return jd})),e.d(t,"nl",(function(){return Ad})),e.d(t,"ol",(function(){return Dd})),e.d(t,"pl",(function(){return Td})),e.d(t,"ql",(function(){return Cd})),e.d(t,"Tk",(function(){return Md})),e.d(t,"Uk",(function(){return Fd})),e.d(t,"Vk",(function(){return Ed})),e.d(t,"Wk",(function(){return Rd})),e.d(t,"Xk",(function(){return Ld})),e.d(t,"Yk",(function(){return Od})),e.d(t,"Zk",(function(){return Gd})),e.d(t,"al",(function(){return Vd})),e.d(t,"bl",(function(){return Wd})),e.d(t,"cl",(function(){return qd})),e.d(t,"dl",(function(){return zd})),e.d(t,"el",(function(){return Ud})),e.d(t,"fl",(function(){return Kd})),e.d(t,"gl",(function(){return Qd})),e.d(t,"hl",(function(){return Nd})),e.d(t,"il",(function(){return Xd})),e.d(t,"jl",(function(){return Yd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=0,d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}let b=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof b.encodeInto?function(n,t){return b.encodeInto(n,t)}:function(n,t){const e=b.encode(n);return t.set(e),{read:n.length,written:e.length}};function w(n,t,e){if(void 0===e){const e=b.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),_=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=g(n,t).written,u=e(u,r,c,1)>>>0}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}function p(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=n,t}let h=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function x(n,t){return n>>>=0,h.decode(a().subarray(n,n+t))}h.decode();let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1b446153b5627a75(n,t,p(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb3d96bb2269cee2a(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3ba5f8c0d2d2d0a5(n,t,p(e),p(u))}function I(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h5d0ca398622adc02(n,t,p(e),p(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2243020d8628c7a2(n,t,p(e))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h6edf023fd7d8af6a(n,t)}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,p(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,p(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,p(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(p(n))}}function W(n){o(n)}function q(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function z(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return void 0===c(n)}function K(n){return p(c(n))}function Q(n,t){return p(x(n,t))}function N(){return p(new Error)}function X(n,t){const e=w(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Y(n,t){let e,u;try{e=n,u=t,console.error(x(n,t))}finally{r.__wbindgen_free(e,u,1)}}function H(n){return p(fetch(c(n)))}function J(n){return c(n).offsetX}function Z(n){return c(n).offsetY}function $(n){return p(c(n).Window)}function nn(n){const t=c(n).webkitFullscreenElement;return s(t)?0:p(t)}function tn(){return p(ResizeObserverEntry.prototype)}function en(n){return p(c(n).scheduler)}function rn(n){return p(c(n).getCoalescedEvents)}function un(n){return p(c(n).requestFullscreen)}function fn(n){return p(c(n).requestIdleCallback)}function cn(n){return p(c(n).onpointerrawupdate)}function on(n){c(n).webkitRequestFullscreen()}function _n(n){return p(c(n).requestFullscreen())}function dn(n){return p(c(n).scheduler)}function an(n,t,e){return p(c(n).postTask(c(t),c(e)))}function bn(n){return p(n)}function gn(n){return p(c(n).performance)}function wn(n){return c(n).now()}function sn(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function mn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function pn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function hn(n){return c(n).size}function xn(n){return c(n).usage}function yn(n){c(n).destroy()}function Sn(n,t,e){return p(c(n).getMappedRange(t,e))}function kn(n,t,e,r){return p(c(n).mapAsync(t>>>0,e,r))}function vn(n){c(n).unmap()}function Bn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function Pn(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function In(n){c(n).end()}function jn(n,t){c(n).setPipeline(c(t))}function An(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Dn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Tn(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Cn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function Mn(n){return p(c(n).gpu)}function Fn(n){return p(c(n).getPreferredCanvasFormat())}function En(n,t){return p(c(n).requestAdapter(c(t)))}function Rn(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Ln(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function On(n){return p(c(n).finish())}function Gn(n,t){return p(c(n).finish(c(t)))}function Vn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Wn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function qn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function zn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Un(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Kn(n,t,e){c(n).drawIndirect(c(t),e)}function Qn(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Nn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Xn(n,t){c(n).setPipeline(c(t))}function Yn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Hn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Jn(n){return p(c(n).features)}function Zn(n){return p(c(n).limits)}function $n(n){return p(c(n).queue)}function nt(n){return p(c(n).lost)}function tt(n,t){c(n).onuncapturederror=c(t)}function et(n,t){return p(c(n).createBindGroup(c(t)))}function rt(n,t){return p(c(n).createBindGroupLayout(c(t)))}function ut(n,t){return p(c(n).createBuffer(c(t)))}function ft(n,t){return p(c(n).createCommandEncoder(c(t)))}function ct(n,t){return p(c(n).createComputePipeline(c(t)))}function it(n,t){return p(c(n).createPipelineLayout(c(t)))}function ot(n,t){return p(c(n).createQuerySet(c(t)))}function _t(n,t){return p(c(n).createRenderBundleEncoder(c(t)))}function dt(n,t){return p(c(n).createRenderPipeline(c(t)))}function at(n,t){return p(c(n).createSampler(c(t)))}function bt(n,t){return p(c(n).createShaderModule(c(t)))}function gt(n,t){return p(c(n).createTexture(c(t)))}function wt(n){c(n).destroy()}function st(n){return p(c(n).popErrorScope())}function lt(n,t){c(n).pushErrorScope(o(t))}function mt(n,t){return p(c(n).createView(c(t)))}function pt(n){c(n).destroy()}function ht(n){return p(c(n).type)}function xt(n){return c(n).offset}function yt(n){return c(n).length}function St(n){return c(n).lineNum}function kt(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function vt(n,t){c(n).configure(c(t))}function Bt(n){return p(c(n).getCurrentTexture())}function Pt(n){return p(c(n).reason)}function It(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function jt(n){c(n).end()}function At(n,t){c(n).executeBundles(c(t))}function Dt(n,t){c(n).setBlendConstant(c(t))}function Tt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Ct(n,t){c(n).setStencilReference(t>>>0)}function Mt(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Ft(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Et(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Rt(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Lt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Ot(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Gt(n,t,e){c(n).drawIndirect(c(t),e)}function Vt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Wt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function qt(n,t){c(n).setPipeline(c(t))}function zt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Ut(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Kt(n){return p(c(n).getCompilationInfo())}function Qt(n,t){const e=w(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Nt(n,t){return p(c(n).beginComputePass(c(t)))}function Xt(n,t){return p(c(n).beginRenderPass(c(t)))}function Yt(n,t,e){c(n).clearBuffer(c(t),e)}function Ht(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Jt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Zt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function $t(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function ne(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function te(n){return p(c(n).finish())}function ee(n,t){return p(c(n).finish(c(t)))}function re(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function ue(n){return p(c(n).error)}function fe(n,t,e){return c(n).has(x(t,e))}function ce(n){return c(n).maxTextureDimension1D}function ie(n){return c(n).maxTextureDimension2D}function oe(n){return c(n).maxTextureDimension3D}function _e(n){return c(n).maxTextureArrayLayers}function de(n){return c(n).maxBindGroups}function ae(n){return c(n).maxBindingsPerBindGroup}function be(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function ge(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function we(n){return c(n).maxSampledTexturesPerShaderStage}function se(n){return c(n).maxSamplersPerShaderStage}function le(n){return c(n).maxStorageBuffersPerShaderStage}function me(n){return c(n).maxStorageTexturesPerShaderStage}function pe(n){return c(n).maxUniformBuffersPerShaderStage}function he(n){return c(n).maxUniformBufferBindingSize}function xe(n){return c(n).maxStorageBufferBindingSize}function ye(n){return c(n).maxVertexBuffers}function Se(n){return c(n).maxBufferSize}function ke(n){return c(n).maxVertexAttributes}function ve(n){return c(n).maxVertexBufferArrayStride}function Be(n){return c(n).minUniformBufferOffsetAlignment}function Pe(n){return c(n).minStorageBufferOffsetAlignment}function Ie(n){return c(n).maxInterStageShaderComponents}function je(n){return c(n).maxColorAttachments}function Ae(n){return c(n).maxColorAttachmentBytesPerSample}function De(n){return c(n).maxComputeWorkgroupStorageSize}function Te(n){return c(n).maxComputeInvocationsPerWorkgroup}function Ce(n){return c(n).maxComputeWorkgroupSizeX}function Me(n){return c(n).maxComputeWorkgroupSizeY}function Fe(n){return c(n).maxComputeWorkgroupSizeZ}function Ee(n){return c(n).maxComputeWorkgroupsPerDimension}function Re(n){const t=c(n);return"object"==typeof t&&null!==t}function Le(n){return p(c(n).Window)}function Oe(n){return p(c(n).WorkerGlobalScope)}function Ge(n,t){return p(c(n).requestDevice(c(t)))}function Ve(n){return p(c(n).features)}function We(n){return p(c(n).limits)}function qe(n){return p(c(n).messages)}function ze(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Ue(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ke(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Qe(n,t){c(n).submit(c(t))}function Ne(n){queueMicrotask(c(n))}function Xe(n){return p(c(n).queueMicrotask)}function Ye(n){return"function"==typeof c(n)}function He(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Je(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function Ze(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function $e(n,t,e){c(n).beginQuery(t>>>0,c(e))}function nr(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function tr(n,t,e){c(n).bindSampler(t>>>0,c(e))}function er(n,t){c(n).bindVertexArray(c(t))}function rr(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function ur(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function fr(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function cr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function ir(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function or(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function _r(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function dr(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function ar(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function br(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function gr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function wr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function sr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function lr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function mr(n){const t=c(n).createQuery();return s(t)?0:p(t)}function pr(n){const t=c(n).createSampler();return s(t)?0:p(t)}function hr(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function xr(n,t){c(n).deleteQuery(c(t))}function yr(n,t){c(n).deleteSampler(c(t))}function Sr(n,t){c(n).deleteSync(c(t))}function kr(n,t){c(n).deleteVertexArray(c(t))}function vr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function Br(n,t){c(n).drawBuffers(c(t))}function Pr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function Ir(n,t){c(n).endQuery(t>>>0)}function jr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return s(r)?0:p(r)}function Ar(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Dr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Tr(){return V((function(n,t,e){return p(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Cr(n,t,e){return p(c(n).getQueryParameter(c(t),e>>>0))}function Mr(n,t,e){return p(c(n).getSyncParameter(c(t),e>>>0))}function Fr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),x(e,r))}function Er(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Rr(n,t){c(n).readBuffer(t>>>0)}function Lr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Or(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Gr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Vr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Wr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Ur(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Kr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function nu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function tu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function eu(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function ru(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function uu(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function fu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function cu(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function iu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function ou(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function _u(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function du(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function au(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function bu(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function gu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function hu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function xu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function yu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function Su(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ku(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function vu(n,t){c(n).activeTexture(t>>>0)}function Bu(n,t,e){c(n).attachShader(c(t),c(e))}function Pu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function Iu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function ju(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Au(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Du(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Tu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Cu(n,t){c(n).blendEquation(t>>>0)}function Mu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Fu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Eu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ru(n,t){c(n).clear(t>>>0)}function Lu(n,t){c(n).clearDepth(t)}function Ou(n,t){c(n).clearStencil(t)}function Gu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Vu(n,t){c(n).compileShader(c(t))}function Wu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function qu(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function zu(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Uu(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Ku(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Qu(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Nu(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Xu(n,t){c(n).cullFace(t>>>0)}function Yu(n,t){c(n).deleteBuffer(c(t))}function Hu(n,t){c(n).deleteFramebuffer(c(t))}function Ju(n,t){c(n).deleteProgram(c(t))}function Zu(n,t){c(n).deleteRenderbuffer(c(t))}function $u(n,t){c(n).deleteShader(c(t))}function nf(n,t){c(n).deleteTexture(c(t))}function tf(n,t){c(n).depthFunc(t>>>0)}function ef(n,t){c(n).depthMask(0!==t)}function rf(n,t,e){c(n).depthRange(t,e)}function uf(n,t){c(n).disable(t>>>0)}function ff(n,t){c(n).disableVertexAttribArray(t>>>0)}function cf(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function of(n,t){c(n).enable(t>>>0)}function _f(n,t){c(n).enableVertexAttribArray(t>>>0)}function df(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function af(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function bf(n,t){c(n).frontFace(t>>>0)}function gf(){return V((function(n,t,e){const r=c(n).getExtension(x(t,e));return s(r)?0:p(r)}),arguments)}function wf(){return V((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function sf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function lf(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function mf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function pf(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function hf(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function xf(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function yf(n,t){c(n).linkProgram(c(t))}function Sf(n,t,e){c(n).pixelStorei(t>>>0,e)}function kf(n,t,e){c(n).polygonOffset(t,e)}function vf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Bf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Pf(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function If(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function jf(n,t){c(n).stencilMask(t>>>0)}function Af(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Df(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Tf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Cf(n,t,e){c(n).uniform1f(c(t),e)}function Mf(n,t,e){c(n).uniform1i(c(t),e)}function Ff(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ef(n,t){c(n).useProgram(c(t))}function Rf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Lf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Of(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Gf(n){const t=c(n).document;return s(t)?0:p(t)}function Vf(n){return p(c(n).location)}function Wf(n){return p(c(n).navigator)}function qf(n){return c(n).devicePixelRatio}function zf(n,t){c(n).cancelIdleCallback(t>>>0)}function Uf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return s(e)?0:p(e)}),arguments)}function Kf(){return V((function(n,t,e){const r=c(n).matchMedia(x(t,e));return s(r)?0:p(r)}),arguments)}function Qf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Nf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Xf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Yf(n,t){c(n).clearTimeout(t)}function Hf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Jf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Zf(n){const t=c(n).body;return s(t)?0:p(t)}function $f(n){return p(c(n).visibilityState)}function nc(n){const t=c(n).activeElement;return s(t)?0:p(t)}function tc(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function ec(){return V((function(n,t,e){return p(c(n).createElement(x(t,e)))}),arguments)}function rc(n,t,e){const r=c(n).getElementById(x(t,e));return s(r)?0:p(r)}function uc(){return V((function(n,t,e){const r=c(n).querySelector(x(t,e));return s(r)?0:p(r)}),arguments)}function fc(){return V((function(n,t,e){return p(c(n).querySelectorAll(x(t,e)))}),arguments)}function cc(){return V((function(n,t,e,r,u){c(n).setAttribute(x(t,e),x(r,u))}),arguments)}function ic(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function oc(n){return p(c(n).navigator)}function _c(n,t){return p(c(n).fetch(c(t)))}function dc(n){return p(c(n).style)}function ac(){return V((function(n){c(n).focus()}),arguments)}function bc(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function gc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function wc(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function sc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function lc(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function mc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function pc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function hc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function xc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function yc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function Sc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function kc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function vc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function Bc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function Pc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function Ic(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function jc(n,t){c(n).activeTexture(t>>>0)}function Ac(n,t,e){c(n).attachShader(c(t),c(e))}function Dc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function Tc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Cc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Mc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Fc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Ec(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Rc(n,t){c(n).blendEquation(t>>>0)}function Lc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Oc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Gc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Vc(n,t){c(n).clear(t>>>0)}function Wc(n,t){c(n).clearDepth(t)}function qc(n,t){c(n).clearStencil(t)}function zc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Uc(n,t){c(n).compileShader(c(t))}function Kc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Qc(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function Nc(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Xc(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Yc(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Hc(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Jc(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Zc(n,t){c(n).cullFace(t>>>0)}function $c(n,t){c(n).deleteBuffer(c(t))}function ni(n,t){c(n).deleteFramebuffer(c(t))}function ti(n,t){c(n).deleteProgram(c(t))}function ei(n,t){c(n).deleteRenderbuffer(c(t))}function ri(n,t){c(n).deleteShader(c(t))}function ui(n,t){c(n).deleteTexture(c(t))}function fi(n,t){c(n).depthFunc(t>>>0)}function ci(n,t){c(n).depthMask(0!==t)}function ii(n,t,e){c(n).depthRange(t,e)}function oi(n,t){c(n).disable(t>>>0)}function _i(n,t){c(n).disableVertexAttribArray(t>>>0)}function di(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ai(n,t){c(n).enable(t>>>0)}function bi(n,t){c(n).enableVertexAttribArray(t>>>0)}function gi(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function wi(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function si(n,t){c(n).frontFace(t>>>0)}function li(){return V((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function mi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function pi(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function hi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function xi(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function yi(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function Si(n,t){c(n).linkProgram(c(t))}function ki(n,t,e){c(n).pixelStorei(t>>>0,e)}function vi(n,t,e){c(n).polygonOffset(t,e)}function Bi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Pi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Ii(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function ji(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Ai(n,t){c(n).stencilMask(t>>>0)}function Di(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Ti(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ci(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Mi(n,t,e){c(n).uniform1f(c(t),e)}function Fi(n,t,e){c(n).uniform1i(c(t),e)}function Ei(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ri(n,t){c(n).useProgram(c(t))}function Li(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Oi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Gi(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Vi(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Wi(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function qi(){return V((function(n,t,e,u){const f=w(c(t).getPropertyValue(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function zi(){return V((function(n,t,e,u){const f=w(c(t).removeProperty(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Ui(){return V((function(n,t,e,r,u){c(n).setProperty(x(t,e),x(r,u))}),arguments)}function Ki(){return V((function(n){return p(new IntersectionObserver(c(n)))}),arguments)}function Qi(n){c(n).disconnect()}function Ni(n,t){c(n).observe(c(t))}function Xi(){return V((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function Yi(n,t){return c(n).contains(c(t))}function Hi(n,t){const e=c(n)[t>>>0];return s(e)?0:p(e)}function Ji(n,t){c(n).drawBuffersWEBGL(c(t))}function Zi(n){return c(n).videoWidth}function $i(n){return c(n).videoHeight}function no(n){return p(c(n).port1)}function to(n){return p(c(n).port2)}function eo(){return V((function(){return p(new MessageChannel)}),arguments)}function ro(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function uo(n){return c(n).isIntersecting}function fo(n){return p(c(n).contentRect)}function co(n){return p(c(n).devicePixelContentBoxSize)}function io(n){return c(n).inlineSize}function oo(n){return c(n).blockSize}function _o(n){console.debug(c(n))}function ao(n){console.error(c(n))}function bo(n,t){console.error(c(n),c(t))}function go(n){console.info(c(n))}function wo(n){console.log(c(n))}function so(n){console.warn(c(n))}function lo(n){return p(c(n).signal)}function mo(){return V((function(){return p(new AbortController)}),arguments)}function po(n){c(n).abort()}function ho(n){c(n).close()}function xo(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function yo(n){c(n).start()}function So(n){return c(n).width}function ko(n){return c(n).height}function vo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function Bo(n){return c(n).width}function Po(n,t){c(n).width=t>>>0}function Io(n){return c(n).height}function jo(n,t){c(n).height=t>>>0}function Ao(){return V((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function Do(){return V((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function To(n){return c(n).width}function Co(n){return c(n).height}function Mo(n){return c(n).altKey}function Fo(n){return c(n).ctrlKey}function Eo(n){return c(n).shiftKey}function Ro(n){return c(n).metaKey}function Lo(n){return c(n).location}function Oo(n){return c(n).repeat}function Go(n,t){const e=w(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Vo(n,t){const e=w(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Wo(n){return c(n).width}function qo(n,t){c(n).width=t>>>0}function zo(n){return c(n).height}function Uo(n,t){c(n).height=t>>>0}function Ko(){return V((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function Qo(){return V((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function No(n){return c(n).persisted}function Xo(){return V((function(n,t,e,r){c(n).addEventListener(x(t,e),c(r))}),arguments)}function Yo(){return V((function(n,t,e,r){c(n).removeEventListener(x(t,e),c(r))}),arguments)}function Ho(){return V((function(n){return p(new ResizeObserver(c(n)))}),arguments)}function Jo(n){c(n).disconnect()}function Zo(n,t){c(n).observe(c(t))}function $o(n,t,e){c(n).observe(c(t),c(e))}function n_(n,t){c(n).unobserve(c(t))}function t_(){return V((function(){return p(new Headers)}),arguments)}function e_(){return V((function(n,t,e,r,u){c(n).append(x(t,e),x(r,u))}),arguments)}function r_(){return V((function(n,t){const e=w(c(t).origin,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}),arguments)}function u_(n){return c(n).deltaX}function f_(n){return c(n).deltaY}function c_(n){return c(n).deltaMode}function i_(n,t){c(n).bindVertexArrayOES(c(t))}function o_(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function __(n,t){c(n).deleteVertexArrayOES(c(t))}function d_(){return V((function(n,t,e){return p(new Request(x(n,t),c(e)))}),arguments)}function a_(n){let t;try{t=c(n)instanceof Response}catch(n){t=!1}return t}function b_(n,t){const e=w(c(t).url,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function g_(n){return c(n).status}function w_(n){return p(c(n).headers)}function s_(){return V((function(n){return p(c(n).arrayBuffer())}),arguments)}function l_(){return V((function(n){return p(c(n).text())}),arguments)}function m_(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function p_(n){c(n).preventDefault()}function h_(n,t){const e=w(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function x_(n){return c(n).matches}function y_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function S_(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function k_(n){return c(n).ctrlKey}function v_(n){return c(n).shiftKey}function B_(n){return c(n).altKey}function P_(n){return c(n).metaKey}function I_(n){return c(n).button}function j_(n){return c(n).buttons}function A_(n){return c(n).movementX}function D_(n){return c(n).movementY}function T_(n){return c(n).pointerId}function C_(n){return c(n).pressure}function M_(n,t){const e=w(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function F_(n){return p(c(n).getCoalescedEvents())}function E_(n,t){return p(c(n)[t>>>0])}function R_(n){return c(n).length}function L_(){return p(new Array)}function O_(n,t){return p(new Function(x(n,t)))}function G_(n){return p(c(n).next)}function V_(){return V((function(n){return p(c(n).next())}),arguments)}function W_(n){return c(n).done}function q_(n){return p(c(n).value)}function z_(){return p(Symbol.iterator)}function U_(){return V((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function K_(){return V((function(n,t){return p(c(n).call(c(t)))}),arguments)}function Q_(){return p(new Object)}function N_(){return V((function(){return p(self.self)}),arguments)}function X_(){return V((function(){return p(window.window)}),arguments)}function Y_(){return V((function(){return p(globalThis.globalThis)}),arguments)}function H_(){return V((function(){return p(global.global)}),arguments)}function J_(n,t,e){return c(n).includes(c(t),e)}function Z_(n){return p(Array.of(c(n)))}function $_(n,t){return c(n).push(c(t))}function nd(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function td(n,t){return p(Object.getOwnPropertyDescriptor(c(n),c(t)))}function ed(n,t){return Object.is(c(n),c(t))}function rd(n){return p(c(n).valueOf())}function ud(n){return p(Promise.resolve(c(n)))}function fd(n,t){return p(c(n).catch(c(t)))}function cd(n,t){return p(c(n).then(c(t)))}function id(n,t,e){return p(c(n).then(c(t),c(e)))}function od(n){return p(c(n).buffer)}function _d(n,t,e){return p(new Int8Array(c(n),t>>>0,e>>>0))}function dd(n,t,e){return p(new Int16Array(c(n),t>>>0,e>>>0))}function ad(n,t,e){return p(new Int32Array(c(n),t>>>0,e>>>0))}function bd(n,t,e){return p(new Uint8Array(c(n),t>>>0,e>>>0))}function gd(n){return p(new Uint8Array(c(n)))}function wd(n,t,e){c(n).set(c(t),e>>>0)}function sd(n){return c(n).length}function ld(n,t,e){return p(new Uint16Array(c(n),t>>>0,e>>>0))}function md(n,t,e){return p(new Uint32Array(c(n),t>>>0,e>>>0))}function pd(n,t,e){return p(new Float32Array(c(n),t>>>0,e>>>0))}function hd(n){return p(c(n).buffer)}function xd(){return V((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function yd(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function Sd(){return V((function(n){return p(JSON.stringify(c(n)))}),arguments)}function kd(n,t){const e=w(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=_;m()[n/4+1]=u,m()[n/4+0]=e}function vd(n,t){throw new Error(x(n,t))}function Bd(){return p(r.memory)}function Pd(n,t,e){return p(k(n,t,49,v))}function Id(n,t,e){return p(k(n,t,49,v))}function jd(n,t,e){return p(k(n,t,49,v))}function Ad(n,t,e){return p(k(n,t,49,v))}function Dd(n,t,e){return p(k(n,t,49,B))}function Td(n,t,e){return p(k(n,t,49,v))}function Cd(n,t,e){return p(k(n,t,49,P))}function Md(n,t,e){return p(k(n,t,276,I))}function Fd(n,t,e){return p(k(n,t,276,j))}function Ed(n,t,e){return p(k(n,t,276,j))}function Rd(n,t,e){return p(k(n,t,276,j))}function Ld(n,t,e){return p(k(n,t,276,A))}function Od(n,t,e){return p(k(n,t,276,j))}function Gd(n,t,e){return p(k(n,t,276,j))}function Vd(n,t,e){return p(k(n,t,889,D))}function Wd(n,t,e){return p(k(n,t,889,D))}function qd(n,t,e){return p(k(n,t,889,T))}function zd(n,t,e){return p(k(n,t,889,D))}function Ud(n,t,e){return p(k(n,t,889,D))}function Kd(n,t,e){return p(k(n,t,889,D))}function Qd(n,t,e){return p(k(n,t,889,D))}function Nd(n,t,e){return p(k(n,t,2024,C))}function Xd(n,t,e){return p(k(n,t,2024,C))}function Yd(n,t,e){return p(k(n,t,2201,M))}}).call(this,e(260)(n))},404:function(n,t,e){"use strict";e.r(t);var r=e(405),u=e(247);e.d(t,"__wbg_set_wasm",(function(){return u.Ki})),e.d(t,"run",(function(){return u.Dl})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.zl})),e.d(t,"__wbindgen_string_get",(function(){return u.Al})),e.d(t,"__wbindgen_cb_drop",(function(){return u.Sk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.ul})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.yl})),e.d(t,"__wbindgen_string_new",(function(){return u.Bl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Ng})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Wi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Qd})),e.d(t,"__wbg_fetch_386f87a3ebf5003c",(function(){return u.Vd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.eh})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.fh})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.Ik})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.yh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.ei})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.pe})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Vh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Yh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.hh})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.Jk})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Wh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.di})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.vh})),e.d(t,"__wbindgen_number_new",(function(){return u.xl})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.jh})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Zg})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.nf})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.mf})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.pf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.of})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Vi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.sk})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.bd})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.Ae})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Nf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.pk})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.nd})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.md})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Md})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.ui})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.li})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.ni})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.me})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.lf})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.af})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.Ee})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Sh})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.le})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.vg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Xd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.ae})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.mi})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.ki})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Ed})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.Cd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.ri})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.si})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.wi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.Ei})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.Di})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Td})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.Ff})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.Fh})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Mf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.Ni})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Tb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Sb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Wb})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Xb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Yb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.cc})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.fc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.hc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.ic})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.mc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.nc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.rc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.cd})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.rh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.zh})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.vc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.dd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.Fj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.gh})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.Bf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.Gf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.tg})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Gb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.we})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.Kh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.ug})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Ld})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Rd})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.pi})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.zi})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.Ai})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.Hi})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.ji})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.oi})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Fd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Dd})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.qi})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.ti})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.vi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.Gi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.Fi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.qe})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.Af})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.q})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.s})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.ib})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.jb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Kb})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Lb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Qb})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Rb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Zd})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Yd})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.Zh})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Pd})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.cf})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.kg})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.lg})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.mg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.jg})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Qf})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.cg})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.bg})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.eg})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.fg})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.hg})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.ig})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.og})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.ng})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.gg})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.rg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Sf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.pg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.qg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.Ag})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.zg})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.dg})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Uf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.Tf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Zf})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Vf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Wf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Xf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Yf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.ag})),e.d(t,"__wbindgen_is_object",(function(){return u.tl})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Uh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Sd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.Ef})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.wg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.Pk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.Qk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Mb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.jj})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.Eh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.Dh})),e.d(t,"__wbindgen_is_function",(function(){return u.sl})),e.d(t,"__wbindgen_boolean_get",(function(){return u.Rk})),e.d(t,"__wbindgen_number_get",(function(){return u.wl})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.tf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.r})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.v})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.C})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.G})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.R})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.U})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.X})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.Y})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.kb})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.lb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.mb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.ub})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Eb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Fb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Jb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Pb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.gc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.lc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.uc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Hc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Kc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Nc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Rc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.rd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.vd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.xd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Kd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Ud})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ge})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ne})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ze})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Ke})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Re})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Se})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.vf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.Gh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.Hh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.Jh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.Oh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.bi})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.ci})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.kj})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.mj})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.pj})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.qj})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.uj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.vj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.rj})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.tj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.wj})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.zj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.yj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Aj})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.xj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Bj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.Kj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.Lj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.Nj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.Pj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.Qj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Tj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Uj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Xj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.ak})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.bk})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.ck})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.ek})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.fk})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.gk})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.ik})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.jk})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.kk})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.lk})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.nk})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.ok})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.yk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.zk})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.o})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.u})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.x})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.y})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.A})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.D})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.H})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.L})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.J})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.P})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.N})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.sb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.ob})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.qb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.yb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.Ab})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Ob})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Vb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.bc})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.jc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.pc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.qc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.zc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Cc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Ec})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Gc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Wc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.ad})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.jd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.hd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.sd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Jd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Hd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.ce})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.fe})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ie})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.ye})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.De})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Fe})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.Ie})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.Me})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ne})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Pe})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Te})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.If})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.mh})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.qh})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Qh})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.fi})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Ri})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.aj})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.dj})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.bj})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.fj})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.nj})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.Hj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.Jj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Vj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.tk})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Ak})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Fk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.uf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.od})),e.d(t,"__wbg_location_2951b5ee34f19221",(function(){return u.Jf})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.Eg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.fd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.gb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.re})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Of})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Xh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.fb})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Th})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.rb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.Ci})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.Bi})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.T})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Gk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ke})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Zb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.xe})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.Ch})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.Bh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.ii})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.xi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.Dg})),e.d(t,"__wbg_fetch_921fad6ef9e883dd",(function(){return u.Wd})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.ij})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.be})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.W})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.Z})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Cb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.Ih})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.lj})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.sj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.Mj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.Oj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.Rj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.Sj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Yj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Zj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.dk})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.hk})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.mk})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.p})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.t})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.w})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.z})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.B})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.E})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.I})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.M})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.K})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.Q})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.O})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.tb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.pb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.xb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.ac})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.ec})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.kc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.oc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.sc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Jc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Mc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Pc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Yc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Zc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.td})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Id})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Gd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.de})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ee})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.je})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.Ce})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Ge})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.He})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Le})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Oe})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Ue})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.Hf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.lh})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.ph})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.Ph})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.gi})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Qi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Zi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.ej})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.cj})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.gj})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.oj})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.Gj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.Ij})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Wj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.uk})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Bk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Ek})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.qd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.wd})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.xk})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Je})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Nh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.yi})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.Ig})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.ld})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.ah})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Hb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Ve})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.ud})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Dk})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Ck})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.sh})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.th})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.Hg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.he})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.wf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Ib})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.ed})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.kf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.S})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.Ac})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Od})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Nd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.jf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Lf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.Hk})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ui})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.Fg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.vb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.uh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Xi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.Lk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.ff})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.qf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.Nk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.Oi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.gf})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.Mi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.ue})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.ve})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.Kk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.hf})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.xc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Ti})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.xg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.Kf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Rh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.zf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.wb})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.Mk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.Pi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.ef})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.Li})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.se})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.te})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.kh})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Lh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.Jg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.kd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.bh})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.ch})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.qk})),e.d(t,"__wbg_new_ab6fd82b10560829",(function(){return u.Mg})),e.d(t,"__wbg_append_7bfcb4937d1d5e29",(function(){return u.m})),e.d(t,"__wbg_origin_ee93e29ace71f568",(function(){return u.ih})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Tc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Uc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Sc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.F})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.tc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Qc})),e.d(t,"__wbg_newwithstrandinit_3fd6fba4083ff2d0",(function(){return u.Wg})),e.d(t,"__wbg_instanceof_Response_849eb93e75734b6e",(function(){return u.sf})),e.d(t,"__wbg_url_5f6dc4009ac5f99d",(function(){return u.rk})),e.d(t,"__wbg_status_61a01141acd3cf74",(function(){return u.Yi})),e.d(t,"__wbg_headers_9620bfada380764a",(function(){return u.df})),e.d(t,"__wbg_arrayBuffer_29931d52c7206b02",(function(){return u.n})),e.d(t,"__wbg_text_450a059667fd91fd",(function(){return u.Cj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Qe})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.xh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.sg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Pf})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Mh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Si})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.yg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.cb})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.db})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.Bg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.Cg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.nh})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.wh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.oh})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.oe})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.We})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.Df})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.Gg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Og})),e.d(t,"__wbg_next_40fc327bfc8770e6",(function(){return u.Yg})),e.d(t,"__wbg_next_196c84450b364254",(function(){return u.Xg})),e.d(t,"__wbg_done_298b57d23c0fc80c",(function(){return u.pd})),e.d(t,"__wbg_value_d93c65011f51a456",(function(){return u.wk})),e.d(t,"__wbg_iterator_2cee6dadfd956dfa",(function(){return u.yf})),e.d(t,"__wbg_get_e3c254076557e348",(function(){return u.Xe})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.eb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Lg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.hi})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.Ok})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Ye})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Ze})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.if})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.dh})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.Ah})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.rf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Be})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.xf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.vk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.ai})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.hb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Dj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.Ej})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.ab})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Qg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Tg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Rg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Vg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.Kg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.Ji})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.Cf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Pg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Sg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.bb})),e.d(t,"__wbg_has_0af94d20077affa2",(function(){return u.bf})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.Ii})),e.d(t,"__wbg_stringify_8887fe74e1c50d81",(function(){return u.hj})),e.d(t,"__wbindgen_debug_string",(function(){return u.rl})),e.d(t,"__wbindgen_throw",(function(){return u.Cl})),e.d(t,"__wbindgen_memory",(function(){return u.vl})),e.d(t,"__wbindgen_closure_wrapper644",(function(){return u.kl})),e.d(t,"__wbindgen_closure_wrapper645",(function(){return u.ll})),e.d(t,"__wbindgen_closure_wrapper646",(function(){return u.ml})),e.d(t,"__wbindgen_closure_wrapper647",(function(){return u.nl})),e.d(t,"__wbindgen_closure_wrapper648",(function(){return u.ol})),e.d(t,"__wbindgen_closure_wrapper649",(function(){return u.pl})),e.d(t,"__wbindgen_closure_wrapper650",(function(){return u.ql})),e.d(t,"__wbindgen_closure_wrapper1102",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper1103",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper1104",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper1105",(function(){return u.Wk})),e.d(t,"__wbindgen_closure_wrapper1106",(function(){return u.Xk})),e.d(t,"__wbindgen_closure_wrapper1107",(function(){return u.Yk})),e.d(t,"__wbindgen_closure_wrapper1108",(function(){return u.Zk})),e.d(t,"__wbindgen_closure_wrapper2464",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper2465",(function(){return u.bl})),e.d(t,"__wbindgen_closure_wrapper2466",(function(){return u.cl})),e.d(t,"__wbindgen_closure_wrapper2467",(function(){return u.dl})),e.d(t,"__wbindgen_closure_wrapper2468",(function(){return u.el})),e.d(t,"__wbindgen_closure_wrapper2469",(function(){return u.fl})),e.d(t,"__wbindgen_closure_wrapper2470",(function(){return u.gl})),e.d(t,"__wbindgen_closure_wrapper4549",(function(){return u.hl})),e.d(t,"__wbindgen_closure_wrapper4551",(function(){return u.il})),e.d(t,"__wbindgen_closure_wrapper5284",(function(){return u.jl})),Object(u.Ki)(r),r.__wbindgen_start()},405:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(247);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/25.91ad9338.js b/assets/js/25.91ad9338.js deleted file mode 100644 index 1d689e851..000000000 --- a/assets/js/25.91ad9338.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{246:function(n,t,e){"use strict";(function(n){e.d(t,"zi",(function(){return u})),e.d(t,"sl",(function(){return F})),e.d(t,"ol",(function(){return W})),e.d(t,"pl",(function(){return q})),e.d(t,"Hk",(function(){return z})),e.d(t,"jl",(function(){return U})),e.d(t,"nl",(function(){return K})),e.d(t,"ql",(function(){return Q})),e.d(t,"Eg",(function(){return N})),e.d(t,"Li",(function(){return X})),e.d(t,"Rd",(function(){return Y})),e.d(t,"Wd",(function(){return H})),e.d(t,"Vg",(function(){return J})),e.d(t,"Wg",(function(){return Z})),e.d(t,"qe",(function(){return $})),e.d(t,"Kh",(function(){return nn})),e.d(t,"Th",(function(){return tn})),e.d(t,"Nh",(function(){return en})),e.d(t,"Xg",(function(){return rn})),e.d(t,"oh",(function(){return un})),e.d(t,"wk",(function(){return fn})),e.d(t,"b",(function(){return cn})),e.d(t,"lh",(function(){return on})),e.d(t,"Lh",(function(){return _n})),e.d(t,"Sh",(function(){return dn})),e.d(t,"ml",(function(){return an})),e.d(t,"xk",(function(){return bn})),e.d(t,"Zg",(function(){return gn})),e.d(t,"Qg",(function(){return wn})),e.d(t,"mf",(function(){return sn})),e.d(t,"lf",(function(){return ln})),e.d(t,"af",(function(){return mn})),e.d(t,"Ud",(function(){return pn})),e.d(t,"Cf",(function(){return hn})),e.d(t,"Jh",(function(){return xn})),e.d(t,"Hb",(function(){return yn})),e.d(t,"we",(function(){return Sn})),e.d(t,"of",(function(){return kn})),e.d(t,"ng",(function(){return vn})),e.d(t,"nf",(function(){return Bn})),e.d(t,"Ae",(function(){return Pn})),e.d(t,"eg",(function(){return jn})),e.d(t,"fg",(function(){return In})),e.d(t,"gg",(function(){return An})),e.d(t,"dg",(function(){return Dn})),e.d(t,"Mf",(function(){return Tn})),e.d(t,"Nf",(function(){return Cn})),e.d(t,"Wf",(function(){return Mn})),e.d(t,"Vf",(function(){return Fn})),e.d(t,"Yf",(function(){return En})),e.d(t,"Zf",(function(){return Rn})),e.d(t,"bg",(function(){return Ln})),e.d(t,"cg",(function(){return On})),e.d(t,"ig",(function(){return Gn})),e.d(t,"hg",(function(){return Vn})),e.d(t,"ag",(function(){return Wn})),e.d(t,"rg",(function(){return qn})),e.d(t,"qg",(function(){return zn})),e.d(t,"lg",(function(){return Un})),e.d(t,"Of",(function(){return Kn})),e.d(t,"jg",(function(){return Qn})),e.d(t,"kg",(function(){return Nn})),e.d(t,"Xf",(function(){return Xn})),e.d(t,"Tf",(function(){return Yn})),e.d(t,"Pf",(function(){return Hn})),e.d(t,"Qf",(function(){return Jn})),e.d(t,"Rf",(function(){return Zn})),e.d(t,"Sf",(function(){return $n})),e.d(t,"Uf",(function(){return nt})),e.d(t,"Pd",(function(){return tt})),e.d(t,"cf",(function(){return et})),e.d(t,"vh",(function(){return rt})),e.d(t,"il",(function(){return ut})),e.d(t,"a",(function(){return ft})),e.d(t,"c",(function(){return ct})),e.d(t,"Hh",(function(){return it})),e.d(t,"Ee",(function(){return ot})),e.d(t,"Td",(function(){return _t})),e.d(t,"Df",(function(){return dt})),e.d(t,"oc",(function(){return at})),e.d(t,"Tb",(function(){return bt})),e.d(t,"Ub",(function(){return gt})),e.d(t,"dc",(function(){return wt})),e.d(t,"jc",(function(){return st})),e.d(t,"Zb",(function(){return lt})),e.d(t,"Xb",(function(){return mt})),e.d(t,"sc",(function(){return pt})),e.d(t,"nc",(function(){return ht})),e.d(t,"gc",(function(){return xt})),e.d(t,"Yb",(function(){return yt})),e.d(t,"ic",(function(){return St})),e.d(t,"cd",(function(){return kt})),e.d(t,"Ci",(function(){return vt})),e.d(t,"ph",(function(){return Bt})),e.d(t,"hh",(function(){return Pt})),e.d(t,"Jf",(function(){return jt})),e.d(t,"dk",(function(){return It})),e.d(t,"wc",(function(){return At})),e.d(t,"ed",(function(){return Dt})),e.d(t,"dd",(function(){return Tt})),e.d(t,"me",(function(){return Ct})),e.d(t,"ne",(function(){return Mt})),e.d(t,"Lb",(function(){return Ft})),e.d(t,"Mb",(function(){return Et})),e.d(t,"Rb",(function(){return Rt})),e.d(t,"Sb",(function(){return Lt})),e.d(t,"q",(function(){return Ot})),e.d(t,"Nd",(function(){return Gt})),e.d(t,"s",(function(){return Vt})),e.d(t,"Md",(function(){return Wt})),e.d(t,"zf",(function(){return qt})),e.d(t,"be",(function(){return zt})),e.d(t,"Yd",(function(){return Ut})),e.d(t,"jb",(function(){return Kt})),e.d(t,"ib",(function(){return Qt})),e.d(t,"Fk",(function(){return Nt})),e.d(t,"Oh",(function(){return Xt})),e.d(t,"ae",(function(){return Yt})),e.d(t,"Zd",(function(){return Ht})),e.d(t,"Dk",(function(){return Jt})),e.d(t,"gk",(function(){return Zt})),e.d(t,"Ki",(function(){return $t})),e.d(t,"Ek",(function(){return ne})),e.d(t,"Nb",(function(){return te})),e.d(t,"ji",(function(){return ee})),e.d(t,"di",(function(){return re})),e.d(t,"Yh",(function(){return ue})),e.d(t,"od",(function(){return fe})),e.d(t,"nd",(function(){return ce})),e.d(t,"ki",(function(){return ie})),e.d(t,"Zh",(function(){return oe})),e.d(t,"bi",(function(){return _e})),e.d(t,"gi",(function(){return de})),e.d(t,"ii",(function(){return ae})),e.d(t,"ui",(function(){return be})),e.d(t,"si",(function(){return ge})),e.d(t,"Fd",(function(){return we})),e.d(t,"Cd",(function(){return se})),e.d(t,"Ed",(function(){return le})),e.d(t,"Ad",(function(){return me})),e.d(t,"li",(function(){return pe})),e.d(t,"ai",(function(){return he})),e.d(t,"ci",(function(){return xe})),e.d(t,"fi",(function(){return ye})),e.d(t,"hi",(function(){return Se})),e.d(t,"vi",(function(){return ke})),e.d(t,"ti",(function(){return ve})),e.d(t,"Gd",(function(){return Be})),e.d(t,"Bd",(function(){return Pe})),e.d(t,"Dd",(function(){return je})),e.d(t,"zd",(function(){return Ie})),e.d(t,"ei",(function(){return Ae})),e.d(t,"oi",(function(){return De})),e.d(t,"wi",(function(){return Te})),e.d(t,"pi",(function(){return Ce})),e.d(t,"Sd",(function(){return Me})),e.d(t,"Yi",(function(){return Fe})),e.d(t,"th",(function(){return Ee})),e.d(t,"uh",(function(){return Re})),e.d(t,"hl",(function(){return Le})),e.d(t,"Gk",(function(){return Oe})),e.d(t,"ll",(function(){return Ge})),e.d(t,"sf",(function(){return Ve})),e.d(t,"r",(function(){return We})),e.d(t,"v",(function(){return qe})),e.d(t,"C",(function(){return ze})),e.d(t,"G",(function(){return Ue})),e.d(t,"R",(function(){return Ke})),e.d(t,"U",(function(){return Qe})),e.d(t,"X",(function(){return Ne})),e.d(t,"Y",(function(){return Xe})),e.d(t,"kb",(function(){return Ye})),e.d(t,"lb",(function(){return He})),e.d(t,"vb",(function(){return Je})),e.d(t,"Eb",(function(){return Ze})),e.d(t,"Cb",(function(){return $e})),e.d(t,"Fb",(function(){return nr})),e.d(t,"Gb",(function(){return tr})),e.d(t,"Kb",(function(){return er})),e.d(t,"Qb",(function(){return rr})),e.d(t,"hc",(function(){return ur})),e.d(t,"mc",(function(){return fr})),e.d(t,"vc",(function(){return cr})),e.d(t,"Ic",(function(){return ir})),e.d(t,"Lc",(function(){return or})),e.d(t,"Oc",(function(){return _r})),e.d(t,"Sc",(function(){return dr})),e.d(t,"sd",(function(){return ar})),e.d(t,"wd",(function(){return br})),e.d(t,"yd",(function(){return gr})),e.d(t,"Ld",(function(){return wr})),e.d(t,"Vd",(function(){return sr})),e.d(t,"he",(function(){return lr})),e.d(t,"oe",(function(){return mr})),e.d(t,"ze",(function(){return pr})),e.d(t,"Ke",(function(){return hr})),e.d(t,"Re",(function(){return xr})),e.d(t,"Se",(function(){return yr})),e.d(t,"uf",(function(){return Sr})),e.d(t,"wh",(function(){return kr})),e.d(t,"xh",(function(){return vr})),e.d(t,"zh",(function(){return Br})),e.d(t,"Dh",(function(){return Pr})),e.d(t,"Qh",(function(){return jr})),e.d(t,"Rh",(function(){return Ir})),e.d(t,"Zi",(function(){return Ar})),e.d(t,"bj",(function(){return Dr})),e.d(t,"ej",(function(){return Tr})),e.d(t,"fj",(function(){return Cr})),e.d(t,"jj",(function(){return Mr})),e.d(t,"kj",(function(){return Fr})),e.d(t,"gj",(function(){return Er})),e.d(t,"ij",(function(){return Rr})),e.d(t,"lj",(function(){return Lr})),e.d(t,"oj",(function(){return Or})),e.d(t,"nj",(function(){return Gr})),e.d(t,"pj",(function(){return Vr})),e.d(t,"mj",(function(){return Wr})),e.d(t,"qj",(function(){return qr})),e.d(t,"yj",(function(){return zr})),e.d(t,"zj",(function(){return Ur})),e.d(t,"Bj",(function(){return Kr})),e.d(t,"Dj",(function(){return Qr})),e.d(t,"Ej",(function(){return Nr})),e.d(t,"Hj",(function(){return Xr})),e.d(t,"Ij",(function(){return Yr})),e.d(t,"Lj",(function(){return Hr})),e.d(t,"Oj",(function(){return Jr})),e.d(t,"Pj",(function(){return Zr})),e.d(t,"Qj",(function(){return $r})),e.d(t,"Sj",(function(){return nu})),e.d(t,"Tj",(function(){return tu})),e.d(t,"Uj",(function(){return eu})),e.d(t,"Wj",(function(){return ru})),e.d(t,"Xj",(function(){return uu})),e.d(t,"Yj",(function(){return fu})),e.d(t,"Zj",(function(){return cu})),e.d(t,"bk",(function(){return iu})),e.d(t,"ck",(function(){return ou})),e.d(t,"mk",(function(){return _u})),e.d(t,"nk",(function(){return du})),e.d(t,"g",(function(){return au})),e.d(t,"o",(function(){return bu})),e.d(t,"u",(function(){return gu})),e.d(t,"x",(function(){return wu})),e.d(t,"y",(function(){return su})),e.d(t,"A",(function(){return lu})),e.d(t,"D",(function(){return mu})),e.d(t,"H",(function(){return pu})),e.d(t,"L",(function(){return hu})),e.d(t,"J",(function(){return xu})),e.d(t,"P",(function(){return yu})),e.d(t,"N",(function(){return Su})),e.d(t,"tb",(function(){return ku})),e.d(t,"nb",(function(){return vu})),e.d(t,"pb",(function(){return Bu})),e.d(t,"rb",(function(){return Pu})),e.d(t,"zb",(function(){return ju})),e.d(t,"Bb",(function(){return Iu})),e.d(t,"Pb",(function(){return Au})),e.d(t,"Wb",(function(){return Du})),e.d(t,"cc",(function(){return Tu})),e.d(t,"ec",(function(){return Cu})),e.d(t,"kc",(function(){return Mu})),e.d(t,"qc",(function(){return Fu})),e.d(t,"rc",(function(){return Eu})),e.d(t,"Ac",(function(){return Ru})),e.d(t,"Dc",(function(){return Lu})),e.d(t,"Fc",(function(){return Ou})),e.d(t,"Hc",(function(){return Gu})),e.d(t,"Jc",(function(){return Vu})),e.d(t,"Mc",(function(){return Wu})),e.d(t,"Pc",(function(){return qu})),e.d(t,"Xc",(function(){return zu})),e.d(t,"Yc",(function(){return Uu})),e.d(t,"bd",(function(){return Ku})),e.d(t,"kd",(function(){return Qu})),e.d(t,"id",(function(){return Nu})),e.d(t,"td",(function(){return Xu})),e.d(t,"Kd",(function(){return Yu})),e.d(t,"Id",(function(){return Hu})),e.d(t,"de",(function(){return Ju})),e.d(t,"ge",(function(){return Zu})),e.d(t,"je",(function(){return $u})),e.d(t,"ye",(function(){return nf})),e.d(t,"De",(function(){return tf})),e.d(t,"Fe",(function(){return ef})),e.d(t,"Ie",(function(){return rf})),e.d(t,"Me",(function(){return uf})),e.d(t,"Ne",(function(){return ff})),e.d(t,"Pe",(function(){return cf})),e.d(t,"Te",(function(){return of})),e.d(t,"Ff",(function(){return _f})),e.d(t,"ch",(function(){return df})),e.d(t,"gh",(function(){return af})),e.d(t,"Fh",(function(){return bf})),e.d(t,"Uh",(function(){return gf})),e.d(t,"Gi",(function(){return wf})),e.d(t,"Pi",(function(){return sf})),e.d(t,"Si",(function(){return lf})),e.d(t,"Qi",(function(){return mf})),e.d(t,"Ui",(function(){return pf})),e.d(t,"cj",(function(){return hf})),e.d(t,"vj",(function(){return xf})),e.d(t,"xj",(function(){return yf})),e.d(t,"Jj",(function(){return Sf})),e.d(t,"hk",(function(){return kf})),e.d(t,"ok",(function(){return vf})),e.d(t,"tk",(function(){return Bf})),e.d(t,"tf",(function(){return Pf})),e.d(t,"pd",(function(){return jf})),e.d(t,"Gf",(function(){return If})),e.d(t,"vg",(function(){return Af})),e.d(t,"gd",(function(){return Df})),e.d(t,"gb",(function(){return Tf})),e.d(t,"re",(function(){return Cf})),e.d(t,"Kf",(function(){return Mf})),e.d(t,"Mh",(function(){return Ff})),e.d(t,"fb",(function(){return Ef})),e.d(t,"Ih",(function(){return Rf})),e.d(t,"sb",(function(){return Lf})),e.d(t,"ri",(function(){return Of})),e.d(t,"qi",(function(){return Gf})),e.d(t,"T",(function(){return Vf})),e.d(t,"uk",(function(){return Wf})),e.d(t,"e",(function(){return qf})),e.d(t,"le",(function(){return zf})),e.d(t,"ac",(function(){return Uf})),e.d(t,"xe",(function(){return Kf})),e.d(t,"sh",(function(){return Qf})),e.d(t,"rh",(function(){return Nf})),e.d(t,"Xh",(function(){return Xf})),e.d(t,"mi",(function(){return Yf})),e.d(t,"ug",(function(){return Hf})),e.d(t,"Xd",(function(){return Jf})),e.d(t,"Xi",(function(){return Zf})),e.d(t,"ce",(function(){return $f})),e.d(t,"W",(function(){return nc})),e.d(t,"V",(function(){return tc})),e.d(t,"Z",(function(){return ec})),e.d(t,"Db",(function(){return rc})),e.d(t,"yh",(function(){return uc})),e.d(t,"aj",(function(){return fc})),e.d(t,"hj",(function(){return cc})),e.d(t,"Aj",(function(){return ic})),e.d(t,"Cj",(function(){return oc})),e.d(t,"Fj",(function(){return _c})),e.d(t,"Gj",(function(){return dc})),e.d(t,"Mj",(function(){return ac})),e.d(t,"Nj",(function(){return bc})),e.d(t,"Rj",(function(){return gc})),e.d(t,"Vj",(function(){return wc})),e.d(t,"ak",(function(){return sc})),e.d(t,"f",(function(){return lc})),e.d(t,"p",(function(){return mc})),e.d(t,"t",(function(){return pc})),e.d(t,"w",(function(){return hc})),e.d(t,"z",(function(){return xc})),e.d(t,"B",(function(){return yc})),e.d(t,"E",(function(){return Sc})),e.d(t,"I",(function(){return kc})),e.d(t,"M",(function(){return vc})),e.d(t,"K",(function(){return Bc})),e.d(t,"Q",(function(){return Pc})),e.d(t,"O",(function(){return jc})),e.d(t,"ub",(function(){return Ic})),e.d(t,"mb",(function(){return Ac})),e.d(t,"ob",(function(){return Dc})),e.d(t,"qb",(function(){return Tc})),e.d(t,"yb",(function(){return Cc})),e.d(t,"Ab",(function(){return Mc})),e.d(t,"Ob",(function(){return Fc})),e.d(t,"Vb",(function(){return Ec})),e.d(t,"bc",(function(){return Rc})),e.d(t,"fc",(function(){return Lc})),e.d(t,"lc",(function(){return Oc})),e.d(t,"pc",(function(){return Gc})),e.d(t,"tc",(function(){return Vc})),e.d(t,"zc",(function(){return Wc})),e.d(t,"Cc",(function(){return qc})),e.d(t,"Ec",(function(){return zc})),e.d(t,"Gc",(function(){return Uc})),e.d(t,"Kc",(function(){return Kc})),e.d(t,"Nc",(function(){return Qc})),e.d(t,"Qc",(function(){return Nc})),e.d(t,"Wc",(function(){return Xc})),e.d(t,"Zc",(function(){return Yc})),e.d(t,"ad",(function(){return Hc})),e.d(t,"jd",(function(){return Jc})),e.d(t,"hd",(function(){return Zc})),e.d(t,"ud",(function(){return $c})),e.d(t,"Jd",(function(){return ni})),e.d(t,"Hd",(function(){return ti})),e.d(t,"ee",(function(){return ei})),e.d(t,"fe",(function(){return ri})),e.d(t,"ke",(function(){return ui})),e.d(t,"Ce",(function(){return fi})),e.d(t,"Ge",(function(){return ci})),e.d(t,"He",(function(){return ii})),e.d(t,"Le",(function(){return oi})),e.d(t,"Oe",(function(){return _i})),e.d(t,"Ue",(function(){return di})),e.d(t,"Ef",(function(){return ai})),e.d(t,"bh",(function(){return bi})),e.d(t,"fh",(function(){return gi})),e.d(t,"Eh",(function(){return wi})),e.d(t,"Vh",(function(){return si})),e.d(t,"Fi",(function(){return li})),e.d(t,"Oi",(function(){return mi})),e.d(t,"Ti",(function(){return pi})),e.d(t,"Ri",(function(){return hi})),e.d(t,"Vi",(function(){return xi})),e.d(t,"dj",(function(){return yi})),e.d(t,"uj",(function(){return Si})),e.d(t,"wj",(function(){return ki})),e.d(t,"Kj",(function(){return vi})),e.d(t,"ik",(function(){return Bi})),e.d(t,"pk",(function(){return Pi})),e.d(t,"sk",(function(){return ji})),e.d(t,"Je",(function(){return Ii})),e.d(t,"Ch",(function(){return Ai})),e.d(t,"ni",(function(){return Di})),e.d(t,"zk",(function(){return Ti})),e.d(t,"ff",(function(){return Ci})),e.d(t,"rk",(function(){return Mi})),e.d(t,"qk",(function(){return Fi})),e.d(t,"yk",(function(){return Ei})),e.d(t,"hf",(function(){return Ri})),e.d(t,"vd",(function(){return Li})),e.d(t,"Ji",(function(){return Oi})),e.d(t,"wg",(function(){return Gi})),e.d(t,"d",(function(){return Vi})),e.d(t,"vf",(function(){return Wi})),e.d(t,"dh",(function(){return qi})),e.d(t,"mh",(function(){return zi})),e.d(t,"eh",(function(){return Ui})),e.d(t,"pe",(function(){return Ki})),e.d(t,"nh",(function(){return Qi})),e.d(t,"mg",(function(){return Ni})),e.d(t,"Lf",(function(){return Xi})),e.d(t,"i",(function(){return Yi})),e.d(t,"Bh",(function(){return Hi})),e.d(t,"xc",(function(){return Ji})),e.d(t,"Hi",(function(){return Zi})),e.d(t,"j",(function(){return $i})),e.d(t,"pg",(function(){return no})),e.d(t,"cb",(function(){return to})),e.d(t,"db",(function(){return eo})),e.d(t,"sg",(function(){return ro})),e.d(t,"tg",(function(){return uo})),e.d(t,"Uc",(function(){return fo})),e.d(t,"Vc",(function(){return co})),e.d(t,"Tc",(function(){return io})),e.d(t,"h",(function(){return oo})),e.d(t,"Ah",(function(){return _o})),e.d(t,"pf",(function(){return ao})),e.d(t,"Bk",(function(){return bo})),e.d(t,"Di",(function(){return go})),e.d(t,"gf",(function(){return wo})),e.d(t,"Bi",(function(){return so})),e.d(t,"ue",(function(){return lo})),e.d(t,"ve",(function(){return mo})),e.d(t,"Yg",(function(){return po})),e.d(t,"Ak",(function(){return ho})),e.d(t,"Ei",(function(){return xo})),e.d(t,"ef",(function(){return yo})),e.d(t,"Ai",(function(){return So})),e.d(t,"se",(function(){return ko})),e.d(t,"te",(function(){return vo})),e.d(t,"Ag",(function(){return Bo})),e.d(t,"ld",(function(){return Po})),e.d(t,"Sg",(function(){return jo})),e.d(t,"Tg",(function(){return Io})),e.d(t,"ek",(function(){return Ao})),e.d(t,"Qe",(function(){return Do})),e.d(t,"ie",(function(){return To})),e.d(t,"Jb",(function(){return Co})),e.d(t,"fd",(function(){return Mo})),e.d(t,"Bc",(function(){return Fo})),e.d(t,"Qd",(function(){return Eo})),e.d(t,"Od",(function(){return Ro})),e.d(t,"jf",(function(){return Lo})),e.d(t,"If",(function(){return Oo})),e.d(t,"vk",(function(){return Go})),e.d(t,"ih",(function(){return Vo})),e.d(t,"jh",(function(){return Wo})),e.d(t,"yg",(function(){return qo})),e.d(t,"wb",(function(){return zo})),e.d(t,"kh",(function(){return Uo})),e.d(t,"Mi",(function(){return Ko})),e.d(t,"kf",(function(){return Qo})),e.d(t,"S",(function(){return No})),e.d(t,"rf",(function(){return Xo})),e.d(t,"fk",(function(){return Yo})),e.d(t,"Ni",(function(){return Ho})),e.d(t,"df",(function(){return Jo})),e.d(t,"n",(function(){return Zo})),e.d(t,"rj",(function(){return $o})),e.d(t,"k",(function(){return n_})),e.d(t,"yc",(function(){return t_})),e.d(t,"Ii",(function(){return e_})),e.d(t,"og",(function(){return r_})),e.d(t,"Hf",(function(){return u_})),e.d(t,"Gh",(function(){return f_})),e.d(t,"yf",(function(){return c_})),e.d(t,"xb",(function(){return i_})),e.d(t,"ah",(function(){return o_})),e.d(t,"Ng",(function(){return __})),e.d(t,"rd",(function(){return d_})),e.d(t,"xd",(function(){return a_})),e.d(t,"lk",(function(){return b_})),e.d(t,"Dg",(function(){return g_})),e.d(t,"m",(function(){return w_})),e.d(t,"zg",(function(){return s_})),e.d(t,"md",(function(){return l_})),e.d(t,"Rg",(function(){return m_})),e.d(t,"l",(function(){return p_})),e.d(t,"Ib",(function(){return h_})),e.d(t,"Ve",(function(){return x_})),e.d(t,"F",(function(){return y_})),e.d(t,"uc",(function(){return S_})),e.d(t,"Rc",(function(){return k_})),e.d(t,"We",(function(){return v_})),e.d(t,"Bf",(function(){return B_})),e.d(t,"xg",(function(){return P_})),e.d(t,"Fg",(function(){return j_})),e.d(t,"Pg",(function(){return I_})),e.d(t,"Og",(function(){return A_})),e.d(t,"qd",(function(){return D_})),e.d(t,"kk",(function(){return T_})),e.d(t,"xf",(function(){return C_})),e.d(t,"Xe",(function(){return M_})),e.d(t,"eb",(function(){return F_})),e.d(t,"Cg",(function(){return E_})),e.d(t,"Wh",(function(){return R_})),e.d(t,"Ck",(function(){return L_})),e.d(t,"Ye",(function(){return O_})),e.d(t,"Ze",(function(){return G_})),e.d(t,"if",(function(){return V_})),e.d(t,"Ug",(function(){return W_})),e.d(t,"qh",(function(){return q_})),e.d(t,"qf",(function(){return z_})),e.d(t,"Be",(function(){return U_})),e.d(t,"wf",(function(){return K_})),e.d(t,"jk",(function(){return Q_})),e.d(t,"Ph",(function(){return N_})),e.d(t,"hb",(function(){return X_})),e.d(t,"sj",(function(){return Y_})),e.d(t,"tj",(function(){return H_})),e.d(t,"ab",(function(){return J_})),e.d(t,"Hg",(function(){return Z_})),e.d(t,"Kg",(function(){return $_})),e.d(t,"Ig",(function(){return nd})),e.d(t,"Mg",(function(){return td})),e.d(t,"Bg",(function(){return ed})),e.d(t,"yi",(function(){return rd})),e.d(t,"Af",(function(){return ud})),e.d(t,"Lg",(function(){return fd})),e.d(t,"Gg",(function(){return cd})),e.d(t,"Jg",(function(){return id})),e.d(t,"bb",(function(){return od})),e.d(t,"bf",(function(){return _d})),e.d(t,"xi",(function(){return dd})),e.d(t,"Wi",(function(){return ad})),e.d(t,"gl",(function(){return bd})),e.d(t,"rl",(function(){return gd})),e.d(t,"kl",(function(){return wd})),e.d(t,"Zk",(function(){return sd})),e.d(t,"al",(function(){return ld})),e.d(t,"bl",(function(){return md})),e.d(t,"cl",(function(){return pd})),e.d(t,"dl",(function(){return hd})),e.d(t,"el",(function(){return xd})),e.d(t,"fl",(function(){return yd})),e.d(t,"Ik",(function(){return Sd})),e.d(t,"Jk",(function(){return kd})),e.d(t,"Kk",(function(){return vd})),e.d(t,"Lk",(function(){return Bd})),e.d(t,"Mk",(function(){return Pd})),e.d(t,"Nk",(function(){return jd})),e.d(t,"Ok",(function(){return Id})),e.d(t,"Pk",(function(){return Ad})),e.d(t,"Qk",(function(){return Dd})),e.d(t,"Rk",(function(){return Td})),e.d(t,"Sk",(function(){return Cd})),e.d(t,"Tk",(function(){return Md})),e.d(t,"Uk",(function(){return Fd})),e.d(t,"Vk",(function(){return Ed})),e.d(t,"Wk",(function(){return Rd})),e.d(t,"Xk",(function(){return Ld})),e.d(t,"Yk",(function(){return Od}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=0,d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}let b=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof b.encodeInto?function(n,t){return b.encodeInto(n,t)}:function(n,t){const e=b.encode(n);return t.set(e),{read:n.length,written:e.length}};function w(n,t,e){if(void 0===e){const e=b.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),_=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=g(n,t).written,u=e(u,r,c,1)>>>0}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}function p(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=n,t}let h=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function x(n,t){return n>>>=0,h.decode(a().subarray(n,n+t))}h.decode();let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h5c226f3892673e63(n,t,p(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hfd9f858e4ec317eb(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd9bcf11fe1bf417d(n,t,p(e),p(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h09238471a84917fc(n,t,p(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0d37e328c1adb86c(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h82936addb5ca985c(n,t,p(e),p(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,p(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,p(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,p(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(p(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function z(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return void 0===c(n)}function K(n){return p(c(n))}function Q(n,t){return p(x(n,t))}function N(){return p(new Error)}function X(n,t){const e=w(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Y(n,t){let e,u;try{e=n,u=t,console.error(x(n,t))}finally{r.__wbindgen_free(e,u,1)}}function H(n){return p(fetch(c(n)))}function J(n){return c(n).offsetX}function Z(n){return c(n).offsetY}function $(n){return p(c(n).getCoalescedEvents)}function nn(n){return p(c(n).requestFullscreen)}function tn(n){return p(c(n).scheduler)}function en(n){return p(c(n).requestIdleCallback)}function rn(n){return p(c(n).onpointerrawupdate)}function un(){return p(ResizeObserverEntry.prototype)}function fn(n){const t=c(n).webkitFullscreenElement;return s(t)?0:p(t)}function cn(n){return p(c(n).Window)}function on(n,t,e){return p(c(n).postTask(c(t),c(e)))}function _n(n){return p(c(n).requestFullscreen())}function dn(n){return p(c(n).scheduler)}function an(n){return p(n)}function bn(n){c(n).webkitRequestFullscreen()}function gn(n){return p(c(n).performance)}function wn(n){return c(n).now()}function sn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function mn(n){return p(c(n).gpu)}function pn(n){return p(c(n).features)}function hn(n){return p(c(n).limits)}function xn(n,t){return p(c(n).requestDevice(c(t)))}function yn(n,t){c(n).configure(c(t))}function Sn(n){return p(c(n).getCurrentTexture())}function kn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function vn(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Bn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function Pn(n,t,e){return p(c(n).getMappedRange(t,e))}function jn(n){return c(n).maxTextureDimension1D}function In(n){return c(n).maxTextureDimension2D}function An(n){return c(n).maxTextureDimension3D}function Dn(n){return c(n).maxTextureArrayLayers}function Tn(n){return c(n).maxBindGroups}function Cn(n){return c(n).maxBindingsPerBindGroup}function Mn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Fn(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function En(n){return c(n).maxSampledTexturesPerShaderStage}function Rn(n){return c(n).maxSamplersPerShaderStage}function Ln(n){return c(n).maxStorageBuffersPerShaderStage}function On(n){return c(n).maxStorageTexturesPerShaderStage}function Gn(n){return c(n).maxUniformBuffersPerShaderStage}function Vn(n){return c(n).maxUniformBufferBindingSize}function Wn(n){return c(n).maxStorageBufferBindingSize}function qn(n){return c(n).minUniformBufferOffsetAlignment}function zn(n){return c(n).minStorageBufferOffsetAlignment}function Un(n){return c(n).maxVertexBuffers}function Kn(n){return c(n).maxBufferSize}function Qn(n){return c(n).maxVertexAttributes}function Nn(n){return c(n).maxVertexBufferArrayStride}function Xn(n){return c(n).maxInterStageShaderComponents}function Yn(n){return c(n).maxComputeWorkgroupStorageSize}function Hn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Jn(n){return c(n).maxComputeWorkgroupSizeX}function Zn(n){return c(n).maxComputeWorkgroupSizeY}function $n(n){return c(n).maxComputeWorkgroupSizeZ}function nt(n){return c(n).maxComputeWorkgroupsPerDimension}function tt(n){return p(c(n).error)}function et(n,t,e){return c(n).has(x(t,e))}function rt(n){return p(c(n).queue)}function ut(n){const t=c(n);return"object"==typeof t&&null!==t}function ft(n){return p(c(n).Window)}function ct(n){return p(c(n).WorkerGlobalScope)}function it(n,t){return p(c(n).requestAdapter(c(t)))}function ot(n){return p(c(n).getPreferredCanvasFormat())}function _t(n){return p(c(n).features)}function dt(n){return p(c(n).limits)}function at(n,t){return p(c(n).createShaderModule(c(t)))}function bt(n,t){return p(c(n).createBindGroupLayout(c(t)))}function gt(n,t){return p(c(n).createBindGroup(c(t)))}function wt(n,t){return p(c(n).createPipelineLayout(c(t)))}function st(n,t){return p(c(n).createRenderPipeline(c(t)))}function lt(n,t){return p(c(n).createComputePipeline(c(t)))}function mt(n,t){return p(c(n).createBuffer(c(t)))}function pt(n,t){return p(c(n).createTexture(c(t)))}function ht(n,t){return p(c(n).createSampler(c(t)))}function xt(n,t){return p(c(n).createQuerySet(c(t)))}function yt(n,t){return p(c(n).createCommandEncoder(c(t)))}function St(n,t){return p(c(n).createRenderBundleEncoder(c(t)))}function kt(n){c(n).destroy()}function vt(n,t){c(n).onuncapturederror=c(t)}function Bt(n,t){c(n).pushErrorScope(o(t))}function Pt(n){return p(c(n).popErrorScope())}function jt(n,t,e,r){return p(c(n).mapAsync(t>>>0,e,r))}function It(n){c(n).unmap()}function At(n,t){return p(c(n).createView(c(t)))}function Dt(n){c(n).destroy()}function Tt(n){c(n).destroy()}function Ct(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Mt(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Ft(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Et(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Lt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Ot(n,t){return p(c(n).beginComputePass(c(t)))}function Gt(n){c(n).end()}function Vt(n,t){return p(c(n).beginRenderPass(c(t)))}function Wt(n){c(n).end()}function qt(n,t){const e=w(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function zt(n,t){return p(c(n).finish(c(t)))}function Ut(n){return p(c(n).finish())}function Kt(n,t,e){c(n).clearBuffer(c(t),e)}function Qt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Nt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Xt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Yt(n){return p(c(n).finish())}function Ht(n,t){return p(c(n).finish(c(t)))}function Jt(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Zt(n){return c(n).usage}function $t(n){return c(n).size}function ne(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function te(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function ee(n,t){c(n).setPipeline(c(t))}function re(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function ue(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function fe(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function ce(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function ie(n,t){c(n).setPipeline(c(t))}function oe(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function _e(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function de(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function ae(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function be(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ge(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function we(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function se(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function le(n,t,e){c(n).drawIndirect(c(t),e)}function me(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function pe(n,t){c(n).setPipeline(c(t))}function he(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function xe(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ye(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Se(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ke(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ve(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Be(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Pe(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function je(n,t,e){c(n).drawIndirect(c(t),e)}function Ie(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ae(n,t){c(n).setBlendConstant(c(t))}function De(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Te(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Ce(n,t){c(n).setStencilReference(t>>>0)}function Me(n,t){c(n).executeBundles(c(t))}function Fe(n,t){c(n).submit(c(t))}function Ee(n){queueMicrotask(c(n))}function Re(n){return p(c(n).queueMicrotask)}function Le(n){return"function"==typeof c(n)}function Oe(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Ge(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function Ve(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function We(n,t,e){c(n).beginQuery(t>>>0,c(e))}function qe(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function ze(n,t,e){c(n).bindSampler(t>>>0,c(e))}function Ue(n,t){c(n).bindVertexArray(c(t))}function Ke(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function Qe(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ne(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Xe(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Ye(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function He(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function Je(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Ze(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function $e(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function nr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function tr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function er(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function rr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function ur(n){const t=c(n).createQuery();return s(t)?0:p(t)}function fr(n){const t=c(n).createSampler();return s(t)?0:p(t)}function cr(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function ir(n,t){c(n).deleteQuery(c(t))}function or(n,t){c(n).deleteSampler(c(t))}function _r(n,t){c(n).deleteSync(c(t))}function dr(n,t){c(n).deleteVertexArray(c(t))}function ar(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function br(n,t){c(n).drawBuffers(c(t))}function gr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function wr(n,t){c(n).endQuery(t>>>0)}function sr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return s(r)?0:p(r)}function lr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function mr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function pr(){return O((function(n,t,e){return p(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function hr(n,t,e){return p(c(n).getQueryParameter(c(t),e>>>0))}function xr(n,t,e){return p(c(n).getSyncParameter(c(t),e>>>0))}function yr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),x(e,r))}function Sr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function kr(n,t){c(n).readBuffer(t>>>0)}function vr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Br(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Pr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function jr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Ir(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Ar(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Dr(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Tr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Cr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Wr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function qr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function zr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function Ur(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function Kr(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function Qr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Nr(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Xr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Yr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Hr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Jr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Zr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function $r(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function nu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function cu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function iu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function ou(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function _u(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function du(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function au(n,t){c(n).activeTexture(t>>>0)}function bu(n,t,e){c(n).attachShader(c(t),c(e))}function gu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function wu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function su(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function lu(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function mu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function pu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function hu(n,t){c(n).blendEquation(t>>>0)}function xu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function yu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Su(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ku(n,t){c(n).clear(t>>>0)}function vu(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Bu(n,t){c(n).clearDepth(t)}function Pu(n,t){c(n).clearStencil(t)}function ju(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Iu(n,t){c(n).compileShader(c(t))}function Au(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Du(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function Tu(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Cu(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Mu(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Fu(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Eu(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Ru(n,t){c(n).cullFace(t>>>0)}function Lu(n,t){c(n).deleteBuffer(c(t))}function Ou(n,t){c(n).deleteFramebuffer(c(t))}function Gu(n,t){c(n).deleteProgram(c(t))}function Vu(n,t){c(n).deleteRenderbuffer(c(t))}function Wu(n,t){c(n).deleteShader(c(t))}function qu(n,t){c(n).deleteTexture(c(t))}function zu(n,t){c(n).depthFunc(t>>>0)}function Uu(n,t){c(n).depthMask(0!==t)}function Ku(n,t,e){c(n).depthRange(t,e)}function Qu(n,t){c(n).disable(t>>>0)}function Nu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Xu(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Yu(n,t){c(n).enable(t>>>0)}function Hu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ju(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Zu(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function $u(n,t){c(n).frontFace(t>>>0)}function nf(){return O((function(n,t,e){const r=c(n).getExtension(x(t,e));return s(r)?0:p(r)}),arguments)}function tf(){return O((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function ef(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function rf(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function uf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function ff(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function cf(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function of(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function _f(n,t){c(n).linkProgram(c(t))}function df(n,t,e){c(n).pixelStorei(t>>>0,e)}function af(n,t,e){c(n).polygonOffset(t,e)}function bf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function gf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function wf(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function sf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function lf(n,t){c(n).stencilMask(t>>>0)}function mf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function pf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function hf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function xf(n,t,e){c(n).uniform1f(c(t),e)}function yf(n,t,e){c(n).uniform1i(c(t),e)}function Sf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function kf(n,t){c(n).useProgram(c(t))}function vf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Bf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Pf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function jf(n){const t=c(n).document;return s(t)?0:p(t)}function If(n){return p(c(n).location)}function Af(n){return p(c(n).navigator)}function Df(n){return c(n).devicePixelRatio}function Tf(n,t){c(n).cancelIdleCallback(t>>>0)}function Cf(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return s(e)?0:p(e)}),arguments)}function Mf(){return O((function(n,t,e){const r=c(n).matchMedia(x(t,e));return s(r)?0:p(r)}),arguments)}function Ff(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Ef(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Rf(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Lf(n,t){c(n).clearTimeout(t)}function Of(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Gf(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Vf(n){const t=c(n).body;return s(t)?0:p(t)}function Wf(n){return p(c(n).visibilityState)}function qf(n){const t=c(n).activeElement;return s(t)?0:p(t)}function zf(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Uf(){return O((function(n,t,e){return p(c(n).createElement(x(t,e)))}),arguments)}function Kf(n,t,e){const r=c(n).getElementById(x(t,e));return s(r)?0:p(r)}function Qf(){return O((function(n,t,e){const r=c(n).querySelector(x(t,e));return s(r)?0:p(r)}),arguments)}function Nf(){return O((function(n,t,e){return p(c(n).querySelectorAll(x(t,e)))}),arguments)}function Xf(){return O((function(n,t,e,r,u){c(n).setAttribute(x(t,e),x(r,u))}),arguments)}function Yf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Hf(n){return p(c(n).navigator)}function Jf(n,t){return p(c(n).fetch(c(t)))}function Zf(n){return p(c(n).style)}function $f(){return O((function(n){c(n).focus()}),arguments)}function nc(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function tc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function ec(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function rc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function uc(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function fc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function cc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function ic(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function oc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function _c(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function dc(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function ac(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function bc(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function gc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function wc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function sc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function lc(n,t){c(n).activeTexture(t>>>0)}function mc(n,t,e){c(n).attachShader(c(t),c(e))}function pc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function hc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function xc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function yc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Sc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function kc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function vc(n,t){c(n).blendEquation(t>>>0)}function Bc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Pc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function jc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ic(n,t){c(n).clear(t>>>0)}function Ac(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Dc(n,t){c(n).clearDepth(t)}function Tc(n,t){c(n).clearStencil(t)}function Cc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Mc(n,t){c(n).compileShader(c(t))}function Fc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Ec(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function Rc(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Lc(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Oc(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Gc(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Vc(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Wc(n,t){c(n).cullFace(t>>>0)}function qc(n,t){c(n).deleteBuffer(c(t))}function zc(n,t){c(n).deleteFramebuffer(c(t))}function Uc(n,t){c(n).deleteProgram(c(t))}function Kc(n,t){c(n).deleteRenderbuffer(c(t))}function Qc(n,t){c(n).deleteShader(c(t))}function Nc(n,t){c(n).deleteTexture(c(t))}function Xc(n,t){c(n).depthFunc(t>>>0)}function Yc(n,t){c(n).depthMask(0!==t)}function Hc(n,t,e){c(n).depthRange(t,e)}function Jc(n,t){c(n).disable(t>>>0)}function Zc(n,t){c(n).disableVertexAttribArray(t>>>0)}function $c(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ni(n,t){c(n).enable(t>>>0)}function ti(n,t){c(n).enableVertexAttribArray(t>>>0)}function ei(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ri(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function ui(n,t){c(n).frontFace(t>>>0)}function fi(){return O((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function ci(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function ii(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function oi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function _i(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function di(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function ai(n,t){c(n).linkProgram(c(t))}function bi(n,t,e){c(n).pixelStorei(t>>>0,e)}function gi(n,t,e){c(n).polygonOffset(t,e)}function wi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function si(n,t,e,r,u){c(n).scissor(t,e,r,u)}function li(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function mi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function pi(n,t){c(n).stencilMask(t>>>0)}function hi(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function xi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yi(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Si(n,t,e){c(n).uniform1f(c(t),e)}function ki(n,t,e){c(n).uniform1i(c(t),e)}function vi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Bi(n,t){c(n).useProgram(c(t))}function Pi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function ji(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ii(){return O((function(n,t,e,u){const f=w(c(t).getPropertyValue(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Ai(){return O((function(n,t,e,u){const f=w(c(t).removeProperty(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Di(){return O((function(n,t,e,r,u){c(n).setProperty(x(t,e),x(r,u))}),arguments)}function Ti(n){return c(n).width}function Ci(n){return c(n).height}function Mi(n){return c(n).videoWidth}function Fi(n){return c(n).videoHeight}function Ei(n){return c(n).width}function Ri(n){return c(n).height}function Li(n,t){c(n).drawBuffersWEBGL(c(t))}function Oi(n){return p(c(n).signal)}function Gi(){return O((function(){return p(new AbortController)}),arguments)}function Vi(n){c(n).abort()}function Wi(n){return c(n).isIntersecting}function qi(n){return c(n).pointerId}function zi(n){return c(n).pressure}function Ui(n,t){const e=w(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Ki(n){return p(c(n).getCoalescedEvents())}function Qi(n){c(n).preventDefault()}function Ni(n,t){const e=w(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Xi(n){return c(n).matches}function Yi(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Hi(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Ji(n){return c(n).ctrlKey}function Zi(n){return c(n).shiftKey}function $i(n){return c(n).altKey}function no(n){return c(n).metaKey}function to(n){return c(n).button}function eo(n){return c(n).buttons}function ro(n){return c(n).movementX}function uo(n){return c(n).movementY}function fo(n){return c(n).deltaX}function co(n){return c(n).deltaY}function io(n){return c(n).deltaMode}function oo(){return O((function(n,t,e,r){c(n).addEventListener(x(t,e),c(r))}),arguments)}function _o(){return O((function(n,t,e,r){c(n).removeEventListener(x(t,e),c(r))}),arguments)}function ao(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function bo(n){return c(n).width}function go(n,t){c(n).width=t>>>0}function wo(n){return c(n).height}function so(n,t){c(n).height=t>>>0}function lo(){return O((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function mo(){return O((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function po(){return O((function(n,t){const e=w(c(t).origin,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}),arguments)}function ho(n){return c(n).width}function xo(n,t){c(n).width=t>>>0}function yo(n){return c(n).height}function So(n,t){c(n).height=t>>>0}function ko(){return O((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function vo(){return O((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function Bo(){return O((function(n){return p(new ResizeObserver(c(n)))}),arguments)}function Po(n){c(n).disconnect()}function jo(n,t){c(n).observe(c(t))}function Io(n,t,e){c(n).observe(c(t),c(e))}function Ao(n,t){c(n).unobserve(c(t))}function Do(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function To(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Co(n){return p(c(n).contentRect)}function Mo(n){return p(c(n).devicePixelContentBoxSize)}function Fo(n){console.debug(c(n))}function Eo(n){console.error(c(n))}function Ro(n,t){console.error(c(n),c(t))}function Lo(n){console.info(c(n))}function Oo(n){console.log(c(n))}function Go(n){console.warn(c(n))}function Vo(n){return p(c(n).port1)}function Wo(n){return p(c(n).port2)}function qo(){return O((function(){return p(new MessageChannel)}),arguments)}function zo(n){c(n).close()}function Uo(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Ko(n){c(n).start()}function Qo(n){return c(n).inlineSize}function No(n){return c(n).blockSize}function Xo(n){let t;try{t=c(n)instanceof Response}catch(n){t=!1}return t}function Yo(n,t){const e=w(c(t).url,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Ho(n){return c(n).status}function Jo(n){return p(c(n).headers)}function Zo(){return O((function(n){return p(c(n).arrayBuffer())}),arguments)}function $o(){return O((function(n){return p(c(n).text())}),arguments)}function n_(n){return c(n).altKey}function t_(n){return c(n).ctrlKey}function e_(n){return c(n).shiftKey}function r_(n){return c(n).metaKey}function u_(n){return c(n).location}function f_(n){return c(n).repeat}function c_(n,t){const e=w(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function i_(n,t){const e=w(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function o_(n){return c(n).persisted}function __(){return O((function(n,t,e){return p(new Request(x(n,t),c(e)))}),arguments)}function d_(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function a_(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function b_(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function g_(){return O((function(){return p(new Headers)}),arguments)}function w_(){return O((function(n,t,e,r,u){c(n).append(x(t,e),x(r,u))}),arguments)}function s_(){return O((function(n){return p(new IntersectionObserver(c(n)))}),arguments)}function l_(n){c(n).disconnect()}function m_(n,t){c(n).observe(c(t))}function p_(){return O((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function h_(n,t){return c(n).contains(c(t))}function x_(n,t){const e=c(n)[t>>>0];return s(e)?0:p(e)}function y_(n,t){c(n).bindVertexArrayOES(c(t))}function S_(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function k_(n,t){c(n).deleteVertexArrayOES(c(t))}function v_(n,t){return p(c(n)[t>>>0])}function B_(n){return c(n).length}function P_(){return p(new Array)}function j_(n,t){return p(new Function(x(n,t)))}function I_(n){return p(c(n).next)}function A_(){return O((function(n){return p(c(n).next())}),arguments)}function D_(n){return c(n).done}function T_(n){return p(c(n).value)}function C_(){return p(Symbol.iterator)}function M_(){return O((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function F_(){return O((function(n,t){return p(c(n).call(c(t)))}),arguments)}function E_(){return p(new Object)}function R_(){return O((function(){return p(self.self)}),arguments)}function L_(){return O((function(){return p(window.window)}),arguments)}function O_(){return O((function(){return p(globalThis.globalThis)}),arguments)}function G_(){return O((function(){return p(global.global)}),arguments)}function V_(n,t,e){return c(n).includes(c(t),e)}function W_(n){return p(Array.of(c(n)))}function q_(n,t){return c(n).push(c(t))}function z_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function U_(n,t){return p(Object.getOwnPropertyDescriptor(c(n),c(t)))}function K_(n,t){return Object.is(c(n),c(t))}function Q_(n){return p(c(n).valueOf())}function N_(n){return p(Promise.resolve(c(n)))}function X_(n,t){return p(c(n).catch(c(t)))}function Y_(n,t){return p(c(n).then(c(t)))}function H_(n,t,e){return p(c(n).then(c(t),c(e)))}function J_(n){return p(c(n).buffer)}function Z_(n,t,e){return p(new Int8Array(c(n),t>>>0,e>>>0))}function $_(n,t,e){return p(new Int16Array(c(n),t>>>0,e>>>0))}function nd(n,t,e){return p(new Int32Array(c(n),t>>>0,e>>>0))}function td(n,t,e){return p(new Uint8Array(c(n),t>>>0,e>>>0))}function ed(n){return p(new Uint8Array(c(n)))}function rd(n,t,e){c(n).set(c(t),e>>>0)}function ud(n){return c(n).length}function fd(n,t,e){return p(new Uint16Array(c(n),t>>>0,e>>>0))}function cd(n,t,e){return p(new Uint32Array(c(n),t>>>0,e>>>0))}function id(n,t,e){return p(new Float32Array(c(n),t>>>0,e>>>0))}function od(n){return p(c(n).buffer)}function _d(){return O((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function dd(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ad(){return O((function(n){return p(JSON.stringify(c(n)))}),arguments)}function bd(n,t){const e=w(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=_;m()[n/4+1]=u,m()[n/4+0]=e}function gd(n,t){throw new Error(x(n,t))}function wd(){return p(r.memory)}function sd(n,t,e){return p(k(n,t,49,v))}function ld(n,t,e){return p(k(n,t,49,v))}function md(n,t,e){return p(k(n,t,49,B))}function pd(n,t,e){return p(k(n,t,49,v))}function hd(n,t,e){return p(k(n,t,49,v))}function xd(n,t,e){return p(k(n,t,49,P))}function yd(n,t,e){return p(k(n,t,49,v))}function Sd(n,t,e){return p(k(n,t,293,j))}function kd(n,t,e){return p(k(n,t,293,j))}function vd(n,t,e){return p(k(n,t,293,I))}function Bd(n,t,e){return p(k(n,t,293,j))}function Pd(n,t,e){return p(k(n,t,293,j))}function jd(n,t,e){return p(k(n,t,293,A))}function Id(n,t,e){return p(k(n,t,293,j))}function Ad(n,t,e){return p(k(n,t,894,D))}function Dd(n,t,e){return p(k(n,t,894,D))}function Td(n,t,e){return p(k(n,t,894,D))}function Cd(n,t,e){return p(k(n,t,894,T))}function Md(n,t,e){return p(k(n,t,894,D))}function Fd(n,t,e){return p(k(n,t,894,D))}function Ed(n,t,e){return p(k(n,t,894,D))}function Rd(n,t,e){return p(k(n,t,2029,C))}function Ld(n,t,e){return p(k(n,t,2029,C))}function Od(n,t,e){return p(k(n,t,2123,M))}}).call(this,e(260)(n))},405:function(n,t,e){"use strict";e.r(t);var r=e(406),u=e(246);e.d(t,"__wbg_set_wasm",(function(){return u.zi})),e.d(t,"run",(function(){return u.sl})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.ol})),e.d(t,"__wbindgen_string_get",(function(){return u.pl})),e.d(t,"__wbindgen_cb_drop",(function(){return u.Hk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.jl})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.nl})),e.d(t,"__wbindgen_string_new",(function(){return u.ql})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Eg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Li})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Rd})),e.d(t,"__wbg_fetch_386f87a3ebf5003c",(function(){return u.Wd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Vg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Wg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.qe})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Kh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Th})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Nh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Xg})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.oh})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.wk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.lh})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Lh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Sh})),e.d(t,"__wbindgen_number_new",(function(){return u.ml})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.xk})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Zg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Qg})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.mf})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.lf})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.af})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Ud})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.Cf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.Jh})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Hb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.we})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.of})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.ng})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.nf})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.Ae})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.eg})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.fg})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.gg})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.dg})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Mf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Nf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Wf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Vf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Yf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Zf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.bg})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.cg})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.ig})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.hg})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.ag})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.rg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.qg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.lg})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Of})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.jg})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.kg})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Xf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.Tf})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Pf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Qf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Rf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Sf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Uf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Pd})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.cf})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.vh})),e.d(t,"__wbindgen_is_object",(function(){return u.il})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.Hh})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.Ee})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Td})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.Df})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.oc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Tb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Ub})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.dc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.jc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Zb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Xb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.sc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.nc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.gc})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Yb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.ic})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.cd})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.Ci})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.ph})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.hh})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.Jf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.dk})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.wc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.ed})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.dd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.me})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ne})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Lb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Mb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Rb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Sb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.q})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Nd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.s})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Md})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.zf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.be})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Yd})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.jb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.ib})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.Fk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.Oh})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.ae})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Zd})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.Dk})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.gk})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.Ki})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.Ek})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Nb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.ji})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.di})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Yh})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.od})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.nd})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.ki})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.Zh})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.bi})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.gi})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.ii})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.ui})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.si})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Fd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.Cd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Ed})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.Ad})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.li})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.ai})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.ci})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.fi})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.hi})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.vi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.ti})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Gd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.Bd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.zd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.ei})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.oi})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.wi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.pi})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Sd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Yi})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.th})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.uh})),e.d(t,"__wbindgen_is_function",(function(){return u.hl})),e.d(t,"__wbindgen_boolean_get",(function(){return u.Gk})),e.d(t,"__wbindgen_number_get",(function(){return u.ll})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.sf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.r})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.v})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.C})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.G})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.R})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.U})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.X})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.Y})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.kb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.lb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.vb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Eb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Fb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Gb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Kb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Qb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.hc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.mc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.vc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Ic})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Lc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Oc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Sc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.sd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.wd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.yd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Ld})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Vd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.he})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.oe})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ze})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Ke})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Re})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Se})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.uf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.wh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.xh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.zh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.Dh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Qh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Rh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Zi})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.bj})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.ej})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.fj})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.jj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.kj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.gj})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.ij})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.lj})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.oj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.nj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.pj})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.mj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.qj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.yj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.zj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.Bj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.Dj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.Ej})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Hj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Ij})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Lj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Oj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Pj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Qj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Tj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Wj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Xj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Yj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Zj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.bk})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.ck})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.mk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.nk})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.o})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.u})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.x})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.y})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.A})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.D})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.H})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.L})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.J})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.P})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.N})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.tb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.nb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.pb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.rb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.zb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.Bb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Pb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Wb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.cc})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.ec})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.kc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.qc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.rc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.Ac})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Dc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Fc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Hc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Jc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Mc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Pc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Xc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Yc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.bd})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.kd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.id})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.td})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Kd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Id})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.de})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ge})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.je})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.ye})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.De})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Fe})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.Ie})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.Me})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ne})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Pe})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Te})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.Ff})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.ch})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.gh})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Fh})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Uh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Gi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Pi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Si})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Qi})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Ui})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.cj})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.vj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.xj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Jj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.hk})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.ok})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.tk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.tf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.pd})),e.d(t,"__wbg_location_2951b5ee34f19221",(function(){return u.Gf})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.vg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.gd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.gb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.re})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Kf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Mh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.fb})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Ih})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.sb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.ri})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.qi})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.T})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.uk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.le})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.ac})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.xe})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.sh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.rh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Xh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.mi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.ug})),e.d(t,"__wbg_fetch_921fad6ef9e883dd",(function(){return u.Xd})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Xi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.ce})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.W})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.Z})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Db})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.yh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.aj})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.hj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.Aj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.Cj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.Fj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.Gj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Mj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Nj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Vj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.ak})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.p})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.t})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.w})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.z})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.B})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.E})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.I})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.M})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.K})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.Q})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.O})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.ub})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.mb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.ob})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.qb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.yb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.Ab})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Ob})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Vb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.bc})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.fc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.lc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.pc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.tc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.zc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Cc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Ec})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Gc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Kc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Nc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Qc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Wc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Zc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.ad})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.jd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.hd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.ud})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Jd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Hd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.ee})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.fe})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ke})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.Ce})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Ge})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.He})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Le})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Oe})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Ue})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.Ef})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.bh})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.fh})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.Eh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Vh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Fi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Oi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ti})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Ri})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Vi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.dj})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.uj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.wj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Kj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.ik})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.pk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.sk})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Je})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Ch})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.ni})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.zk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.ff})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.rk})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.qk})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.yk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.hf})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.vd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ji})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.wg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.vf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.dh})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.mh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.eh})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.pe})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.nh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.mg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Lf})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Bh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.xc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Hi})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.pg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.cb})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.db})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.sg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.tg})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Uc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Vc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Tc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Ah})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.pf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.Bk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.Di})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.gf})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.Bi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.ue})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.ve})),e.d(t,"__wbg_origin_ee93e29ace71f568",(function(){return u.Yg})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.Ak})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.Ei})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.ef})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.Ai})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.se})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.te})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.Ag})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.ld})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Sg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Tg})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.ek})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Qe})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ie})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Jb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.fd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.Bc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Qd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Od})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.jf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.If})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.vk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.ih})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.jh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.yg})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.wb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.kh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Mi})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.kf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.S})),e.d(t,"__wbg_instanceof_Response_849eb93e75734b6e",(function(){return u.rf})),e.d(t,"__wbg_url_5f6dc4009ac5f99d",(function(){return u.fk})),e.d(t,"__wbg_status_61a01141acd3cf74",(function(){return u.Ni})),e.d(t,"__wbg_headers_9620bfada380764a",(function(){return u.df})),e.d(t,"__wbg_arrayBuffer_29931d52c7206b02",(function(){return u.n})),e.d(t,"__wbg_text_450a059667fd91fd",(function(){return u.rj})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.yc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Ii})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.og})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.Hf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Gh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.yf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.xb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.ah})),e.d(t,"__wbg_newwithstrandinit_3fd6fba4083ff2d0",(function(){return u.Ng})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.rd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.xd})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.lk})),e.d(t,"__wbg_new_ab6fd82b10560829",(function(){return u.Dg})),e.d(t,"__wbg_append_7bfcb4937d1d5e29",(function(){return u.m})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.zg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.md})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Rg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Ib})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Ve})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.F})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.uc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Rc})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.We})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.Bf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.xg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Fg})),e.d(t,"__wbg_next_40fc327bfc8770e6",(function(){return u.Pg})),e.d(t,"__wbg_next_196c84450b364254",(function(){return u.Og})),e.d(t,"__wbg_done_298b57d23c0fc80c",(function(){return u.qd})),e.d(t,"__wbg_value_d93c65011f51a456",(function(){return u.kk})),e.d(t,"__wbg_iterator_2cee6dadfd956dfa",(function(){return u.xf})),e.d(t,"__wbg_get_e3c254076557e348",(function(){return u.Xe})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.eb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Cg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Wh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.Ck})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Ye})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Ze})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.if})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Ug})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.qh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.qf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Be})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.wf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.jk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Ph})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.hb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.sj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.tj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.ab})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Kg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Mg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.Bg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.yi})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.Af})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Lg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Gg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Jg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.bb})),e.d(t,"__wbg_has_0af94d20077affa2",(function(){return u.bf})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.xi})),e.d(t,"__wbg_stringify_8887fe74e1c50d81",(function(){return u.Wi})),e.d(t,"__wbindgen_debug_string",(function(){return u.gl})),e.d(t,"__wbindgen_throw",(function(){return u.rl})),e.d(t,"__wbindgen_memory",(function(){return u.kl})),e.d(t,"__wbindgen_closure_wrapper631",(function(){return u.Zk})),e.d(t,"__wbindgen_closure_wrapper632",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper633",(function(){return u.bl})),e.d(t,"__wbindgen_closure_wrapper634",(function(){return u.cl})),e.d(t,"__wbindgen_closure_wrapper635",(function(){return u.dl})),e.d(t,"__wbindgen_closure_wrapper636",(function(){return u.el})),e.d(t,"__wbindgen_closure_wrapper637",(function(){return u.fl})),e.d(t,"__wbindgen_closure_wrapper1133",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper1134",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper1135",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper1136",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper1137",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper1138",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper1139",(function(){return u.Ok})),e.d(t,"__wbindgen_closure_wrapper2484",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper2485",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper2486",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper2487",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper2488",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper2489",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper2490",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper4508",(function(){return u.Wk})),e.d(t,"__wbindgen_closure_wrapper4510",(function(){return u.Xk})),e.d(t,"__wbindgen_closure_wrapper5281",(function(){return u.Yk})),Object(u.zi)(r),r.__wbindgen_start()},406:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(246);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/26.3dc0aad3.js b/assets/js/26.3dc0aad3.js deleted file mode 100644 index 1636aa1b2..000000000 --- a/assets/js/26.3dc0aad3.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{247:function(n,t,e){"use strict";(function(n){e.d(t,"zi",(function(){return u})),e.d(t,"sl",(function(){return F})),e.d(t,"ol",(function(){return W})),e.d(t,"pl",(function(){return q})),e.d(t,"Hk",(function(){return z})),e.d(t,"ql",(function(){return U})),e.d(t,"nl",(function(){return K})),e.d(t,"jl",(function(){return Q})),e.d(t,"Eg",(function(){return N})),e.d(t,"Li",(function(){return X})),e.d(t,"Rd",(function(){return Y})),e.d(t,"Wd",(function(){return H})),e.d(t,"Vg",(function(){return J})),e.d(t,"Wg",(function(){return Z})),e.d(t,"qe",(function(){return $})),e.d(t,"Kh",(function(){return nn})),e.d(t,"Th",(function(){return tn})),e.d(t,"Nh",(function(){return en})),e.d(t,"Xg",(function(){return rn})),e.d(t,"oh",(function(){return un})),e.d(t,"wk",(function(){return fn})),e.d(t,"b",(function(){return cn})),e.d(t,"lh",(function(){return on})),e.d(t,"Lh",(function(){return _n})),e.d(t,"Sh",(function(){return dn})),e.d(t,"ml",(function(){return an})),e.d(t,"xk",(function(){return bn})),e.d(t,"Zg",(function(){return gn})),e.d(t,"Qg",(function(){return wn})),e.d(t,"mf",(function(){return sn})),e.d(t,"lf",(function(){return ln})),e.d(t,"af",(function(){return mn})),e.d(t,"Ud",(function(){return pn})),e.d(t,"Cf",(function(){return hn})),e.d(t,"Jh",(function(){return xn})),e.d(t,"Hb",(function(){return yn})),e.d(t,"we",(function(){return Sn})),e.d(t,"of",(function(){return kn})),e.d(t,"ng",(function(){return vn})),e.d(t,"nf",(function(){return Bn})),e.d(t,"Ae",(function(){return Pn})),e.d(t,"eg",(function(){return jn})),e.d(t,"fg",(function(){return In})),e.d(t,"gg",(function(){return An})),e.d(t,"dg",(function(){return Dn})),e.d(t,"Mf",(function(){return Tn})),e.d(t,"Nf",(function(){return Cn})),e.d(t,"Wf",(function(){return Mn})),e.d(t,"Vf",(function(){return Fn})),e.d(t,"Yf",(function(){return En})),e.d(t,"Zf",(function(){return Rn})),e.d(t,"bg",(function(){return Ln})),e.d(t,"cg",(function(){return On})),e.d(t,"ig",(function(){return Gn})),e.d(t,"hg",(function(){return Vn})),e.d(t,"ag",(function(){return Wn})),e.d(t,"rg",(function(){return qn})),e.d(t,"qg",(function(){return zn})),e.d(t,"lg",(function(){return Un})),e.d(t,"Of",(function(){return Kn})),e.d(t,"jg",(function(){return Qn})),e.d(t,"kg",(function(){return Nn})),e.d(t,"Xf",(function(){return Xn})),e.d(t,"Tf",(function(){return Yn})),e.d(t,"Pf",(function(){return Hn})),e.d(t,"Qf",(function(){return Jn})),e.d(t,"Rf",(function(){return Zn})),e.d(t,"Sf",(function(){return $n})),e.d(t,"Uf",(function(){return nt})),e.d(t,"Pd",(function(){return tt})),e.d(t,"cf",(function(){return et})),e.d(t,"vh",(function(){return rt})),e.d(t,"il",(function(){return ut})),e.d(t,"a",(function(){return ft})),e.d(t,"c",(function(){return ct})),e.d(t,"Hh",(function(){return it})),e.d(t,"Ee",(function(){return ot})),e.d(t,"Td",(function(){return _t})),e.d(t,"Df",(function(){return dt})),e.d(t,"oc",(function(){return at})),e.d(t,"Tb",(function(){return bt})),e.d(t,"Ub",(function(){return gt})),e.d(t,"dc",(function(){return wt})),e.d(t,"jc",(function(){return st})),e.d(t,"Zb",(function(){return lt})),e.d(t,"Xb",(function(){return mt})),e.d(t,"sc",(function(){return pt})),e.d(t,"nc",(function(){return ht})),e.d(t,"gc",(function(){return xt})),e.d(t,"Yb",(function(){return yt})),e.d(t,"ic",(function(){return St})),e.d(t,"cd",(function(){return kt})),e.d(t,"Ci",(function(){return vt})),e.d(t,"ph",(function(){return Bt})),e.d(t,"hh",(function(){return Pt})),e.d(t,"Jf",(function(){return jt})),e.d(t,"dk",(function(){return It})),e.d(t,"wc",(function(){return At})),e.d(t,"ed",(function(){return Dt})),e.d(t,"dd",(function(){return Tt})),e.d(t,"me",(function(){return Ct})),e.d(t,"ne",(function(){return Mt})),e.d(t,"Lb",(function(){return Ft})),e.d(t,"Mb",(function(){return Et})),e.d(t,"Rb",(function(){return Rt})),e.d(t,"Sb",(function(){return Lt})),e.d(t,"q",(function(){return Ot})),e.d(t,"Nd",(function(){return Gt})),e.d(t,"s",(function(){return Vt})),e.d(t,"Md",(function(){return Wt})),e.d(t,"zf",(function(){return qt})),e.d(t,"be",(function(){return zt})),e.d(t,"Yd",(function(){return Ut})),e.d(t,"jb",(function(){return Kt})),e.d(t,"ib",(function(){return Qt})),e.d(t,"Fk",(function(){return Nt})),e.d(t,"Oh",(function(){return Xt})),e.d(t,"ae",(function(){return Yt})),e.d(t,"Zd",(function(){return Ht})),e.d(t,"Dk",(function(){return Jt})),e.d(t,"gk",(function(){return Zt})),e.d(t,"Ki",(function(){return $t})),e.d(t,"Ek",(function(){return ne})),e.d(t,"Nb",(function(){return te})),e.d(t,"ji",(function(){return ee})),e.d(t,"di",(function(){return re})),e.d(t,"Yh",(function(){return ue})),e.d(t,"od",(function(){return fe})),e.d(t,"nd",(function(){return ce})),e.d(t,"ki",(function(){return ie})),e.d(t,"Zh",(function(){return oe})),e.d(t,"bi",(function(){return _e})),e.d(t,"gi",(function(){return de})),e.d(t,"ii",(function(){return ae})),e.d(t,"ui",(function(){return be})),e.d(t,"si",(function(){return ge})),e.d(t,"Fd",(function(){return we})),e.d(t,"Cd",(function(){return se})),e.d(t,"Ed",(function(){return le})),e.d(t,"Ad",(function(){return me})),e.d(t,"li",(function(){return pe})),e.d(t,"ai",(function(){return he})),e.d(t,"ci",(function(){return xe})),e.d(t,"fi",(function(){return ye})),e.d(t,"hi",(function(){return Se})),e.d(t,"vi",(function(){return ke})),e.d(t,"ti",(function(){return ve})),e.d(t,"Gd",(function(){return Be})),e.d(t,"Bd",(function(){return Pe})),e.d(t,"Dd",(function(){return je})),e.d(t,"zd",(function(){return Ie})),e.d(t,"ei",(function(){return Ae})),e.d(t,"oi",(function(){return De})),e.d(t,"wi",(function(){return Te})),e.d(t,"pi",(function(){return Ce})),e.d(t,"Sd",(function(){return Me})),e.d(t,"Yi",(function(){return Fe})),e.d(t,"th",(function(){return Ee})),e.d(t,"uh",(function(){return Re})),e.d(t,"hl",(function(){return Le})),e.d(t,"Gk",(function(){return Oe})),e.d(t,"ll",(function(){return Ge})),e.d(t,"sf",(function(){return Ve})),e.d(t,"r",(function(){return We})),e.d(t,"v",(function(){return qe})),e.d(t,"C",(function(){return ze})),e.d(t,"G",(function(){return Ue})),e.d(t,"R",(function(){return Ke})),e.d(t,"U",(function(){return Qe})),e.d(t,"X",(function(){return Ne})),e.d(t,"Y",(function(){return Xe})),e.d(t,"kb",(function(){return Ye})),e.d(t,"lb",(function(){return He})),e.d(t,"vb",(function(){return Je})),e.d(t,"Eb",(function(){return Ze})),e.d(t,"Cb",(function(){return $e})),e.d(t,"Fb",(function(){return nr})),e.d(t,"Gb",(function(){return tr})),e.d(t,"Kb",(function(){return er})),e.d(t,"Qb",(function(){return rr})),e.d(t,"hc",(function(){return ur})),e.d(t,"mc",(function(){return fr})),e.d(t,"vc",(function(){return cr})),e.d(t,"Ic",(function(){return ir})),e.d(t,"Lc",(function(){return or})),e.d(t,"Oc",(function(){return _r})),e.d(t,"Sc",(function(){return dr})),e.d(t,"sd",(function(){return ar})),e.d(t,"wd",(function(){return br})),e.d(t,"yd",(function(){return gr})),e.d(t,"Ld",(function(){return wr})),e.d(t,"Vd",(function(){return sr})),e.d(t,"he",(function(){return lr})),e.d(t,"oe",(function(){return mr})),e.d(t,"ze",(function(){return pr})),e.d(t,"Ke",(function(){return hr})),e.d(t,"Re",(function(){return xr})),e.d(t,"Se",(function(){return yr})),e.d(t,"uf",(function(){return Sr})),e.d(t,"wh",(function(){return kr})),e.d(t,"xh",(function(){return vr})),e.d(t,"zh",(function(){return Br})),e.d(t,"Dh",(function(){return Pr})),e.d(t,"Qh",(function(){return jr})),e.d(t,"Rh",(function(){return Ir})),e.d(t,"Zi",(function(){return Ar})),e.d(t,"bj",(function(){return Dr})),e.d(t,"ej",(function(){return Tr})),e.d(t,"fj",(function(){return Cr})),e.d(t,"jj",(function(){return Mr})),e.d(t,"kj",(function(){return Fr})),e.d(t,"gj",(function(){return Er})),e.d(t,"ij",(function(){return Rr})),e.d(t,"lj",(function(){return Lr})),e.d(t,"oj",(function(){return Or})),e.d(t,"nj",(function(){return Gr})),e.d(t,"pj",(function(){return Vr})),e.d(t,"mj",(function(){return Wr})),e.d(t,"qj",(function(){return qr})),e.d(t,"yj",(function(){return zr})),e.d(t,"zj",(function(){return Ur})),e.d(t,"Bj",(function(){return Kr})),e.d(t,"Dj",(function(){return Qr})),e.d(t,"Ej",(function(){return Nr})),e.d(t,"Hj",(function(){return Xr})),e.d(t,"Ij",(function(){return Yr})),e.d(t,"Lj",(function(){return Hr})),e.d(t,"Oj",(function(){return Jr})),e.d(t,"Pj",(function(){return Zr})),e.d(t,"Qj",(function(){return $r})),e.d(t,"Sj",(function(){return nu})),e.d(t,"Tj",(function(){return tu})),e.d(t,"Uj",(function(){return eu})),e.d(t,"Wj",(function(){return ru})),e.d(t,"Xj",(function(){return uu})),e.d(t,"Yj",(function(){return fu})),e.d(t,"Zj",(function(){return cu})),e.d(t,"bk",(function(){return iu})),e.d(t,"ck",(function(){return ou})),e.d(t,"mk",(function(){return _u})),e.d(t,"nk",(function(){return du})),e.d(t,"g",(function(){return au})),e.d(t,"o",(function(){return bu})),e.d(t,"u",(function(){return gu})),e.d(t,"x",(function(){return wu})),e.d(t,"y",(function(){return su})),e.d(t,"A",(function(){return lu})),e.d(t,"D",(function(){return mu})),e.d(t,"H",(function(){return pu})),e.d(t,"L",(function(){return hu})),e.d(t,"J",(function(){return xu})),e.d(t,"P",(function(){return yu})),e.d(t,"N",(function(){return Su})),e.d(t,"tb",(function(){return ku})),e.d(t,"nb",(function(){return vu})),e.d(t,"pb",(function(){return Bu})),e.d(t,"rb",(function(){return Pu})),e.d(t,"zb",(function(){return ju})),e.d(t,"Bb",(function(){return Iu})),e.d(t,"Pb",(function(){return Au})),e.d(t,"Wb",(function(){return Du})),e.d(t,"cc",(function(){return Tu})),e.d(t,"ec",(function(){return Cu})),e.d(t,"kc",(function(){return Mu})),e.d(t,"qc",(function(){return Fu})),e.d(t,"rc",(function(){return Eu})),e.d(t,"Ac",(function(){return Ru})),e.d(t,"Dc",(function(){return Lu})),e.d(t,"Fc",(function(){return Ou})),e.d(t,"Hc",(function(){return Gu})),e.d(t,"Jc",(function(){return Vu})),e.d(t,"Mc",(function(){return Wu})),e.d(t,"Pc",(function(){return qu})),e.d(t,"Xc",(function(){return zu})),e.d(t,"Yc",(function(){return Uu})),e.d(t,"bd",(function(){return Ku})),e.d(t,"kd",(function(){return Qu})),e.d(t,"id",(function(){return Nu})),e.d(t,"td",(function(){return Xu})),e.d(t,"Kd",(function(){return Yu})),e.d(t,"Id",(function(){return Hu})),e.d(t,"de",(function(){return Ju})),e.d(t,"ge",(function(){return Zu})),e.d(t,"je",(function(){return $u})),e.d(t,"ye",(function(){return nf})),e.d(t,"De",(function(){return tf})),e.d(t,"Fe",(function(){return ef})),e.d(t,"Ie",(function(){return rf})),e.d(t,"Me",(function(){return uf})),e.d(t,"Ne",(function(){return ff})),e.d(t,"Pe",(function(){return cf})),e.d(t,"Te",(function(){return of})),e.d(t,"Ff",(function(){return _f})),e.d(t,"ch",(function(){return df})),e.d(t,"gh",(function(){return af})),e.d(t,"Fh",(function(){return bf})),e.d(t,"Uh",(function(){return gf})),e.d(t,"Gi",(function(){return wf})),e.d(t,"Pi",(function(){return sf})),e.d(t,"Si",(function(){return lf})),e.d(t,"Qi",(function(){return mf})),e.d(t,"Ui",(function(){return pf})),e.d(t,"cj",(function(){return hf})),e.d(t,"vj",(function(){return xf})),e.d(t,"xj",(function(){return yf})),e.d(t,"Jj",(function(){return Sf})),e.d(t,"hk",(function(){return kf})),e.d(t,"ok",(function(){return vf})),e.d(t,"tk",(function(){return Bf})),e.d(t,"tf",(function(){return Pf})),e.d(t,"pd",(function(){return jf})),e.d(t,"Gf",(function(){return If})),e.d(t,"vg",(function(){return Af})),e.d(t,"gd",(function(){return Df})),e.d(t,"gb",(function(){return Tf})),e.d(t,"re",(function(){return Cf})),e.d(t,"Kf",(function(){return Mf})),e.d(t,"Mh",(function(){return Ff})),e.d(t,"fb",(function(){return Ef})),e.d(t,"Ih",(function(){return Rf})),e.d(t,"sb",(function(){return Lf})),e.d(t,"ri",(function(){return Of})),e.d(t,"qi",(function(){return Gf})),e.d(t,"T",(function(){return Vf})),e.d(t,"uk",(function(){return Wf})),e.d(t,"e",(function(){return qf})),e.d(t,"le",(function(){return zf})),e.d(t,"ac",(function(){return Uf})),e.d(t,"xe",(function(){return Kf})),e.d(t,"sh",(function(){return Qf})),e.d(t,"rh",(function(){return Nf})),e.d(t,"Xh",(function(){return Xf})),e.d(t,"mi",(function(){return Yf})),e.d(t,"ug",(function(){return Hf})),e.d(t,"Xd",(function(){return Jf})),e.d(t,"Xi",(function(){return Zf})),e.d(t,"ce",(function(){return $f})),e.d(t,"W",(function(){return nc})),e.d(t,"V",(function(){return tc})),e.d(t,"Z",(function(){return ec})),e.d(t,"Db",(function(){return rc})),e.d(t,"yh",(function(){return uc})),e.d(t,"aj",(function(){return fc})),e.d(t,"hj",(function(){return cc})),e.d(t,"Aj",(function(){return ic})),e.d(t,"Cj",(function(){return oc})),e.d(t,"Fj",(function(){return _c})),e.d(t,"Gj",(function(){return dc})),e.d(t,"Mj",(function(){return ac})),e.d(t,"Nj",(function(){return bc})),e.d(t,"Rj",(function(){return gc})),e.d(t,"Vj",(function(){return wc})),e.d(t,"ak",(function(){return sc})),e.d(t,"f",(function(){return lc})),e.d(t,"p",(function(){return mc})),e.d(t,"t",(function(){return pc})),e.d(t,"w",(function(){return hc})),e.d(t,"z",(function(){return xc})),e.d(t,"B",(function(){return yc})),e.d(t,"E",(function(){return Sc})),e.d(t,"I",(function(){return kc})),e.d(t,"M",(function(){return vc})),e.d(t,"K",(function(){return Bc})),e.d(t,"Q",(function(){return Pc})),e.d(t,"O",(function(){return jc})),e.d(t,"ub",(function(){return Ic})),e.d(t,"mb",(function(){return Ac})),e.d(t,"ob",(function(){return Dc})),e.d(t,"qb",(function(){return Tc})),e.d(t,"yb",(function(){return Cc})),e.d(t,"Ab",(function(){return Mc})),e.d(t,"Ob",(function(){return Fc})),e.d(t,"Vb",(function(){return Ec})),e.d(t,"bc",(function(){return Rc})),e.d(t,"fc",(function(){return Lc})),e.d(t,"lc",(function(){return Oc})),e.d(t,"pc",(function(){return Gc})),e.d(t,"tc",(function(){return Vc})),e.d(t,"zc",(function(){return Wc})),e.d(t,"Cc",(function(){return qc})),e.d(t,"Ec",(function(){return zc})),e.d(t,"Gc",(function(){return Uc})),e.d(t,"Kc",(function(){return Kc})),e.d(t,"Nc",(function(){return Qc})),e.d(t,"Qc",(function(){return Nc})),e.d(t,"Wc",(function(){return Xc})),e.d(t,"Zc",(function(){return Yc})),e.d(t,"ad",(function(){return Hc})),e.d(t,"jd",(function(){return Jc})),e.d(t,"hd",(function(){return Zc})),e.d(t,"ud",(function(){return $c})),e.d(t,"Jd",(function(){return ni})),e.d(t,"Hd",(function(){return ti})),e.d(t,"ee",(function(){return ei})),e.d(t,"fe",(function(){return ri})),e.d(t,"ke",(function(){return ui})),e.d(t,"Ce",(function(){return fi})),e.d(t,"Ge",(function(){return ci})),e.d(t,"He",(function(){return ii})),e.d(t,"Le",(function(){return oi})),e.d(t,"Oe",(function(){return _i})),e.d(t,"Ue",(function(){return di})),e.d(t,"Ef",(function(){return ai})),e.d(t,"bh",(function(){return bi})),e.d(t,"fh",(function(){return gi})),e.d(t,"Eh",(function(){return wi})),e.d(t,"Vh",(function(){return si})),e.d(t,"Fi",(function(){return li})),e.d(t,"Oi",(function(){return mi})),e.d(t,"Ti",(function(){return pi})),e.d(t,"Ri",(function(){return hi})),e.d(t,"Vi",(function(){return xi})),e.d(t,"dj",(function(){return yi})),e.d(t,"uj",(function(){return Si})),e.d(t,"wj",(function(){return ki})),e.d(t,"Kj",(function(){return vi})),e.d(t,"ik",(function(){return Bi})),e.d(t,"pk",(function(){return Pi})),e.d(t,"sk",(function(){return ji})),e.d(t,"Je",(function(){return Ii})),e.d(t,"Ch",(function(){return Ai})),e.d(t,"ni",(function(){return Di})),e.d(t,"zk",(function(){return Ti})),e.d(t,"ff",(function(){return Ci})),e.d(t,"rk",(function(){return Mi})),e.d(t,"qk",(function(){return Fi})),e.d(t,"yk",(function(){return Ei})),e.d(t,"hf",(function(){return Ri})),e.d(t,"vd",(function(){return Li})),e.d(t,"Ji",(function(){return Oi})),e.d(t,"wg",(function(){return Gi})),e.d(t,"d",(function(){return Vi})),e.d(t,"vf",(function(){return Wi})),e.d(t,"dh",(function(){return qi})),e.d(t,"mh",(function(){return zi})),e.d(t,"eh",(function(){return Ui})),e.d(t,"pe",(function(){return Ki})),e.d(t,"nh",(function(){return Qi})),e.d(t,"mg",(function(){return Ni})),e.d(t,"Lf",(function(){return Xi})),e.d(t,"i",(function(){return Yi})),e.d(t,"Bh",(function(){return Hi})),e.d(t,"xc",(function(){return Ji})),e.d(t,"Hi",(function(){return Zi})),e.d(t,"j",(function(){return $i})),e.d(t,"pg",(function(){return no})),e.d(t,"cb",(function(){return to})),e.d(t,"db",(function(){return eo})),e.d(t,"sg",(function(){return ro})),e.d(t,"tg",(function(){return uo})),e.d(t,"Uc",(function(){return fo})),e.d(t,"Vc",(function(){return co})),e.d(t,"Tc",(function(){return io})),e.d(t,"h",(function(){return oo})),e.d(t,"Ah",(function(){return _o})),e.d(t,"pf",(function(){return ao})),e.d(t,"Bk",(function(){return bo})),e.d(t,"Di",(function(){return go})),e.d(t,"gf",(function(){return wo})),e.d(t,"Bi",(function(){return so})),e.d(t,"ue",(function(){return lo})),e.d(t,"ve",(function(){return mo})),e.d(t,"Yg",(function(){return po})),e.d(t,"Ak",(function(){return ho})),e.d(t,"Ei",(function(){return xo})),e.d(t,"ef",(function(){return yo})),e.d(t,"Ai",(function(){return So})),e.d(t,"se",(function(){return ko})),e.d(t,"te",(function(){return vo})),e.d(t,"Ag",(function(){return Bo})),e.d(t,"ld",(function(){return Po})),e.d(t,"Sg",(function(){return jo})),e.d(t,"Tg",(function(){return Io})),e.d(t,"ek",(function(){return Ao})),e.d(t,"Qe",(function(){return Do})),e.d(t,"ie",(function(){return To})),e.d(t,"Jb",(function(){return Co})),e.d(t,"fd",(function(){return Mo})),e.d(t,"Bc",(function(){return Fo})),e.d(t,"Qd",(function(){return Eo})),e.d(t,"Od",(function(){return Ro})),e.d(t,"jf",(function(){return Lo})),e.d(t,"If",(function(){return Oo})),e.d(t,"vk",(function(){return Go})),e.d(t,"ih",(function(){return Vo})),e.d(t,"jh",(function(){return Wo})),e.d(t,"yg",(function(){return qo})),e.d(t,"wb",(function(){return zo})),e.d(t,"kh",(function(){return Uo})),e.d(t,"Mi",(function(){return Ko})),e.d(t,"kf",(function(){return Qo})),e.d(t,"S",(function(){return No})),e.d(t,"rf",(function(){return Xo})),e.d(t,"fk",(function(){return Yo})),e.d(t,"Ni",(function(){return Ho})),e.d(t,"df",(function(){return Jo})),e.d(t,"n",(function(){return Zo})),e.d(t,"rj",(function(){return $o})),e.d(t,"k",(function(){return n_})),e.d(t,"yc",(function(){return t_})),e.d(t,"Ii",(function(){return e_})),e.d(t,"og",(function(){return r_})),e.d(t,"Hf",(function(){return u_})),e.d(t,"Gh",(function(){return f_})),e.d(t,"yf",(function(){return c_})),e.d(t,"xb",(function(){return i_})),e.d(t,"ah",(function(){return o_})),e.d(t,"Ng",(function(){return __})),e.d(t,"rd",(function(){return d_})),e.d(t,"xd",(function(){return a_})),e.d(t,"lk",(function(){return b_})),e.d(t,"Dg",(function(){return g_})),e.d(t,"m",(function(){return w_})),e.d(t,"zg",(function(){return s_})),e.d(t,"md",(function(){return l_})),e.d(t,"Rg",(function(){return m_})),e.d(t,"l",(function(){return p_})),e.d(t,"Ib",(function(){return h_})),e.d(t,"Ve",(function(){return x_})),e.d(t,"F",(function(){return y_})),e.d(t,"uc",(function(){return S_})),e.d(t,"Rc",(function(){return k_})),e.d(t,"We",(function(){return v_})),e.d(t,"Bf",(function(){return B_})),e.d(t,"xg",(function(){return P_})),e.d(t,"Fg",(function(){return j_})),e.d(t,"Pg",(function(){return I_})),e.d(t,"Og",(function(){return A_})),e.d(t,"qd",(function(){return D_})),e.d(t,"kk",(function(){return T_})),e.d(t,"xf",(function(){return C_})),e.d(t,"Xe",(function(){return M_})),e.d(t,"eb",(function(){return F_})),e.d(t,"Cg",(function(){return E_})),e.d(t,"Wh",(function(){return R_})),e.d(t,"Ck",(function(){return L_})),e.d(t,"Ye",(function(){return O_})),e.d(t,"Ze",(function(){return G_})),e.d(t,"if",(function(){return V_})),e.d(t,"Ug",(function(){return W_})),e.d(t,"qh",(function(){return q_})),e.d(t,"qf",(function(){return z_})),e.d(t,"Be",(function(){return U_})),e.d(t,"wf",(function(){return K_})),e.d(t,"jk",(function(){return Q_})),e.d(t,"Ph",(function(){return N_})),e.d(t,"hb",(function(){return X_})),e.d(t,"sj",(function(){return Y_})),e.d(t,"tj",(function(){return H_})),e.d(t,"ab",(function(){return J_})),e.d(t,"Hg",(function(){return Z_})),e.d(t,"Kg",(function(){return $_})),e.d(t,"Ig",(function(){return nd})),e.d(t,"Mg",(function(){return td})),e.d(t,"Bg",(function(){return ed})),e.d(t,"yi",(function(){return rd})),e.d(t,"Af",(function(){return ud})),e.d(t,"Lg",(function(){return fd})),e.d(t,"Gg",(function(){return cd})),e.d(t,"Jg",(function(){return id})),e.d(t,"bb",(function(){return od})),e.d(t,"bf",(function(){return _d})),e.d(t,"xi",(function(){return dd})),e.d(t,"Wi",(function(){return ad})),e.d(t,"gl",(function(){return bd})),e.d(t,"rl",(function(){return gd})),e.d(t,"kl",(function(){return wd})),e.d(t,"Zk",(function(){return sd})),e.d(t,"al",(function(){return ld})),e.d(t,"bl",(function(){return md})),e.d(t,"cl",(function(){return pd})),e.d(t,"dl",(function(){return hd})),e.d(t,"el",(function(){return xd})),e.d(t,"fl",(function(){return yd})),e.d(t,"Ik",(function(){return Sd})),e.d(t,"Jk",(function(){return kd})),e.d(t,"Kk",(function(){return vd})),e.d(t,"Lk",(function(){return Bd})),e.d(t,"Mk",(function(){return Pd})),e.d(t,"Nk",(function(){return jd})),e.d(t,"Ok",(function(){return Id})),e.d(t,"Pk",(function(){return Ad})),e.d(t,"Qk",(function(){return Dd})),e.d(t,"Rk",(function(){return Td})),e.d(t,"Sk",(function(){return Cd})),e.d(t,"Tk",(function(){return Md})),e.d(t,"Uk",(function(){return Fd})),e.d(t,"Vk",(function(){return Ed})),e.d(t,"Wk",(function(){return Rd})),e.d(t,"Xk",(function(){return Ld})),e.d(t,"Yk",(function(){return Od}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=0,d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}let b=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof b.encodeInto?function(n,t){return b.encodeInto(n,t)}:function(n,t){const e=b.encode(n);return t.set(e),{read:n.length,written:e.length}};function w(n,t,e){if(void 0===e){const e=b.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),_=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=g(n,t).written,u=e(u,r,c,1)>>>0}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}let p=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,p.decode(a().subarray(n,n+t))}function x(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=n,t}p.decode();let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h4bad0f1c25d67ebd(n,t)}function B(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h082dff771676d25e(n,t,x(e))}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h82c01a1ae90f82d8(n,t,x(e),x(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h110b7c371d174e61(n,t,x(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hfaa92fd933192ae5(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h79a883bed8e0e66a(n,t,x(e),x(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,x(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,x(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,x(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(x(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function z(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n,t){return x(h(n,t))}function K(n){return x(c(n))}function Q(n){return void 0===c(n)}function N(){return x(new Error)}function X(n,t){const e=w(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Y(n,t){let e,u;try{e=n,u=t,console.error(h(n,t))}finally{r.__wbindgen_free(e,u,1)}}function H(n){return x(fetch(c(n)))}function J(n){return c(n).offsetX}function Z(n){return c(n).offsetY}function $(n){return x(c(n).getCoalescedEvents)}function nn(n){return x(c(n).requestFullscreen)}function tn(n){return x(c(n).scheduler)}function en(n){return x(c(n).requestIdleCallback)}function rn(n){return x(c(n).onpointerrawupdate)}function un(){return x(ResizeObserverEntry.prototype)}function fn(n){const t=c(n).webkitFullscreenElement;return s(t)?0:x(t)}function cn(n){return x(c(n).Window)}function on(n,t,e){return x(c(n).postTask(c(t),c(e)))}function _n(n){return x(c(n).requestFullscreen())}function dn(n){return x(c(n).scheduler)}function an(n){return x(n)}function bn(n){c(n).webkitRequestFullscreen()}function gn(n){return x(c(n).performance)}function wn(n){return c(n).now()}function sn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function mn(n){return x(c(n).gpu)}function pn(n){return x(c(n).features)}function hn(n){return x(c(n).limits)}function xn(n,t){return x(c(n).requestDevice(c(t)))}function yn(n,t){c(n).configure(c(t))}function Sn(n){return x(c(n).getCurrentTexture())}function kn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function vn(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Bn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function Pn(n,t,e){return x(c(n).getMappedRange(t,e))}function jn(n){return c(n).maxTextureDimension1D}function In(n){return c(n).maxTextureDimension2D}function An(n){return c(n).maxTextureDimension3D}function Dn(n){return c(n).maxTextureArrayLayers}function Tn(n){return c(n).maxBindGroups}function Cn(n){return c(n).maxBindingsPerBindGroup}function Mn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Fn(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function En(n){return c(n).maxSampledTexturesPerShaderStage}function Rn(n){return c(n).maxSamplersPerShaderStage}function Ln(n){return c(n).maxStorageBuffersPerShaderStage}function On(n){return c(n).maxStorageTexturesPerShaderStage}function Gn(n){return c(n).maxUniformBuffersPerShaderStage}function Vn(n){return c(n).maxUniformBufferBindingSize}function Wn(n){return c(n).maxStorageBufferBindingSize}function qn(n){return c(n).minUniformBufferOffsetAlignment}function zn(n){return c(n).minStorageBufferOffsetAlignment}function Un(n){return c(n).maxVertexBuffers}function Kn(n){return c(n).maxBufferSize}function Qn(n){return c(n).maxVertexAttributes}function Nn(n){return c(n).maxVertexBufferArrayStride}function Xn(n){return c(n).maxInterStageShaderComponents}function Yn(n){return c(n).maxComputeWorkgroupStorageSize}function Hn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Jn(n){return c(n).maxComputeWorkgroupSizeX}function Zn(n){return c(n).maxComputeWorkgroupSizeY}function $n(n){return c(n).maxComputeWorkgroupSizeZ}function nt(n){return c(n).maxComputeWorkgroupsPerDimension}function tt(n){return x(c(n).error)}function et(n,t,e){return c(n).has(h(t,e))}function rt(n){return x(c(n).queue)}function ut(n){const t=c(n);return"object"==typeof t&&null!==t}function ft(n){return x(c(n).Window)}function ct(n){return x(c(n).WorkerGlobalScope)}function it(n,t){return x(c(n).requestAdapter(c(t)))}function ot(n){return x(c(n).getPreferredCanvasFormat())}function _t(n){return x(c(n).features)}function dt(n){return x(c(n).limits)}function at(n,t){return x(c(n).createShaderModule(c(t)))}function bt(n,t){return x(c(n).createBindGroupLayout(c(t)))}function gt(n,t){return x(c(n).createBindGroup(c(t)))}function wt(n,t){return x(c(n).createPipelineLayout(c(t)))}function st(n,t){return x(c(n).createRenderPipeline(c(t)))}function lt(n,t){return x(c(n).createComputePipeline(c(t)))}function mt(n,t){return x(c(n).createBuffer(c(t)))}function pt(n,t){return x(c(n).createTexture(c(t)))}function ht(n,t){return x(c(n).createSampler(c(t)))}function xt(n,t){return x(c(n).createQuerySet(c(t)))}function yt(n,t){return x(c(n).createCommandEncoder(c(t)))}function St(n,t){return x(c(n).createRenderBundleEncoder(c(t)))}function kt(n){c(n).destroy()}function vt(n,t){c(n).onuncapturederror=c(t)}function Bt(n,t){c(n).pushErrorScope(o(t))}function Pt(n){return x(c(n).popErrorScope())}function jt(n,t,e,r){return x(c(n).mapAsync(t>>>0,e,r))}function It(n){c(n).unmap()}function At(n,t){return x(c(n).createView(c(t)))}function Dt(n){c(n).destroy()}function Tt(n){c(n).destroy()}function Ct(n,t){return x(c(n).getBindGroupLayout(t>>>0))}function Mt(n,t){return x(c(n).getBindGroupLayout(t>>>0))}function Ft(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Et(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Lt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Ot(n,t){return x(c(n).beginComputePass(c(t)))}function Gt(n){c(n).end()}function Vt(n,t){return x(c(n).beginRenderPass(c(t)))}function Wt(n){c(n).end()}function qt(n,t){const e=w(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function zt(n,t){return x(c(n).finish(c(t)))}function Ut(n){return x(c(n).finish())}function Kt(n,t,e){c(n).clearBuffer(c(t),e)}function Qt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Nt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Xt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Yt(n){return x(c(n).finish())}function Ht(n,t){return x(c(n).finish(c(t)))}function Jt(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Zt(n){return c(n).usage}function $t(n){return c(n).size}function ne(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function te(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function ee(n,t){c(n).setPipeline(c(t))}function re(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function ue(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function fe(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function ce(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function ie(n,t){c(n).setPipeline(c(t))}function oe(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function _e(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function de(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function ae(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function be(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ge(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function we(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function se(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function le(n,t,e){c(n).drawIndirect(c(t),e)}function me(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function pe(n,t){c(n).setPipeline(c(t))}function he(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function xe(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ye(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Se(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ke(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ve(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Be(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Pe(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function je(n,t,e){c(n).drawIndirect(c(t),e)}function Ie(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ae(n,t){c(n).setBlendConstant(c(t))}function De(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Te(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Ce(n,t){c(n).setStencilReference(t>>>0)}function Me(n,t){c(n).executeBundles(c(t))}function Fe(n,t){c(n).submit(c(t))}function Ee(n){queueMicrotask(c(n))}function Re(n){return x(c(n).queueMicrotask)}function Le(n){return"function"==typeof c(n)}function Oe(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Ge(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function Ve(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function We(n,t,e){c(n).beginQuery(t>>>0,c(e))}function qe(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function ze(n,t,e){c(n).bindSampler(t>>>0,c(e))}function Ue(n,t){c(n).bindVertexArray(c(t))}function Ke(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function Qe(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ne(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Xe(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Ye(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function He(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function Je(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Ze(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function $e(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function nr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function tr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function er(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function rr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function ur(n){const t=c(n).createQuery();return s(t)?0:x(t)}function fr(n){const t=c(n).createSampler();return s(t)?0:x(t)}function cr(n){const t=c(n).createVertexArray();return s(t)?0:x(t)}function ir(n,t){c(n).deleteQuery(c(t))}function or(n,t){c(n).deleteSampler(c(t))}function _r(n,t){c(n).deleteSync(c(t))}function dr(n,t){c(n).deleteVertexArray(c(t))}function ar(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function br(n,t){c(n).drawBuffers(c(t))}function gr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function wr(n,t){c(n).endQuery(t>>>0)}function sr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return s(r)?0:x(r)}function lr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function mr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function pr(){return O((function(n,t,e){return x(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function hr(n,t,e){return x(c(n).getQueryParameter(c(t),e>>>0))}function xr(n,t,e){return x(c(n).getSyncParameter(c(t),e>>>0))}function yr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),h(e,r))}function Sr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function kr(n,t){c(n).readBuffer(t>>>0)}function vr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Br(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Pr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function jr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Ir(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Ar(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Dr(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Tr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Cr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Wr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function qr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function zr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function Ur(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function Kr(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function Qr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Nr(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Xr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Yr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Hr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Jr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Zr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function $r(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function nu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function cu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function iu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function ou(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function _u(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function du(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function au(n,t){c(n).activeTexture(t>>>0)}function bu(n,t,e){c(n).attachShader(c(t),c(e))}function gu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,h(r,u))}function wu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function su(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function lu(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function mu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function pu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function hu(n,t){c(n).blendEquation(t>>>0)}function xu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function yu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Su(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ku(n,t){c(n).clear(t>>>0)}function vu(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Bu(n,t){c(n).clearDepth(t)}function Pu(n,t){c(n).clearStencil(t)}function ju(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Iu(n,t){c(n).compileShader(c(t))}function Au(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Du(n){const t=c(n).createBuffer();return s(t)?0:x(t)}function Tu(n){const t=c(n).createFramebuffer();return s(t)?0:x(t)}function Cu(n){const t=c(n).createProgram();return s(t)?0:x(t)}function Mu(n){const t=c(n).createRenderbuffer();return s(t)?0:x(t)}function Fu(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:x(e)}function Eu(n){const t=c(n).createTexture();return s(t)?0:x(t)}function Ru(n,t){c(n).cullFace(t>>>0)}function Lu(n,t){c(n).deleteBuffer(c(t))}function Ou(n,t){c(n).deleteFramebuffer(c(t))}function Gu(n,t){c(n).deleteProgram(c(t))}function Vu(n,t){c(n).deleteRenderbuffer(c(t))}function Wu(n,t){c(n).deleteShader(c(t))}function qu(n,t){c(n).deleteTexture(c(t))}function zu(n,t){c(n).depthFunc(t>>>0)}function Uu(n,t){c(n).depthMask(0!==t)}function Ku(n,t,e){c(n).depthRange(t,e)}function Qu(n,t){c(n).disable(t>>>0)}function Nu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Xu(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Yu(n,t){c(n).enable(t>>>0)}function Hu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ju(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Zu(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function $u(n,t){c(n).frontFace(t>>>0)}function nf(){return O((function(n,t,e){const r=c(n).getExtension(h(t,e));return s(r)?0:x(r)}),arguments)}function tf(){return O((function(n,t){return x(c(n).getParameter(t>>>0))}),arguments)}function ef(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function rf(n,t,e){return x(c(n).getProgramParameter(c(t),e>>>0))}function uf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function ff(n,t,e){return x(c(n).getShaderParameter(c(t),e>>>0))}function cf(n){const t=c(n).getSupportedExtensions();return s(t)?0:x(t)}function of(n,t,e,r){const u=c(n).getUniformLocation(c(t),h(e,r));return s(u)?0:x(u)}function _f(n,t){c(n).linkProgram(c(t))}function df(n,t,e){c(n).pixelStorei(t>>>0,e)}function af(n,t,e){c(n).polygonOffset(t,e)}function bf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function gf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function wf(n,t,e,r){c(n).shaderSource(c(t),h(e,r))}function sf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function lf(n,t){c(n).stencilMask(t>>>0)}function mf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function pf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function hf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function xf(n,t,e){c(n).uniform1f(c(t),e)}function yf(n,t,e){c(n).uniform1i(c(t),e)}function Sf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function kf(n,t){c(n).useProgram(c(t))}function vf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Bf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Pf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function jf(n){const t=c(n).document;return s(t)?0:x(t)}function If(n){return x(c(n).location)}function Af(n){return x(c(n).navigator)}function Df(n){return c(n).devicePixelRatio}function Tf(n,t){c(n).cancelIdleCallback(t>>>0)}function Cf(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return s(e)?0:x(e)}),arguments)}function Mf(){return O((function(n,t,e){const r=c(n).matchMedia(h(t,e));return s(r)?0:x(r)}),arguments)}function Ff(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Ef(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Rf(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Lf(n,t){c(n).clearTimeout(t)}function Of(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Gf(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Vf(n){const t=c(n).body;return s(t)?0:x(t)}function Wf(n){return x(c(n).visibilityState)}function qf(n){const t=c(n).activeElement;return s(t)?0:x(t)}function zf(n){const t=c(n).fullscreenElement;return s(t)?0:x(t)}function Uf(){return O((function(n,t,e){return x(c(n).createElement(h(t,e)))}),arguments)}function Kf(n,t,e){const r=c(n).getElementById(h(t,e));return s(r)?0:x(r)}function Qf(){return O((function(n,t,e){const r=c(n).querySelector(h(t,e));return s(r)?0:x(r)}),arguments)}function Nf(){return O((function(n,t,e){return x(c(n).querySelectorAll(h(t,e)))}),arguments)}function Xf(){return O((function(n,t,e,r,u){c(n).setAttribute(h(t,e),h(r,u))}),arguments)}function Yf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Hf(n){return x(c(n).navigator)}function Jf(n,t){return x(c(n).fetch(c(t)))}function Zf(n){return x(c(n).style)}function $f(){return O((function(n){c(n).focus()}),arguments)}function nc(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function tc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function ec(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function rc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function uc(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function fc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function cc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function ic(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function oc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function _c(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function dc(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function ac(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function bc(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function gc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function wc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function sc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function lc(n,t){c(n).activeTexture(t>>>0)}function mc(n,t,e){c(n).attachShader(c(t),c(e))}function pc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,h(r,u))}function hc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function xc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function yc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Sc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function kc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function vc(n,t){c(n).blendEquation(t>>>0)}function Bc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Pc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function jc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ic(n,t){c(n).clear(t>>>0)}function Ac(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Dc(n,t){c(n).clearDepth(t)}function Tc(n,t){c(n).clearStencil(t)}function Cc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Mc(n,t){c(n).compileShader(c(t))}function Fc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Ec(n){const t=c(n).createBuffer();return s(t)?0:x(t)}function Rc(n){const t=c(n).createFramebuffer();return s(t)?0:x(t)}function Lc(n){const t=c(n).createProgram();return s(t)?0:x(t)}function Oc(n){const t=c(n).createRenderbuffer();return s(t)?0:x(t)}function Gc(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:x(e)}function Vc(n){const t=c(n).createTexture();return s(t)?0:x(t)}function Wc(n,t){c(n).cullFace(t>>>0)}function qc(n,t){c(n).deleteBuffer(c(t))}function zc(n,t){c(n).deleteFramebuffer(c(t))}function Uc(n,t){c(n).deleteProgram(c(t))}function Kc(n,t){c(n).deleteRenderbuffer(c(t))}function Qc(n,t){c(n).deleteShader(c(t))}function Nc(n,t){c(n).deleteTexture(c(t))}function Xc(n,t){c(n).depthFunc(t>>>0)}function Yc(n,t){c(n).depthMask(0!==t)}function Hc(n,t,e){c(n).depthRange(t,e)}function Jc(n,t){c(n).disable(t>>>0)}function Zc(n,t){c(n).disableVertexAttribArray(t>>>0)}function $c(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ni(n,t){c(n).enable(t>>>0)}function ti(n,t){c(n).enableVertexAttribArray(t>>>0)}function ei(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ri(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function ui(n,t){c(n).frontFace(t>>>0)}function fi(){return O((function(n,t){return x(c(n).getParameter(t>>>0))}),arguments)}function ci(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function ii(n,t,e){return x(c(n).getProgramParameter(c(t),e>>>0))}function oi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function _i(n,t,e){return x(c(n).getShaderParameter(c(t),e>>>0))}function di(n,t,e,r){const u=c(n).getUniformLocation(c(t),h(e,r));return s(u)?0:x(u)}function ai(n,t){c(n).linkProgram(c(t))}function bi(n,t,e){c(n).pixelStorei(t>>>0,e)}function gi(n,t,e){c(n).polygonOffset(t,e)}function wi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function si(n,t,e,r,u){c(n).scissor(t,e,r,u)}function li(n,t,e,r){c(n).shaderSource(c(t),h(e,r))}function mi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function pi(n,t){c(n).stencilMask(t>>>0)}function hi(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function xi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yi(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Si(n,t,e){c(n).uniform1f(c(t),e)}function ki(n,t,e){c(n).uniform1i(c(t),e)}function vi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Bi(n,t){c(n).useProgram(c(t))}function Pi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function ji(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ii(){return O((function(n,t,e,u){const f=w(c(t).getPropertyValue(h(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Ai(){return O((function(n,t,e,u){const f=w(c(t).removeProperty(h(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Di(){return O((function(n,t,e,r,u){c(n).setProperty(h(t,e),h(r,u))}),arguments)}function Ti(n){return c(n).width}function Ci(n){return c(n).height}function Mi(n){return c(n).videoWidth}function Fi(n){return c(n).videoHeight}function Ei(n){return c(n).width}function Ri(n){return c(n).height}function Li(n,t){c(n).drawBuffersWEBGL(c(t))}function Oi(n){return x(c(n).signal)}function Gi(){return O((function(){return x(new AbortController)}),arguments)}function Vi(n){c(n).abort()}function Wi(n){return c(n).isIntersecting}function qi(n){return c(n).pointerId}function zi(n){return c(n).pressure}function Ui(n,t){const e=w(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Ki(n){return x(c(n).getCoalescedEvents())}function Qi(n){c(n).preventDefault()}function Ni(n,t){const e=w(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Xi(n){return c(n).matches}function Yi(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Hi(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Ji(n){return c(n).ctrlKey}function Zi(n){return c(n).shiftKey}function $i(n){return c(n).altKey}function no(n){return c(n).metaKey}function to(n){return c(n).button}function eo(n){return c(n).buttons}function ro(n){return c(n).movementX}function uo(n){return c(n).movementY}function fo(n){return c(n).deltaX}function co(n){return c(n).deltaY}function io(n){return c(n).deltaMode}function oo(){return O((function(n,t,e,r){c(n).addEventListener(h(t,e),c(r))}),arguments)}function _o(){return O((function(n,t,e,r){c(n).removeEventListener(h(t,e),c(r))}),arguments)}function ao(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function bo(n){return c(n).width}function go(n,t){c(n).width=t>>>0}function wo(n){return c(n).height}function so(n,t){c(n).height=t>>>0}function lo(){return O((function(n,t,e){const r=c(n).getContext(h(t,e));return s(r)?0:x(r)}),arguments)}function mo(){return O((function(n,t,e,r){const u=c(n).getContext(h(t,e),c(r));return s(u)?0:x(u)}),arguments)}function po(){return O((function(n,t){const e=w(c(t).origin,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}),arguments)}function ho(n){return c(n).width}function xo(n,t){c(n).width=t>>>0}function yo(n){return c(n).height}function So(n,t){c(n).height=t>>>0}function ko(){return O((function(n,t,e){const r=c(n).getContext(h(t,e));return s(r)?0:x(r)}),arguments)}function vo(){return O((function(n,t,e,r){const u=c(n).getContext(h(t,e),c(r));return s(u)?0:x(u)}),arguments)}function Bo(){return O((function(n){return x(new ResizeObserver(c(n)))}),arguments)}function Po(n){c(n).disconnect()}function jo(n,t){c(n).observe(c(t))}function Io(n,t,e){c(n).observe(c(t),c(e))}function Ao(n,t){c(n).unobserve(c(t))}function Do(n){const t=c(n).getSupportedProfiles();return s(t)?0:x(t)}function To(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Co(n){return x(c(n).contentRect)}function Mo(n){return x(c(n).devicePixelContentBoxSize)}function Fo(n){console.debug(c(n))}function Eo(n){console.error(c(n))}function Ro(n,t){console.error(c(n),c(t))}function Lo(n){console.info(c(n))}function Oo(n){console.log(c(n))}function Go(n){console.warn(c(n))}function Vo(n){return x(c(n).port1)}function Wo(n){return x(c(n).port2)}function qo(){return O((function(){return x(new MessageChannel)}),arguments)}function zo(n){c(n).close()}function Uo(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Ko(n){c(n).start()}function Qo(n){return c(n).inlineSize}function No(n){return c(n).blockSize}function Xo(n){let t;try{t=c(n)instanceof Response}catch(n){t=!1}return t}function Yo(n,t){const e=w(c(t).url,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Ho(n){return c(n).status}function Jo(n){return x(c(n).headers)}function Zo(){return O((function(n){return x(c(n).arrayBuffer())}),arguments)}function $o(){return O((function(n){return x(c(n).text())}),arguments)}function n_(n){return c(n).altKey}function t_(n){return c(n).ctrlKey}function e_(n){return c(n).shiftKey}function r_(n){return c(n).metaKey}function u_(n){return c(n).location}function f_(n){return c(n).repeat}function c_(n,t){const e=w(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function i_(n,t){const e=w(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function o_(n){return c(n).persisted}function __(){return O((function(n,t,e){return x(new Request(h(n,t),c(e)))}),arguments)}function d_(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function a_(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function b_(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function g_(){return O((function(){return x(new Headers)}),arguments)}function w_(){return O((function(n,t,e,r,u){c(n).append(h(t,e),h(r,u))}),arguments)}function s_(){return O((function(n){return x(new IntersectionObserver(c(n)))}),arguments)}function l_(n){c(n).disconnect()}function m_(n,t){c(n).observe(c(t))}function p_(){return O((function(n,t){return x(c(n).appendChild(c(t)))}),arguments)}function h_(n,t){return c(n).contains(c(t))}function x_(n,t){const e=c(n)[t>>>0];return s(e)?0:x(e)}function y_(n,t){c(n).bindVertexArrayOES(c(t))}function S_(n){const t=c(n).createVertexArrayOES();return s(t)?0:x(t)}function k_(n,t){c(n).deleteVertexArrayOES(c(t))}function v_(n,t){return x(c(n)[t>>>0])}function B_(n){return c(n).length}function P_(){return x(new Array)}function j_(n,t){return x(new Function(h(n,t)))}function I_(n){return x(c(n).next)}function A_(){return O((function(n){return x(c(n).next())}),arguments)}function D_(n){return c(n).done}function T_(n){return x(c(n).value)}function C_(){return x(Symbol.iterator)}function M_(){return O((function(n,t){return x(Reflect.get(c(n),c(t)))}),arguments)}function F_(){return O((function(n,t){return x(c(n).call(c(t)))}),arguments)}function E_(){return x(new Object)}function R_(){return O((function(){return x(self.self)}),arguments)}function L_(){return O((function(){return x(window.window)}),arguments)}function O_(){return O((function(){return x(globalThis.globalThis)}),arguments)}function G_(){return O((function(){return x(global.global)}),arguments)}function V_(n,t,e){return c(n).includes(c(t),e)}function W_(n){return x(Array.of(c(n)))}function q_(n,t){return c(n).push(c(t))}function z_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function U_(n,t){return x(Object.getOwnPropertyDescriptor(c(n),c(t)))}function K_(n,t){return Object.is(c(n),c(t))}function Q_(n){return x(c(n).valueOf())}function N_(n){return x(Promise.resolve(c(n)))}function X_(n,t){return x(c(n).catch(c(t)))}function Y_(n,t){return x(c(n).then(c(t)))}function H_(n,t,e){return x(c(n).then(c(t),c(e)))}function J_(n){return x(c(n).buffer)}function Z_(n,t,e){return x(new Int8Array(c(n),t>>>0,e>>>0))}function $_(n,t,e){return x(new Int16Array(c(n),t>>>0,e>>>0))}function nd(n,t,e){return x(new Int32Array(c(n),t>>>0,e>>>0))}function td(n,t,e){return x(new Uint8Array(c(n),t>>>0,e>>>0))}function ed(n){return x(new Uint8Array(c(n)))}function rd(n,t,e){c(n).set(c(t),e>>>0)}function ud(n){return c(n).length}function fd(n,t,e){return x(new Uint16Array(c(n),t>>>0,e>>>0))}function cd(n,t,e){return x(new Uint32Array(c(n),t>>>0,e>>>0))}function id(n,t,e){return x(new Float32Array(c(n),t>>>0,e>>>0))}function od(n){return x(c(n).buffer)}function _d(){return O((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function dd(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ad(){return O((function(n){return x(JSON.stringify(c(n)))}),arguments)}function bd(n,t){const e=w(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=_;m()[n/4+1]=u,m()[n/4+0]=e}function gd(n,t){throw new Error(h(n,t))}function wd(){return x(r.memory)}function sd(n,t,e){return x(k(n,t,49,v))}function ld(n,t,e){return x(k(n,t,49,B))}function md(n,t,e){return x(k(n,t,49,B))}function pd(n,t,e){return x(k(n,t,49,B))}function hd(n,t,e){return x(k(n,t,49,B))}function xd(n,t,e){return x(k(n,t,49,B))}function yd(n,t,e){return x(k(n,t,49,P))}function Sd(n,t,e){return x(k(n,t,282,j))}function kd(n,t,e){return x(k(n,t,282,j))}function vd(n,t,e){return x(k(n,t,282,j))}function Bd(n,t,e){return x(k(n,t,282,I))}function Pd(n,t,e){return x(k(n,t,282,A))}function jd(n,t,e){return x(k(n,t,282,j))}function Id(n,t,e){return x(k(n,t,282,j))}function Ad(n,t,e){return x(k(n,t,892,D))}function Dd(n,t,e){return x(k(n,t,892,D))}function Td(n,t,e){return x(k(n,t,892,D))}function Cd(n,t,e){return x(k(n,t,892,T))}function Md(n,t,e){return x(k(n,t,892,D))}function Fd(n,t,e){return x(k(n,t,892,D))}function Ed(n,t,e){return x(k(n,t,892,D))}function Rd(n,t,e){return x(k(n,t,2027,C))}function Ld(n,t,e){return x(k(n,t,2027,C))}function Od(n,t,e){return x(k(n,t,2121,M))}}).call(this,e(260)(n))},407:function(n,t,e){"use strict";e.r(t);var r=e(408),u=e(247);e.d(t,"__wbg_set_wasm",(function(){return u.zi})),e.d(t,"run",(function(){return u.sl})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.ol})),e.d(t,"__wbindgen_string_get",(function(){return u.pl})),e.d(t,"__wbindgen_cb_drop",(function(){return u.Hk})),e.d(t,"__wbindgen_string_new",(function(){return u.ql})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.nl})),e.d(t,"__wbindgen_is_undefined",(function(){return u.jl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Eg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Li})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Rd})),e.d(t,"__wbg_fetch_386f87a3ebf5003c",(function(){return u.Wd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Vg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Wg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.qe})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Kh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Th})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Nh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Xg})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.oh})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.wk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.lh})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Lh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Sh})),e.d(t,"__wbindgen_number_new",(function(){return u.ml})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.xk})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Zg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Qg})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.mf})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.lf})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.af})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Ud})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.Cf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.Jh})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Hb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.we})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.of})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.ng})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.nf})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.Ae})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.eg})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.fg})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.gg})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.dg})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Mf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Nf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Wf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Vf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Yf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Zf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.bg})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.cg})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.ig})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.hg})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.ag})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.rg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.qg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.lg})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Of})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.jg})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.kg})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Xf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.Tf})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Pf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Qf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Rf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Sf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Uf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Pd})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.cf})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.vh})),e.d(t,"__wbindgen_is_object",(function(){return u.il})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.Hh})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.Ee})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Td})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.Df})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.oc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Tb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Ub})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.dc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.jc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Zb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Xb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.sc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.nc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.gc})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Yb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.ic})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.cd})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.Ci})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.ph})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.hh})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.Jf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.dk})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.wc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.ed})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.dd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.me})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ne})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Lb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Mb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Rb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Sb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.q})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Nd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.s})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Md})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.zf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.be})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Yd})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.jb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.ib})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.Fk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.Oh})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.ae})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Zd})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.Dk})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.gk})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.Ki})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.Ek})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Nb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.ji})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.di})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Yh})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.od})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.nd})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.ki})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.Zh})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.bi})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.gi})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.ii})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.ui})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.si})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Fd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.Cd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Ed})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.Ad})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.li})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.ai})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.ci})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.fi})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.hi})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.vi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.ti})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Gd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.Bd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.zd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.ei})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.oi})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.wi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.pi})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Sd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Yi})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.th})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.uh})),e.d(t,"__wbindgen_is_function",(function(){return u.hl})),e.d(t,"__wbindgen_boolean_get",(function(){return u.Gk})),e.d(t,"__wbindgen_number_get",(function(){return u.ll})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.sf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.r})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.v})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.C})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.G})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.R})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.U})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.X})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.Y})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.kb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.lb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.vb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Eb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Fb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Gb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Kb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Qb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.hc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.mc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.vc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Ic})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Lc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Oc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Sc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.sd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.wd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.yd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Ld})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Vd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.he})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.oe})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ze})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Ke})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Re})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Se})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.uf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.wh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.xh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.zh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.Dh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Qh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Rh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Zi})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.bj})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.ej})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.fj})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.jj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.kj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.gj})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.ij})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.lj})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.oj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.nj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.pj})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.mj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.qj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.yj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.zj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.Bj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.Dj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.Ej})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Hj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Ij})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Lj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Oj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Pj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Qj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Tj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Wj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Xj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Yj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Zj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.bk})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.ck})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.mk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.nk})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.o})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.u})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.x})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.y})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.A})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.D})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.H})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.L})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.J})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.P})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.N})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.tb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.nb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.pb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.rb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.zb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.Bb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Pb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Wb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.cc})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.ec})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.kc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.qc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.rc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.Ac})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Dc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Fc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Hc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Jc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Mc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Pc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Xc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Yc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.bd})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.kd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.id})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.td})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Kd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Id})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.de})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ge})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.je})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.ye})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.De})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Fe})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.Ie})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.Me})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ne})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Pe})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Te})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.Ff})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.ch})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.gh})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Fh})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Uh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Gi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Pi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Si})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Qi})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Ui})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.cj})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.vj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.xj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Jj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.hk})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.ok})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.tk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.tf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.pd})),e.d(t,"__wbg_location_2951b5ee34f19221",(function(){return u.Gf})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.vg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.gd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.gb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.re})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Kf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Mh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.fb})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Ih})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.sb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.ri})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.qi})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.T})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.uk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.le})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.ac})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.xe})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.sh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.rh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Xh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.mi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.ug})),e.d(t,"__wbg_fetch_921fad6ef9e883dd",(function(){return u.Xd})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Xi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.ce})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.W})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.Z})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Db})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.yh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.aj})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.hj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.Aj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.Cj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.Fj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.Gj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Mj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Nj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Vj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.ak})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.p})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.t})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.w})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.z})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.B})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.E})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.I})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.M})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.K})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.Q})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.O})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.ub})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.mb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.ob})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.qb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.yb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.Ab})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Ob})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Vb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.bc})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.fc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.lc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.pc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.tc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.zc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Cc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Ec})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Gc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Kc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Nc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Qc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Wc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Zc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.ad})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.jd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.hd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.ud})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Jd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Hd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.ee})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.fe})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ke})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.Ce})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Ge})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.He})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Le})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Oe})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Ue})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.Ef})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.bh})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.fh})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.Eh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Vh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Fi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Oi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ti})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Ri})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Vi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.dj})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.uj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.wj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Kj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.ik})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.pk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.sk})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Je})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Ch})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.ni})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.zk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.ff})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.rk})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.qk})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.yk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.hf})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.vd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ji})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.wg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.vf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.dh})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.mh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.eh})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.pe})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.nh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.mg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Lf})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Bh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.xc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Hi})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.pg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.cb})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.db})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.sg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.tg})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Uc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Vc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Tc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Ah})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.pf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.Bk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.Di})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.gf})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.Bi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.ue})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.ve})),e.d(t,"__wbg_origin_ee93e29ace71f568",(function(){return u.Yg})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.Ak})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.Ei})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.ef})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.Ai})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.se})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.te})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.Ag})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.ld})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Sg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Tg})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.ek})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Qe})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ie})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Jb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.fd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.Bc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Qd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Od})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.jf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.If})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.vk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.ih})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.jh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.yg})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.wb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.kh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Mi})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.kf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.S})),e.d(t,"__wbg_instanceof_Response_849eb93e75734b6e",(function(){return u.rf})),e.d(t,"__wbg_url_5f6dc4009ac5f99d",(function(){return u.fk})),e.d(t,"__wbg_status_61a01141acd3cf74",(function(){return u.Ni})),e.d(t,"__wbg_headers_9620bfada380764a",(function(){return u.df})),e.d(t,"__wbg_arrayBuffer_29931d52c7206b02",(function(){return u.n})),e.d(t,"__wbg_text_450a059667fd91fd",(function(){return u.rj})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.yc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Ii})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.og})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.Hf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Gh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.yf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.xb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.ah})),e.d(t,"__wbg_newwithstrandinit_3fd6fba4083ff2d0",(function(){return u.Ng})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.rd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.xd})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.lk})),e.d(t,"__wbg_new_ab6fd82b10560829",(function(){return u.Dg})),e.d(t,"__wbg_append_7bfcb4937d1d5e29",(function(){return u.m})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.zg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.md})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Rg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Ib})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Ve})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.F})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.uc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Rc})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.We})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.Bf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.xg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Fg})),e.d(t,"__wbg_next_40fc327bfc8770e6",(function(){return u.Pg})),e.d(t,"__wbg_next_196c84450b364254",(function(){return u.Og})),e.d(t,"__wbg_done_298b57d23c0fc80c",(function(){return u.qd})),e.d(t,"__wbg_value_d93c65011f51a456",(function(){return u.kk})),e.d(t,"__wbg_iterator_2cee6dadfd956dfa",(function(){return u.xf})),e.d(t,"__wbg_get_e3c254076557e348",(function(){return u.Xe})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.eb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Cg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Wh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.Ck})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Ye})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Ze})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.if})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Ug})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.qh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.qf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Be})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.wf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.jk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Ph})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.hb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.sj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.tj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.ab})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Kg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Mg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.Bg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.yi})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.Af})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Lg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Gg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Jg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.bb})),e.d(t,"__wbg_has_0af94d20077affa2",(function(){return u.bf})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.xi})),e.d(t,"__wbg_stringify_8887fe74e1c50d81",(function(){return u.Wi})),e.d(t,"__wbindgen_debug_string",(function(){return u.gl})),e.d(t,"__wbindgen_throw",(function(){return u.rl})),e.d(t,"__wbindgen_memory",(function(){return u.kl})),e.d(t,"__wbindgen_closure_wrapper633",(function(){return u.Zk})),e.d(t,"__wbindgen_closure_wrapper634",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper635",(function(){return u.bl})),e.d(t,"__wbindgen_closure_wrapper636",(function(){return u.cl})),e.d(t,"__wbindgen_closure_wrapper637",(function(){return u.dl})),e.d(t,"__wbindgen_closure_wrapper638",(function(){return u.el})),e.d(t,"__wbindgen_closure_wrapper639",(function(){return u.fl})),e.d(t,"__wbindgen_closure_wrapper1119",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper1120",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper1121",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper1122",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper1123",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper1124",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper1125",(function(){return u.Ok})),e.d(t,"__wbindgen_closure_wrapper2496",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper2497",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper2498",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper2499",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper2500",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper2501",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper2502",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper4520",(function(){return u.Wk})),e.d(t,"__wbindgen_closure_wrapper4522",(function(){return u.Xk})),e.d(t,"__wbindgen_closure_wrapper5293",(function(){return u.Yk})),Object(u.zi)(r),r.__wbindgen_start()},408:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(247);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/26.bddfe75e.js b/assets/js/26.bddfe75e.js new file mode 100644 index 000000000..339470c14 --- /dev/null +++ b/assets/js/26.bddfe75e.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{244:function(n,t,e){"use strict";(function(n){e.d(t,"Li",(function(){return u})),e.d(t,"El",(function(){return M})),e.d(t,"Al",(function(){return W})),e.d(t,"Bl",(function(){return q})),e.d(t,"Tk",(function(){return z})),e.d(t,"vl",(function(){return U})),e.d(t,"Cl",(function(){return K})),e.d(t,"zl",(function(){return Q})),e.d(t,"Ng",(function(){return N})),e.d(t,"Xi",(function(){return X})),e.d(t,"Qd",(function(){return Y})),e.d(t,"Vd",(function(){return H})),e.d(t,"fh",(function(){return J})),e.d(t,"gh",(function(){return Z})),e.d(t,"b",(function(){return $})),e.d(t,"Jk",(function(){return nn})),e.d(t,"zh",(function(){return tn})),e.d(t,"fi",(function(){return en})),e.d(t,"pe",(function(){return rn})),e.d(t,"Wh",(function(){return un})),e.d(t,"Zh",(function(){return fn})),e.d(t,"ih",(function(){return cn})),e.d(t,"Kk",(function(){return on})),e.d(t,"Xh",(function(){return _n})),e.d(t,"ei",(function(){return dn})),e.d(t,"wh",(function(){return an})),e.d(t,"yl",(function(){return bn})),e.d(t,"kh",(function(){return gn})),e.d(t,"ah",(function(){return wn})),e.d(t,"nf",(function(){return sn})),e.d(t,"mf",(function(){return ln})),e.d(t,"pf",(function(){return mn})),e.d(t,"of",(function(){return pn})),e.d(t,"Wi",(function(){return hn})),e.d(t,"tk",(function(){return xn})),e.d(t,"bd",(function(){return yn})),e.d(t,"Ae",(function(){return Sn})),e.d(t,"Nf",(function(){return kn})),e.d(t,"qk",(function(){return vn})),e.d(t,"nd",(function(){return Bn})),e.d(t,"md",(function(){return Pn})),e.d(t,"Md",(function(){return In})),e.d(t,"vi",(function(){return jn})),e.d(t,"mi",(function(){return An})),e.d(t,"oi",(function(){return Dn})),e.d(t,"me",(function(){return Tn})),e.d(t,"lf",(function(){return Cn})),e.d(t,"af",(function(){return En})),e.d(t,"Ee",(function(){return Mn})),e.d(t,"Th",(function(){return Fn})),e.d(t,"le",(function(){return Rn})),e.d(t,"vg",(function(){return Ln})),e.d(t,"Xd",(function(){return On})),e.d(t,"ae",(function(){return Gn})),e.d(t,"ni",(function(){return Vn})),e.d(t,"li",(function(){return Wn})),e.d(t,"Ed",(function(){return qn})),e.d(t,"Ad",(function(){return zn})),e.d(t,"yd",(function(){return Un})),e.d(t,"Cd",(function(){return Kn})),e.d(t,"si",(function(){return Qn})),e.d(t,"ti",(function(){return Nn})),e.d(t,"xi",(function(){return Xn})),e.d(t,"Fi",(function(){return Yn})),e.d(t,"Ei",(function(){return Hn})),e.d(t,"Td",(function(){return Jn})),e.d(t,"Ff",(function(){return Zn})),e.d(t,"Gh",(function(){return $n})),e.d(t,"Mf",(function(){return nt})),e.d(t,"Oi",(function(){return tt})),e.d(t,"Tb",(function(){return et})),e.d(t,"Sb",(function(){return rt})),e.d(t,"Wb",(function(){return ut})),e.d(t,"Xb",(function(){return ft})),e.d(t,"Yb",(function(){return ct})),e.d(t,"cc",(function(){return it})),e.d(t,"fc",(function(){return ot})),e.d(t,"hc",(function(){return _t})),e.d(t,"ic",(function(){return dt})),e.d(t,"mc",(function(){return at})),e.d(t,"nc",(function(){return bt})),e.d(t,"rc",(function(){return gt})),e.d(t,"cd",(function(){return wt})),e.d(t,"sh",(function(){return st})),e.d(t,"Ah",(function(){return lt})),e.d(t,"vc",(function(){return mt})),e.d(t,"dd",(function(){return pt})),e.d(t,"Gj",(function(){return ht})),e.d(t,"hh",(function(){return xt})),e.d(t,"Bf",(function(){return yt})),e.d(t,"Gf",(function(){return St})),e.d(t,"tg",(function(){return kt})),e.d(t,"Gb",(function(){return vt})),e.d(t,"we",(function(){return Bt})),e.d(t,"Lh",(function(){return Pt})),e.d(t,"ug",(function(){return It})),e.d(t,"Ld",(function(){return jt})),e.d(t,"Rd",(function(){return At})),e.d(t,"qi",(function(){return Dt})),e.d(t,"Ai",(function(){return Tt})),e.d(t,"Bi",(function(){return Ct})),e.d(t,"Ii",(function(){return Et})),e.d(t,"ki",(function(){return Mt})),e.d(t,"pi",(function(){return Ft})),e.d(t,"Fd",(function(){return Rt})),e.d(t,"Bd",(function(){return Lt})),e.d(t,"zd",(function(){return Ot})),e.d(t,"Dd",(function(){return Gt})),e.d(t,"ri",(function(){return Vt})),e.d(t,"ui",(function(){return Wt})),e.d(t,"wi",(function(){return qt})),e.d(t,"Hi",(function(){return zt})),e.d(t,"Gi",(function(){return Ut})),e.d(t,"qe",(function(){return Kt})),e.d(t,"Af",(function(){return Qt})),e.d(t,"q",(function(){return Nt})),e.d(t,"s",(function(){return Xt})),e.d(t,"ib",(function(){return Yt})),e.d(t,"jb",(function(){return Ht})),e.d(t,"Kb",(function(){return Jt})),e.d(t,"Lb",(function(){return Zt})),e.d(t,"Qb",(function(){return $t})),e.d(t,"Rb",(function(){return ne})),e.d(t,"Zd",(function(){return te})),e.d(t,"Yd",(function(){return ee})),e.d(t,"ai",(function(){return re})),e.d(t,"Pd",(function(){return ue})),e.d(t,"cf",(function(){return fe})),e.d(t,"kg",(function(){return ce})),e.d(t,"lg",(function(){return ie})),e.d(t,"mg",(function(){return oe})),e.d(t,"jg",(function(){return _e})),e.d(t,"Qf",(function(){return de})),e.d(t,"Rf",(function(){return ae})),e.d(t,"cg",(function(){return be})),e.d(t,"bg",(function(){return ge})),e.d(t,"eg",(function(){return we})),e.d(t,"fg",(function(){return se})),e.d(t,"hg",(function(){return le})),e.d(t,"ig",(function(){return me})),e.d(t,"og",(function(){return pe})),e.d(t,"ng",(function(){return he})),e.d(t,"gg",(function(){return xe})),e.d(t,"rg",(function(){return ye})),e.d(t,"Sf",(function(){return Se})),e.d(t,"pg",(function(){return ke})),e.d(t,"qg",(function(){return ve})),e.d(t,"Ag",(function(){return Be})),e.d(t,"zg",(function(){return Pe})),e.d(t,"dg",(function(){return Ie})),e.d(t,"Uf",(function(){return je})),e.d(t,"Tf",(function(){return Ae})),e.d(t,"Zf",(function(){return De})),e.d(t,"Vf",(function(){return Te})),e.d(t,"Wf",(function(){return Ce})),e.d(t,"Xf",(function(){return Ee})),e.d(t,"Yf",(function(){return Me})),e.d(t,"ag",(function(){return Fe})),e.d(t,"ul",(function(){return Re})),e.d(t,"a",(function(){return Le})),e.d(t,"c",(function(){return Oe})),e.d(t,"Vh",(function(){return Ge})),e.d(t,"Sd",(function(){return Ve})),e.d(t,"Ef",(function(){return We})),e.d(t,"wg",(function(){return qe})),e.d(t,"Qk",(function(){return ze})),e.d(t,"Rk",(function(){return Ue})),e.d(t,"Mb",(function(){return Ke})),e.d(t,"kj",(function(){return Qe})),e.d(t,"Fh",(function(){return Ne})),e.d(t,"Eh",(function(){return Xe})),e.d(t,"tl",(function(){return Ye})),e.d(t,"Sk",(function(){return He})),e.d(t,"xl",(function(){return Je})),e.d(t,"tf",(function(){return Ze})),e.d(t,"r",(function(){return $e})),e.d(t,"v",(function(){return nr})),e.d(t,"C",(function(){return tr})),e.d(t,"G",(function(){return er})),e.d(t,"R",(function(){return rr})),e.d(t,"U",(function(){return ur})),e.d(t,"X",(function(){return fr})),e.d(t,"Y",(function(){return cr})),e.d(t,"kb",(function(){return ir})),e.d(t,"lb",(function(){return or})),e.d(t,"mb",(function(){return _r})),e.d(t,"ub",(function(){return dr})),e.d(t,"Db",(function(){return ar})),e.d(t,"Bb",(function(){return br})),e.d(t,"Eb",(function(){return gr})),e.d(t,"Fb",(function(){return wr})),e.d(t,"Jb",(function(){return sr})),e.d(t,"Pb",(function(){return lr})),e.d(t,"gc",(function(){return mr})),e.d(t,"lc",(function(){return pr})),e.d(t,"uc",(function(){return hr})),e.d(t,"Hc",(function(){return xr})),e.d(t,"Kc",(function(){return yr})),e.d(t,"Nc",(function(){return Sr})),e.d(t,"Rc",(function(){return kr})),e.d(t,"rd",(function(){return vr})),e.d(t,"vd",(function(){return Br})),e.d(t,"xd",(function(){return Pr})),e.d(t,"Kd",(function(){return Ir})),e.d(t,"Ud",(function(){return jr})),e.d(t,"ge",(function(){return Ar})),e.d(t,"ne",(function(){return Dr})),e.d(t,"ze",(function(){return Tr})),e.d(t,"Ke",(function(){return Cr})),e.d(t,"Re",(function(){return Er})),e.d(t,"Se",(function(){return Mr})),e.d(t,"vf",(function(){return Fr})),e.d(t,"Hh",(function(){return Rr})),e.d(t,"Ih",(function(){return Lr})),e.d(t,"Kh",(function(){return Or})),e.d(t,"Ph",(function(){return Gr})),e.d(t,"ci",(function(){return Vr})),e.d(t,"di",(function(){return Wr})),e.d(t,"lj",(function(){return qr})),e.d(t,"nj",(function(){return zr})),e.d(t,"qj",(function(){return Ur})),e.d(t,"rj",(function(){return Kr})),e.d(t,"vj",(function(){return Qr})),e.d(t,"wj",(function(){return Nr})),e.d(t,"sj",(function(){return Xr})),e.d(t,"uj",(function(){return Yr})),e.d(t,"xj",(function(){return Hr})),e.d(t,"Aj",(function(){return Jr})),e.d(t,"zj",(function(){return Zr})),e.d(t,"Bj",(function(){return $r})),e.d(t,"yj",(function(){return nu})),e.d(t,"Cj",(function(){return tu})),e.d(t,"Lj",(function(){return eu})),e.d(t,"Mj",(function(){return ru})),e.d(t,"Oj",(function(){return uu})),e.d(t,"Qj",(function(){return fu})),e.d(t,"Rj",(function(){return cu})),e.d(t,"Uj",(function(){return iu})),e.d(t,"Vj",(function(){return ou})),e.d(t,"Yj",(function(){return _u})),e.d(t,"bk",(function(){return du})),e.d(t,"ck",(function(){return au})),e.d(t,"dk",(function(){return bu})),e.d(t,"fk",(function(){return gu})),e.d(t,"gk",(function(){return wu})),e.d(t,"hk",(function(){return su})),e.d(t,"jk",(function(){return lu})),e.d(t,"kk",(function(){return mu})),e.d(t,"lk",(function(){return pu})),e.d(t,"mk",(function(){return hu})),e.d(t,"ok",(function(){return xu})),e.d(t,"pk",(function(){return yu})),e.d(t,"zk",(function(){return Su})),e.d(t,"Ak",(function(){return ku})),e.d(t,"g",(function(){return vu})),e.d(t,"o",(function(){return Bu})),e.d(t,"u",(function(){return Pu})),e.d(t,"x",(function(){return Iu})),e.d(t,"y",(function(){return ju})),e.d(t,"A",(function(){return Au})),e.d(t,"D",(function(){return Du})),e.d(t,"H",(function(){return Tu})),e.d(t,"L",(function(){return Cu})),e.d(t,"J",(function(){return Eu})),e.d(t,"P",(function(){return Mu})),e.d(t,"N",(function(){return Fu})),e.d(t,"sb",(function(){return Ru})),e.d(t,"ob",(function(){return Lu})),e.d(t,"qb",(function(){return Ou})),e.d(t,"yb",(function(){return Gu})),e.d(t,"Ab",(function(){return Vu})),e.d(t,"Ob",(function(){return Wu})),e.d(t,"Vb",(function(){return qu})),e.d(t,"bc",(function(){return zu})),e.d(t,"dc",(function(){return Uu})),e.d(t,"jc",(function(){return Ku})),e.d(t,"pc",(function(){return Qu})),e.d(t,"qc",(function(){return Nu})),e.d(t,"zc",(function(){return Xu})),e.d(t,"Cc",(function(){return Yu})),e.d(t,"Ec",(function(){return Hu})),e.d(t,"Gc",(function(){return Ju})),e.d(t,"Ic",(function(){return Zu})),e.d(t,"Lc",(function(){return $u})),e.d(t,"Oc",(function(){return nf})),e.d(t,"Wc",(function(){return tf})),e.d(t,"Xc",(function(){return ef})),e.d(t,"ad",(function(){return rf})),e.d(t,"jd",(function(){return uf})),e.d(t,"hd",(function(){return ff})),e.d(t,"sd",(function(){return cf})),e.d(t,"Jd",(function(){return of})),e.d(t,"Hd",(function(){return _f})),e.d(t,"ce",(function(){return df})),e.d(t,"fe",(function(){return af})),e.d(t,"ie",(function(){return bf})),e.d(t,"ye",(function(){return gf})),e.d(t,"De",(function(){return wf})),e.d(t,"Fe",(function(){return sf})),e.d(t,"Ie",(function(){return lf})),e.d(t,"Me",(function(){return mf})),e.d(t,"Ne",(function(){return pf})),e.d(t,"Pe",(function(){return hf})),e.d(t,"Te",(function(){return xf})),e.d(t,"If",(function(){return yf})),e.d(t,"nh",(function(){return Sf})),e.d(t,"rh",(function(){return kf})),e.d(t,"Rh",(function(){return vf})),e.d(t,"gi",(function(){return Bf})),e.d(t,"Si",(function(){return Pf})),e.d(t,"bj",(function(){return If})),e.d(t,"ej",(function(){return jf})),e.d(t,"cj",(function(){return Af})),e.d(t,"gj",(function(){return Df})),e.d(t,"oj",(function(){return Tf})),e.d(t,"Ij",(function(){return Cf})),e.d(t,"Kj",(function(){return Ef})),e.d(t,"Wj",(function(){return Mf})),e.d(t,"uk",(function(){return Ff})),e.d(t,"Bk",(function(){return Rf})),e.d(t,"Gk",(function(){return Lf})),e.d(t,"uf",(function(){return Of})),e.d(t,"od",(function(){return Gf})),e.d(t,"Jf",(function(){return Vf})),e.d(t,"Eg",(function(){return Wf})),e.d(t,"fd",(function(){return qf})),e.d(t,"gb",(function(){return zf})),e.d(t,"re",(function(){return Uf})),e.d(t,"Of",(function(){return Kf})),e.d(t,"Yh",(function(){return Qf})),e.d(t,"fb",(function(){return Nf})),e.d(t,"Uh",(function(){return Xf})),e.d(t,"rb",(function(){return Yf})),e.d(t,"Di",(function(){return Hf})),e.d(t,"Ci",(function(){return Jf})),e.d(t,"T",(function(){return Zf})),e.d(t,"Hk",(function(){return $f})),e.d(t,"e",(function(){return nc})),e.d(t,"ke",(function(){return tc})),e.d(t,"Zb",(function(){return ec})),e.d(t,"xe",(function(){return rc})),e.d(t,"Dh",(function(){return uc})),e.d(t,"Ch",(function(){return fc})),e.d(t,"ji",(function(){return cc})),e.d(t,"yi",(function(){return ic})),e.d(t,"Dg",(function(){return oc})),e.d(t,"Wd",(function(){return _c})),e.d(t,"jj",(function(){return dc})),e.d(t,"be",(function(){return ac})),e.d(t,"W",(function(){return bc})),e.d(t,"V",(function(){return gc})),e.d(t,"Z",(function(){return wc})),e.d(t,"Cb",(function(){return sc})),e.d(t,"Jh",(function(){return lc})),e.d(t,"mj",(function(){return mc})),e.d(t,"tj",(function(){return pc})),e.d(t,"Nj",(function(){return hc})),e.d(t,"Pj",(function(){return xc})),e.d(t,"Sj",(function(){return yc})),e.d(t,"Tj",(function(){return Sc})),e.d(t,"Zj",(function(){return kc})),e.d(t,"ak",(function(){return vc})),e.d(t,"ek",(function(){return Bc})),e.d(t,"ik",(function(){return Pc})),e.d(t,"nk",(function(){return Ic})),e.d(t,"f",(function(){return jc})),e.d(t,"p",(function(){return Ac})),e.d(t,"t",(function(){return Dc})),e.d(t,"w",(function(){return Tc})),e.d(t,"z",(function(){return Cc})),e.d(t,"B",(function(){return Ec})),e.d(t,"E",(function(){return Mc})),e.d(t,"I",(function(){return Fc})),e.d(t,"M",(function(){return Rc})),e.d(t,"K",(function(){return Lc})),e.d(t,"Q",(function(){return Oc})),e.d(t,"O",(function(){return Gc})),e.d(t,"tb",(function(){return Vc})),e.d(t,"nb",(function(){return Wc})),e.d(t,"pb",(function(){return qc})),e.d(t,"xb",(function(){return zc})),e.d(t,"zb",(function(){return Uc})),e.d(t,"Nb",(function(){return Kc})),e.d(t,"Ub",(function(){return Qc})),e.d(t,"ac",(function(){return Nc})),e.d(t,"ec",(function(){return Xc})),e.d(t,"kc",(function(){return Yc})),e.d(t,"oc",(function(){return Hc})),e.d(t,"sc",(function(){return Jc})),e.d(t,"yc",(function(){return Zc})),e.d(t,"Bc",(function(){return $c})),e.d(t,"Dc",(function(){return ni})),e.d(t,"Fc",(function(){return ti})),e.d(t,"Jc",(function(){return ei})),e.d(t,"Mc",(function(){return ri})),e.d(t,"Pc",(function(){return ui})),e.d(t,"Vc",(function(){return fi})),e.d(t,"Yc",(function(){return ci})),e.d(t,"Zc",(function(){return ii})),e.d(t,"id",(function(){return oi})),e.d(t,"gd",(function(){return _i})),e.d(t,"td",(function(){return di})),e.d(t,"Id",(function(){return ai})),e.d(t,"Gd",(function(){return bi})),e.d(t,"de",(function(){return gi})),e.d(t,"ee",(function(){return wi})),e.d(t,"je",(function(){return si})),e.d(t,"Ce",(function(){return li})),e.d(t,"Ge",(function(){return mi})),e.d(t,"He",(function(){return pi})),e.d(t,"Le",(function(){return hi})),e.d(t,"Oe",(function(){return xi})),e.d(t,"Ue",(function(){return yi})),e.d(t,"Hf",(function(){return Si})),e.d(t,"mh",(function(){return ki})),e.d(t,"qh",(function(){return vi})),e.d(t,"Qh",(function(){return Bi})),e.d(t,"hi",(function(){return Pi})),e.d(t,"Ri",(function(){return Ii})),e.d(t,"aj",(function(){return ji})),e.d(t,"fj",(function(){return Ai})),e.d(t,"dj",(function(){return Di})),e.d(t,"hj",(function(){return Ti})),e.d(t,"pj",(function(){return Ci})),e.d(t,"Hj",(function(){return Ei})),e.d(t,"Jj",(function(){return Mi})),e.d(t,"Xj",(function(){return Fi})),e.d(t,"vk",(function(){return Ri})),e.d(t,"Ck",(function(){return Li})),e.d(t,"Fk",(function(){return Oi})),e.d(t,"qd",(function(){return Gi})),e.d(t,"wd",(function(){return Vi})),e.d(t,"yk",(function(){return Wi})),e.d(t,"Je",(function(){return qi})),e.d(t,"Oh",(function(){return zi})),e.d(t,"zi",(function(){return Ui})),e.d(t,"Ig",(function(){return Ki})),e.d(t,"ld",(function(){return Qi})),e.d(t,"bh",(function(){return Ni})),e.d(t,"l",(function(){return Xi})),e.d(t,"Hb",(function(){return Yi})),e.d(t,"Ve",(function(){return Hi})),e.d(t,"ud",(function(){return Ji})),e.d(t,"Ek",(function(){return Zi})),e.d(t,"Dk",(function(){return $i})),e.d(t,"th",(function(){return no})),e.d(t,"uh",(function(){return to})),e.d(t,"Hg",(function(){return eo})),e.d(t,"he",(function(){return ro})),e.d(t,"Zg",(function(){return uo})),e.d(t,"wf",(function(){return fo})),e.d(t,"Ib",(function(){return co})),e.d(t,"ed",(function(){return io})),e.d(t,"kf",(function(){return oo})),e.d(t,"S",(function(){return _o})),e.d(t,"Ac",(function(){return ao})),e.d(t,"Od",(function(){return bo})),e.d(t,"Nd",(function(){return go})),e.d(t,"jf",(function(){return wo})),e.d(t,"Lf",(function(){return so})),e.d(t,"Ik",(function(){return lo})),e.d(t,"Vi",(function(){return mo})),e.d(t,"Fg",(function(){return po})),e.d(t,"d",(function(){return ho})),e.d(t,"vb",(function(){return xo})),e.d(t,"vh",(function(){return yo})),e.d(t,"Yi",(function(){return So})),e.d(t,"Mk",(function(){return ko})),e.d(t,"ff",(function(){return vo})),e.d(t,"qf",(function(){return Bo})),e.d(t,"Ok",(function(){return Po})),e.d(t,"Pi",(function(){return Io})),e.d(t,"gf",(function(){return jo})),e.d(t,"Ni",(function(){return Ao})),e.d(t,"ue",(function(){return Do})),e.d(t,"ve",(function(){return To})),e.d(t,"Lk",(function(){return Co})),e.d(t,"hf",(function(){return Eo})),e.d(t,"k",(function(){return Mo})),e.d(t,"xc",(function(){return Fo})),e.d(t,"Ui",(function(){return Ro})),e.d(t,"xg",(function(){return Lo})),e.d(t,"Kf",(function(){return Oo})),e.d(t,"Sh",(function(){return Go})),e.d(t,"zf",(function(){return Vo})),e.d(t,"wb",(function(){return Wo})),e.d(t,"Nk",(function(){return qo})),e.d(t,"Qi",(function(){return zo})),e.d(t,"ef",(function(){return Uo})),e.d(t,"Mi",(function(){return Ko})),e.d(t,"se",(function(){return Qo})),e.d(t,"te",(function(){return No})),e.d(t,"lh",(function(){return Xo})),e.d(t,"h",(function(){return Yo})),e.d(t,"Mh",(function(){return Ho})),e.d(t,"Jg",(function(){return Jo})),e.d(t,"kd",(function(){return Zo})),e.d(t,"ch",(function(){return $o})),e.d(t,"dh",(function(){return n_})),e.d(t,"rk",(function(){return t_})),e.d(t,"Mg",(function(){return e_})),e.d(t,"m",(function(){return r_})),e.d(t,"jh",(function(){return u_})),e.d(t,"Tc",(function(){return f_})),e.d(t,"Uc",(function(){return c_})),e.d(t,"Sc",(function(){return i_})),e.d(t,"F",(function(){return o_})),e.d(t,"tc",(function(){return __})),e.d(t,"Qc",(function(){return d_})),e.d(t,"Wg",(function(){return a_})),e.d(t,"sf",(function(){return b_})),e.d(t,"sk",(function(){return g_})),e.d(t,"Zi",(function(){return w_})),e.d(t,"df",(function(){return s_})),e.d(t,"n",(function(){return l_})),e.d(t,"Dj",(function(){return m_})),e.d(t,"Qe",(function(){return p_})),e.d(t,"yh",(function(){return h_})),e.d(t,"sg",(function(){return x_})),e.d(t,"Pf",(function(){return y_})),e.d(t,"i",(function(){return S_})),e.d(t,"Nh",(function(){return k_})),e.d(t,"wc",(function(){return v_})),e.d(t,"Ti",(function(){return B_})),e.d(t,"j",(function(){return P_})),e.d(t,"yg",(function(){return I_})),e.d(t,"cb",(function(){return j_})),e.d(t,"db",(function(){return A_})),e.d(t,"Bg",(function(){return D_})),e.d(t,"Cg",(function(){return T_})),e.d(t,"oh",(function(){return C_})),e.d(t,"xh",(function(){return E_})),e.d(t,"ph",(function(){return M_})),e.d(t,"oe",(function(){return F_})),e.d(t,"We",(function(){return R_})),e.d(t,"Df",(function(){return L_})),e.d(t,"Gg",(function(){return O_})),e.d(t,"Og",(function(){return G_})),e.d(t,"Yg",(function(){return V_})),e.d(t,"Xg",(function(){return W_})),e.d(t,"pd",(function(){return q_})),e.d(t,"xk",(function(){return z_})),e.d(t,"yf",(function(){return U_})),e.d(t,"Xe",(function(){return K_})),e.d(t,"eb",(function(){return Q_})),e.d(t,"Lg",(function(){return N_})),e.d(t,"ii",(function(){return X_})),e.d(t,"Pk",(function(){return Y_})),e.d(t,"Ye",(function(){return H_})),e.d(t,"Ze",(function(){return J_})),e.d(t,"if",(function(){return Z_})),e.d(t,"eh",(function(){return $_})),e.d(t,"Bh",(function(){return nd})),e.d(t,"rf",(function(){return td})),e.d(t,"Be",(function(){return ed})),e.d(t,"xf",(function(){return rd})),e.d(t,"wk",(function(){return ud})),e.d(t,"bi",(function(){return fd})),e.d(t,"hb",(function(){return cd})),e.d(t,"Ej",(function(){return id})),e.d(t,"Fj",(function(){return od})),e.d(t,"ab",(function(){return _d})),e.d(t,"Qg",(function(){return dd})),e.d(t,"Tg",(function(){return ad})),e.d(t,"Rg",(function(){return bd})),e.d(t,"Vg",(function(){return gd})),e.d(t,"Kg",(function(){return wd})),e.d(t,"Ki",(function(){return sd})),e.d(t,"Cf",(function(){return ld})),e.d(t,"Ug",(function(){return md})),e.d(t,"Pg",(function(){return pd})),e.d(t,"Sg",(function(){return hd})),e.d(t,"bb",(function(){return xd})),e.d(t,"bf",(function(){return yd})),e.d(t,"Ji",(function(){return Sd})),e.d(t,"ij",(function(){return kd})),e.d(t,"sl",(function(){return vd})),e.d(t,"Dl",(function(){return Bd})),e.d(t,"wl",(function(){return Pd})),e.d(t,"ll",(function(){return Id})),e.d(t,"ml",(function(){return jd})),e.d(t,"nl",(function(){return Ad})),e.d(t,"ol",(function(){return Dd})),e.d(t,"pl",(function(){return Td})),e.d(t,"ql",(function(){return Cd})),e.d(t,"rl",(function(){return Ed})),e.d(t,"Uk",(function(){return Md})),e.d(t,"Vk",(function(){return Fd})),e.d(t,"Wk",(function(){return Rd})),e.d(t,"Xk",(function(){return Ld})),e.d(t,"Yk",(function(){return Od})),e.d(t,"Zk",(function(){return Gd})),e.d(t,"al",(function(){return Vd})),e.d(t,"bl",(function(){return Wd})),e.d(t,"cl",(function(){return qd})),e.d(t,"dl",(function(){return zd})),e.d(t,"el",(function(){return Ud})),e.d(t,"fl",(function(){return Kd})),e.d(t,"gl",(function(){return Qd})),e.d(t,"hl",(function(){return Nd})),e.d(t,"il",(function(){return Xd})),e.d(t,"jl",(function(){return Yd})),e.d(t,"kl",(function(){return Hd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=0,d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}let b=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof b.encodeInto?function(n,t){return b.encodeInto(n,t)}:function(n,t){const e=b.encode(n);return t.set(e),{read:n.length,written:e.length}};function w(n,t,e){if(void 0===e){const e=b.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),_=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=g(n,t).written,u=e(u,r,c,1)>>>0}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}let p=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,p.decode(a().subarray(n,n+t))}function x(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=n,t}p.decode();let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h93be6f2500e14af6(n,t)}function B(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h5c3748e51ab6d6ab(n,t,x(e))}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3d46803afecc8fcc(n,t,x(e),x(u))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h6ceb826d1c18a068(n,t)}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2616e9706b5d35dd(n,t,x(e))}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h11ee42c43cc0846e(n,t,x(e),x(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,x(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,x(e))}function E(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,x(e))}function M(){r.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Uint32Array(r.memory.buffer)),F).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(x(n))}}function W(n){o(n)}function q(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function z(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return void 0===c(n)}function K(n,t){return x(h(n,t))}function Q(n){return x(c(n))}function N(){return x(new Error)}function X(n,t){const e=w(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Y(n,t){let e,u;try{e=n,u=t,console.error(h(n,t))}finally{r.__wbindgen_free(e,u,1)}}function H(n){return x(fetch(c(n)))}function J(n){return c(n).offsetX}function Z(n){return c(n).offsetY}function $(n){return x(c(n).Window)}function nn(n){const t=c(n).webkitFullscreenElement;return s(t)?0:x(t)}function tn(){return x(ResizeObserverEntry.prototype)}function en(n){return x(c(n).scheduler)}function rn(n){return x(c(n).getCoalescedEvents)}function un(n){return x(c(n).requestFullscreen)}function fn(n){return x(c(n).requestIdleCallback)}function cn(n){return x(c(n).onpointerrawupdate)}function on(n){c(n).webkitRequestFullscreen()}function _n(n){return x(c(n).requestFullscreen())}function dn(n){return x(c(n).scheduler)}function an(n,t,e){return x(c(n).postTask(c(t),c(e)))}function bn(n){return x(n)}function gn(n){return x(c(n).performance)}function wn(n){return c(n).now()}function sn(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function mn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function pn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function hn(n){return c(n).size}function xn(n){return c(n).usage}function yn(n){c(n).destroy()}function Sn(n,t,e){return x(c(n).getMappedRange(t,e))}function kn(n,t,e,r){return x(c(n).mapAsync(t>>>0,e,r))}function vn(n){c(n).unmap()}function Bn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function Pn(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function In(n){c(n).end()}function jn(n,t){c(n).setPipeline(c(t))}function An(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Dn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Tn(n,t){return x(c(n).getBindGroupLayout(t>>>0))}function Cn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function En(n){return x(c(n).gpu)}function Mn(n){return x(c(n).getPreferredCanvasFormat())}function Fn(n,t){return x(c(n).requestAdapter(c(t)))}function Rn(n,t){return x(c(n).getBindGroupLayout(t>>>0))}function Ln(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function On(n){return x(c(n).finish())}function Gn(n,t){return x(c(n).finish(c(t)))}function Vn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Wn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function qn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function zn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Un(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Kn(n,t,e){c(n).drawIndirect(c(t),e)}function Qn(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Nn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Xn(n,t){c(n).setPipeline(c(t))}function Yn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Hn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Jn(n){return x(c(n).features)}function Zn(n){return x(c(n).limits)}function $n(n){return x(c(n).queue)}function nt(n){return x(c(n).lost)}function tt(n,t){c(n).onuncapturederror=c(t)}function et(n,t){return x(c(n).createBindGroup(c(t)))}function rt(n,t){return x(c(n).createBindGroupLayout(c(t)))}function ut(n,t){return x(c(n).createBuffer(c(t)))}function ft(n,t){return x(c(n).createCommandEncoder(c(t)))}function ct(n,t){return x(c(n).createComputePipeline(c(t)))}function it(n,t){return x(c(n).createPipelineLayout(c(t)))}function ot(n,t){return x(c(n).createQuerySet(c(t)))}function _t(n,t){return x(c(n).createRenderBundleEncoder(c(t)))}function dt(n,t){return x(c(n).createRenderPipeline(c(t)))}function at(n,t){return x(c(n).createSampler(c(t)))}function bt(n,t){return x(c(n).createShaderModule(c(t)))}function gt(n,t){return x(c(n).createTexture(c(t)))}function wt(n){c(n).destroy()}function st(n){return x(c(n).popErrorScope())}function lt(n,t){c(n).pushErrorScope(o(t))}function mt(n,t){return x(c(n).createView(c(t)))}function pt(n){c(n).destroy()}function ht(n){return x(c(n).type)}function xt(n){return c(n).offset}function yt(n){return c(n).length}function St(n){return c(n).lineNum}function kt(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function vt(n,t){c(n).configure(c(t))}function Bt(n){return x(c(n).getCurrentTexture())}function Pt(n){return x(c(n).reason)}function It(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function jt(n){c(n).end()}function At(n,t){c(n).executeBundles(c(t))}function Dt(n,t){c(n).setBlendConstant(c(t))}function Tt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Ct(n,t){c(n).setStencilReference(t>>>0)}function Et(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Mt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Ft(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Rt(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Lt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Ot(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Gt(n,t,e){c(n).drawIndirect(c(t),e)}function Vt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Wt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function qt(n,t){c(n).setPipeline(c(t))}function zt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Ut(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Kt(n){return x(c(n).getCompilationInfo())}function Qt(n,t){const e=w(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Nt(n,t){return x(c(n).beginComputePass(c(t)))}function Xt(n,t){return x(c(n).beginRenderPass(c(t)))}function Yt(n,t,e){c(n).clearBuffer(c(t),e)}function Ht(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Jt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Zt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function $t(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function ne(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function te(n){return x(c(n).finish())}function ee(n,t){return x(c(n).finish(c(t)))}function re(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function ue(n){return x(c(n).error)}function fe(n,t,e){return c(n).has(h(t,e))}function ce(n){return c(n).maxTextureDimension1D}function ie(n){return c(n).maxTextureDimension2D}function oe(n){return c(n).maxTextureDimension3D}function _e(n){return c(n).maxTextureArrayLayers}function de(n){return c(n).maxBindGroups}function ae(n){return c(n).maxBindingsPerBindGroup}function be(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function ge(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function we(n){return c(n).maxSampledTexturesPerShaderStage}function se(n){return c(n).maxSamplersPerShaderStage}function le(n){return c(n).maxStorageBuffersPerShaderStage}function me(n){return c(n).maxStorageTexturesPerShaderStage}function pe(n){return c(n).maxUniformBuffersPerShaderStage}function he(n){return c(n).maxUniformBufferBindingSize}function xe(n){return c(n).maxStorageBufferBindingSize}function ye(n){return c(n).maxVertexBuffers}function Se(n){return c(n).maxBufferSize}function ke(n){return c(n).maxVertexAttributes}function ve(n){return c(n).maxVertexBufferArrayStride}function Be(n){return c(n).minUniformBufferOffsetAlignment}function Pe(n){return c(n).minStorageBufferOffsetAlignment}function Ie(n){return c(n).maxInterStageShaderComponents}function je(n){return c(n).maxColorAttachments}function Ae(n){return c(n).maxColorAttachmentBytesPerSample}function De(n){return c(n).maxComputeWorkgroupStorageSize}function Te(n){return c(n).maxComputeInvocationsPerWorkgroup}function Ce(n){return c(n).maxComputeWorkgroupSizeX}function Ee(n){return c(n).maxComputeWorkgroupSizeY}function Me(n){return c(n).maxComputeWorkgroupSizeZ}function Fe(n){return c(n).maxComputeWorkgroupsPerDimension}function Re(n){const t=c(n);return"object"==typeof t&&null!==t}function Le(n){return x(c(n).Window)}function Oe(n){return x(c(n).WorkerGlobalScope)}function Ge(n,t){return x(c(n).requestDevice(c(t)))}function Ve(n){return x(c(n).features)}function We(n){return x(c(n).limits)}function qe(n){return x(c(n).messages)}function ze(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Ue(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ke(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Qe(n,t){c(n).submit(c(t))}function Ne(n){queueMicrotask(c(n))}function Xe(n){return x(c(n).queueMicrotask)}function Ye(n){return"function"==typeof c(n)}function He(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Je(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function Ze(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function $e(n,t,e){c(n).beginQuery(t>>>0,c(e))}function nr(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function tr(n,t,e){c(n).bindSampler(t>>>0,c(e))}function er(n,t){c(n).bindVertexArray(c(t))}function rr(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function ur(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function fr(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function cr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function ir(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function or(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function _r(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function dr(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function ar(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function br(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function gr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function wr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function sr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function lr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function mr(n){const t=c(n).createQuery();return s(t)?0:x(t)}function pr(n){const t=c(n).createSampler();return s(t)?0:x(t)}function hr(n){const t=c(n).createVertexArray();return s(t)?0:x(t)}function xr(n,t){c(n).deleteQuery(c(t))}function yr(n,t){c(n).deleteSampler(c(t))}function Sr(n,t){c(n).deleteSync(c(t))}function kr(n,t){c(n).deleteVertexArray(c(t))}function vr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function Br(n,t){c(n).drawBuffers(c(t))}function Pr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function Ir(n,t){c(n).endQuery(t>>>0)}function jr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return s(r)?0:x(r)}function Ar(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Dr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Tr(){return V((function(n,t,e){return x(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Cr(n,t,e){return x(c(n).getQueryParameter(c(t),e>>>0))}function Er(n,t,e){return x(c(n).getSyncParameter(c(t),e>>>0))}function Mr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),h(e,r))}function Fr(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Rr(n,t){c(n).readBuffer(t>>>0)}function Lr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Or(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Gr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Vr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Wr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Ur(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Kr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function nu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function tu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function eu(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function ru(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function uu(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function fu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function cu(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function iu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function ou(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function _u(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function du(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function au(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function bu(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function gu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function hu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function xu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function yu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function Su(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ku(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function vu(n,t){c(n).activeTexture(t>>>0)}function Bu(n,t,e){c(n).attachShader(c(t),c(e))}function Pu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,h(r,u))}function Iu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function ju(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Au(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Du(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Tu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Cu(n,t){c(n).blendEquation(t>>>0)}function Eu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Mu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Fu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ru(n,t){c(n).clear(t>>>0)}function Lu(n,t){c(n).clearDepth(t)}function Ou(n,t){c(n).clearStencil(t)}function Gu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Vu(n,t){c(n).compileShader(c(t))}function Wu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function qu(n){const t=c(n).createBuffer();return s(t)?0:x(t)}function zu(n){const t=c(n).createFramebuffer();return s(t)?0:x(t)}function Uu(n){const t=c(n).createProgram();return s(t)?0:x(t)}function Ku(n){const t=c(n).createRenderbuffer();return s(t)?0:x(t)}function Qu(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:x(e)}function Nu(n){const t=c(n).createTexture();return s(t)?0:x(t)}function Xu(n,t){c(n).cullFace(t>>>0)}function Yu(n,t){c(n).deleteBuffer(c(t))}function Hu(n,t){c(n).deleteFramebuffer(c(t))}function Ju(n,t){c(n).deleteProgram(c(t))}function Zu(n,t){c(n).deleteRenderbuffer(c(t))}function $u(n,t){c(n).deleteShader(c(t))}function nf(n,t){c(n).deleteTexture(c(t))}function tf(n,t){c(n).depthFunc(t>>>0)}function ef(n,t){c(n).depthMask(0!==t)}function rf(n,t,e){c(n).depthRange(t,e)}function uf(n,t){c(n).disable(t>>>0)}function ff(n,t){c(n).disableVertexAttribArray(t>>>0)}function cf(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function of(n,t){c(n).enable(t>>>0)}function _f(n,t){c(n).enableVertexAttribArray(t>>>0)}function df(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function af(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function bf(n,t){c(n).frontFace(t>>>0)}function gf(){return V((function(n,t,e){const r=c(n).getExtension(h(t,e));return s(r)?0:x(r)}),arguments)}function wf(){return V((function(n,t){return x(c(n).getParameter(t>>>0))}),arguments)}function sf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function lf(n,t,e){return x(c(n).getProgramParameter(c(t),e>>>0))}function mf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function pf(n,t,e){return x(c(n).getShaderParameter(c(t),e>>>0))}function hf(n){const t=c(n).getSupportedExtensions();return s(t)?0:x(t)}function xf(n,t,e,r){const u=c(n).getUniformLocation(c(t),h(e,r));return s(u)?0:x(u)}function yf(n,t){c(n).linkProgram(c(t))}function Sf(n,t,e){c(n).pixelStorei(t>>>0,e)}function kf(n,t,e){c(n).polygonOffset(t,e)}function vf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Bf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Pf(n,t,e,r){c(n).shaderSource(c(t),h(e,r))}function If(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function jf(n,t){c(n).stencilMask(t>>>0)}function Af(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Df(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Tf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Cf(n,t,e){c(n).uniform1f(c(t),e)}function Ef(n,t,e){c(n).uniform1i(c(t),e)}function Mf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ff(n,t){c(n).useProgram(c(t))}function Rf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Lf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Of(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Gf(n){const t=c(n).document;return s(t)?0:x(t)}function Vf(n){return x(c(n).location)}function Wf(n){return x(c(n).navigator)}function qf(n){return c(n).devicePixelRatio}function zf(n,t){c(n).cancelIdleCallback(t>>>0)}function Uf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return s(e)?0:x(e)}),arguments)}function Kf(){return V((function(n,t,e){const r=c(n).matchMedia(h(t,e));return s(r)?0:x(r)}),arguments)}function Qf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Nf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Xf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Yf(n,t){c(n).clearTimeout(t)}function Hf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Jf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Zf(n){const t=c(n).body;return s(t)?0:x(t)}function $f(n){return x(c(n).visibilityState)}function nc(n){const t=c(n).activeElement;return s(t)?0:x(t)}function tc(n){const t=c(n).fullscreenElement;return s(t)?0:x(t)}function ec(){return V((function(n,t,e){return x(c(n).createElement(h(t,e)))}),arguments)}function rc(n,t,e){const r=c(n).getElementById(h(t,e));return s(r)?0:x(r)}function uc(){return V((function(n,t,e){const r=c(n).querySelector(h(t,e));return s(r)?0:x(r)}),arguments)}function fc(){return V((function(n,t,e){return x(c(n).querySelectorAll(h(t,e)))}),arguments)}function cc(){return V((function(n,t,e,r,u){c(n).setAttribute(h(t,e),h(r,u))}),arguments)}function ic(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function oc(n){return x(c(n).navigator)}function _c(n,t){return x(c(n).fetch(c(t)))}function dc(n){return x(c(n).style)}function ac(){return V((function(n){c(n).focus()}),arguments)}function bc(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function gc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function wc(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function sc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function lc(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function mc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function pc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function hc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function xc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function yc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function Sc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function kc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function vc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function Bc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function Pc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function Ic(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function jc(n,t){c(n).activeTexture(t>>>0)}function Ac(n,t,e){c(n).attachShader(c(t),c(e))}function Dc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,h(r,u))}function Tc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Cc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Ec(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Mc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Fc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Rc(n,t){c(n).blendEquation(t>>>0)}function Lc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Oc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Gc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Vc(n,t){c(n).clear(t>>>0)}function Wc(n,t){c(n).clearDepth(t)}function qc(n,t){c(n).clearStencil(t)}function zc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Uc(n,t){c(n).compileShader(c(t))}function Kc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Qc(n){const t=c(n).createBuffer();return s(t)?0:x(t)}function Nc(n){const t=c(n).createFramebuffer();return s(t)?0:x(t)}function Xc(n){const t=c(n).createProgram();return s(t)?0:x(t)}function Yc(n){const t=c(n).createRenderbuffer();return s(t)?0:x(t)}function Hc(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:x(e)}function Jc(n){const t=c(n).createTexture();return s(t)?0:x(t)}function Zc(n,t){c(n).cullFace(t>>>0)}function $c(n,t){c(n).deleteBuffer(c(t))}function ni(n,t){c(n).deleteFramebuffer(c(t))}function ti(n,t){c(n).deleteProgram(c(t))}function ei(n,t){c(n).deleteRenderbuffer(c(t))}function ri(n,t){c(n).deleteShader(c(t))}function ui(n,t){c(n).deleteTexture(c(t))}function fi(n,t){c(n).depthFunc(t>>>0)}function ci(n,t){c(n).depthMask(0!==t)}function ii(n,t,e){c(n).depthRange(t,e)}function oi(n,t){c(n).disable(t>>>0)}function _i(n,t){c(n).disableVertexAttribArray(t>>>0)}function di(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ai(n,t){c(n).enable(t>>>0)}function bi(n,t){c(n).enableVertexAttribArray(t>>>0)}function gi(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function wi(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function si(n,t){c(n).frontFace(t>>>0)}function li(){return V((function(n,t){return x(c(n).getParameter(t>>>0))}),arguments)}function mi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function pi(n,t,e){return x(c(n).getProgramParameter(c(t),e>>>0))}function hi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function xi(n,t,e){return x(c(n).getShaderParameter(c(t),e>>>0))}function yi(n,t,e,r){const u=c(n).getUniformLocation(c(t),h(e,r));return s(u)?0:x(u)}function Si(n,t){c(n).linkProgram(c(t))}function ki(n,t,e){c(n).pixelStorei(t>>>0,e)}function vi(n,t,e){c(n).polygonOffset(t,e)}function Bi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Pi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Ii(n,t,e,r){c(n).shaderSource(c(t),h(e,r))}function ji(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Ai(n,t){c(n).stencilMask(t>>>0)}function Di(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Ti(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ci(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Ei(n,t,e){c(n).uniform1f(c(t),e)}function Mi(n,t,e){c(n).uniform1i(c(t),e)}function Fi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ri(n,t){c(n).useProgram(c(t))}function Li(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Oi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Gi(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Vi(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Wi(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function qi(){return V((function(n,t,e,u){const f=w(c(t).getPropertyValue(h(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function zi(){return V((function(n,t,e,u){const f=w(c(t).removeProperty(h(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Ui(){return V((function(n,t,e,r,u){c(n).setProperty(h(t,e),h(r,u))}),arguments)}function Ki(){return V((function(n){return x(new IntersectionObserver(c(n)))}),arguments)}function Qi(n){c(n).disconnect()}function Ni(n,t){c(n).observe(c(t))}function Xi(){return V((function(n,t){return x(c(n).appendChild(c(t)))}),arguments)}function Yi(n,t){return c(n).contains(c(t))}function Hi(n,t){const e=c(n)[t>>>0];return s(e)?0:x(e)}function Ji(n,t){c(n).drawBuffersWEBGL(c(t))}function Zi(n){return c(n).videoWidth}function $i(n){return c(n).videoHeight}function no(n){return x(c(n).port1)}function to(n){return x(c(n).port2)}function eo(){return V((function(){return x(new MessageChannel)}),arguments)}function ro(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function uo(n){return c(n).now()}function fo(n){return c(n).isIntersecting}function co(n){return x(c(n).contentRect)}function io(n){return x(c(n).devicePixelContentBoxSize)}function oo(n){return c(n).inlineSize}function _o(n){return c(n).blockSize}function ao(n){console.debug(c(n))}function bo(n){console.error(c(n))}function go(n,t){console.error(c(n),c(t))}function wo(n){console.info(c(n))}function so(n){console.log(c(n))}function lo(n){console.warn(c(n))}function mo(n){return x(c(n).signal)}function po(){return V((function(){return x(new AbortController)}),arguments)}function ho(n){c(n).abort()}function xo(n){c(n).close()}function yo(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function So(n){c(n).start()}function ko(n){return c(n).width}function vo(n){return c(n).height}function Bo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function Po(n){return c(n).width}function Io(n,t){c(n).width=t>>>0}function jo(n){return c(n).height}function Ao(n,t){c(n).height=t>>>0}function Do(){return V((function(n,t,e){const r=c(n).getContext(h(t,e));return s(r)?0:x(r)}),arguments)}function To(){return V((function(n,t,e,r){const u=c(n).getContext(h(t,e),c(r));return s(u)?0:x(u)}),arguments)}function Co(n){return c(n).width}function Eo(n){return c(n).height}function Mo(n){return c(n).altKey}function Fo(n){return c(n).ctrlKey}function Ro(n){return c(n).shiftKey}function Lo(n){return c(n).metaKey}function Oo(n){return c(n).location}function Go(n){return c(n).repeat}function Vo(n,t){const e=w(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Wo(n,t){const e=w(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function qo(n){return c(n).width}function zo(n,t){c(n).width=t>>>0}function Uo(n){return c(n).height}function Ko(n,t){c(n).height=t>>>0}function Qo(){return V((function(n,t,e){const r=c(n).getContext(h(t,e));return s(r)?0:x(r)}),arguments)}function No(){return V((function(n,t,e,r){const u=c(n).getContext(h(t,e),c(r));return s(u)?0:x(u)}),arguments)}function Xo(n){return c(n).persisted}function Yo(){return V((function(n,t,e,r){c(n).addEventListener(h(t,e),c(r))}),arguments)}function Ho(){return V((function(n,t,e,r){c(n).removeEventListener(h(t,e),c(r))}),arguments)}function Jo(){return V((function(n){return x(new ResizeObserver(c(n)))}),arguments)}function Zo(n){c(n).disconnect()}function $o(n,t){c(n).observe(c(t))}function n_(n,t,e){c(n).observe(c(t),c(e))}function t_(n,t){c(n).unobserve(c(t))}function e_(){return V((function(){return x(new Headers)}),arguments)}function r_(){return V((function(n,t,e,r,u){c(n).append(h(t,e),h(r,u))}),arguments)}function u_(){return V((function(n,t){const e=w(c(t).origin,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}),arguments)}function f_(n){return c(n).deltaX}function c_(n){return c(n).deltaY}function i_(n){return c(n).deltaMode}function o_(n,t){c(n).bindVertexArrayOES(c(t))}function __(n){const t=c(n).createVertexArrayOES();return s(t)?0:x(t)}function d_(n,t){c(n).deleteVertexArrayOES(c(t))}function a_(){return V((function(n,t,e){return x(new Request(h(n,t),c(e)))}),arguments)}function b_(n){let t;try{t=c(n)instanceof Response}catch(n){t=!1}return t}function g_(n,t){const e=w(c(t).url,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function w_(n){return c(n).status}function s_(n){return x(c(n).headers)}function l_(){return V((function(n){return x(c(n).arrayBuffer())}),arguments)}function m_(){return V((function(n){return x(c(n).text())}),arguments)}function p_(n){const t=c(n).getSupportedProfiles();return s(t)?0:x(t)}function h_(n){c(n).preventDefault()}function x_(n,t){const e=w(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function y_(n){return c(n).matches}function S_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function k_(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function v_(n){return c(n).ctrlKey}function B_(n){return c(n).shiftKey}function P_(n){return c(n).altKey}function I_(n){return c(n).metaKey}function j_(n){return c(n).button}function A_(n){return c(n).buttons}function D_(n){return c(n).movementX}function T_(n){return c(n).movementY}function C_(n){return c(n).pointerId}function E_(n){return c(n).pressure}function M_(n,t){const e=w(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function F_(n){return x(c(n).getCoalescedEvents())}function R_(n,t){return x(c(n)[t>>>0])}function L_(n){return c(n).length}function O_(){return x(new Array)}function G_(n,t){return x(new Function(h(n,t)))}function V_(n){return x(c(n).next)}function W_(){return V((function(n){return x(c(n).next())}),arguments)}function q_(n){return c(n).done}function z_(n){return x(c(n).value)}function U_(){return x(Symbol.iterator)}function K_(){return V((function(n,t){return x(Reflect.get(c(n),c(t)))}),arguments)}function Q_(){return V((function(n,t){return x(c(n).call(c(t)))}),arguments)}function N_(){return x(new Object)}function X_(){return V((function(){return x(self.self)}),arguments)}function Y_(){return V((function(){return x(window.window)}),arguments)}function H_(){return V((function(){return x(globalThis.globalThis)}),arguments)}function J_(){return V((function(){return x(global.global)}),arguments)}function Z_(n,t,e){return c(n).includes(c(t),e)}function $_(n){return x(Array.of(c(n)))}function nd(n,t){return c(n).push(c(t))}function td(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function ed(n,t){return x(Object.getOwnPropertyDescriptor(c(n),c(t)))}function rd(n,t){return Object.is(c(n),c(t))}function ud(n){return x(c(n).valueOf())}function fd(n){return x(Promise.resolve(c(n)))}function cd(n,t){return x(c(n).catch(c(t)))}function id(n,t){return x(c(n).then(c(t)))}function od(n,t,e){return x(c(n).then(c(t),c(e)))}function _d(n){return x(c(n).buffer)}function dd(n,t,e){return x(new Int8Array(c(n),t>>>0,e>>>0))}function ad(n,t,e){return x(new Int16Array(c(n),t>>>0,e>>>0))}function bd(n,t,e){return x(new Int32Array(c(n),t>>>0,e>>>0))}function gd(n,t,e){return x(new Uint8Array(c(n),t>>>0,e>>>0))}function wd(n){return x(new Uint8Array(c(n)))}function sd(n,t,e){c(n).set(c(t),e>>>0)}function ld(n){return c(n).length}function md(n,t,e){return x(new Uint16Array(c(n),t>>>0,e>>>0))}function pd(n,t,e){return x(new Uint32Array(c(n),t>>>0,e>>>0))}function hd(n,t,e){return x(new Float32Array(c(n),t>>>0,e>>>0))}function xd(n){return x(c(n).buffer)}function yd(){return V((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Sd(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function kd(){return V((function(n){return x(JSON.stringify(c(n)))}),arguments)}function vd(n,t){const e=w(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=_;m()[n/4+1]=u,m()[n/4+0]=e}function Bd(n,t){throw new Error(h(n,t))}function Pd(){return x(r.memory)}function Id(n,t,e){return x(k(n,t,49,v))}function jd(n,t,e){return x(k(n,t,49,B))}function Ad(n,t,e){return x(k(n,t,49,B))}function Dd(n,t,e){return x(k(n,t,49,B))}function Td(n,t,e){return x(k(n,t,49,P))}function Cd(n,t,e){return x(k(n,t,49,B))}function Ed(n,t,e){return x(k(n,t,49,B))}function Md(n,t,e){return x(k(n,t,293,I))}function Fd(n,t,e){return x(k(n,t,293,j))}function Rd(n,t,e){return x(k(n,t,293,j))}function Ld(n,t,e){return x(k(n,t,293,j))}function Od(n,t,e){return x(k(n,t,293,j))}function Gd(n,t,e){return x(k(n,t,293,A))}function Vd(n,t,e){return x(k(n,t,293,j))}function Wd(n,t,e){return x(k(n,t,899,D))}function qd(n,t,e){return x(k(n,t,899,D))}function zd(n,t,e){return x(k(n,t,899,T))}function Ud(n,t,e){return x(k(n,t,899,D))}function Kd(n,t,e){return x(k(n,t,899,D))}function Qd(n,t,e){return x(k(n,t,899,D))}function Nd(n,t,e){return x(k(n,t,899,D))}function Xd(n,t,e){return x(k(n,t,2034,C))}function Yd(n,t,e){return x(k(n,t,2034,C))}function Hd(n,t,e){return x(k(n,t,2211,E))}}).call(this,e(260)(n))},406:function(n,t,e){"use strict";e.r(t);var r=e(407),u=e(244);e.d(t,"__wbg_set_wasm",(function(){return u.Li})),e.d(t,"run",(function(){return u.El})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Al})),e.d(t,"__wbindgen_string_get",(function(){return u.Bl})),e.d(t,"__wbindgen_cb_drop",(function(){return u.Tk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.vl})),e.d(t,"__wbindgen_string_new",(function(){return u.Cl})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.zl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Ng})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Xi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Qd})),e.d(t,"__wbg_fetch_386f87a3ebf5003c",(function(){return u.Vd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.fh})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.gh})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.Jk})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.zh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.fi})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.pe})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Wh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Zh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.ih})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.Kk})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Xh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.ei})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.wh})),e.d(t,"__wbindgen_number_new",(function(){return u.yl})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.kh})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.ah})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.nf})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.mf})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.pf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.of})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Wi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.tk})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.bd})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.Ae})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Nf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.qk})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.nd})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.md})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Md})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.vi})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.mi})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.oi})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.me})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.lf})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.af})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.Ee})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Th})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.le})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.vg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Xd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.ae})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.ni})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.li})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Ed})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.Cd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.si})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.ti})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.xi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.Fi})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.Ei})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Td})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.Ff})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.Gh})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Mf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.Oi})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Tb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Sb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Wb})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Xb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Yb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.cc})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.fc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.hc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.ic})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.mc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.nc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.rc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.cd})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.sh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.Ah})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.vc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.dd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.Gj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.hh})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.Bf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.Gf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.tg})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Gb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.we})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.Lh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.ug})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Ld})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Rd})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.qi})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.Ai})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.Bi})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.Ii})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.ki})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.pi})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Fd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Dd})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.ri})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.ui})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.wi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.Hi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.Gi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.qe})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.Af})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.q})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.s})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.ib})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.jb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Kb})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Lb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Qb})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Rb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Zd})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Yd})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.ai})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Pd})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.cf})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.kg})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.lg})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.mg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.jg})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Qf})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.cg})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.bg})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.eg})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.fg})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.hg})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.ig})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.og})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.ng})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.gg})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.rg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Sf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.pg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.qg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.Ag})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.zg})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.dg})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Uf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.Tf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Zf})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Vf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Wf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Xf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Yf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.ag})),e.d(t,"__wbindgen_is_object",(function(){return u.ul})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Vh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Sd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.Ef})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.wg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.Qk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.Rk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Mb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.kj})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.Fh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.Eh})),e.d(t,"__wbindgen_is_function",(function(){return u.tl})),e.d(t,"__wbindgen_boolean_get",(function(){return u.Sk})),e.d(t,"__wbindgen_number_get",(function(){return u.xl})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.tf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.r})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.v})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.C})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.G})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.R})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.U})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.X})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.Y})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.kb})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.lb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.mb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.ub})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Eb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Fb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Jb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Pb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.gc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.lc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.uc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Hc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Kc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Nc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Rc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.rd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.vd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.xd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Kd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Ud})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ge})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ne})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ze})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Ke})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Re})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Se})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.vf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.Hh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.Ih})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.Kh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.Ph})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.ci})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.di})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.lj})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.nj})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.qj})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.rj})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.vj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.wj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.sj})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.uj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.xj})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.Aj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.zj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Bj})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.yj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Cj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.Lj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.Mj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.Oj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.Qj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.Rj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Uj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Vj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Yj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.bk})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.ck})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.dk})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.fk})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.gk})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.hk})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.jk})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.kk})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.lk})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.mk})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.ok})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.pk})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.zk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.Ak})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.o})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.u})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.x})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.y})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.A})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.D})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.H})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.L})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.J})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.P})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.N})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.sb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.ob})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.qb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.yb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.Ab})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Ob})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Vb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.bc})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.jc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.pc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.qc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.zc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Cc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Ec})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Gc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Wc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.ad})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.jd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.hd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.sd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Jd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Hd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.ce})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.fe})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ie})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.ye})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.De})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Fe})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.Ie})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.Me})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ne})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Pe})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Te})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.If})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.nh})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.rh})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Rh})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.gi})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Si})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.bj})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.ej})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.cj})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.gj})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.oj})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.Ij})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.Kj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Wj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.uk})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Bk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Gk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.uf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.od})),e.d(t,"__wbg_location_2951b5ee34f19221",(function(){return u.Jf})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.Eg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.fd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.gb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.re})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Of})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Yh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.fb})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Uh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.rb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.Di})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.Ci})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.T})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Hk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ke})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Zb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.xe})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.Dh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.Ch})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.ji})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.yi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.Dg})),e.d(t,"__wbg_fetch_921fad6ef9e883dd",(function(){return u.Wd})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.jj})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.be})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.W})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.Z})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Cb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.Jh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.mj})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.tj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.Nj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.Pj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.Sj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.Tj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Zj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.ak})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.ek})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.ik})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.nk})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.p})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.t})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.w})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.z})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.B})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.E})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.I})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.M})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.K})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.Q})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.O})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.tb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.pb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.xb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.ac})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.ec})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.kc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.oc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.sc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Jc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Mc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Pc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Yc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Zc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.td})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Id})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Gd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.de})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ee})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.je})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.Ce})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Ge})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.He})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Le})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Oe})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Ue})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.Hf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.mh})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.qh})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.Qh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.hi})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Ri})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.aj})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.fj})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.dj})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.hj})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.pj})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.Hj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.Jj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Xj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.vk})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Ck})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Fk})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.qd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.wd})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.yk})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Je})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Oh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.zi})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.Ig})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.ld})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.bh})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Hb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Ve})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.ud})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Ek})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Dk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.th})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.uh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.Hg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.he})),e.d(t,"__wbg_now_4e659b3d15f470d9",(function(){return u.Zg})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.wf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Ib})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.ed})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.kf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.S})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.Ac})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Od})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Nd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.jf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Lf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.Ik})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Vi})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.Fg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.vb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.vh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Yi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.Mk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.ff})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.qf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.Ok})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.Pi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.gf})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.Ni})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.ue})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.ve})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.Lk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.hf})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.xc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Ui})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.xg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.Kf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Sh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.zf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.wb})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.Nk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.Qi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.ef})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.Mi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.se})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.te})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.lh})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Mh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.Jg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.kd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.ch})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.dh})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.rk})),e.d(t,"__wbg_new_ab6fd82b10560829",(function(){return u.Mg})),e.d(t,"__wbg_append_7bfcb4937d1d5e29",(function(){return u.m})),e.d(t,"__wbg_origin_ee93e29ace71f568",(function(){return u.jh})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Tc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Uc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Sc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.F})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.tc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Qc})),e.d(t,"__wbg_newwithstrandinit_3fd6fba4083ff2d0",(function(){return u.Wg})),e.d(t,"__wbg_instanceof_Response_849eb93e75734b6e",(function(){return u.sf})),e.d(t,"__wbg_url_5f6dc4009ac5f99d",(function(){return u.sk})),e.d(t,"__wbg_status_61a01141acd3cf74",(function(){return u.Zi})),e.d(t,"__wbg_headers_9620bfada380764a",(function(){return u.df})),e.d(t,"__wbg_arrayBuffer_29931d52c7206b02",(function(){return u.n})),e.d(t,"__wbg_text_450a059667fd91fd",(function(){return u.Dj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Qe})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.yh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.sg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Pf})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Nh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ti})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.yg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.cb})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.db})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.Bg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.Cg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.oh})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.xh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.ph})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.oe})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.We})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.Df})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.Gg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Og})),e.d(t,"__wbg_next_40fc327bfc8770e6",(function(){return u.Yg})),e.d(t,"__wbg_next_196c84450b364254",(function(){return u.Xg})),e.d(t,"__wbg_done_298b57d23c0fc80c",(function(){return u.pd})),e.d(t,"__wbg_value_d93c65011f51a456",(function(){return u.xk})),e.d(t,"__wbg_iterator_2cee6dadfd956dfa",(function(){return u.yf})),e.d(t,"__wbg_get_e3c254076557e348",(function(){return u.Xe})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.eb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Lg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.ii})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.Pk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Ye})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Ze})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.if})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.eh})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.Bh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.rf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Be})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.xf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.wk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.bi})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.hb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Ej})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.Fj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.ab})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Qg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Tg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Rg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Vg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.Kg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.Ki})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.Cf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Pg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Sg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.bb})),e.d(t,"__wbg_has_0af94d20077affa2",(function(){return u.bf})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.Ji})),e.d(t,"__wbg_stringify_8887fe74e1c50d81",(function(){return u.ij})),e.d(t,"__wbindgen_debug_string",(function(){return u.sl})),e.d(t,"__wbindgen_throw",(function(){return u.Dl})),e.d(t,"__wbindgen_memory",(function(){return u.wl})),e.d(t,"__wbindgen_closure_wrapper645",(function(){return u.ll})),e.d(t,"__wbindgen_closure_wrapper646",(function(){return u.ml})),e.d(t,"__wbindgen_closure_wrapper647",(function(){return u.nl})),e.d(t,"__wbindgen_closure_wrapper648",(function(){return u.ol})),e.d(t,"__wbindgen_closure_wrapper649",(function(){return u.pl})),e.d(t,"__wbindgen_closure_wrapper650",(function(){return u.ql})),e.d(t,"__wbindgen_closure_wrapper651",(function(){return u.rl})),e.d(t,"__wbindgen_closure_wrapper1141",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper1142",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper1143",(function(){return u.Wk})),e.d(t,"__wbindgen_closure_wrapper1144",(function(){return u.Xk})),e.d(t,"__wbindgen_closure_wrapper1145",(function(){return u.Yk})),e.d(t,"__wbindgen_closure_wrapper1146",(function(){return u.Zk})),e.d(t,"__wbindgen_closure_wrapper1147",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper2479",(function(){return u.bl})),e.d(t,"__wbindgen_closure_wrapper2480",(function(){return u.cl})),e.d(t,"__wbindgen_closure_wrapper2481",(function(){return u.dl})),e.d(t,"__wbindgen_closure_wrapper2482",(function(){return u.el})),e.d(t,"__wbindgen_closure_wrapper2483",(function(){return u.fl})),e.d(t,"__wbindgen_closure_wrapper2484",(function(){return u.gl})),e.d(t,"__wbindgen_closure_wrapper2485",(function(){return u.hl})),e.d(t,"__wbindgen_closure_wrapper4564",(function(){return u.il})),e.d(t,"__wbindgen_closure_wrapper4566",(function(){return u.jl})),e.d(t,"__wbindgen_closure_wrapper5299",(function(){return u.kl})),Object(u.Li)(r),r.__wbindgen_start()},407:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(244);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/27.a250ff5f.js b/assets/js/27.a250ff5f.js new file mode 100644 index 000000000..d3b2d4528 --- /dev/null +++ b/assets/js/27.a250ff5f.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{245:function(n,t,e){"use strict";(function(n){e.d(t,"Li",(function(){return u})),e.d(t,"El",(function(){return M})),e.d(t,"Al",(function(){return W})),e.d(t,"Bl",(function(){return q})),e.d(t,"Tk",(function(){return z})),e.d(t,"vl",(function(){return U})),e.d(t,"Cl",(function(){return K})),e.d(t,"zl",(function(){return Q})),e.d(t,"Ng",(function(){return N})),e.d(t,"Xi",(function(){return X})),e.d(t,"Qd",(function(){return Y})),e.d(t,"Vd",(function(){return H})),e.d(t,"fh",(function(){return J})),e.d(t,"gh",(function(){return Z})),e.d(t,"b",(function(){return $})),e.d(t,"Jk",(function(){return nn})),e.d(t,"zh",(function(){return tn})),e.d(t,"fi",(function(){return en})),e.d(t,"pe",(function(){return rn})),e.d(t,"Wh",(function(){return un})),e.d(t,"Zh",(function(){return fn})),e.d(t,"ih",(function(){return cn})),e.d(t,"Kk",(function(){return on})),e.d(t,"Xh",(function(){return _n})),e.d(t,"ei",(function(){return dn})),e.d(t,"wh",(function(){return an})),e.d(t,"yl",(function(){return bn})),e.d(t,"kh",(function(){return gn})),e.d(t,"ah",(function(){return wn})),e.d(t,"nf",(function(){return sn})),e.d(t,"mf",(function(){return ln})),e.d(t,"pf",(function(){return mn})),e.d(t,"of",(function(){return pn})),e.d(t,"Wi",(function(){return hn})),e.d(t,"tk",(function(){return xn})),e.d(t,"bd",(function(){return yn})),e.d(t,"Ae",(function(){return Sn})),e.d(t,"Nf",(function(){return kn})),e.d(t,"qk",(function(){return vn})),e.d(t,"nd",(function(){return Bn})),e.d(t,"md",(function(){return Pn})),e.d(t,"Md",(function(){return In})),e.d(t,"vi",(function(){return jn})),e.d(t,"mi",(function(){return An})),e.d(t,"oi",(function(){return Dn})),e.d(t,"me",(function(){return Tn})),e.d(t,"lf",(function(){return Cn})),e.d(t,"af",(function(){return En})),e.d(t,"Ee",(function(){return Mn})),e.d(t,"Th",(function(){return Fn})),e.d(t,"le",(function(){return Rn})),e.d(t,"vg",(function(){return Ln})),e.d(t,"Xd",(function(){return On})),e.d(t,"ae",(function(){return Gn})),e.d(t,"ni",(function(){return Vn})),e.d(t,"li",(function(){return Wn})),e.d(t,"Ed",(function(){return qn})),e.d(t,"Ad",(function(){return zn})),e.d(t,"yd",(function(){return Un})),e.d(t,"Cd",(function(){return Kn})),e.d(t,"si",(function(){return Qn})),e.d(t,"ti",(function(){return Nn})),e.d(t,"xi",(function(){return Xn})),e.d(t,"Fi",(function(){return Yn})),e.d(t,"Ei",(function(){return Hn})),e.d(t,"Td",(function(){return Jn})),e.d(t,"Ff",(function(){return Zn})),e.d(t,"Gh",(function(){return $n})),e.d(t,"Mf",(function(){return nt})),e.d(t,"Oi",(function(){return tt})),e.d(t,"Tb",(function(){return et})),e.d(t,"Sb",(function(){return rt})),e.d(t,"Wb",(function(){return ut})),e.d(t,"Xb",(function(){return ft})),e.d(t,"Yb",(function(){return ct})),e.d(t,"cc",(function(){return it})),e.d(t,"fc",(function(){return ot})),e.d(t,"hc",(function(){return _t})),e.d(t,"ic",(function(){return dt})),e.d(t,"mc",(function(){return at})),e.d(t,"nc",(function(){return bt})),e.d(t,"rc",(function(){return gt})),e.d(t,"cd",(function(){return wt})),e.d(t,"sh",(function(){return st})),e.d(t,"Ah",(function(){return lt})),e.d(t,"vc",(function(){return mt})),e.d(t,"dd",(function(){return pt})),e.d(t,"Gj",(function(){return ht})),e.d(t,"hh",(function(){return xt})),e.d(t,"Bf",(function(){return yt})),e.d(t,"Gf",(function(){return St})),e.d(t,"tg",(function(){return kt})),e.d(t,"Gb",(function(){return vt})),e.d(t,"we",(function(){return Bt})),e.d(t,"Lh",(function(){return Pt})),e.d(t,"ug",(function(){return It})),e.d(t,"Ld",(function(){return jt})),e.d(t,"Rd",(function(){return At})),e.d(t,"qi",(function(){return Dt})),e.d(t,"Ai",(function(){return Tt})),e.d(t,"Bi",(function(){return Ct})),e.d(t,"Ii",(function(){return Et})),e.d(t,"ki",(function(){return Mt})),e.d(t,"pi",(function(){return Ft})),e.d(t,"Fd",(function(){return Rt})),e.d(t,"Bd",(function(){return Lt})),e.d(t,"zd",(function(){return Ot})),e.d(t,"Dd",(function(){return Gt})),e.d(t,"ri",(function(){return Vt})),e.d(t,"ui",(function(){return Wt})),e.d(t,"wi",(function(){return qt})),e.d(t,"Hi",(function(){return zt})),e.d(t,"Gi",(function(){return Ut})),e.d(t,"qe",(function(){return Kt})),e.d(t,"Af",(function(){return Qt})),e.d(t,"q",(function(){return Nt})),e.d(t,"s",(function(){return Xt})),e.d(t,"ib",(function(){return Yt})),e.d(t,"jb",(function(){return Ht})),e.d(t,"Kb",(function(){return Jt})),e.d(t,"Lb",(function(){return Zt})),e.d(t,"Qb",(function(){return $t})),e.d(t,"Rb",(function(){return ne})),e.d(t,"Zd",(function(){return te})),e.d(t,"Yd",(function(){return ee})),e.d(t,"ai",(function(){return re})),e.d(t,"Pd",(function(){return ue})),e.d(t,"cf",(function(){return fe})),e.d(t,"kg",(function(){return ce})),e.d(t,"lg",(function(){return ie})),e.d(t,"mg",(function(){return oe})),e.d(t,"jg",(function(){return _e})),e.d(t,"Qf",(function(){return de})),e.d(t,"Rf",(function(){return ae})),e.d(t,"cg",(function(){return be})),e.d(t,"bg",(function(){return ge})),e.d(t,"eg",(function(){return we})),e.d(t,"fg",(function(){return se})),e.d(t,"hg",(function(){return le})),e.d(t,"ig",(function(){return me})),e.d(t,"og",(function(){return pe})),e.d(t,"ng",(function(){return he})),e.d(t,"gg",(function(){return xe})),e.d(t,"rg",(function(){return ye})),e.d(t,"Sf",(function(){return Se})),e.d(t,"pg",(function(){return ke})),e.d(t,"qg",(function(){return ve})),e.d(t,"Ag",(function(){return Be})),e.d(t,"zg",(function(){return Pe})),e.d(t,"dg",(function(){return Ie})),e.d(t,"Uf",(function(){return je})),e.d(t,"Tf",(function(){return Ae})),e.d(t,"Zf",(function(){return De})),e.d(t,"Vf",(function(){return Te})),e.d(t,"Wf",(function(){return Ce})),e.d(t,"Xf",(function(){return Ee})),e.d(t,"Yf",(function(){return Me})),e.d(t,"ag",(function(){return Fe})),e.d(t,"ul",(function(){return Re})),e.d(t,"a",(function(){return Le})),e.d(t,"c",(function(){return Oe})),e.d(t,"Vh",(function(){return Ge})),e.d(t,"Sd",(function(){return Ve})),e.d(t,"Ef",(function(){return We})),e.d(t,"wg",(function(){return qe})),e.d(t,"Qk",(function(){return ze})),e.d(t,"Rk",(function(){return Ue})),e.d(t,"Mb",(function(){return Ke})),e.d(t,"kj",(function(){return Qe})),e.d(t,"Fh",(function(){return Ne})),e.d(t,"Eh",(function(){return Xe})),e.d(t,"tl",(function(){return Ye})),e.d(t,"Sk",(function(){return He})),e.d(t,"xl",(function(){return Je})),e.d(t,"tf",(function(){return Ze})),e.d(t,"r",(function(){return $e})),e.d(t,"v",(function(){return nr})),e.d(t,"C",(function(){return tr})),e.d(t,"G",(function(){return er})),e.d(t,"R",(function(){return rr})),e.d(t,"U",(function(){return ur})),e.d(t,"X",(function(){return fr})),e.d(t,"Y",(function(){return cr})),e.d(t,"kb",(function(){return ir})),e.d(t,"lb",(function(){return or})),e.d(t,"mb",(function(){return _r})),e.d(t,"ub",(function(){return dr})),e.d(t,"Db",(function(){return ar})),e.d(t,"Bb",(function(){return br})),e.d(t,"Eb",(function(){return gr})),e.d(t,"Fb",(function(){return wr})),e.d(t,"Jb",(function(){return sr})),e.d(t,"Pb",(function(){return lr})),e.d(t,"gc",(function(){return mr})),e.d(t,"lc",(function(){return pr})),e.d(t,"uc",(function(){return hr})),e.d(t,"Hc",(function(){return xr})),e.d(t,"Kc",(function(){return yr})),e.d(t,"Nc",(function(){return Sr})),e.d(t,"Rc",(function(){return kr})),e.d(t,"rd",(function(){return vr})),e.d(t,"vd",(function(){return Br})),e.d(t,"xd",(function(){return Pr})),e.d(t,"Kd",(function(){return Ir})),e.d(t,"Ud",(function(){return jr})),e.d(t,"ge",(function(){return Ar})),e.d(t,"ne",(function(){return Dr})),e.d(t,"ze",(function(){return Tr})),e.d(t,"Ke",(function(){return Cr})),e.d(t,"Re",(function(){return Er})),e.d(t,"Se",(function(){return Mr})),e.d(t,"vf",(function(){return Fr})),e.d(t,"Hh",(function(){return Rr})),e.d(t,"Ih",(function(){return Lr})),e.d(t,"Kh",(function(){return Or})),e.d(t,"Ph",(function(){return Gr})),e.d(t,"ci",(function(){return Vr})),e.d(t,"di",(function(){return Wr})),e.d(t,"lj",(function(){return qr})),e.d(t,"nj",(function(){return zr})),e.d(t,"qj",(function(){return Ur})),e.d(t,"rj",(function(){return Kr})),e.d(t,"vj",(function(){return Qr})),e.d(t,"wj",(function(){return Nr})),e.d(t,"sj",(function(){return Xr})),e.d(t,"uj",(function(){return Yr})),e.d(t,"xj",(function(){return Hr})),e.d(t,"Aj",(function(){return Jr})),e.d(t,"zj",(function(){return Zr})),e.d(t,"Bj",(function(){return $r})),e.d(t,"yj",(function(){return nu})),e.d(t,"Cj",(function(){return tu})),e.d(t,"Lj",(function(){return eu})),e.d(t,"Mj",(function(){return ru})),e.d(t,"Oj",(function(){return uu})),e.d(t,"Qj",(function(){return fu})),e.d(t,"Rj",(function(){return cu})),e.d(t,"Uj",(function(){return iu})),e.d(t,"Vj",(function(){return ou})),e.d(t,"Yj",(function(){return _u})),e.d(t,"bk",(function(){return du})),e.d(t,"ck",(function(){return au})),e.d(t,"dk",(function(){return bu})),e.d(t,"fk",(function(){return gu})),e.d(t,"gk",(function(){return wu})),e.d(t,"hk",(function(){return su})),e.d(t,"jk",(function(){return lu})),e.d(t,"kk",(function(){return mu})),e.d(t,"lk",(function(){return pu})),e.d(t,"mk",(function(){return hu})),e.d(t,"ok",(function(){return xu})),e.d(t,"pk",(function(){return yu})),e.d(t,"zk",(function(){return Su})),e.d(t,"Ak",(function(){return ku})),e.d(t,"g",(function(){return vu})),e.d(t,"o",(function(){return Bu})),e.d(t,"u",(function(){return Pu})),e.d(t,"x",(function(){return Iu})),e.d(t,"y",(function(){return ju})),e.d(t,"A",(function(){return Au})),e.d(t,"D",(function(){return Du})),e.d(t,"H",(function(){return Tu})),e.d(t,"L",(function(){return Cu})),e.d(t,"J",(function(){return Eu})),e.d(t,"P",(function(){return Mu})),e.d(t,"N",(function(){return Fu})),e.d(t,"sb",(function(){return Ru})),e.d(t,"ob",(function(){return Lu})),e.d(t,"qb",(function(){return Ou})),e.d(t,"yb",(function(){return Gu})),e.d(t,"Ab",(function(){return Vu})),e.d(t,"Ob",(function(){return Wu})),e.d(t,"Vb",(function(){return qu})),e.d(t,"bc",(function(){return zu})),e.d(t,"dc",(function(){return Uu})),e.d(t,"jc",(function(){return Ku})),e.d(t,"pc",(function(){return Qu})),e.d(t,"qc",(function(){return Nu})),e.d(t,"zc",(function(){return Xu})),e.d(t,"Cc",(function(){return Yu})),e.d(t,"Ec",(function(){return Hu})),e.d(t,"Gc",(function(){return Ju})),e.d(t,"Ic",(function(){return Zu})),e.d(t,"Lc",(function(){return $u})),e.d(t,"Oc",(function(){return nf})),e.d(t,"Wc",(function(){return tf})),e.d(t,"Xc",(function(){return ef})),e.d(t,"ad",(function(){return rf})),e.d(t,"jd",(function(){return uf})),e.d(t,"hd",(function(){return ff})),e.d(t,"sd",(function(){return cf})),e.d(t,"Jd",(function(){return of})),e.d(t,"Hd",(function(){return _f})),e.d(t,"ce",(function(){return df})),e.d(t,"fe",(function(){return af})),e.d(t,"ie",(function(){return bf})),e.d(t,"ye",(function(){return gf})),e.d(t,"De",(function(){return wf})),e.d(t,"Fe",(function(){return sf})),e.d(t,"Ie",(function(){return lf})),e.d(t,"Me",(function(){return mf})),e.d(t,"Ne",(function(){return pf})),e.d(t,"Pe",(function(){return hf})),e.d(t,"Te",(function(){return xf})),e.d(t,"If",(function(){return yf})),e.d(t,"nh",(function(){return Sf})),e.d(t,"rh",(function(){return kf})),e.d(t,"Rh",(function(){return vf})),e.d(t,"gi",(function(){return Bf})),e.d(t,"Si",(function(){return Pf})),e.d(t,"bj",(function(){return If})),e.d(t,"ej",(function(){return jf})),e.d(t,"cj",(function(){return Af})),e.d(t,"gj",(function(){return Df})),e.d(t,"oj",(function(){return Tf})),e.d(t,"Ij",(function(){return Cf})),e.d(t,"Kj",(function(){return Ef})),e.d(t,"Wj",(function(){return Mf})),e.d(t,"uk",(function(){return Ff})),e.d(t,"Bk",(function(){return Rf})),e.d(t,"Gk",(function(){return Lf})),e.d(t,"uf",(function(){return Of})),e.d(t,"od",(function(){return Gf})),e.d(t,"Jf",(function(){return Vf})),e.d(t,"Eg",(function(){return Wf})),e.d(t,"fd",(function(){return qf})),e.d(t,"gb",(function(){return zf})),e.d(t,"re",(function(){return Uf})),e.d(t,"Of",(function(){return Kf})),e.d(t,"Yh",(function(){return Qf})),e.d(t,"fb",(function(){return Nf})),e.d(t,"Uh",(function(){return Xf})),e.d(t,"rb",(function(){return Yf})),e.d(t,"Di",(function(){return Hf})),e.d(t,"Ci",(function(){return Jf})),e.d(t,"T",(function(){return Zf})),e.d(t,"Hk",(function(){return $f})),e.d(t,"e",(function(){return nc})),e.d(t,"ke",(function(){return tc})),e.d(t,"Zb",(function(){return ec})),e.d(t,"xe",(function(){return rc})),e.d(t,"Dh",(function(){return uc})),e.d(t,"Ch",(function(){return fc})),e.d(t,"ji",(function(){return cc})),e.d(t,"yi",(function(){return ic})),e.d(t,"Dg",(function(){return oc})),e.d(t,"Wd",(function(){return _c})),e.d(t,"jj",(function(){return dc})),e.d(t,"be",(function(){return ac})),e.d(t,"W",(function(){return bc})),e.d(t,"V",(function(){return gc})),e.d(t,"Z",(function(){return wc})),e.d(t,"Cb",(function(){return sc})),e.d(t,"Jh",(function(){return lc})),e.d(t,"mj",(function(){return mc})),e.d(t,"tj",(function(){return pc})),e.d(t,"Nj",(function(){return hc})),e.d(t,"Pj",(function(){return xc})),e.d(t,"Sj",(function(){return yc})),e.d(t,"Tj",(function(){return Sc})),e.d(t,"Zj",(function(){return kc})),e.d(t,"ak",(function(){return vc})),e.d(t,"ek",(function(){return Bc})),e.d(t,"ik",(function(){return Pc})),e.d(t,"nk",(function(){return Ic})),e.d(t,"f",(function(){return jc})),e.d(t,"p",(function(){return Ac})),e.d(t,"t",(function(){return Dc})),e.d(t,"w",(function(){return Tc})),e.d(t,"z",(function(){return Cc})),e.d(t,"B",(function(){return Ec})),e.d(t,"E",(function(){return Mc})),e.d(t,"I",(function(){return Fc})),e.d(t,"M",(function(){return Rc})),e.d(t,"K",(function(){return Lc})),e.d(t,"Q",(function(){return Oc})),e.d(t,"O",(function(){return Gc})),e.d(t,"tb",(function(){return Vc})),e.d(t,"nb",(function(){return Wc})),e.d(t,"pb",(function(){return qc})),e.d(t,"xb",(function(){return zc})),e.d(t,"zb",(function(){return Uc})),e.d(t,"Nb",(function(){return Kc})),e.d(t,"Ub",(function(){return Qc})),e.d(t,"ac",(function(){return Nc})),e.d(t,"ec",(function(){return Xc})),e.d(t,"kc",(function(){return Yc})),e.d(t,"oc",(function(){return Hc})),e.d(t,"sc",(function(){return Jc})),e.d(t,"yc",(function(){return Zc})),e.d(t,"Bc",(function(){return $c})),e.d(t,"Dc",(function(){return ni})),e.d(t,"Fc",(function(){return ti})),e.d(t,"Jc",(function(){return ei})),e.d(t,"Mc",(function(){return ri})),e.d(t,"Pc",(function(){return ui})),e.d(t,"Vc",(function(){return fi})),e.d(t,"Yc",(function(){return ci})),e.d(t,"Zc",(function(){return ii})),e.d(t,"id",(function(){return oi})),e.d(t,"gd",(function(){return _i})),e.d(t,"td",(function(){return di})),e.d(t,"Id",(function(){return ai})),e.d(t,"Gd",(function(){return bi})),e.d(t,"de",(function(){return gi})),e.d(t,"ee",(function(){return wi})),e.d(t,"je",(function(){return si})),e.d(t,"Ce",(function(){return li})),e.d(t,"Ge",(function(){return mi})),e.d(t,"He",(function(){return pi})),e.d(t,"Le",(function(){return hi})),e.d(t,"Oe",(function(){return xi})),e.d(t,"Ue",(function(){return yi})),e.d(t,"Hf",(function(){return Si})),e.d(t,"mh",(function(){return ki})),e.d(t,"qh",(function(){return vi})),e.d(t,"Qh",(function(){return Bi})),e.d(t,"hi",(function(){return Pi})),e.d(t,"Ri",(function(){return Ii})),e.d(t,"aj",(function(){return ji})),e.d(t,"fj",(function(){return Ai})),e.d(t,"dj",(function(){return Di})),e.d(t,"hj",(function(){return Ti})),e.d(t,"pj",(function(){return Ci})),e.d(t,"Hj",(function(){return Ei})),e.d(t,"Jj",(function(){return Mi})),e.d(t,"Xj",(function(){return Fi})),e.d(t,"vk",(function(){return Ri})),e.d(t,"Ck",(function(){return Li})),e.d(t,"Fk",(function(){return Oi})),e.d(t,"qd",(function(){return Gi})),e.d(t,"wd",(function(){return Vi})),e.d(t,"yk",(function(){return Wi})),e.d(t,"Je",(function(){return qi})),e.d(t,"Oh",(function(){return zi})),e.d(t,"zi",(function(){return Ui})),e.d(t,"Ig",(function(){return Ki})),e.d(t,"ld",(function(){return Qi})),e.d(t,"bh",(function(){return Ni})),e.d(t,"l",(function(){return Xi})),e.d(t,"Hb",(function(){return Yi})),e.d(t,"Ve",(function(){return Hi})),e.d(t,"ud",(function(){return Ji})),e.d(t,"Ek",(function(){return Zi})),e.d(t,"Dk",(function(){return $i})),e.d(t,"th",(function(){return no})),e.d(t,"uh",(function(){return to})),e.d(t,"Hg",(function(){return eo})),e.d(t,"he",(function(){return ro})),e.d(t,"Zg",(function(){return uo})),e.d(t,"wf",(function(){return fo})),e.d(t,"Ib",(function(){return co})),e.d(t,"ed",(function(){return io})),e.d(t,"kf",(function(){return oo})),e.d(t,"S",(function(){return _o})),e.d(t,"Ac",(function(){return ao})),e.d(t,"Od",(function(){return bo})),e.d(t,"Nd",(function(){return go})),e.d(t,"jf",(function(){return wo})),e.d(t,"Lf",(function(){return so})),e.d(t,"Ik",(function(){return lo})),e.d(t,"Vi",(function(){return mo})),e.d(t,"Fg",(function(){return po})),e.d(t,"d",(function(){return ho})),e.d(t,"vb",(function(){return xo})),e.d(t,"vh",(function(){return yo})),e.d(t,"Yi",(function(){return So})),e.d(t,"Mk",(function(){return ko})),e.d(t,"ff",(function(){return vo})),e.d(t,"qf",(function(){return Bo})),e.d(t,"Ok",(function(){return Po})),e.d(t,"Pi",(function(){return Io})),e.d(t,"gf",(function(){return jo})),e.d(t,"Ni",(function(){return Ao})),e.d(t,"ue",(function(){return Do})),e.d(t,"ve",(function(){return To})),e.d(t,"Lk",(function(){return Co})),e.d(t,"hf",(function(){return Eo})),e.d(t,"k",(function(){return Mo})),e.d(t,"xc",(function(){return Fo})),e.d(t,"Ui",(function(){return Ro})),e.d(t,"xg",(function(){return Lo})),e.d(t,"Kf",(function(){return Oo})),e.d(t,"Sh",(function(){return Go})),e.d(t,"zf",(function(){return Vo})),e.d(t,"wb",(function(){return Wo})),e.d(t,"Nk",(function(){return qo})),e.d(t,"Qi",(function(){return zo})),e.d(t,"ef",(function(){return Uo})),e.d(t,"Mi",(function(){return Ko})),e.d(t,"se",(function(){return Qo})),e.d(t,"te",(function(){return No})),e.d(t,"lh",(function(){return Xo})),e.d(t,"h",(function(){return Yo})),e.d(t,"Mh",(function(){return Ho})),e.d(t,"Jg",(function(){return Jo})),e.d(t,"kd",(function(){return Zo})),e.d(t,"ch",(function(){return $o})),e.d(t,"dh",(function(){return n_})),e.d(t,"rk",(function(){return t_})),e.d(t,"Mg",(function(){return e_})),e.d(t,"m",(function(){return r_})),e.d(t,"jh",(function(){return u_})),e.d(t,"Tc",(function(){return f_})),e.d(t,"Uc",(function(){return c_})),e.d(t,"Sc",(function(){return i_})),e.d(t,"F",(function(){return o_})),e.d(t,"tc",(function(){return __})),e.d(t,"Qc",(function(){return d_})),e.d(t,"Wg",(function(){return a_})),e.d(t,"sf",(function(){return b_})),e.d(t,"sk",(function(){return g_})),e.d(t,"Zi",(function(){return w_})),e.d(t,"df",(function(){return s_})),e.d(t,"n",(function(){return l_})),e.d(t,"Dj",(function(){return m_})),e.d(t,"Qe",(function(){return p_})),e.d(t,"yh",(function(){return h_})),e.d(t,"sg",(function(){return x_})),e.d(t,"Pf",(function(){return y_})),e.d(t,"i",(function(){return S_})),e.d(t,"Nh",(function(){return k_})),e.d(t,"wc",(function(){return v_})),e.d(t,"Ti",(function(){return B_})),e.d(t,"j",(function(){return P_})),e.d(t,"yg",(function(){return I_})),e.d(t,"cb",(function(){return j_})),e.d(t,"db",(function(){return A_})),e.d(t,"Bg",(function(){return D_})),e.d(t,"Cg",(function(){return T_})),e.d(t,"oh",(function(){return C_})),e.d(t,"xh",(function(){return E_})),e.d(t,"ph",(function(){return M_})),e.d(t,"oe",(function(){return F_})),e.d(t,"We",(function(){return R_})),e.d(t,"Df",(function(){return L_})),e.d(t,"Gg",(function(){return O_})),e.d(t,"Og",(function(){return G_})),e.d(t,"Yg",(function(){return V_})),e.d(t,"Xg",(function(){return W_})),e.d(t,"pd",(function(){return q_})),e.d(t,"xk",(function(){return z_})),e.d(t,"yf",(function(){return U_})),e.d(t,"Xe",(function(){return K_})),e.d(t,"eb",(function(){return Q_})),e.d(t,"Lg",(function(){return N_})),e.d(t,"ii",(function(){return X_})),e.d(t,"Pk",(function(){return Y_})),e.d(t,"Ye",(function(){return H_})),e.d(t,"Ze",(function(){return J_})),e.d(t,"if",(function(){return Z_})),e.d(t,"eh",(function(){return $_})),e.d(t,"Bh",(function(){return nd})),e.d(t,"rf",(function(){return td})),e.d(t,"Be",(function(){return ed})),e.d(t,"xf",(function(){return rd})),e.d(t,"wk",(function(){return ud})),e.d(t,"bi",(function(){return fd})),e.d(t,"hb",(function(){return cd})),e.d(t,"Ej",(function(){return id})),e.d(t,"Fj",(function(){return od})),e.d(t,"ab",(function(){return _d})),e.d(t,"Qg",(function(){return dd})),e.d(t,"Tg",(function(){return ad})),e.d(t,"Rg",(function(){return bd})),e.d(t,"Vg",(function(){return gd})),e.d(t,"Kg",(function(){return wd})),e.d(t,"Ki",(function(){return sd})),e.d(t,"Cf",(function(){return ld})),e.d(t,"Ug",(function(){return md})),e.d(t,"Pg",(function(){return pd})),e.d(t,"Sg",(function(){return hd})),e.d(t,"bb",(function(){return xd})),e.d(t,"bf",(function(){return yd})),e.d(t,"Ji",(function(){return Sd})),e.d(t,"ij",(function(){return kd})),e.d(t,"sl",(function(){return vd})),e.d(t,"Dl",(function(){return Bd})),e.d(t,"wl",(function(){return Pd})),e.d(t,"ll",(function(){return Id})),e.d(t,"ml",(function(){return jd})),e.d(t,"nl",(function(){return Ad})),e.d(t,"ol",(function(){return Dd})),e.d(t,"pl",(function(){return Td})),e.d(t,"ql",(function(){return Cd})),e.d(t,"rl",(function(){return Ed})),e.d(t,"Uk",(function(){return Md})),e.d(t,"Vk",(function(){return Fd})),e.d(t,"Wk",(function(){return Rd})),e.d(t,"Xk",(function(){return Ld})),e.d(t,"Yk",(function(){return Od})),e.d(t,"Zk",(function(){return Gd})),e.d(t,"al",(function(){return Vd})),e.d(t,"bl",(function(){return Wd})),e.d(t,"cl",(function(){return qd})),e.d(t,"dl",(function(){return zd})),e.d(t,"el",(function(){return Ud})),e.d(t,"fl",(function(){return Kd})),e.d(t,"gl",(function(){return Qd})),e.d(t,"hl",(function(){return Nd})),e.d(t,"il",(function(){return Xd})),e.d(t,"jl",(function(){return Yd})),e.d(t,"kl",(function(){return Hd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=0,d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}let b=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof b.encodeInto?function(n,t){return b.encodeInto(n,t)}:function(n,t){const e=b.encode(n);return t.set(e),{read:n.length,written:e.length}};function w(n,t,e){if(void 0===e){const e=b.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),_=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=g(n,t).written,u=e(u,r,c,1)>>>0}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}let p=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,p.decode(a().subarray(n,n+t))}function x(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=n,t}p.decode();let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3ffee16663c09c0c(n,t,x(e))}function B(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4ad336058bb0a07(n,t,x(e),x(u))}function P(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h4f4c127e7a752c42(n,t)}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h896fba332aa401bf(n,t)}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h00eb8421112b0e89(n,t,x(e))}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__heef75fab51d49469(n,t,x(e),x(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,x(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,x(e))}function E(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,x(e))}function M(){r.run()}let F=null;function R(n,t){return n>>>=0,(null!==F&&0!==F.byteLength||(F=new Uint32Array(r.memory.buffer)),F).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(x(n))}}function W(n){o(n)}function q(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function z(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return void 0===c(n)}function K(n,t){return x(h(n,t))}function Q(n){return x(c(n))}function N(){return x(new Error)}function X(n,t){const e=w(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Y(n,t){let e,u;try{e=n,u=t,console.error(h(n,t))}finally{r.__wbindgen_free(e,u,1)}}function H(n){return x(fetch(c(n)))}function J(n){return c(n).offsetX}function Z(n){return c(n).offsetY}function $(n){return x(c(n).Window)}function nn(n){const t=c(n).webkitFullscreenElement;return s(t)?0:x(t)}function tn(){return x(ResizeObserverEntry.prototype)}function en(n){return x(c(n).scheduler)}function rn(n){return x(c(n).getCoalescedEvents)}function un(n){return x(c(n).requestFullscreen)}function fn(n){return x(c(n).requestIdleCallback)}function cn(n){return x(c(n).onpointerrawupdate)}function on(n){c(n).webkitRequestFullscreen()}function _n(n){return x(c(n).requestFullscreen())}function dn(n){return x(c(n).scheduler)}function an(n,t,e){return x(c(n).postTask(c(t),c(e)))}function bn(n){return x(n)}function gn(n){return x(c(n).performance)}function wn(n){return c(n).now()}function sn(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function mn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function pn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function hn(n){return c(n).size}function xn(n){return c(n).usage}function yn(n){c(n).destroy()}function Sn(n,t,e){return x(c(n).getMappedRange(t,e))}function kn(n,t,e,r){return x(c(n).mapAsync(t>>>0,e,r))}function vn(n){c(n).unmap()}function Bn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function Pn(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function In(n){c(n).end()}function jn(n,t){c(n).setPipeline(c(t))}function An(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Dn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Tn(n,t){return x(c(n).getBindGroupLayout(t>>>0))}function Cn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function En(n){return x(c(n).gpu)}function Mn(n){return x(c(n).getPreferredCanvasFormat())}function Fn(n,t){return x(c(n).requestAdapter(c(t)))}function Rn(n,t){return x(c(n).getBindGroupLayout(t>>>0))}function Ln(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function On(n){return x(c(n).finish())}function Gn(n,t){return x(c(n).finish(c(t)))}function Vn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Wn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function qn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function zn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Un(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Kn(n,t,e){c(n).drawIndirect(c(t),e)}function Qn(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Nn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Xn(n,t){c(n).setPipeline(c(t))}function Yn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Hn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Jn(n){return x(c(n).features)}function Zn(n){return x(c(n).limits)}function $n(n){return x(c(n).queue)}function nt(n){return x(c(n).lost)}function tt(n,t){c(n).onuncapturederror=c(t)}function et(n,t){return x(c(n).createBindGroup(c(t)))}function rt(n,t){return x(c(n).createBindGroupLayout(c(t)))}function ut(n,t){return x(c(n).createBuffer(c(t)))}function ft(n,t){return x(c(n).createCommandEncoder(c(t)))}function ct(n,t){return x(c(n).createComputePipeline(c(t)))}function it(n,t){return x(c(n).createPipelineLayout(c(t)))}function ot(n,t){return x(c(n).createQuerySet(c(t)))}function _t(n,t){return x(c(n).createRenderBundleEncoder(c(t)))}function dt(n,t){return x(c(n).createRenderPipeline(c(t)))}function at(n,t){return x(c(n).createSampler(c(t)))}function bt(n,t){return x(c(n).createShaderModule(c(t)))}function gt(n,t){return x(c(n).createTexture(c(t)))}function wt(n){c(n).destroy()}function st(n){return x(c(n).popErrorScope())}function lt(n,t){c(n).pushErrorScope(o(t))}function mt(n,t){return x(c(n).createView(c(t)))}function pt(n){c(n).destroy()}function ht(n){return x(c(n).type)}function xt(n){return c(n).offset}function yt(n){return c(n).length}function St(n){return c(n).lineNum}function kt(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function vt(n,t){c(n).configure(c(t))}function Bt(n){return x(c(n).getCurrentTexture())}function Pt(n){return x(c(n).reason)}function It(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function jt(n){c(n).end()}function At(n,t){c(n).executeBundles(c(t))}function Dt(n,t){c(n).setBlendConstant(c(t))}function Tt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Ct(n,t){c(n).setStencilReference(t>>>0)}function Et(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Mt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Ft(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Rt(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Lt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Ot(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Gt(n,t,e){c(n).drawIndirect(c(t),e)}function Vt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Wt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function qt(n,t){c(n).setPipeline(c(t))}function zt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Ut(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Kt(n){return x(c(n).getCompilationInfo())}function Qt(n,t){const e=w(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Nt(n,t){return x(c(n).beginComputePass(c(t)))}function Xt(n,t){return x(c(n).beginRenderPass(c(t)))}function Yt(n,t,e){c(n).clearBuffer(c(t),e)}function Ht(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Jt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Zt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function $t(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function ne(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function te(n){return x(c(n).finish())}function ee(n,t){return x(c(n).finish(c(t)))}function re(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function ue(n){return x(c(n).error)}function fe(n,t,e){return c(n).has(h(t,e))}function ce(n){return c(n).maxTextureDimension1D}function ie(n){return c(n).maxTextureDimension2D}function oe(n){return c(n).maxTextureDimension3D}function _e(n){return c(n).maxTextureArrayLayers}function de(n){return c(n).maxBindGroups}function ae(n){return c(n).maxBindingsPerBindGroup}function be(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function ge(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function we(n){return c(n).maxSampledTexturesPerShaderStage}function se(n){return c(n).maxSamplersPerShaderStage}function le(n){return c(n).maxStorageBuffersPerShaderStage}function me(n){return c(n).maxStorageTexturesPerShaderStage}function pe(n){return c(n).maxUniformBuffersPerShaderStage}function he(n){return c(n).maxUniformBufferBindingSize}function xe(n){return c(n).maxStorageBufferBindingSize}function ye(n){return c(n).maxVertexBuffers}function Se(n){return c(n).maxBufferSize}function ke(n){return c(n).maxVertexAttributes}function ve(n){return c(n).maxVertexBufferArrayStride}function Be(n){return c(n).minUniformBufferOffsetAlignment}function Pe(n){return c(n).minStorageBufferOffsetAlignment}function Ie(n){return c(n).maxInterStageShaderComponents}function je(n){return c(n).maxColorAttachments}function Ae(n){return c(n).maxColorAttachmentBytesPerSample}function De(n){return c(n).maxComputeWorkgroupStorageSize}function Te(n){return c(n).maxComputeInvocationsPerWorkgroup}function Ce(n){return c(n).maxComputeWorkgroupSizeX}function Ee(n){return c(n).maxComputeWorkgroupSizeY}function Me(n){return c(n).maxComputeWorkgroupSizeZ}function Fe(n){return c(n).maxComputeWorkgroupsPerDimension}function Re(n){const t=c(n);return"object"==typeof t&&null!==t}function Le(n){return x(c(n).Window)}function Oe(n){return x(c(n).WorkerGlobalScope)}function Ge(n,t){return x(c(n).requestDevice(c(t)))}function Ve(n){return x(c(n).features)}function We(n){return x(c(n).limits)}function qe(n){return x(c(n).messages)}function ze(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Ue(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ke(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Qe(n,t){c(n).submit(c(t))}function Ne(n){queueMicrotask(c(n))}function Xe(n){return x(c(n).queueMicrotask)}function Ye(n){return"function"==typeof c(n)}function He(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Je(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function Ze(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function $e(n,t,e){c(n).beginQuery(t>>>0,c(e))}function nr(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function tr(n,t,e){c(n).bindSampler(t>>>0,c(e))}function er(n,t){c(n).bindVertexArray(c(t))}function rr(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function ur(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function fr(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function cr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function ir(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function or(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function _r(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function dr(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function ar(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function br(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function gr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function wr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function sr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function lr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function mr(n){const t=c(n).createQuery();return s(t)?0:x(t)}function pr(n){const t=c(n).createSampler();return s(t)?0:x(t)}function hr(n){const t=c(n).createVertexArray();return s(t)?0:x(t)}function xr(n,t){c(n).deleteQuery(c(t))}function yr(n,t){c(n).deleteSampler(c(t))}function Sr(n,t){c(n).deleteSync(c(t))}function kr(n,t){c(n).deleteVertexArray(c(t))}function vr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function Br(n,t){c(n).drawBuffers(c(t))}function Pr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function Ir(n,t){c(n).endQuery(t>>>0)}function jr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return s(r)?0:x(r)}function Ar(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Dr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Tr(){return V((function(n,t,e){return x(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Cr(n,t,e){return x(c(n).getQueryParameter(c(t),e>>>0))}function Er(n,t,e){return x(c(n).getSyncParameter(c(t),e>>>0))}function Mr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),h(e,r))}function Fr(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Rr(n,t){c(n).readBuffer(t>>>0)}function Lr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Or(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Gr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Vr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Wr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Ur(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Kr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function nu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function tu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function eu(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function ru(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function uu(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function fu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function cu(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function iu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function ou(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function _u(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function du(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function au(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function bu(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function gu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function hu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function xu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function yu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function Su(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ku(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function vu(n,t){c(n).activeTexture(t>>>0)}function Bu(n,t,e){c(n).attachShader(c(t),c(e))}function Pu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,h(r,u))}function Iu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function ju(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Au(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Du(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Tu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Cu(n,t){c(n).blendEquation(t>>>0)}function Eu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Mu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Fu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ru(n,t){c(n).clear(t>>>0)}function Lu(n,t){c(n).clearDepth(t)}function Ou(n,t){c(n).clearStencil(t)}function Gu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Vu(n,t){c(n).compileShader(c(t))}function Wu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function qu(n){const t=c(n).createBuffer();return s(t)?0:x(t)}function zu(n){const t=c(n).createFramebuffer();return s(t)?0:x(t)}function Uu(n){const t=c(n).createProgram();return s(t)?0:x(t)}function Ku(n){const t=c(n).createRenderbuffer();return s(t)?0:x(t)}function Qu(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:x(e)}function Nu(n){const t=c(n).createTexture();return s(t)?0:x(t)}function Xu(n,t){c(n).cullFace(t>>>0)}function Yu(n,t){c(n).deleteBuffer(c(t))}function Hu(n,t){c(n).deleteFramebuffer(c(t))}function Ju(n,t){c(n).deleteProgram(c(t))}function Zu(n,t){c(n).deleteRenderbuffer(c(t))}function $u(n,t){c(n).deleteShader(c(t))}function nf(n,t){c(n).deleteTexture(c(t))}function tf(n,t){c(n).depthFunc(t>>>0)}function ef(n,t){c(n).depthMask(0!==t)}function rf(n,t,e){c(n).depthRange(t,e)}function uf(n,t){c(n).disable(t>>>0)}function ff(n,t){c(n).disableVertexAttribArray(t>>>0)}function cf(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function of(n,t){c(n).enable(t>>>0)}function _f(n,t){c(n).enableVertexAttribArray(t>>>0)}function df(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function af(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function bf(n,t){c(n).frontFace(t>>>0)}function gf(){return V((function(n,t,e){const r=c(n).getExtension(h(t,e));return s(r)?0:x(r)}),arguments)}function wf(){return V((function(n,t){return x(c(n).getParameter(t>>>0))}),arguments)}function sf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function lf(n,t,e){return x(c(n).getProgramParameter(c(t),e>>>0))}function mf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function pf(n,t,e){return x(c(n).getShaderParameter(c(t),e>>>0))}function hf(n){const t=c(n).getSupportedExtensions();return s(t)?0:x(t)}function xf(n,t,e,r){const u=c(n).getUniformLocation(c(t),h(e,r));return s(u)?0:x(u)}function yf(n,t){c(n).linkProgram(c(t))}function Sf(n,t,e){c(n).pixelStorei(t>>>0,e)}function kf(n,t,e){c(n).polygonOffset(t,e)}function vf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Bf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Pf(n,t,e,r){c(n).shaderSource(c(t),h(e,r))}function If(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function jf(n,t){c(n).stencilMask(t>>>0)}function Af(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Df(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Tf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Cf(n,t,e){c(n).uniform1f(c(t),e)}function Ef(n,t,e){c(n).uniform1i(c(t),e)}function Mf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ff(n,t){c(n).useProgram(c(t))}function Rf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Lf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Of(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Gf(n){const t=c(n).document;return s(t)?0:x(t)}function Vf(n){return x(c(n).location)}function Wf(n){return x(c(n).navigator)}function qf(n){return c(n).devicePixelRatio}function zf(n,t){c(n).cancelIdleCallback(t>>>0)}function Uf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return s(e)?0:x(e)}),arguments)}function Kf(){return V((function(n,t,e){const r=c(n).matchMedia(h(t,e));return s(r)?0:x(r)}),arguments)}function Qf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Nf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Xf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Yf(n,t){c(n).clearTimeout(t)}function Hf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Jf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Zf(n){const t=c(n).body;return s(t)?0:x(t)}function $f(n){return x(c(n).visibilityState)}function nc(n){const t=c(n).activeElement;return s(t)?0:x(t)}function tc(n){const t=c(n).fullscreenElement;return s(t)?0:x(t)}function ec(){return V((function(n,t,e){return x(c(n).createElement(h(t,e)))}),arguments)}function rc(n,t,e){const r=c(n).getElementById(h(t,e));return s(r)?0:x(r)}function uc(){return V((function(n,t,e){const r=c(n).querySelector(h(t,e));return s(r)?0:x(r)}),arguments)}function fc(){return V((function(n,t,e){return x(c(n).querySelectorAll(h(t,e)))}),arguments)}function cc(){return V((function(n,t,e,r,u){c(n).setAttribute(h(t,e),h(r,u))}),arguments)}function ic(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function oc(n){return x(c(n).navigator)}function _c(n,t){return x(c(n).fetch(c(t)))}function dc(n){return x(c(n).style)}function ac(){return V((function(n){c(n).focus()}),arguments)}function bc(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function gc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function wc(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function sc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function lc(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function mc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function pc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function hc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function xc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function yc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function Sc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function kc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function vc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function Bc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function Pc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function Ic(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function jc(n,t){c(n).activeTexture(t>>>0)}function Ac(n,t,e){c(n).attachShader(c(t),c(e))}function Dc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,h(r,u))}function Tc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Cc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Ec(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Mc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Fc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Rc(n,t){c(n).blendEquation(t>>>0)}function Lc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Oc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Gc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Vc(n,t){c(n).clear(t>>>0)}function Wc(n,t){c(n).clearDepth(t)}function qc(n,t){c(n).clearStencil(t)}function zc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Uc(n,t){c(n).compileShader(c(t))}function Kc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Qc(n){const t=c(n).createBuffer();return s(t)?0:x(t)}function Nc(n){const t=c(n).createFramebuffer();return s(t)?0:x(t)}function Xc(n){const t=c(n).createProgram();return s(t)?0:x(t)}function Yc(n){const t=c(n).createRenderbuffer();return s(t)?0:x(t)}function Hc(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:x(e)}function Jc(n){const t=c(n).createTexture();return s(t)?0:x(t)}function Zc(n,t){c(n).cullFace(t>>>0)}function $c(n,t){c(n).deleteBuffer(c(t))}function ni(n,t){c(n).deleteFramebuffer(c(t))}function ti(n,t){c(n).deleteProgram(c(t))}function ei(n,t){c(n).deleteRenderbuffer(c(t))}function ri(n,t){c(n).deleteShader(c(t))}function ui(n,t){c(n).deleteTexture(c(t))}function fi(n,t){c(n).depthFunc(t>>>0)}function ci(n,t){c(n).depthMask(0!==t)}function ii(n,t,e){c(n).depthRange(t,e)}function oi(n,t){c(n).disable(t>>>0)}function _i(n,t){c(n).disableVertexAttribArray(t>>>0)}function di(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ai(n,t){c(n).enable(t>>>0)}function bi(n,t){c(n).enableVertexAttribArray(t>>>0)}function gi(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function wi(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function si(n,t){c(n).frontFace(t>>>0)}function li(){return V((function(n,t){return x(c(n).getParameter(t>>>0))}),arguments)}function mi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function pi(n,t,e){return x(c(n).getProgramParameter(c(t),e>>>0))}function hi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function xi(n,t,e){return x(c(n).getShaderParameter(c(t),e>>>0))}function yi(n,t,e,r){const u=c(n).getUniformLocation(c(t),h(e,r));return s(u)?0:x(u)}function Si(n,t){c(n).linkProgram(c(t))}function ki(n,t,e){c(n).pixelStorei(t>>>0,e)}function vi(n,t,e){c(n).polygonOffset(t,e)}function Bi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Pi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Ii(n,t,e,r){c(n).shaderSource(c(t),h(e,r))}function ji(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Ai(n,t){c(n).stencilMask(t>>>0)}function Di(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Ti(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ci(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Ei(n,t,e){c(n).uniform1f(c(t),e)}function Mi(n,t,e){c(n).uniform1i(c(t),e)}function Fi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ri(n,t){c(n).useProgram(c(t))}function Li(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Oi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Gi(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Vi(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Wi(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function qi(){return V((function(n,t,e,u){const f=w(c(t).getPropertyValue(h(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function zi(){return V((function(n,t,e,u){const f=w(c(t).removeProperty(h(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Ui(){return V((function(n,t,e,r,u){c(n).setProperty(h(t,e),h(r,u))}),arguments)}function Ki(){return V((function(n){return x(new IntersectionObserver(c(n)))}),arguments)}function Qi(n){c(n).disconnect()}function Ni(n,t){c(n).observe(c(t))}function Xi(){return V((function(n,t){return x(c(n).appendChild(c(t)))}),arguments)}function Yi(n,t){return c(n).contains(c(t))}function Hi(n,t){const e=c(n)[t>>>0];return s(e)?0:x(e)}function Ji(n,t){c(n).drawBuffersWEBGL(c(t))}function Zi(n){return c(n).videoWidth}function $i(n){return c(n).videoHeight}function no(n){return x(c(n).port1)}function to(n){return x(c(n).port2)}function eo(){return V((function(){return x(new MessageChannel)}),arguments)}function ro(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function uo(n){return c(n).now()}function fo(n){return c(n).isIntersecting}function co(n){return x(c(n).contentRect)}function io(n){return x(c(n).devicePixelContentBoxSize)}function oo(n){return c(n).inlineSize}function _o(n){return c(n).blockSize}function ao(n){console.debug(c(n))}function bo(n){console.error(c(n))}function go(n,t){console.error(c(n),c(t))}function wo(n){console.info(c(n))}function so(n){console.log(c(n))}function lo(n){console.warn(c(n))}function mo(n){return x(c(n).signal)}function po(){return V((function(){return x(new AbortController)}),arguments)}function ho(n){c(n).abort()}function xo(n){c(n).close()}function yo(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function So(n){c(n).start()}function ko(n){return c(n).width}function vo(n){return c(n).height}function Bo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function Po(n){return c(n).width}function Io(n,t){c(n).width=t>>>0}function jo(n){return c(n).height}function Ao(n,t){c(n).height=t>>>0}function Do(){return V((function(n,t,e){const r=c(n).getContext(h(t,e));return s(r)?0:x(r)}),arguments)}function To(){return V((function(n,t,e,r){const u=c(n).getContext(h(t,e),c(r));return s(u)?0:x(u)}),arguments)}function Co(n){return c(n).width}function Eo(n){return c(n).height}function Mo(n){return c(n).altKey}function Fo(n){return c(n).ctrlKey}function Ro(n){return c(n).shiftKey}function Lo(n){return c(n).metaKey}function Oo(n){return c(n).location}function Go(n){return c(n).repeat}function Vo(n,t){const e=w(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Wo(n,t){const e=w(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function qo(n){return c(n).width}function zo(n,t){c(n).width=t>>>0}function Uo(n){return c(n).height}function Ko(n,t){c(n).height=t>>>0}function Qo(){return V((function(n,t,e){const r=c(n).getContext(h(t,e));return s(r)?0:x(r)}),arguments)}function No(){return V((function(n,t,e,r){const u=c(n).getContext(h(t,e),c(r));return s(u)?0:x(u)}),arguments)}function Xo(n){return c(n).persisted}function Yo(){return V((function(n,t,e,r){c(n).addEventListener(h(t,e),c(r))}),arguments)}function Ho(){return V((function(n,t,e,r){c(n).removeEventListener(h(t,e),c(r))}),arguments)}function Jo(){return V((function(n){return x(new ResizeObserver(c(n)))}),arguments)}function Zo(n){c(n).disconnect()}function $o(n,t){c(n).observe(c(t))}function n_(n,t,e){c(n).observe(c(t),c(e))}function t_(n,t){c(n).unobserve(c(t))}function e_(){return V((function(){return x(new Headers)}),arguments)}function r_(){return V((function(n,t,e,r,u){c(n).append(h(t,e),h(r,u))}),arguments)}function u_(){return V((function(n,t){const e=w(c(t).origin,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}),arguments)}function f_(n){return c(n).deltaX}function c_(n){return c(n).deltaY}function i_(n){return c(n).deltaMode}function o_(n,t){c(n).bindVertexArrayOES(c(t))}function __(n){const t=c(n).createVertexArrayOES();return s(t)?0:x(t)}function d_(n,t){c(n).deleteVertexArrayOES(c(t))}function a_(){return V((function(n,t,e){return x(new Request(h(n,t),c(e)))}),arguments)}function b_(n){let t;try{t=c(n)instanceof Response}catch(n){t=!1}return t}function g_(n,t){const e=w(c(t).url,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function w_(n){return c(n).status}function s_(n){return x(c(n).headers)}function l_(){return V((function(n){return x(c(n).arrayBuffer())}),arguments)}function m_(){return V((function(n){return x(c(n).text())}),arguments)}function p_(n){const t=c(n).getSupportedProfiles();return s(t)?0:x(t)}function h_(n){c(n).preventDefault()}function x_(n,t){const e=w(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function y_(n){return c(n).matches}function S_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function k_(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function v_(n){return c(n).ctrlKey}function B_(n){return c(n).shiftKey}function P_(n){return c(n).altKey}function I_(n){return c(n).metaKey}function j_(n){return c(n).button}function A_(n){return c(n).buttons}function D_(n){return c(n).movementX}function T_(n){return c(n).movementY}function C_(n){return c(n).pointerId}function E_(n){return c(n).pressure}function M_(n,t){const e=w(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function F_(n){return x(c(n).getCoalescedEvents())}function R_(n,t){return x(c(n)[t>>>0])}function L_(n){return c(n).length}function O_(){return x(new Array)}function G_(n,t){return x(new Function(h(n,t)))}function V_(n){return x(c(n).next)}function W_(){return V((function(n){return x(c(n).next())}),arguments)}function q_(n){return c(n).done}function z_(n){return x(c(n).value)}function U_(){return x(Symbol.iterator)}function K_(){return V((function(n,t){return x(Reflect.get(c(n),c(t)))}),arguments)}function Q_(){return V((function(n,t){return x(c(n).call(c(t)))}),arguments)}function N_(){return x(new Object)}function X_(){return V((function(){return x(self.self)}),arguments)}function Y_(){return V((function(){return x(window.window)}),arguments)}function H_(){return V((function(){return x(globalThis.globalThis)}),arguments)}function J_(){return V((function(){return x(global.global)}),arguments)}function Z_(n,t,e){return c(n).includes(c(t),e)}function $_(n){return x(Array.of(c(n)))}function nd(n,t){return c(n).push(c(t))}function td(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function ed(n,t){return x(Object.getOwnPropertyDescriptor(c(n),c(t)))}function rd(n,t){return Object.is(c(n),c(t))}function ud(n){return x(c(n).valueOf())}function fd(n){return x(Promise.resolve(c(n)))}function cd(n,t){return x(c(n).catch(c(t)))}function id(n,t){return x(c(n).then(c(t)))}function od(n,t,e){return x(c(n).then(c(t),c(e)))}function _d(n){return x(c(n).buffer)}function dd(n,t,e){return x(new Int8Array(c(n),t>>>0,e>>>0))}function ad(n,t,e){return x(new Int16Array(c(n),t>>>0,e>>>0))}function bd(n,t,e){return x(new Int32Array(c(n),t>>>0,e>>>0))}function gd(n,t,e){return x(new Uint8Array(c(n),t>>>0,e>>>0))}function wd(n){return x(new Uint8Array(c(n)))}function sd(n,t,e){c(n).set(c(t),e>>>0)}function ld(n){return c(n).length}function md(n,t,e){return x(new Uint16Array(c(n),t>>>0,e>>>0))}function pd(n,t,e){return x(new Uint32Array(c(n),t>>>0,e>>>0))}function hd(n,t,e){return x(new Float32Array(c(n),t>>>0,e>>>0))}function xd(n){return x(c(n).buffer)}function yd(){return V((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function Sd(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function kd(){return V((function(n){return x(JSON.stringify(c(n)))}),arguments)}function vd(n,t){const e=w(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=_;m()[n/4+1]=u,m()[n/4+0]=e}function Bd(n,t){throw new Error(h(n,t))}function Pd(){return x(r.memory)}function Id(n,t,e){return x(k(n,t,49,v))}function jd(n,t,e){return x(k(n,t,49,v))}function Ad(n,t,e){return x(k(n,t,49,B))}function Dd(n,t,e){return x(k(n,t,49,P))}function Td(n,t,e){return x(k(n,t,49,v))}function Cd(n,t,e){return x(k(n,t,49,v))}function Ed(n,t,e){return x(k(n,t,49,v))}function Md(n,t,e){return x(k(n,t,288,I))}function Fd(n,t,e){return x(k(n,t,288,j))}function Rd(n,t,e){return x(k(n,t,288,j))}function Ld(n,t,e){return x(k(n,t,288,j))}function Od(n,t,e){return x(k(n,t,288,j))}function Gd(n,t,e){return x(k(n,t,288,j))}function Vd(n,t,e){return x(k(n,t,288,A))}function Wd(n,t,e){return x(k(n,t,901,D))}function qd(n,t,e){return x(k(n,t,901,D))}function zd(n,t,e){return x(k(n,t,901,T))}function Ud(n,t,e){return x(k(n,t,901,D))}function Kd(n,t,e){return x(k(n,t,901,D))}function Qd(n,t,e){return x(k(n,t,901,D))}function Nd(n,t,e){return x(k(n,t,901,D))}function Xd(n,t,e){return x(k(n,t,2036,C))}function Yd(n,t,e){return x(k(n,t,2036,C))}function Hd(n,t,e){return x(k(n,t,2213,E))}}).call(this,e(260)(n))},408:function(n,t,e){"use strict";e.r(t);var r=e(409),u=e(245);e.d(t,"__wbg_set_wasm",(function(){return u.Li})),e.d(t,"run",(function(){return u.El})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Al})),e.d(t,"__wbindgen_string_get",(function(){return u.Bl})),e.d(t,"__wbindgen_cb_drop",(function(){return u.Tk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.vl})),e.d(t,"__wbindgen_string_new",(function(){return u.Cl})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.zl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Ng})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Xi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Qd})),e.d(t,"__wbg_fetch_386f87a3ebf5003c",(function(){return u.Vd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.fh})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.gh})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.Jk})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.zh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.fi})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.pe})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Wh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Zh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.ih})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.Kk})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Xh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.ei})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.wh})),e.d(t,"__wbindgen_number_new",(function(){return u.yl})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.kh})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.ah})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.nf})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.mf})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.pf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.of})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Wi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.tk})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.bd})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.Ae})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Nf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.qk})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.nd})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.md})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Md})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.vi})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.mi})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.oi})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.me})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.lf})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.af})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.Ee})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Th})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.le})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.vg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Xd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.ae})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.ni})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.li})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Ed})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.Cd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.si})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.ti})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.xi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.Fi})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.Ei})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Td})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.Ff})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.Gh})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Mf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.Oi})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Tb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Sb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Wb})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Xb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Yb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.cc})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.fc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.hc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.ic})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.mc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.nc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.rc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.cd})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.sh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.Ah})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.vc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.dd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.Gj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.hh})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.Bf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.Gf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.tg})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Gb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.we})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.Lh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.ug})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Ld})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Rd})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.qi})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.Ai})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.Bi})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.Ii})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.ki})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.pi})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Fd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Dd})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.ri})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.ui})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.wi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.Hi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.Gi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.qe})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.Af})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.q})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.s})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.ib})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.jb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Kb})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Lb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Qb})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Rb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Zd})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Yd})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.ai})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Pd})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.cf})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.kg})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.lg})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.mg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.jg})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Qf})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.cg})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.bg})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.eg})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.fg})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.hg})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.ig})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.og})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.ng})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.gg})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.rg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Sf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.pg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.qg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.Ag})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.zg})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.dg})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Uf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.Tf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Zf})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Vf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Wf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Xf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Yf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.ag})),e.d(t,"__wbindgen_is_object",(function(){return u.ul})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Vh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Sd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.Ef})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.wg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.Qk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.Rk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Mb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.kj})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.Fh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.Eh})),e.d(t,"__wbindgen_is_function",(function(){return u.tl})),e.d(t,"__wbindgen_boolean_get",(function(){return u.Sk})),e.d(t,"__wbindgen_number_get",(function(){return u.xl})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.tf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.r})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.v})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.C})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.G})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.R})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.U})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.X})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.Y})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.kb})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.lb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.mb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.ub})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Eb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Fb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Jb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Pb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.gc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.lc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.uc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Hc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Kc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Nc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Rc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.rd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.vd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.xd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Kd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Ud})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ge})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ne})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ze})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Ke})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Re})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Se})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.vf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.Hh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.Ih})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.Kh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.Ph})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.ci})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.di})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.lj})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.nj})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.qj})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.rj})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.vj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.wj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.sj})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.uj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.xj})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.Aj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.zj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Bj})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.yj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Cj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.Lj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.Mj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.Oj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.Qj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.Rj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Uj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Vj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Yj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.bk})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.ck})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.dk})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.fk})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.gk})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.hk})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.jk})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.kk})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.lk})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.mk})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.ok})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.pk})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.zk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.Ak})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.o})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.u})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.x})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.y})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.A})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.D})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.H})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.L})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.J})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.P})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.N})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.sb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.ob})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.qb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.yb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.Ab})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Ob})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Vb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.bc})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.jc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.pc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.qc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.zc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Cc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Ec})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Gc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Wc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.ad})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.jd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.hd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.sd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Jd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Hd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.ce})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.fe})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ie})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.ye})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.De})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Fe})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.Ie})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.Me})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ne})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Pe})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Te})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.If})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.nh})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.rh})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Rh})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.gi})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Si})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.bj})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.ej})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.cj})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.gj})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.oj})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.Ij})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.Kj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Wj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.uk})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Bk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Gk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.uf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.od})),e.d(t,"__wbg_location_2951b5ee34f19221",(function(){return u.Jf})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.Eg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.fd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.gb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.re})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Of})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Yh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.fb})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Uh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.rb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.Di})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.Ci})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.T})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Hk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ke})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Zb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.xe})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.Dh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.Ch})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.ji})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.yi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.Dg})),e.d(t,"__wbg_fetch_921fad6ef9e883dd",(function(){return u.Wd})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.jj})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.be})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.W})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.Z})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Cb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.Jh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.mj})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.tj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.Nj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.Pj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.Sj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.Tj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Zj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.ak})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.ek})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.ik})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.nk})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.p})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.t})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.w})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.z})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.B})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.E})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.I})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.M})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.K})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.Q})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.O})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.tb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.pb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.xb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.ac})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.ec})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.kc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.oc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.sc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Jc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Mc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Pc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Yc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Zc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.td})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Id})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Gd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.de})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ee})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.je})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.Ce})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Ge})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.He})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Le})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Oe})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Ue})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.Hf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.mh})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.qh})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.Qh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.hi})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Ri})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.aj})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.fj})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.dj})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.hj})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.pj})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.Hj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.Jj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Xj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.vk})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Ck})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Fk})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.qd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.wd})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.yk})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Je})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Oh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.zi})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.Ig})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.ld})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.bh})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Hb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Ve})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.ud})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Ek})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Dk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.th})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.uh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.Hg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.he})),e.d(t,"__wbg_now_4e659b3d15f470d9",(function(){return u.Zg})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.wf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Ib})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.ed})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.kf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.S})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.Ac})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Od})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Nd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.jf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Lf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.Ik})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Vi})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.Fg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.vb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.vh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Yi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.Mk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.ff})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.qf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.Ok})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.Pi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.gf})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.Ni})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.ue})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.ve})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.Lk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.hf})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.xc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Ui})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.xg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.Kf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Sh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.zf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.wb})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.Nk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.Qi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.ef})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.Mi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.se})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.te})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.lh})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Mh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.Jg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.kd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.ch})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.dh})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.rk})),e.d(t,"__wbg_new_ab6fd82b10560829",(function(){return u.Mg})),e.d(t,"__wbg_append_7bfcb4937d1d5e29",(function(){return u.m})),e.d(t,"__wbg_origin_ee93e29ace71f568",(function(){return u.jh})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Tc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Uc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Sc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.F})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.tc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Qc})),e.d(t,"__wbg_newwithstrandinit_3fd6fba4083ff2d0",(function(){return u.Wg})),e.d(t,"__wbg_instanceof_Response_849eb93e75734b6e",(function(){return u.sf})),e.d(t,"__wbg_url_5f6dc4009ac5f99d",(function(){return u.sk})),e.d(t,"__wbg_status_61a01141acd3cf74",(function(){return u.Zi})),e.d(t,"__wbg_headers_9620bfada380764a",(function(){return u.df})),e.d(t,"__wbg_arrayBuffer_29931d52c7206b02",(function(){return u.n})),e.d(t,"__wbg_text_450a059667fd91fd",(function(){return u.Dj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Qe})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.yh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.sg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Pf})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Nh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ti})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.yg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.cb})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.db})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.Bg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.Cg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.oh})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.xh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.ph})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.oe})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.We})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.Df})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.Gg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Og})),e.d(t,"__wbg_next_40fc327bfc8770e6",(function(){return u.Yg})),e.d(t,"__wbg_next_196c84450b364254",(function(){return u.Xg})),e.d(t,"__wbg_done_298b57d23c0fc80c",(function(){return u.pd})),e.d(t,"__wbg_value_d93c65011f51a456",(function(){return u.xk})),e.d(t,"__wbg_iterator_2cee6dadfd956dfa",(function(){return u.yf})),e.d(t,"__wbg_get_e3c254076557e348",(function(){return u.Xe})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.eb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Lg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.ii})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.Pk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Ye})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Ze})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.if})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.eh})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.Bh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.rf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Be})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.xf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.wk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.bi})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.hb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Ej})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.Fj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.ab})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Qg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Tg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Rg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Vg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.Kg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.Ki})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.Cf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Pg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Sg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.bb})),e.d(t,"__wbg_has_0af94d20077affa2",(function(){return u.bf})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.Ji})),e.d(t,"__wbg_stringify_8887fe74e1c50d81",(function(){return u.ij})),e.d(t,"__wbindgen_debug_string",(function(){return u.sl})),e.d(t,"__wbindgen_throw",(function(){return u.Dl})),e.d(t,"__wbindgen_memory",(function(){return u.wl})),e.d(t,"__wbindgen_closure_wrapper648",(function(){return u.ll})),e.d(t,"__wbindgen_closure_wrapper649",(function(){return u.ml})),e.d(t,"__wbindgen_closure_wrapper650",(function(){return u.nl})),e.d(t,"__wbindgen_closure_wrapper651",(function(){return u.ol})),e.d(t,"__wbindgen_closure_wrapper652",(function(){return u.pl})),e.d(t,"__wbindgen_closure_wrapper653",(function(){return u.ql})),e.d(t,"__wbindgen_closure_wrapper654",(function(){return u.rl})),e.d(t,"__wbindgen_closure_wrapper1128",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper1129",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper1130",(function(){return u.Wk})),e.d(t,"__wbindgen_closure_wrapper1131",(function(){return u.Xk})),e.d(t,"__wbindgen_closure_wrapper1132",(function(){return u.Yk})),e.d(t,"__wbindgen_closure_wrapper1133",(function(){return u.Zk})),e.d(t,"__wbindgen_closure_wrapper1134",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper2491",(function(){return u.bl})),e.d(t,"__wbindgen_closure_wrapper2492",(function(){return u.cl})),e.d(t,"__wbindgen_closure_wrapper2493",(function(){return u.dl})),e.d(t,"__wbindgen_closure_wrapper2494",(function(){return u.el})),e.d(t,"__wbindgen_closure_wrapper2495",(function(){return u.fl})),e.d(t,"__wbindgen_closure_wrapper2496",(function(){return u.gl})),e.d(t,"__wbindgen_closure_wrapper2497",(function(){return u.hl})),e.d(t,"__wbindgen_closure_wrapper4585",(function(){return u.il})),e.d(t,"__wbindgen_closure_wrapper4587",(function(){return u.jl})),e.d(t,"__wbindgen_closure_wrapper5320",(function(){return u.kl})),Object(u.Li)(r),r.__wbindgen_start()},409:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(245);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/27.c1971b98.js b/assets/js/27.c1971b98.js deleted file mode 100644 index 6c239a37d..000000000 --- a/assets/js/27.c1971b98.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{244:function(n,t,e){"use strict";(function(n){e.d(t,"Ai",(function(){return u})),e.d(t,"tl",(function(){return F})),e.d(t,"pl",(function(){return W})),e.d(t,"ql",(function(){return q})),e.d(t,"Ik",(function(){return z})),e.d(t,"kl",(function(){return U})),e.d(t,"ol",(function(){return K})),e.d(t,"rl",(function(){return Q})),e.d(t,"Eg",(function(){return N})),e.d(t,"Mi",(function(){return X})),e.d(t,"Rd",(function(){return Y})),e.d(t,"Wd",(function(){return H})),e.d(t,"Wg",(function(){return J})),e.d(t,"Xg",(function(){return Z})),e.d(t,"qe",(function(){return $})),e.d(t,"Lh",(function(){return nn})),e.d(t,"Uh",(function(){return tn})),e.d(t,"Oh",(function(){return en})),e.d(t,"Yg",(function(){return rn})),e.d(t,"ph",(function(){return un})),e.d(t,"xk",(function(){return fn})),e.d(t,"b",(function(){return cn})),e.d(t,"mh",(function(){return on})),e.d(t,"Mh",(function(){return _n})),e.d(t,"Th",(function(){return dn})),e.d(t,"nl",(function(){return an})),e.d(t,"yk",(function(){return bn})),e.d(t,"ah",(function(){return gn})),e.d(t,"Rg",(function(){return wn})),e.d(t,"mf",(function(){return sn})),e.d(t,"lf",(function(){return ln})),e.d(t,"af",(function(){return mn})),e.d(t,"Ud",(function(){return pn})),e.d(t,"Cf",(function(){return hn})),e.d(t,"Kh",(function(){return xn})),e.d(t,"Hb",(function(){return yn})),e.d(t,"we",(function(){return Sn})),e.d(t,"of",(function(){return kn})),e.d(t,"ng",(function(){return vn})),e.d(t,"nf",(function(){return Bn})),e.d(t,"Ae",(function(){return Pn})),e.d(t,"eg",(function(){return jn})),e.d(t,"fg",(function(){return In})),e.d(t,"gg",(function(){return An})),e.d(t,"dg",(function(){return Dn})),e.d(t,"Mf",(function(){return Tn})),e.d(t,"Nf",(function(){return Cn})),e.d(t,"Wf",(function(){return Mn})),e.d(t,"Vf",(function(){return Fn})),e.d(t,"Yf",(function(){return En})),e.d(t,"Zf",(function(){return Rn})),e.d(t,"bg",(function(){return Ln})),e.d(t,"cg",(function(){return On})),e.d(t,"ig",(function(){return Gn})),e.d(t,"hg",(function(){return Vn})),e.d(t,"ag",(function(){return Wn})),e.d(t,"rg",(function(){return qn})),e.d(t,"qg",(function(){return zn})),e.d(t,"lg",(function(){return Un})),e.d(t,"Of",(function(){return Kn})),e.d(t,"jg",(function(){return Qn})),e.d(t,"kg",(function(){return Nn})),e.d(t,"Xf",(function(){return Xn})),e.d(t,"Tf",(function(){return Yn})),e.d(t,"Pf",(function(){return Hn})),e.d(t,"Qf",(function(){return Jn})),e.d(t,"Rf",(function(){return Zn})),e.d(t,"Sf",(function(){return $n})),e.d(t,"Uf",(function(){return nt})),e.d(t,"Pd",(function(){return tt})),e.d(t,"cf",(function(){return et})),e.d(t,"wh",(function(){return rt})),e.d(t,"jl",(function(){return ut})),e.d(t,"a",(function(){return ft})),e.d(t,"c",(function(){return ct})),e.d(t,"Ih",(function(){return it})),e.d(t,"Ee",(function(){return ot})),e.d(t,"Td",(function(){return _t})),e.d(t,"Df",(function(){return dt})),e.d(t,"oc",(function(){return at})),e.d(t,"Tb",(function(){return bt})),e.d(t,"Ub",(function(){return gt})),e.d(t,"dc",(function(){return wt})),e.d(t,"jc",(function(){return st})),e.d(t,"Zb",(function(){return lt})),e.d(t,"Xb",(function(){return mt})),e.d(t,"sc",(function(){return pt})),e.d(t,"nc",(function(){return ht})),e.d(t,"gc",(function(){return xt})),e.d(t,"Yb",(function(){return yt})),e.d(t,"ic",(function(){return St})),e.d(t,"cd",(function(){return kt})),e.d(t,"Di",(function(){return vt})),e.d(t,"qh",(function(){return Bt})),e.d(t,"ih",(function(){return Pt})),e.d(t,"Jf",(function(){return jt})),e.d(t,"ek",(function(){return It})),e.d(t,"wc",(function(){return At})),e.d(t,"ed",(function(){return Dt})),e.d(t,"dd",(function(){return Tt})),e.d(t,"me",(function(){return Ct})),e.d(t,"ne",(function(){return Mt})),e.d(t,"Lb",(function(){return Ft})),e.d(t,"Mb",(function(){return Et})),e.d(t,"Rb",(function(){return Rt})),e.d(t,"Sb",(function(){return Lt})),e.d(t,"q",(function(){return Ot})),e.d(t,"Nd",(function(){return Gt})),e.d(t,"s",(function(){return Vt})),e.d(t,"Md",(function(){return Wt})),e.d(t,"zf",(function(){return qt})),e.d(t,"be",(function(){return zt})),e.d(t,"Yd",(function(){return Ut})),e.d(t,"jb",(function(){return Kt})),e.d(t,"ib",(function(){return Qt})),e.d(t,"Gk",(function(){return Nt})),e.d(t,"Ph",(function(){return Xt})),e.d(t,"ae",(function(){return Yt})),e.d(t,"Zd",(function(){return Ht})),e.d(t,"Ek",(function(){return Jt})),e.d(t,"hk",(function(){return Zt})),e.d(t,"Li",(function(){return $t})),e.d(t,"Fk",(function(){return ne})),e.d(t,"Nb",(function(){return te})),e.d(t,"ki",(function(){return ee})),e.d(t,"ei",(function(){return re})),e.d(t,"Zh",(function(){return ue})),e.d(t,"od",(function(){return fe})),e.d(t,"nd",(function(){return ce})),e.d(t,"li",(function(){return ie})),e.d(t,"ai",(function(){return oe})),e.d(t,"ci",(function(){return _e})),e.d(t,"hi",(function(){return de})),e.d(t,"ji",(function(){return ae})),e.d(t,"vi",(function(){return be})),e.d(t,"ti",(function(){return ge})),e.d(t,"Fd",(function(){return we})),e.d(t,"Cd",(function(){return se})),e.d(t,"Ed",(function(){return le})),e.d(t,"Ad",(function(){return me})),e.d(t,"mi",(function(){return pe})),e.d(t,"bi",(function(){return he})),e.d(t,"di",(function(){return xe})),e.d(t,"gi",(function(){return ye})),e.d(t,"ii",(function(){return Se})),e.d(t,"wi",(function(){return ke})),e.d(t,"ui",(function(){return ve})),e.d(t,"Gd",(function(){return Be})),e.d(t,"Bd",(function(){return Pe})),e.d(t,"Dd",(function(){return je})),e.d(t,"zd",(function(){return Ie})),e.d(t,"fi",(function(){return Ae})),e.d(t,"pi",(function(){return De})),e.d(t,"xi",(function(){return Te})),e.d(t,"qi",(function(){return Ce})),e.d(t,"Sd",(function(){return Me})),e.d(t,"Zi",(function(){return Fe})),e.d(t,"uh",(function(){return Ee})),e.d(t,"vh",(function(){return Re})),e.d(t,"il",(function(){return Le})),e.d(t,"Hk",(function(){return Oe})),e.d(t,"ml",(function(){return Ge})),e.d(t,"sf",(function(){return Ve})),e.d(t,"r",(function(){return We})),e.d(t,"v",(function(){return qe})),e.d(t,"C",(function(){return ze})),e.d(t,"G",(function(){return Ue})),e.d(t,"R",(function(){return Ke})),e.d(t,"U",(function(){return Qe})),e.d(t,"X",(function(){return Ne})),e.d(t,"Y",(function(){return Xe})),e.d(t,"kb",(function(){return Ye})),e.d(t,"lb",(function(){return He})),e.d(t,"vb",(function(){return Je})),e.d(t,"Eb",(function(){return Ze})),e.d(t,"Cb",(function(){return $e})),e.d(t,"Fb",(function(){return nr})),e.d(t,"Gb",(function(){return tr})),e.d(t,"Kb",(function(){return er})),e.d(t,"Qb",(function(){return rr})),e.d(t,"hc",(function(){return ur})),e.d(t,"mc",(function(){return fr})),e.d(t,"vc",(function(){return cr})),e.d(t,"Ic",(function(){return ir})),e.d(t,"Lc",(function(){return or})),e.d(t,"Oc",(function(){return _r})),e.d(t,"Sc",(function(){return dr})),e.d(t,"sd",(function(){return ar})),e.d(t,"wd",(function(){return br})),e.d(t,"yd",(function(){return gr})),e.d(t,"Ld",(function(){return wr})),e.d(t,"Vd",(function(){return sr})),e.d(t,"he",(function(){return lr})),e.d(t,"oe",(function(){return mr})),e.d(t,"ze",(function(){return pr})),e.d(t,"Ke",(function(){return hr})),e.d(t,"Re",(function(){return xr})),e.d(t,"Se",(function(){return yr})),e.d(t,"uf",(function(){return Sr})),e.d(t,"xh",(function(){return kr})),e.d(t,"yh",(function(){return vr})),e.d(t,"Ah",(function(){return Br})),e.d(t,"Eh",(function(){return Pr})),e.d(t,"Rh",(function(){return jr})),e.d(t,"Sh",(function(){return Ir})),e.d(t,"aj",(function(){return Ar})),e.d(t,"cj",(function(){return Dr})),e.d(t,"fj",(function(){return Tr})),e.d(t,"gj",(function(){return Cr})),e.d(t,"kj",(function(){return Mr})),e.d(t,"lj",(function(){return Fr})),e.d(t,"hj",(function(){return Er})),e.d(t,"jj",(function(){return Rr})),e.d(t,"mj",(function(){return Lr})),e.d(t,"pj",(function(){return Or})),e.d(t,"oj",(function(){return Gr})),e.d(t,"qj",(function(){return Vr})),e.d(t,"nj",(function(){return Wr})),e.d(t,"rj",(function(){return qr})),e.d(t,"zj",(function(){return zr})),e.d(t,"Aj",(function(){return Ur})),e.d(t,"Cj",(function(){return Kr})),e.d(t,"Ej",(function(){return Qr})),e.d(t,"Fj",(function(){return Nr})),e.d(t,"Ij",(function(){return Xr})),e.d(t,"Jj",(function(){return Yr})),e.d(t,"Mj",(function(){return Hr})),e.d(t,"Pj",(function(){return Jr})),e.d(t,"Qj",(function(){return Zr})),e.d(t,"Rj",(function(){return $r})),e.d(t,"Tj",(function(){return nu})),e.d(t,"Uj",(function(){return tu})),e.d(t,"Vj",(function(){return eu})),e.d(t,"Xj",(function(){return ru})),e.d(t,"Yj",(function(){return uu})),e.d(t,"Zj",(function(){return fu})),e.d(t,"ak",(function(){return cu})),e.d(t,"ck",(function(){return iu})),e.d(t,"dk",(function(){return ou})),e.d(t,"nk",(function(){return _u})),e.d(t,"ok",(function(){return du})),e.d(t,"g",(function(){return au})),e.d(t,"o",(function(){return bu})),e.d(t,"u",(function(){return gu})),e.d(t,"x",(function(){return wu})),e.d(t,"y",(function(){return su})),e.d(t,"A",(function(){return lu})),e.d(t,"D",(function(){return mu})),e.d(t,"H",(function(){return pu})),e.d(t,"L",(function(){return hu})),e.d(t,"J",(function(){return xu})),e.d(t,"P",(function(){return yu})),e.d(t,"N",(function(){return Su})),e.d(t,"tb",(function(){return ku})),e.d(t,"nb",(function(){return vu})),e.d(t,"pb",(function(){return Bu})),e.d(t,"rb",(function(){return Pu})),e.d(t,"zb",(function(){return ju})),e.d(t,"Bb",(function(){return Iu})),e.d(t,"Pb",(function(){return Au})),e.d(t,"Wb",(function(){return Du})),e.d(t,"cc",(function(){return Tu})),e.d(t,"ec",(function(){return Cu})),e.d(t,"kc",(function(){return Mu})),e.d(t,"qc",(function(){return Fu})),e.d(t,"rc",(function(){return Eu})),e.d(t,"Ac",(function(){return Ru})),e.d(t,"Dc",(function(){return Lu})),e.d(t,"Fc",(function(){return Ou})),e.d(t,"Hc",(function(){return Gu})),e.d(t,"Jc",(function(){return Vu})),e.d(t,"Mc",(function(){return Wu})),e.d(t,"Pc",(function(){return qu})),e.d(t,"Xc",(function(){return zu})),e.d(t,"Yc",(function(){return Uu})),e.d(t,"bd",(function(){return Ku})),e.d(t,"kd",(function(){return Qu})),e.d(t,"id",(function(){return Nu})),e.d(t,"td",(function(){return Xu})),e.d(t,"Kd",(function(){return Yu})),e.d(t,"Id",(function(){return Hu})),e.d(t,"de",(function(){return Ju})),e.d(t,"ge",(function(){return Zu})),e.d(t,"je",(function(){return $u})),e.d(t,"ye",(function(){return nf})),e.d(t,"De",(function(){return tf})),e.d(t,"Fe",(function(){return ef})),e.d(t,"Ie",(function(){return rf})),e.d(t,"Me",(function(){return uf})),e.d(t,"Ne",(function(){return ff})),e.d(t,"Pe",(function(){return cf})),e.d(t,"Te",(function(){return of})),e.d(t,"Ff",(function(){return _f})),e.d(t,"dh",(function(){return df})),e.d(t,"hh",(function(){return af})),e.d(t,"Gh",(function(){return bf})),e.d(t,"Vh",(function(){return gf})),e.d(t,"Hi",(function(){return wf})),e.d(t,"Qi",(function(){return sf})),e.d(t,"Ti",(function(){return lf})),e.d(t,"Ri",(function(){return mf})),e.d(t,"Vi",(function(){return pf})),e.d(t,"dj",(function(){return hf})),e.d(t,"wj",(function(){return xf})),e.d(t,"yj",(function(){return yf})),e.d(t,"Kj",(function(){return Sf})),e.d(t,"ik",(function(){return kf})),e.d(t,"pk",(function(){return vf})),e.d(t,"uk",(function(){return Bf})),e.d(t,"tf",(function(){return Pf})),e.d(t,"pd",(function(){return jf})),e.d(t,"Gf",(function(){return If})),e.d(t,"vg",(function(){return Af})),e.d(t,"gd",(function(){return Df})),e.d(t,"gb",(function(){return Tf})),e.d(t,"re",(function(){return Cf})),e.d(t,"Kf",(function(){return Mf})),e.d(t,"Nh",(function(){return Ff})),e.d(t,"fb",(function(){return Ef})),e.d(t,"Jh",(function(){return Rf})),e.d(t,"sb",(function(){return Lf})),e.d(t,"si",(function(){return Of})),e.d(t,"ri",(function(){return Gf})),e.d(t,"T",(function(){return Vf})),e.d(t,"vk",(function(){return Wf})),e.d(t,"e",(function(){return qf})),e.d(t,"le",(function(){return zf})),e.d(t,"ac",(function(){return Uf})),e.d(t,"xe",(function(){return Kf})),e.d(t,"th",(function(){return Qf})),e.d(t,"sh",(function(){return Nf})),e.d(t,"Yh",(function(){return Xf})),e.d(t,"ni",(function(){return Yf})),e.d(t,"ug",(function(){return Hf})),e.d(t,"Xd",(function(){return Jf})),e.d(t,"Yi",(function(){return Zf})),e.d(t,"ce",(function(){return $f})),e.d(t,"W",(function(){return nc})),e.d(t,"V",(function(){return tc})),e.d(t,"Z",(function(){return ec})),e.d(t,"Db",(function(){return rc})),e.d(t,"zh",(function(){return uc})),e.d(t,"bj",(function(){return fc})),e.d(t,"ij",(function(){return cc})),e.d(t,"Bj",(function(){return ic})),e.d(t,"Dj",(function(){return oc})),e.d(t,"Gj",(function(){return _c})),e.d(t,"Hj",(function(){return dc})),e.d(t,"Nj",(function(){return ac})),e.d(t,"Oj",(function(){return bc})),e.d(t,"Sj",(function(){return gc})),e.d(t,"Wj",(function(){return wc})),e.d(t,"bk",(function(){return sc})),e.d(t,"f",(function(){return lc})),e.d(t,"p",(function(){return mc})),e.d(t,"t",(function(){return pc})),e.d(t,"w",(function(){return hc})),e.d(t,"z",(function(){return xc})),e.d(t,"B",(function(){return yc})),e.d(t,"E",(function(){return Sc})),e.d(t,"I",(function(){return kc})),e.d(t,"M",(function(){return vc})),e.d(t,"K",(function(){return Bc})),e.d(t,"Q",(function(){return Pc})),e.d(t,"O",(function(){return jc})),e.d(t,"ub",(function(){return Ic})),e.d(t,"mb",(function(){return Ac})),e.d(t,"ob",(function(){return Dc})),e.d(t,"qb",(function(){return Tc})),e.d(t,"yb",(function(){return Cc})),e.d(t,"Ab",(function(){return Mc})),e.d(t,"Ob",(function(){return Fc})),e.d(t,"Vb",(function(){return Ec})),e.d(t,"bc",(function(){return Rc})),e.d(t,"fc",(function(){return Lc})),e.d(t,"lc",(function(){return Oc})),e.d(t,"pc",(function(){return Gc})),e.d(t,"tc",(function(){return Vc})),e.d(t,"zc",(function(){return Wc})),e.d(t,"Cc",(function(){return qc})),e.d(t,"Ec",(function(){return zc})),e.d(t,"Gc",(function(){return Uc})),e.d(t,"Kc",(function(){return Kc})),e.d(t,"Nc",(function(){return Qc})),e.d(t,"Qc",(function(){return Nc})),e.d(t,"Wc",(function(){return Xc})),e.d(t,"Zc",(function(){return Yc})),e.d(t,"ad",(function(){return Hc})),e.d(t,"jd",(function(){return Jc})),e.d(t,"hd",(function(){return Zc})),e.d(t,"ud",(function(){return $c})),e.d(t,"Jd",(function(){return ni})),e.d(t,"Hd",(function(){return ti})),e.d(t,"ee",(function(){return ei})),e.d(t,"fe",(function(){return ri})),e.d(t,"ke",(function(){return ui})),e.d(t,"Ce",(function(){return fi})),e.d(t,"Ge",(function(){return ci})),e.d(t,"He",(function(){return ii})),e.d(t,"Le",(function(){return oi})),e.d(t,"Oe",(function(){return _i})),e.d(t,"Ue",(function(){return di})),e.d(t,"Ef",(function(){return ai})),e.d(t,"ch",(function(){return bi})),e.d(t,"gh",(function(){return gi})),e.d(t,"Fh",(function(){return wi})),e.d(t,"Wh",(function(){return si})),e.d(t,"Gi",(function(){return li})),e.d(t,"Pi",(function(){return mi})),e.d(t,"Ui",(function(){return pi})),e.d(t,"Si",(function(){return hi})),e.d(t,"Wi",(function(){return xi})),e.d(t,"ej",(function(){return yi})),e.d(t,"vj",(function(){return Si})),e.d(t,"xj",(function(){return ki})),e.d(t,"Lj",(function(){return vi})),e.d(t,"jk",(function(){return Bi})),e.d(t,"qk",(function(){return Pi})),e.d(t,"tk",(function(){return ji})),e.d(t,"Qg",(function(){return Ii})),e.d(t,"Je",(function(){return Ai})),e.d(t,"Dh",(function(){return Di})),e.d(t,"oi",(function(){return Ti})),e.d(t,"Ak",(function(){return Ci})),e.d(t,"ff",(function(){return Mi})),e.d(t,"sk",(function(){return Fi})),e.d(t,"rk",(function(){return Ei})),e.d(t,"zk",(function(){return Ri})),e.d(t,"hf",(function(){return Li})),e.d(t,"vd",(function(){return Oi})),e.d(t,"Ki",(function(){return Gi})),e.d(t,"wg",(function(){return Vi})),e.d(t,"d",(function(){return Wi})),e.d(t,"vf",(function(){return qi})),e.d(t,"eh",(function(){return zi})),e.d(t,"nh",(function(){return Ui})),e.d(t,"fh",(function(){return Ki})),e.d(t,"pe",(function(){return Qi})),e.d(t,"oh",(function(){return Ni})),e.d(t,"mg",(function(){return Xi})),e.d(t,"Lf",(function(){return Yi})),e.d(t,"i",(function(){return Hi})),e.d(t,"Ch",(function(){return Ji})),e.d(t,"xc",(function(){return Zi})),e.d(t,"Ii",(function(){return $i})),e.d(t,"j",(function(){return no})),e.d(t,"pg",(function(){return to})),e.d(t,"cb",(function(){return eo})),e.d(t,"db",(function(){return ro})),e.d(t,"sg",(function(){return uo})),e.d(t,"tg",(function(){return fo})),e.d(t,"Uc",(function(){return co})),e.d(t,"Vc",(function(){return io})),e.d(t,"Tc",(function(){return oo})),e.d(t,"h",(function(){return _o})),e.d(t,"Bh",(function(){return ao})),e.d(t,"pf",(function(){return bo})),e.d(t,"Ck",(function(){return go})),e.d(t,"Ei",(function(){return wo})),e.d(t,"gf",(function(){return so})),e.d(t,"Ci",(function(){return lo})),e.d(t,"ue",(function(){return mo})),e.d(t,"ve",(function(){return po})),e.d(t,"Zg",(function(){return ho})),e.d(t,"Bk",(function(){return xo})),e.d(t,"Fi",(function(){return yo})),e.d(t,"ef",(function(){return So})),e.d(t,"Bi",(function(){return ko})),e.d(t,"se",(function(){return vo})),e.d(t,"te",(function(){return Bo})),e.d(t,"Ag",(function(){return Po})),e.d(t,"ld",(function(){return jo})),e.d(t,"Tg",(function(){return Io})),e.d(t,"Ug",(function(){return Ao})),e.d(t,"fk",(function(){return Do})),e.d(t,"Qe",(function(){return To})),e.d(t,"ie",(function(){return Co})),e.d(t,"Jb",(function(){return Mo})),e.d(t,"fd",(function(){return Fo})),e.d(t,"Bc",(function(){return Eo})),e.d(t,"Qd",(function(){return Ro})),e.d(t,"Od",(function(){return Lo})),e.d(t,"jf",(function(){return Oo})),e.d(t,"If",(function(){return Go})),e.d(t,"wk",(function(){return Vo})),e.d(t,"jh",(function(){return Wo})),e.d(t,"kh",(function(){return qo})),e.d(t,"yg",(function(){return zo})),e.d(t,"wb",(function(){return Uo})),e.d(t,"lh",(function(){return Ko})),e.d(t,"Ni",(function(){return Qo})),e.d(t,"kf",(function(){return No})),e.d(t,"S",(function(){return Xo})),e.d(t,"rf",(function(){return Yo})),e.d(t,"gk",(function(){return Ho})),e.d(t,"Oi",(function(){return Jo})),e.d(t,"df",(function(){return Zo})),e.d(t,"n",(function(){return $o})),e.d(t,"sj",(function(){return n_})),e.d(t,"k",(function(){return t_})),e.d(t,"yc",(function(){return e_})),e.d(t,"Ji",(function(){return r_})),e.d(t,"og",(function(){return u_})),e.d(t,"Hf",(function(){return f_})),e.d(t,"Hh",(function(){return c_})),e.d(t,"yf",(function(){return i_})),e.d(t,"xb",(function(){return o_})),e.d(t,"bh",(function(){return __})),e.d(t,"Ng",(function(){return d_})),e.d(t,"rd",(function(){return a_})),e.d(t,"xd",(function(){return b_})),e.d(t,"mk",(function(){return g_})),e.d(t,"Dg",(function(){return w_})),e.d(t,"m",(function(){return s_})),e.d(t,"zg",(function(){return l_})),e.d(t,"md",(function(){return m_})),e.d(t,"Sg",(function(){return p_})),e.d(t,"l",(function(){return h_})),e.d(t,"Ib",(function(){return x_})),e.d(t,"Ve",(function(){return y_})),e.d(t,"F",(function(){return S_})),e.d(t,"uc",(function(){return k_})),e.d(t,"Rc",(function(){return v_})),e.d(t,"We",(function(){return B_})),e.d(t,"Bf",(function(){return P_})),e.d(t,"xg",(function(){return j_})),e.d(t,"Fg",(function(){return I_})),e.d(t,"Pg",(function(){return A_})),e.d(t,"Og",(function(){return D_})),e.d(t,"qd",(function(){return T_})),e.d(t,"lk",(function(){return C_})),e.d(t,"xf",(function(){return M_})),e.d(t,"Xe",(function(){return F_})),e.d(t,"eb",(function(){return E_})),e.d(t,"Cg",(function(){return R_})),e.d(t,"Xh",(function(){return L_})),e.d(t,"Dk",(function(){return O_})),e.d(t,"Ye",(function(){return G_})),e.d(t,"Ze",(function(){return V_})),e.d(t,"if",(function(){return W_})),e.d(t,"Vg",(function(){return q_})),e.d(t,"rh",(function(){return z_})),e.d(t,"qf",(function(){return U_})),e.d(t,"Be",(function(){return K_})),e.d(t,"wf",(function(){return Q_})),e.d(t,"kk",(function(){return N_})),e.d(t,"Qh",(function(){return X_})),e.d(t,"hb",(function(){return Y_})),e.d(t,"tj",(function(){return H_})),e.d(t,"uj",(function(){return J_})),e.d(t,"ab",(function(){return Z_})),e.d(t,"Hg",(function(){return $_})),e.d(t,"Kg",(function(){return nd})),e.d(t,"Ig",(function(){return td})),e.d(t,"Mg",(function(){return ed})),e.d(t,"Bg",(function(){return rd})),e.d(t,"zi",(function(){return ud})),e.d(t,"Af",(function(){return fd})),e.d(t,"Lg",(function(){return cd})),e.d(t,"Gg",(function(){return id})),e.d(t,"Jg",(function(){return od})),e.d(t,"bb",(function(){return _d})),e.d(t,"bf",(function(){return dd})),e.d(t,"yi",(function(){return ad})),e.d(t,"Xi",(function(){return bd})),e.d(t,"hl",(function(){return gd})),e.d(t,"sl",(function(){return wd})),e.d(t,"ll",(function(){return sd})),e.d(t,"al",(function(){return ld})),e.d(t,"bl",(function(){return md})),e.d(t,"cl",(function(){return pd})),e.d(t,"dl",(function(){return hd})),e.d(t,"el",(function(){return xd})),e.d(t,"fl",(function(){return yd})),e.d(t,"gl",(function(){return Sd})),e.d(t,"Jk",(function(){return kd})),e.d(t,"Kk",(function(){return vd})),e.d(t,"Lk",(function(){return Bd})),e.d(t,"Mk",(function(){return Pd})),e.d(t,"Nk",(function(){return jd})),e.d(t,"Ok",(function(){return Id})),e.d(t,"Pk",(function(){return Ad})),e.d(t,"Qk",(function(){return Dd})),e.d(t,"Rk",(function(){return Td})),e.d(t,"Sk",(function(){return Cd})),e.d(t,"Tk",(function(){return Md})),e.d(t,"Uk",(function(){return Fd})),e.d(t,"Vk",(function(){return Ed})),e.d(t,"Wk",(function(){return Rd})),e.d(t,"Xk",(function(){return Ld})),e.d(t,"Yk",(function(){return Od})),e.d(t,"Zk",(function(){return Gd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=0,d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}let b=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof b.encodeInto?function(n,t){return b.encodeInto(n,t)}:function(n,t){const e=b.encode(n);return t.set(e),{read:n.length,written:e.length}};function w(n,t,e){if(void 0===e){const e=b.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),_=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=g(n,t).written,u=e(u,r,c,1)>>>0}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}function p(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=n,t}let h=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function x(n,t){return n>>>=0,h.decode(a().subarray(n,n+t))}h.decode();let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h499ecdd915dd0e9f(n,t,p(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2fda60bd10970f85(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h487aa796d89c66fa(n,t,p(e),p(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h5366f119659796cb(n,t,p(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hac54f928464ad757(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h674409155c2e9bbc(n,t,p(e),p(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,p(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,p(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,p(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(p(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function z(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return void 0===c(n)}function K(n){return p(c(n))}function Q(n,t){return p(x(n,t))}function N(){return p(new Error)}function X(n,t){const e=w(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Y(n,t){let e,u;try{e=n,u=t,console.error(x(n,t))}finally{r.__wbindgen_free(e,u,1)}}function H(n){return p(fetch(c(n)))}function J(n){return c(n).offsetX}function Z(n){return c(n).offsetY}function $(n){return p(c(n).getCoalescedEvents)}function nn(n){return p(c(n).requestFullscreen)}function tn(n){return p(c(n).scheduler)}function en(n){return p(c(n).requestIdleCallback)}function rn(n){return p(c(n).onpointerrawupdate)}function un(){return p(ResizeObserverEntry.prototype)}function fn(n){const t=c(n).webkitFullscreenElement;return s(t)?0:p(t)}function cn(n){return p(c(n).Window)}function on(n,t,e){return p(c(n).postTask(c(t),c(e)))}function _n(n){return p(c(n).requestFullscreen())}function dn(n){return p(c(n).scheduler)}function an(n){return p(n)}function bn(n){c(n).webkitRequestFullscreen()}function gn(n){return p(c(n).performance)}function wn(n){return c(n).now()}function sn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function mn(n){return p(c(n).gpu)}function pn(n){return p(c(n).features)}function hn(n){return p(c(n).limits)}function xn(n,t){return p(c(n).requestDevice(c(t)))}function yn(n,t){c(n).configure(c(t))}function Sn(n){return p(c(n).getCurrentTexture())}function kn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function vn(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Bn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function Pn(n,t,e){return p(c(n).getMappedRange(t,e))}function jn(n){return c(n).maxTextureDimension1D}function In(n){return c(n).maxTextureDimension2D}function An(n){return c(n).maxTextureDimension3D}function Dn(n){return c(n).maxTextureArrayLayers}function Tn(n){return c(n).maxBindGroups}function Cn(n){return c(n).maxBindingsPerBindGroup}function Mn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Fn(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function En(n){return c(n).maxSampledTexturesPerShaderStage}function Rn(n){return c(n).maxSamplersPerShaderStage}function Ln(n){return c(n).maxStorageBuffersPerShaderStage}function On(n){return c(n).maxStorageTexturesPerShaderStage}function Gn(n){return c(n).maxUniformBuffersPerShaderStage}function Vn(n){return c(n).maxUniformBufferBindingSize}function Wn(n){return c(n).maxStorageBufferBindingSize}function qn(n){return c(n).minUniformBufferOffsetAlignment}function zn(n){return c(n).minStorageBufferOffsetAlignment}function Un(n){return c(n).maxVertexBuffers}function Kn(n){return c(n).maxBufferSize}function Qn(n){return c(n).maxVertexAttributes}function Nn(n){return c(n).maxVertexBufferArrayStride}function Xn(n){return c(n).maxInterStageShaderComponents}function Yn(n){return c(n).maxComputeWorkgroupStorageSize}function Hn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Jn(n){return c(n).maxComputeWorkgroupSizeX}function Zn(n){return c(n).maxComputeWorkgroupSizeY}function $n(n){return c(n).maxComputeWorkgroupSizeZ}function nt(n){return c(n).maxComputeWorkgroupsPerDimension}function tt(n){return p(c(n).error)}function et(n,t,e){return c(n).has(x(t,e))}function rt(n){return p(c(n).queue)}function ut(n){const t=c(n);return"object"==typeof t&&null!==t}function ft(n){return p(c(n).Window)}function ct(n){return p(c(n).WorkerGlobalScope)}function it(n,t){return p(c(n).requestAdapter(c(t)))}function ot(n){return p(c(n).getPreferredCanvasFormat())}function _t(n){return p(c(n).features)}function dt(n){return p(c(n).limits)}function at(n,t){return p(c(n).createShaderModule(c(t)))}function bt(n,t){return p(c(n).createBindGroupLayout(c(t)))}function gt(n,t){return p(c(n).createBindGroup(c(t)))}function wt(n,t){return p(c(n).createPipelineLayout(c(t)))}function st(n,t){return p(c(n).createRenderPipeline(c(t)))}function lt(n,t){return p(c(n).createComputePipeline(c(t)))}function mt(n,t){return p(c(n).createBuffer(c(t)))}function pt(n,t){return p(c(n).createTexture(c(t)))}function ht(n,t){return p(c(n).createSampler(c(t)))}function xt(n,t){return p(c(n).createQuerySet(c(t)))}function yt(n,t){return p(c(n).createCommandEncoder(c(t)))}function St(n,t){return p(c(n).createRenderBundleEncoder(c(t)))}function kt(n){c(n).destroy()}function vt(n,t){c(n).onuncapturederror=c(t)}function Bt(n,t){c(n).pushErrorScope(o(t))}function Pt(n){return p(c(n).popErrorScope())}function jt(n,t,e,r){return p(c(n).mapAsync(t>>>0,e,r))}function It(n){c(n).unmap()}function At(n,t){return p(c(n).createView(c(t)))}function Dt(n){c(n).destroy()}function Tt(n){c(n).destroy()}function Ct(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Mt(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Ft(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Et(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Lt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Ot(n,t){return p(c(n).beginComputePass(c(t)))}function Gt(n){c(n).end()}function Vt(n,t){return p(c(n).beginRenderPass(c(t)))}function Wt(n){c(n).end()}function qt(n,t){const e=w(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function zt(n,t){return p(c(n).finish(c(t)))}function Ut(n){return p(c(n).finish())}function Kt(n,t,e){c(n).clearBuffer(c(t),e)}function Qt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Nt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Xt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Yt(n){return p(c(n).finish())}function Ht(n,t){return p(c(n).finish(c(t)))}function Jt(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Zt(n){return c(n).usage}function $t(n){return c(n).size}function ne(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function te(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function ee(n,t){c(n).setPipeline(c(t))}function re(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function ue(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function fe(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function ce(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function ie(n,t){c(n).setPipeline(c(t))}function oe(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function _e(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function de(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function ae(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function be(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ge(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function we(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function se(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function le(n,t,e){c(n).drawIndirect(c(t),e)}function me(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function pe(n,t){c(n).setPipeline(c(t))}function he(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function xe(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ye(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Se(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ke(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ve(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Be(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Pe(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function je(n,t,e){c(n).drawIndirect(c(t),e)}function Ie(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ae(n,t){c(n).setBlendConstant(c(t))}function De(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Te(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Ce(n,t){c(n).setStencilReference(t>>>0)}function Me(n,t){c(n).executeBundles(c(t))}function Fe(n,t){c(n).submit(c(t))}function Ee(n){queueMicrotask(c(n))}function Re(n){return p(c(n).queueMicrotask)}function Le(n){return"function"==typeof c(n)}function Oe(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Ge(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function Ve(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function We(n,t,e){c(n).beginQuery(t>>>0,c(e))}function qe(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function ze(n,t,e){c(n).bindSampler(t>>>0,c(e))}function Ue(n,t){c(n).bindVertexArray(c(t))}function Ke(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function Qe(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ne(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Xe(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Ye(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function He(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function Je(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Ze(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function $e(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function nr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function tr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function er(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function rr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function ur(n){const t=c(n).createQuery();return s(t)?0:p(t)}function fr(n){const t=c(n).createSampler();return s(t)?0:p(t)}function cr(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function ir(n,t){c(n).deleteQuery(c(t))}function or(n,t){c(n).deleteSampler(c(t))}function _r(n,t){c(n).deleteSync(c(t))}function dr(n,t){c(n).deleteVertexArray(c(t))}function ar(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function br(n,t){c(n).drawBuffers(c(t))}function gr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function wr(n,t){c(n).endQuery(t>>>0)}function sr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return s(r)?0:p(r)}function lr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function mr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function pr(){return O((function(n,t,e){return p(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function hr(n,t,e){return p(c(n).getQueryParameter(c(t),e>>>0))}function xr(n,t,e){return p(c(n).getSyncParameter(c(t),e>>>0))}function yr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),x(e,r))}function Sr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function kr(n,t){c(n).readBuffer(t>>>0)}function vr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Br(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Pr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function jr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Ir(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Ar(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Dr(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Tr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Cr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Wr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function qr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function zr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function Ur(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function Kr(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function Qr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Nr(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Xr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Yr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Hr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Jr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Zr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function $r(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function nu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function cu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function iu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function ou(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function _u(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function du(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function au(n,t){c(n).activeTexture(t>>>0)}function bu(n,t,e){c(n).attachShader(c(t),c(e))}function gu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function wu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function su(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function lu(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function mu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function pu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function hu(n,t){c(n).blendEquation(t>>>0)}function xu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function yu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Su(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ku(n,t){c(n).clear(t>>>0)}function vu(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Bu(n,t){c(n).clearDepth(t)}function Pu(n,t){c(n).clearStencil(t)}function ju(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Iu(n,t){c(n).compileShader(c(t))}function Au(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Du(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function Tu(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Cu(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Mu(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Fu(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Eu(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Ru(n,t){c(n).cullFace(t>>>0)}function Lu(n,t){c(n).deleteBuffer(c(t))}function Ou(n,t){c(n).deleteFramebuffer(c(t))}function Gu(n,t){c(n).deleteProgram(c(t))}function Vu(n,t){c(n).deleteRenderbuffer(c(t))}function Wu(n,t){c(n).deleteShader(c(t))}function qu(n,t){c(n).deleteTexture(c(t))}function zu(n,t){c(n).depthFunc(t>>>0)}function Uu(n,t){c(n).depthMask(0!==t)}function Ku(n,t,e){c(n).depthRange(t,e)}function Qu(n,t){c(n).disable(t>>>0)}function Nu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Xu(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Yu(n,t){c(n).enable(t>>>0)}function Hu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ju(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Zu(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function $u(n,t){c(n).frontFace(t>>>0)}function nf(){return O((function(n,t,e){const r=c(n).getExtension(x(t,e));return s(r)?0:p(r)}),arguments)}function tf(){return O((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function ef(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function rf(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function uf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function ff(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function cf(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function of(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function _f(n,t){c(n).linkProgram(c(t))}function df(n,t,e){c(n).pixelStorei(t>>>0,e)}function af(n,t,e){c(n).polygonOffset(t,e)}function bf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function gf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function wf(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function sf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function lf(n,t){c(n).stencilMask(t>>>0)}function mf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function pf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function hf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function xf(n,t,e){c(n).uniform1f(c(t),e)}function yf(n,t,e){c(n).uniform1i(c(t),e)}function Sf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function kf(n,t){c(n).useProgram(c(t))}function vf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Bf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Pf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function jf(n){const t=c(n).document;return s(t)?0:p(t)}function If(n){return p(c(n).location)}function Af(n){return p(c(n).navigator)}function Df(n){return c(n).devicePixelRatio}function Tf(n,t){c(n).cancelIdleCallback(t>>>0)}function Cf(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return s(e)?0:p(e)}),arguments)}function Mf(){return O((function(n,t,e){const r=c(n).matchMedia(x(t,e));return s(r)?0:p(r)}),arguments)}function Ff(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Ef(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Rf(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Lf(n,t){c(n).clearTimeout(t)}function Of(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Gf(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Vf(n){const t=c(n).body;return s(t)?0:p(t)}function Wf(n){return p(c(n).visibilityState)}function qf(n){const t=c(n).activeElement;return s(t)?0:p(t)}function zf(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Uf(){return O((function(n,t,e){return p(c(n).createElement(x(t,e)))}),arguments)}function Kf(n,t,e){const r=c(n).getElementById(x(t,e));return s(r)?0:p(r)}function Qf(){return O((function(n,t,e){const r=c(n).querySelector(x(t,e));return s(r)?0:p(r)}),arguments)}function Nf(){return O((function(n,t,e){return p(c(n).querySelectorAll(x(t,e)))}),arguments)}function Xf(){return O((function(n,t,e,r,u){c(n).setAttribute(x(t,e),x(r,u))}),arguments)}function Yf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Hf(n){return p(c(n).navigator)}function Jf(n,t){return p(c(n).fetch(c(t)))}function Zf(n){return p(c(n).style)}function $f(){return O((function(n){c(n).focus()}),arguments)}function nc(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function tc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function ec(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function rc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function uc(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function fc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function cc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function ic(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function oc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function _c(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function dc(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function ac(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function bc(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function gc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function wc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function sc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function lc(n,t){c(n).activeTexture(t>>>0)}function mc(n,t,e){c(n).attachShader(c(t),c(e))}function pc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function hc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function xc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function yc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Sc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function kc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function vc(n,t){c(n).blendEquation(t>>>0)}function Bc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Pc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function jc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ic(n,t){c(n).clear(t>>>0)}function Ac(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Dc(n,t){c(n).clearDepth(t)}function Tc(n,t){c(n).clearStencil(t)}function Cc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Mc(n,t){c(n).compileShader(c(t))}function Fc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Ec(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function Rc(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Lc(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Oc(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Gc(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Vc(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Wc(n,t){c(n).cullFace(t>>>0)}function qc(n,t){c(n).deleteBuffer(c(t))}function zc(n,t){c(n).deleteFramebuffer(c(t))}function Uc(n,t){c(n).deleteProgram(c(t))}function Kc(n,t){c(n).deleteRenderbuffer(c(t))}function Qc(n,t){c(n).deleteShader(c(t))}function Nc(n,t){c(n).deleteTexture(c(t))}function Xc(n,t){c(n).depthFunc(t>>>0)}function Yc(n,t){c(n).depthMask(0!==t)}function Hc(n,t,e){c(n).depthRange(t,e)}function Jc(n,t){c(n).disable(t>>>0)}function Zc(n,t){c(n).disableVertexAttribArray(t>>>0)}function $c(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ni(n,t){c(n).enable(t>>>0)}function ti(n,t){c(n).enableVertexAttribArray(t>>>0)}function ei(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ri(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function ui(n,t){c(n).frontFace(t>>>0)}function fi(){return O((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function ci(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function ii(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function oi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function _i(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function di(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function ai(n,t){c(n).linkProgram(c(t))}function bi(n,t,e){c(n).pixelStorei(t>>>0,e)}function gi(n,t,e){c(n).polygonOffset(t,e)}function wi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function si(n,t,e,r,u){c(n).scissor(t,e,r,u)}function li(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function mi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function pi(n,t){c(n).stencilMask(t>>>0)}function hi(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function xi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yi(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Si(n,t,e){c(n).uniform1f(c(t),e)}function ki(n,t,e){c(n).uniform1i(c(t),e)}function vi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Bi(n,t){c(n).useProgram(c(t))}function Pi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function ji(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ii(n){return c(n).now()}function Ai(){return O((function(n,t,e,u){const f=w(c(t).getPropertyValue(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Di(){return O((function(n,t,e,u){const f=w(c(t).removeProperty(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Ti(){return O((function(n,t,e,r,u){c(n).setProperty(x(t,e),x(r,u))}),arguments)}function Ci(n){return c(n).width}function Mi(n){return c(n).height}function Fi(n){return c(n).videoWidth}function Ei(n){return c(n).videoHeight}function Ri(n){return c(n).width}function Li(n){return c(n).height}function Oi(n,t){c(n).drawBuffersWEBGL(c(t))}function Gi(n){return p(c(n).signal)}function Vi(){return O((function(){return p(new AbortController)}),arguments)}function Wi(n){c(n).abort()}function qi(n){return c(n).isIntersecting}function zi(n){return c(n).pointerId}function Ui(n){return c(n).pressure}function Ki(n,t){const e=w(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Qi(n){return p(c(n).getCoalescedEvents())}function Ni(n){c(n).preventDefault()}function Xi(n,t){const e=w(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Yi(n){return c(n).matches}function Hi(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Ji(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Zi(n){return c(n).ctrlKey}function $i(n){return c(n).shiftKey}function no(n){return c(n).altKey}function to(n){return c(n).metaKey}function eo(n){return c(n).button}function ro(n){return c(n).buttons}function uo(n){return c(n).movementX}function fo(n){return c(n).movementY}function co(n){return c(n).deltaX}function io(n){return c(n).deltaY}function oo(n){return c(n).deltaMode}function _o(){return O((function(n,t,e,r){c(n).addEventListener(x(t,e),c(r))}),arguments)}function ao(){return O((function(n,t,e,r){c(n).removeEventListener(x(t,e),c(r))}),arguments)}function bo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function go(n){return c(n).width}function wo(n,t){c(n).width=t>>>0}function so(n){return c(n).height}function lo(n,t){c(n).height=t>>>0}function mo(){return O((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function po(){return O((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function ho(){return O((function(n,t){const e=w(c(t).origin,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}),arguments)}function xo(n){return c(n).width}function yo(n,t){c(n).width=t>>>0}function So(n){return c(n).height}function ko(n,t){c(n).height=t>>>0}function vo(){return O((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function Bo(){return O((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function Po(){return O((function(n){return p(new ResizeObserver(c(n)))}),arguments)}function jo(n){c(n).disconnect()}function Io(n,t){c(n).observe(c(t))}function Ao(n,t,e){c(n).observe(c(t),c(e))}function Do(n,t){c(n).unobserve(c(t))}function To(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function Co(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Mo(n){return p(c(n).contentRect)}function Fo(n){return p(c(n).devicePixelContentBoxSize)}function Eo(n){console.debug(c(n))}function Ro(n){console.error(c(n))}function Lo(n,t){console.error(c(n),c(t))}function Oo(n){console.info(c(n))}function Go(n){console.log(c(n))}function Vo(n){console.warn(c(n))}function Wo(n){return p(c(n).port1)}function qo(n){return p(c(n).port2)}function zo(){return O((function(){return p(new MessageChannel)}),arguments)}function Uo(n){c(n).close()}function Ko(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Qo(n){c(n).start()}function No(n){return c(n).inlineSize}function Xo(n){return c(n).blockSize}function Yo(n){let t;try{t=c(n)instanceof Response}catch(n){t=!1}return t}function Ho(n,t){const e=w(c(t).url,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Jo(n){return c(n).status}function Zo(n){return p(c(n).headers)}function $o(){return O((function(n){return p(c(n).arrayBuffer())}),arguments)}function n_(){return O((function(n){return p(c(n).text())}),arguments)}function t_(n){return c(n).altKey}function e_(n){return c(n).ctrlKey}function r_(n){return c(n).shiftKey}function u_(n){return c(n).metaKey}function f_(n){return c(n).location}function c_(n){return c(n).repeat}function i_(n,t){const e=w(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function o_(n,t){const e=w(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function __(n){return c(n).persisted}function d_(){return O((function(n,t,e){return p(new Request(x(n,t),c(e)))}),arguments)}function a_(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function b_(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function g_(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function w_(){return O((function(){return p(new Headers)}),arguments)}function s_(){return O((function(n,t,e,r,u){c(n).append(x(t,e),x(r,u))}),arguments)}function l_(){return O((function(n){return p(new IntersectionObserver(c(n)))}),arguments)}function m_(n){c(n).disconnect()}function p_(n,t){c(n).observe(c(t))}function h_(){return O((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function x_(n,t){return c(n).contains(c(t))}function y_(n,t){const e=c(n)[t>>>0];return s(e)?0:p(e)}function S_(n,t){c(n).bindVertexArrayOES(c(t))}function k_(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function v_(n,t){c(n).deleteVertexArrayOES(c(t))}function B_(n,t){return p(c(n)[t>>>0])}function P_(n){return c(n).length}function j_(){return p(new Array)}function I_(n,t){return p(new Function(x(n,t)))}function A_(n){return p(c(n).next)}function D_(){return O((function(n){return p(c(n).next())}),arguments)}function T_(n){return c(n).done}function C_(n){return p(c(n).value)}function M_(){return p(Symbol.iterator)}function F_(){return O((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function E_(){return O((function(n,t){return p(c(n).call(c(t)))}),arguments)}function R_(){return p(new Object)}function L_(){return O((function(){return p(self.self)}),arguments)}function O_(){return O((function(){return p(window.window)}),arguments)}function G_(){return O((function(){return p(globalThis.globalThis)}),arguments)}function V_(){return O((function(){return p(global.global)}),arguments)}function W_(n,t,e){return c(n).includes(c(t),e)}function q_(n){return p(Array.of(c(n)))}function z_(n,t){return c(n).push(c(t))}function U_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function K_(n,t){return p(Object.getOwnPropertyDescriptor(c(n),c(t)))}function Q_(n,t){return Object.is(c(n),c(t))}function N_(n){return p(c(n).valueOf())}function X_(n){return p(Promise.resolve(c(n)))}function Y_(n,t){return p(c(n).catch(c(t)))}function H_(n,t){return p(c(n).then(c(t)))}function J_(n,t,e){return p(c(n).then(c(t),c(e)))}function Z_(n){return p(c(n).buffer)}function $_(n,t,e){return p(new Int8Array(c(n),t>>>0,e>>>0))}function nd(n,t,e){return p(new Int16Array(c(n),t>>>0,e>>>0))}function td(n,t,e){return p(new Int32Array(c(n),t>>>0,e>>>0))}function ed(n,t,e){return p(new Uint8Array(c(n),t>>>0,e>>>0))}function rd(n){return p(new Uint8Array(c(n)))}function ud(n,t,e){c(n).set(c(t),e>>>0)}function fd(n){return c(n).length}function cd(n,t,e){return p(new Uint16Array(c(n),t>>>0,e>>>0))}function id(n,t,e){return p(new Uint32Array(c(n),t>>>0,e>>>0))}function od(n,t,e){return p(new Float32Array(c(n),t>>>0,e>>>0))}function _d(n){return p(c(n).buffer)}function dd(){return O((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function ad(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function bd(){return O((function(n){return p(JSON.stringify(c(n)))}),arguments)}function gd(n,t){const e=w(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=_;m()[n/4+1]=u,m()[n/4+0]=e}function wd(n,t){throw new Error(x(n,t))}function sd(){return p(r.memory)}function ld(n,t,e){return p(k(n,t,49,v))}function md(n,t,e){return p(k(n,t,49,B))}function pd(n,t,e){return p(k(n,t,49,v))}function hd(n,t,e){return p(k(n,t,49,P))}function xd(n,t,e){return p(k(n,t,49,v))}function yd(n,t,e){return p(k(n,t,49,v))}function Sd(n,t,e){return p(k(n,t,49,v))}function kd(n,t,e){return p(k(n,t,282,j))}function vd(n,t,e){return p(k(n,t,282,j))}function Bd(n,t,e){return p(k(n,t,282,j))}function Pd(n,t,e){return p(k(n,t,282,j))}function jd(n,t,e){return p(k(n,t,282,I))}function Id(n,t,e){return p(k(n,t,282,j))}function Ad(n,t,e){return p(k(n,t,282,A))}function Dd(n,t,e){return p(k(n,t,900,D))}function Td(n,t,e){return p(k(n,t,900,D))}function Cd(n,t,e){return p(k(n,t,900,D))}function Md(n,t,e){return p(k(n,t,900,T))}function Fd(n,t,e){return p(k(n,t,900,D))}function Ed(n,t,e){return p(k(n,t,900,D))}function Rd(n,t,e){return p(k(n,t,900,D))}function Ld(n,t,e){return p(k(n,t,2035,C))}function Od(n,t,e){return p(k(n,t,2035,C))}function Gd(n,t,e){return p(k(n,t,2129,M))}}).call(this,e(260)(n))},409:function(n,t,e){"use strict";e.r(t);var r=e(410),u=e(244);e.d(t,"__wbg_set_wasm",(function(){return u.Ai})),e.d(t,"run",(function(){return u.tl})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.pl})),e.d(t,"__wbindgen_string_get",(function(){return u.ql})),e.d(t,"__wbindgen_cb_drop",(function(){return u.Ik})),e.d(t,"__wbindgen_is_undefined",(function(){return u.kl})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.ol})),e.d(t,"__wbindgen_string_new",(function(){return u.rl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Eg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Mi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Rd})),e.d(t,"__wbg_fetch_386f87a3ebf5003c",(function(){return u.Wd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Wg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Xg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.qe})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Lh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Uh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Oh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Yg})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.ph})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.xk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.mh})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Mh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Th})),e.d(t,"__wbindgen_number_new",(function(){return u.nl})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.yk})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.ah})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Rg})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.mf})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.lf})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.af})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Ud})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.Cf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.Kh})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Hb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.we})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.of})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.ng})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.nf})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.Ae})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.eg})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.fg})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.gg})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.dg})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Mf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Nf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Wf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Vf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Yf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Zf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.bg})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.cg})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.ig})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.hg})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.ag})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.rg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.qg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.lg})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Of})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.jg})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.kg})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Xf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.Tf})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Pf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Qf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Rf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Sf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Uf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Pd})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.cf})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.wh})),e.d(t,"__wbindgen_is_object",(function(){return u.jl})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.Ih})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.Ee})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Td})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.Df})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.oc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Tb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Ub})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.dc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.jc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Zb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Xb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.sc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.nc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.gc})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Yb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.ic})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.cd})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.Di})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.qh})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.ih})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.Jf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.ek})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.wc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.ed})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.dd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.me})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ne})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Lb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Mb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Rb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Sb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.q})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Nd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.s})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Md})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.zf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.be})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Yd})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.jb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.ib})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.Gk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.Ph})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.ae})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Zd})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.Ek})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.hk})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.Li})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.Fk})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Nb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.ki})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.ei})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Zh})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.od})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.nd})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.li})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.ai})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.ci})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.hi})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.ji})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.vi})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.ti})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Fd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.Cd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Ed})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.Ad})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.mi})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.bi})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.di})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.gi})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.ii})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.wi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.ui})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Gd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.Bd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.zd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.fi})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.pi})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.xi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.qi})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Sd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Zi})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.uh})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.vh})),e.d(t,"__wbindgen_is_function",(function(){return u.il})),e.d(t,"__wbindgen_boolean_get",(function(){return u.Hk})),e.d(t,"__wbindgen_number_get",(function(){return u.ml})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.sf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.r})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.v})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.C})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.G})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.R})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.U})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.X})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.Y})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.kb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.lb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.vb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Eb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Fb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Gb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Kb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Qb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.hc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.mc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.vc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Ic})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Lc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Oc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Sc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.sd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.wd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.yd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Ld})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Vd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.he})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.oe})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ze})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Ke})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Re})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Se})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.uf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.xh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.yh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.Ah})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.Eh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Rh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Sh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.aj})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.cj})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.fj})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.gj})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.kj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.lj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.hj})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.jj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.mj})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.pj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.oj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.qj})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.nj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.rj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.zj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.Aj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.Cj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.Ej})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.Fj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Ij})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Jj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Mj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Pj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Qj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Tj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Vj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Xj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Yj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Zj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.ak})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.ck})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.dk})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.nk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.ok})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.o})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.u})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.x})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.y})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.A})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.D})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.H})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.L})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.J})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.P})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.N})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.tb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.nb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.pb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.rb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.zb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.Bb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Pb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Wb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.cc})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.ec})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.kc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.qc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.rc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.Ac})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Dc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Fc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Hc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Jc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Mc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Pc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Xc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Yc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.bd})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.kd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.id})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.td})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Kd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Id})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.de})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ge})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.je})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.ye})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.De})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Fe})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.Ie})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.Me})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ne})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Pe})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Te})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.Ff})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.dh})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.hh})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Gh})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Vh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Hi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Qi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Ti})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Ri})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Vi})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.dj})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.wj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.yj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Kj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.ik})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.pk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.uk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.tf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.pd})),e.d(t,"__wbg_location_2951b5ee34f19221",(function(){return u.Gf})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.vg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.gd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.gb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.re})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Kf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Nh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.fb})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Jh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.sb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.si})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.ri})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.T})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.vk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.le})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.ac})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.xe})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.th})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.sh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Yh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.ni})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.ug})),e.d(t,"__wbg_fetch_921fad6ef9e883dd",(function(){return u.Xd})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Yi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.ce})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.W})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.Z})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Db})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.zh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.bj})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.ij})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.Bj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.Dj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.Gj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.Hj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Nj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Oj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Wj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.bk})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.p})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.t})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.w})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.z})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.B})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.E})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.I})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.M})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.K})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.Q})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.O})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.ub})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.mb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.ob})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.qb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.yb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.Ab})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Ob})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Vb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.bc})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.fc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.lc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.pc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.tc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.zc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Cc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Ec})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Gc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Kc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Nc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Qc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Wc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Zc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.ad})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.jd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.hd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.ud})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Jd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Hd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.ee})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.fe})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ke})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.Ce})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Ge})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.He})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Le})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Oe})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Ue})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.Ef})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.ch})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.gh})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.Fh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Wh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Gi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Pi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ui})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Si})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Wi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.ej})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.vj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.xj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Lj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.jk})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.qk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.tk})),e.d(t,"__wbg_now_4e659b3d15f470d9",(function(){return u.Qg})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Je})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Dh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.oi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.Ak})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.ff})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.sk})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.rk})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.zk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.hf})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.vd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ki})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.wg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.vf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.eh})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.nh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.fh})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.pe})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.oh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.mg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Lf})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Ch})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.xc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ii})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.pg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.cb})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.db})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.sg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.tg})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Uc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Vc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Tc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Bh})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.pf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.Ck})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.Ei})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.gf})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.Ci})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.ue})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.ve})),e.d(t,"__wbg_origin_ee93e29ace71f568",(function(){return u.Zg})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.Bk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.Fi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.ef})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.Bi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.se})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.te})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.Ag})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.ld})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Tg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Ug})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.fk})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Qe})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ie})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Jb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.fd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.Bc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Qd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Od})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.jf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.If})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.wk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.jh})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.kh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.yg})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.wb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.lh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Ni})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.kf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.S})),e.d(t,"__wbg_instanceof_Response_849eb93e75734b6e",(function(){return u.rf})),e.d(t,"__wbg_url_5f6dc4009ac5f99d",(function(){return u.gk})),e.d(t,"__wbg_status_61a01141acd3cf74",(function(){return u.Oi})),e.d(t,"__wbg_headers_9620bfada380764a",(function(){return u.df})),e.d(t,"__wbg_arrayBuffer_29931d52c7206b02",(function(){return u.n})),e.d(t,"__wbg_text_450a059667fd91fd",(function(){return u.sj})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.yc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Ji})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.og})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.Hf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Hh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.yf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.xb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.bh})),e.d(t,"__wbg_newwithstrandinit_3fd6fba4083ff2d0",(function(){return u.Ng})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.rd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.xd})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.mk})),e.d(t,"__wbg_new_ab6fd82b10560829",(function(){return u.Dg})),e.d(t,"__wbg_append_7bfcb4937d1d5e29",(function(){return u.m})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.zg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.md})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Sg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Ib})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Ve})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.F})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.uc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Rc})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.We})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.Bf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.xg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Fg})),e.d(t,"__wbg_next_40fc327bfc8770e6",(function(){return u.Pg})),e.d(t,"__wbg_next_196c84450b364254",(function(){return u.Og})),e.d(t,"__wbg_done_298b57d23c0fc80c",(function(){return u.qd})),e.d(t,"__wbg_value_d93c65011f51a456",(function(){return u.lk})),e.d(t,"__wbg_iterator_2cee6dadfd956dfa",(function(){return u.xf})),e.d(t,"__wbg_get_e3c254076557e348",(function(){return u.Xe})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.eb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Cg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Xh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.Dk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Ye})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Ze})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.if})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Vg})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.rh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.qf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Be})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.wf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.kk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Qh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.hb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.tj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.uj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.ab})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Kg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Mg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.Bg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.zi})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.Af})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Lg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Gg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Jg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.bb})),e.d(t,"__wbg_has_0af94d20077affa2",(function(){return u.bf})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.yi})),e.d(t,"__wbg_stringify_8887fe74e1c50d81",(function(){return u.Xi})),e.d(t,"__wbindgen_debug_string",(function(){return u.hl})),e.d(t,"__wbindgen_throw",(function(){return u.sl})),e.d(t,"__wbindgen_memory",(function(){return u.ll})),e.d(t,"__wbindgen_closure_wrapper634",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper635",(function(){return u.bl})),e.d(t,"__wbindgen_closure_wrapper636",(function(){return u.cl})),e.d(t,"__wbindgen_closure_wrapper637",(function(){return u.dl})),e.d(t,"__wbindgen_closure_wrapper638",(function(){return u.el})),e.d(t,"__wbindgen_closure_wrapper639",(function(){return u.fl})),e.d(t,"__wbindgen_closure_wrapper640",(function(){return u.gl})),e.d(t,"__wbindgen_closure_wrapper1094",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper1095",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper1096",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper1097",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper1098",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper1099",(function(){return u.Ok})),e.d(t,"__wbindgen_closure_wrapper1100",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper2507",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper2508",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper2509",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper2510",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper2511",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper2512",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper2513",(function(){return u.Wk})),e.d(t,"__wbindgen_closure_wrapper4531",(function(){return u.Xk})),e.d(t,"__wbindgen_closure_wrapper4533",(function(){return u.Yk})),e.d(t,"__wbindgen_closure_wrapper5304",(function(){return u.Zk})),Object(u.Ai)(r),r.__wbindgen_start()},410:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(244);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/28.4840bd07.js b/assets/js/28.4840bd07.js new file mode 100644 index 000000000..cc51f04b3 --- /dev/null +++ b/assets/js/28.4840bd07.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{256:function(n,t,e){"use strict";(function(n){e.d(t,"gc",(function(){return u})),e.d(t,"Uc",(function(){return M})),e.d(t,"Qc",(function(){return R})),e.d(t,"Nc",(function(){return x})),e.d(t,"vc",(function(){return I})),e.d(t,"Pc",(function(){return K})),e.d(t,"Sc",(function(){return P})),e.d(t,"rb",(function(){return S})),e.d(t,"kc",(function(){return j})),e.d(t,"J",(function(){return z})),e.d(t,"xb",(function(){return L})),e.d(t,"yb",(function(){return W})),e.d(t,"a",(function(){return D})),e.d(t,"rc",(function(){return B})),e.d(t,"Kb",(function(){return X})),e.d(t,"Yb",(function(){return Y})),e.d(t,"N",(function(){return J})),e.d(t,"Sb",(function(){return N})),e.d(t,"Vb",(function(){return U})),e.d(t,"zb",(function(){return G})),e.d(t,"sc",(function(){return H})),e.d(t,"Tb",(function(){return Q})),e.d(t,"Xb",(function(){return V})),e.d(t,"Hb",(function(){return $})),e.d(t,"Oc",(function(){return Z})),e.d(t,"Mb",(function(){return nn})),e.d(t,"Lb",(function(){return tn})),e.d(t,"Mc",(function(){return en})),e.d(t,"Y",(function(){return rn})),e.d(t,"G",(function(){return un})),e.d(t,"D",(function(){return cn})),e.d(t,"o",(function(){return _n})),e.d(t,"O",(function(){return on})),e.d(t,"fb",(function(){return fn})),e.d(t,"Ub",(function(){return dn})),e.d(t,"n",(function(){return bn})),e.d(t,"Rb",(function(){return an})),e.d(t,"q",(function(){return sn})),e.d(t,"ec",(function(){return ln})),e.d(t,"dc",(function(){return wn})),e.d(t,"j",(function(){return gn})),e.d(t,"pc",(function(){return pn})),e.d(t,"c",(function(){return mn})),e.d(t,"L",(function(){return yn})),e.d(t,"v",(function(){return hn})),e.d(t,"P",(function(){return vn})),e.d(t,"ac",(function(){return kn})),e.d(t,"bc",(function(){return Cn})),e.d(t,"mc",(function(){return En})),e.d(t,"K",(function(){return Fn})),e.d(t,"R",(function(){return On})),e.d(t,"Pb",(function(){return Tn})),e.d(t,"cc",(function(){return qn})),e.d(t,"ob",(function(){return Mn})),e.d(t,"F",(function(){return An})),e.d(t,"ub",(function(){return Rn})),e.d(t,"h",(function(){return xn})),e.d(t,"t",(function(){return In})),e.d(t,"Rc",(function(){return Kn})),e.d(t,"Eb",(function(){return Pn})),e.d(t,"Fb",(function(){return Sn})),e.d(t,"nb",(function(){return jn})),e.d(t,"Z",(function(){return zn})),e.d(t,"u",(function(){return Ln})),e.d(t,"C",(function(){return Wn})),e.d(t,"X",(function(){return Dn})),e.d(t,"i",(function(){return Bn})),e.d(t,"y",(function(){return Xn})),e.d(t,"I",(function(){return Yn})),e.d(t,"H",(function(){return Jn})),e.d(t,"W",(function(){return Nn})),e.d(t,"eb",(function(){return Un})),e.d(t,"qc",(function(){return Gn})),e.d(t,"jc",(function(){return Hn})),e.d(t,"mb",(function(){return Qn})),e.d(t,"b",(function(){return Vn})),e.d(t,"r",(function(){return $n})),e.d(t,"Gb",(function(){return Zn})),e.d(t,"lc",(function(){return nt})),e.d(t,"tc",(function(){return tt})),e.d(t,"V",(function(){return et})),e.d(t,"g",(function(){return rt})),e.d(t,"x",(function(){return ut})),e.d(t,"ic",(function(){return ct})),e.d(t,"ib",(function(){return _t})),e.d(t,"db",(function(){return ot})),e.d(t,"Qb",(function(){return it})),e.d(t,"bb",(function(){return ft})),e.d(t,"s",(function(){return dt})),e.d(t,"Bb",(function(){return bt})),e.d(t,"d",(function(){return at})),e.d(t,"Nb",(function(){return st})),e.d(t,"pb",(function(){return lt})),e.d(t,"E",(function(){return wt})),e.d(t,"vb",(function(){return gt})),e.d(t,"wb",(function(){return pt})),e.d(t,"oc",(function(){return mt})),e.d(t,"A",(function(){return yt})),e.d(t,"B",(function(){return ht})),e.d(t,"z",(function(){return vt})),e.d(t,"Jb",(function(){return kt})),e.d(t,"hb",(function(){return Ct})),e.d(t,"gb",(function(){return Et})),e.d(t,"e",(function(){return Ft})),e.d(t,"Ob",(function(){return Ot})),e.d(t,"w",(function(){return Tt})),e.d(t,"hc",(function(){return qt})),e.d(t,"f",(function(){return Mt})),e.d(t,"jb",(function(){return At})),e.d(t,"k",(function(){return Rt})),e.d(t,"l",(function(){return xt})),e.d(t,"kb",(function(){return It})),e.d(t,"lb",(function(){return Kt})),e.d(t,"Cb",(function(){return Pt})),e.d(t,"Ib",(function(){return St})),e.d(t,"Db",(function(){return jt})),e.d(t,"M",(function(){return zt})),e.d(t,"Ab",(function(){return Lt})),e.d(t,"tb",(function(){return Wt})),e.d(t,"S",(function(){return Dt})),e.d(t,"cb",(function(){return Bt})),e.d(t,"sb",(function(){return Xt})),e.d(t,"m",(function(){return Yt})),e.d(t,"qb",(function(){return Jt})),e.d(t,"Zb",(function(){return Nt})),e.d(t,"uc",(function(){return Ut})),e.d(t,"T",(function(){return Gt})),e.d(t,"U",(function(){return Ht})),e.d(t,"Q",(function(){return Qt})),e.d(t,"ab",(function(){return Vt})),e.d(t,"Wb",(function(){return $t})),e.d(t,"p",(function(){return Zt})),e.d(t,"nc",(function(){return ne})),e.d(t,"fc",(function(){return te})),e.d(t,"Lc",(function(){return ee})),e.d(t,"Tc",(function(){return re})),e.d(t,"wc",(function(){return ue})),e.d(t,"xc",(function(){return ce})),e.d(t,"yc",(function(){return _e})),e.d(t,"zc",(function(){return oe})),e.d(t,"Ac",(function(){return ie})),e.d(t,"Bc",(function(){return fe})),e.d(t,"Cc",(function(){return de})),e.d(t,"Dc",(function(){return be})),e.d(t,"Ec",(function(){return ae})),e.d(t,"Fc",(function(){return se})),e.d(t,"Gc",(function(){return le})),e.d(t,"Hc",(function(){return we})),e.d(t,"Ic",(function(){return ge})),e.d(t,"Jc",(function(){return pe})),e.d(t,"Kc",(function(){return me}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);let r;function u(n){r=n}const c=new Array(128).fill(void 0);function _(n){return c[n]}c.push(void 0,null,!0,!1);let o=c.length;function i(n){const t=_(n);return function(n){n<132||(c[n]=o,o=n)}(n),t}function f(n){o===c.length&&c.push(c.length+1);const t=o;return o=c[t],c[t]=n,t}let d=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});d.decode();let b=null;function a(){return null!==b&&0!==b.byteLength||(b=new Uint8Array(r.memory.buffer)),b}function s(n,t){return n>>>=0,d.decode(a().subarray(n,n+t))}let l=0;let w=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof w.encodeInto?function(n,t){return w.encodeInto(n,t)}:function(n,t){const e=w.encode(n);return t.set(e),{read:n.length,written:e.length}};function p(n,t,e){if(void 0===e){const e=w.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),l=e.length,r}let r=n.length,u=t(r,1)>>>0;const c=a();let _=0;for(;_127)break;c[u+_]=t}if(_!==r){0!==_&&(n=n.slice(_)),u=e(u,r,r=_+3*n.length,1)>>>0;const t=a().subarray(u+_,u+r);_+=g(n,t).written,u=e(u,r,_,1)>>>0}return l=_,u}function m(n){return null==n}let y=null;function h(){return null!==y&&0!==y.byteLength||(y=new Int32Array(r.memory.buffer)),y}const v="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(n,t,e,u){const c={a:n,b:t,cnt:1,dtor:e},_=(...n)=>{c.cnt++;const t=c.a;c.a=0;try{return u(t,c.b,...n)}finally{0==--c.cnt?(r.__wbindgen_export_2.get(c.dtor)(t,c.b),v.unregister(c)):c.a=t}};return _.original=c,v.register(_,c,c),_}function C(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h82efabe3a8eca707(n,t)}function E(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h9a89b404b1bffe68(n,t,f(e))}function F(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1bbbc65723ab70fc(n,t,f(e),f(u))}function O(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,f(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function q(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,f(e))}function M(){r.run()}function A(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(f(n))}}function R(n){i(n)}function x(n){return void 0===_(n)}function I(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function K(n){return f(_(n))}function P(n,t){return f(s(n,t))}function S(){return f(new Error)}function j(n,t){const e=p(_(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function z(n,t){let e,u;try{e=n,u=t,console.error(s(n,t))}finally{r.__wbindgen_free(e,u,1)}}function L(n){return _(n).offsetX}function W(n){return _(n).offsetY}function D(n){return f(_(n).Window)}function B(n){const t=_(n).webkitFullscreenElement;return m(t)?0:f(t)}function X(){return f(ResizeObserverEntry.prototype)}function Y(n){return f(_(n).scheduler)}function J(n){return f(_(n).getCoalescedEvents)}function N(n){return f(_(n).requestFullscreen)}function U(n){return f(_(n).requestIdleCallback)}function G(n){return f(_(n).onpointerrawupdate)}function H(n){_(n).webkitRequestFullscreen()}function Q(n){return f(_(n).requestFullscreen())}function V(n){return f(_(n).scheduler)}function $(n,t,e){return f(_(n).postTask(_(t),_(e)))}function Z(n){return f(n)}function nn(n){queueMicrotask(_(n))}function tn(n){return f(_(n).queueMicrotask)}function en(n){return"function"==typeof _(n)}function rn(n){let t;try{t=_(n)instanceof Window}catch(n){t=!1}return t}function un(n){const t=_(n).document;return m(t)?0:f(t)}function cn(n){return _(n).devicePixelRatio}function _n(n,t){_(n).cancelIdleCallback(t>>>0)}function on(){return A((function(n,t){const e=_(n).getComputedStyle(_(t));return m(e)?0:f(e)}),arguments)}function fn(){return A((function(n,t,e){const r=_(n).matchMedia(s(t,e));return m(r)?0:f(r)}),arguments)}function dn(){return A((function(n,t){return _(n).requestIdleCallback(_(t))}),arguments)}function bn(){return A((function(n,t){_(n).cancelAnimationFrame(t)}),arguments)}function an(){return A((function(n,t){return _(n).requestAnimationFrame(_(t))}),arguments)}function sn(n,t){_(n).clearTimeout(t)}function ln(){return A((function(n,t){return _(n).setTimeout(_(t))}),arguments)}function wn(){return A((function(n,t,e){return _(n).setTimeout(_(t),e)}),arguments)}function gn(n){const t=_(n).body;return m(t)?0:f(t)}function pn(n){return f(_(n).visibilityState)}function mn(n){const t=_(n).activeElement;return m(t)?0:f(t)}function yn(n){const t=_(n).fullscreenElement;return m(t)?0:f(t)}function hn(){return A((function(n,t,e){return f(_(n).createElement(s(t,e)))}),arguments)}function vn(n,t,e){const r=_(n).getElementById(s(t,e));return m(r)?0:f(r)}function kn(){return A((function(n,t,e,r,u){_(n).setAttribute(s(t,e),s(r,u))}),arguments)}function Cn(){return A((function(n,t){_(n).setPointerCapture(t)}),arguments)}function En(n){return f(_(n).style)}function Fn(){return A((function(n){_(n).focus()}),arguments)}function On(){return A((function(n,t,e,u){const c=p(_(t).getPropertyValue(s(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),o=l;h()[n/4+1]=o,h()[n/4+0]=c}),arguments)}function Tn(){return A((function(n,t,e,u){const c=p(_(t).removeProperty(s(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),o=l;h()[n/4+1]=o,h()[n/4+0]=c}),arguments)}function qn(){return A((function(n,t,e,r,u){_(n).setProperty(s(t,e),s(r,u))}),arguments)}function Mn(){return A((function(n){return f(new IntersectionObserver(_(n)))}),arguments)}function An(n){_(n).disconnect()}function Rn(n,t){_(n).observe(_(t))}function xn(){return A((function(n,t){return f(_(n).appendChild(_(t)))}),arguments)}function In(n,t){return _(n).contains(_(t))}function Kn(n,t){const e=_(t),u="string"==typeof e?e:void 0;var c=m(u)?0:p(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=l;h()[n/4+1]=o,h()[n/4+0]=c}function Pn(n){return f(_(n).port1)}function Sn(n){return f(_(n).port2)}function jn(){return A((function(){return f(new MessageChannel)}),arguments)}function zn(n){return _(n).isIntersecting}function Ln(n){return f(_(n).contentRect)}function Wn(n){return f(_(n).devicePixelContentBoxSize)}function Dn(n){return _(n).inlineSize}function Bn(n){return _(n).blockSize}function Xn(n){console.debug(_(n))}function Yn(n){console.error(_(n))}function Jn(n,t){console.error(_(n),_(t))}function Nn(n){console.info(_(n))}function Un(n){console.log(_(n))}function Gn(n){console.warn(_(n))}function Hn(n){return f(_(n).signal)}function Qn(){return A((function(){return f(new AbortController)}),arguments)}function Vn(n){_(n).abort()}function $n(n){_(n).close()}function Zn(){return A((function(n,t){_(n).postMessage(_(t))}),arguments)}function nt(n){_(n).start()}function tt(n){return _(n).width}function et(n){return _(n).height}function rt(n){return _(n).altKey}function ut(n){return _(n).ctrlKey}function ct(n){return _(n).shiftKey}function _t(n){return _(n).metaKey}function ot(n){return _(n).location}function it(n){return _(n).repeat}function ft(n,t){const e=p(_(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function dt(n,t){const e=p(_(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function bt(n){return _(n).persisted}function at(){return A((function(n,t,e,r){_(n).addEventListener(s(t,e),_(r))}),arguments)}function st(){return A((function(n,t,e,r){_(n).removeEventListener(s(t,e),_(r))}),arguments)}function lt(){return A((function(n){return f(new ResizeObserver(_(n)))}),arguments)}function wt(n){_(n).disconnect()}function gt(n,t){_(n).observe(_(t))}function pt(n,t,e){_(n).observe(_(t),_(e))}function mt(n,t){_(n).unobserve(_(t))}function yt(n){return _(n).deltaX}function ht(n){return _(n).deltaY}function vt(n){return _(n).deltaMode}function kt(n){_(n).preventDefault()}function Ct(n,t){const e=p(_(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function Et(n){return _(n).matches}function Ft(){return A((function(n,t){_(n).addListener(_(t))}),arguments)}function Ot(){return A((function(n,t){_(n).removeListener(_(t))}),arguments)}function Tt(n){return _(n).ctrlKey}function qt(n){return _(n).shiftKey}function Mt(n){return _(n).altKey}function At(n){return _(n).metaKey}function Rt(n){return _(n).button}function xt(n){return _(n).buttons}function It(n){return _(n).movementX}function Kt(n){return _(n).movementY}function Pt(n){return _(n).pointerId}function St(n){return _(n).pressure}function jt(n,t){const e=p(_(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function zt(n){return f(_(n).getCoalescedEvents())}function Lt(n){return f(_(n).performance)}function Wt(n){return _(n).now()}function Dt(n,t){return f(_(n)[t>>>0])}function Bt(n){return _(n).length}function Xt(n,t){return f(new Function(s(n,t)))}function Yt(){return A((function(n,t){return f(_(n).call(_(t)))}),arguments)}function Jt(){return f(new Object)}function Nt(){return A((function(){return f(self.self)}),arguments)}function Ut(){return A((function(){return f(window.window)}),arguments)}function Gt(){return A((function(){return f(globalThis.globalThis)}),arguments)}function Ht(){return A((function(){return f(global.global)}),arguments)}function Qt(n,t){return f(Object.getOwnPropertyDescriptor(_(n),_(t)))}function Vt(n,t){return Object.is(_(n),_(t))}function $t(n){return f(Promise.resolve(_(n)))}function Zt(n,t){return f(_(n).catch(_(t)))}function ne(n,t){return f(_(n).then(_(t)))}function te(){return A((function(n,t,e){return Reflect.set(_(n),_(t),_(e))}),arguments)}function ee(n,t){const e=p(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}(_(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function re(n,t){throw new Error(s(n,t))}function ue(n,t,e){return f(k(n,t,21,C))}function ce(n,t,e){return f(k(n,t,21,E))}function _e(n,t,e){return f(k(n,t,21,E))}function oe(n,t,e){return f(k(n,t,21,E))}function ie(n,t,e){return f(k(n,t,21,E))}function fe(n,t,e){return f(k(n,t,21,E))}function de(n,t,e){return f(k(n,t,21,F))}function be(n,t,e){return f(k(n,t,163,O))}function ae(n,t,e){return f(k(n,t,163,O))}function se(n,t,e){return f(k(n,t,163,T))}function le(n,t,e){return f(k(n,t,163,O))}function we(n,t,e){return f(k(n,t,163,O))}function ge(n,t,e){return f(k(n,t,163,O))}function pe(n,t,e){return f(k(n,t,163,O))}function me(n,t,e){return f(k(n,t,242,q))}}).call(this,e(260)(n))},410:function(n,t,e){"use strict";e.r(t);var r=e(411),u=e(256);e.d(t,"__wbg_set_wasm",(function(){return u.gc})),e.d(t,"run",(function(){return u.Uc})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Qc})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Nc})),e.d(t,"__wbindgen_cb_drop",(function(){return u.vc})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.Pc})),e.d(t,"__wbindgen_string_new",(function(){return u.Sc})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.rb})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.kc})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.J})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.xb})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.yb})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.a})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.rc})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.Kb})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Yb})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.N})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Sb})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Vb})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.zb})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.sc})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Tb})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Xb})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.Hb})),e.d(t,"__wbindgen_number_new",(function(){return u.Oc})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.Mb})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.Lb})),e.d(t,"__wbindgen_is_function",(function(){return u.Mc})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.Y})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.G})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.D})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.o})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.O})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.fb})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Ub})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.n})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Rb})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.q})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.ec})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.dc})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.j})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.pc})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.c})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.L})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.v})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.P})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.ac})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.bc})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.mc})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.K})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.R})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Pb})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.cc})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.ob})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.F})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.ub})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.h})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.t})),e.d(t,"__wbindgen_string_get",(function(){return u.Rc})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.Eb})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.Fb})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.nb})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.Z})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.u})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.C})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.X})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.i})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.y})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.I})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.H})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.W})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.eb})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.qc})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.jc})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.mb})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.b})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.r})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.Gb})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.lc})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.tc})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.V})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.g})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.x})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.ic})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.ib})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.db})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Qb})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.bb})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.s})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Bb})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.d})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Nb})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.pb})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.E})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.vb})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.wb})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.oc})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.A})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.B})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.z})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.Jb})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.hb})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.gb})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.e})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Ob})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.w})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.hc})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.f})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.jb})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.k})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.l})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.kb})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.lb})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Cb})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.Ib})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Db})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.M})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Ab})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.tb})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.S})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.cb})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.sb})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.m})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.qb})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Zb})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.uc})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.T})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.U})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Q})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.ab})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Wb})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.p})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.nc})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.fc})),e.d(t,"__wbindgen_debug_string",(function(){return u.Lc})),e.d(t,"__wbindgen_throw",(function(){return u.Tc})),e.d(t,"__wbindgen_closure_wrapper217",(function(){return u.wc})),e.d(t,"__wbindgen_closure_wrapper218",(function(){return u.xc})),e.d(t,"__wbindgen_closure_wrapper219",(function(){return u.yc})),e.d(t,"__wbindgen_closure_wrapper220",(function(){return u.zc})),e.d(t,"__wbindgen_closure_wrapper221",(function(){return u.Ac})),e.d(t,"__wbindgen_closure_wrapper222",(function(){return u.Bc})),e.d(t,"__wbindgen_closure_wrapper223",(function(){return u.Cc})),e.d(t,"__wbindgen_closure_wrapper498",(function(){return u.Dc})),e.d(t,"__wbindgen_closure_wrapper499",(function(){return u.Ec})),e.d(t,"__wbindgen_closure_wrapper500",(function(){return u.Fc})),e.d(t,"__wbindgen_closure_wrapper501",(function(){return u.Gc})),e.d(t,"__wbindgen_closure_wrapper502",(function(){return u.Hc})),e.d(t,"__wbindgen_closure_wrapper503",(function(){return u.Ic})),e.d(t,"__wbindgen_closure_wrapper504",(function(){return u.Jc})),e.d(t,"__wbindgen_closure_wrapper682",(function(){return u.Kc})),Object(u.gc)(r),r.__wbindgen_start()},411:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(256);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/28.ee159dd2.js b/assets/js/28.ee159dd2.js deleted file mode 100644 index 1cb08e1d2..000000000 --- a/assets/js/28.ee159dd2.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{245:function(n,t,e){"use strict";(function(n){e.d(t,"Ai",(function(){return u})),e.d(t,"tl",(function(){return F})),e.d(t,"pl",(function(){return W})),e.d(t,"ql",(function(){return q})),e.d(t,"Ik",(function(){return z})),e.d(t,"ol",(function(){return U})),e.d(t,"kl",(function(){return K})),e.d(t,"rl",(function(){return Q})),e.d(t,"Eg",(function(){return N})),e.d(t,"Mi",(function(){return X})),e.d(t,"Rd",(function(){return Y})),e.d(t,"Wd",(function(){return H})),e.d(t,"Wg",(function(){return J})),e.d(t,"Xg",(function(){return Z})),e.d(t,"qe",(function(){return $})),e.d(t,"Lh",(function(){return nn})),e.d(t,"Uh",(function(){return tn})),e.d(t,"Oh",(function(){return en})),e.d(t,"Yg",(function(){return rn})),e.d(t,"ph",(function(){return un})),e.d(t,"xk",(function(){return fn})),e.d(t,"b",(function(){return cn})),e.d(t,"mh",(function(){return on})),e.d(t,"Mh",(function(){return _n})),e.d(t,"Th",(function(){return dn})),e.d(t,"nl",(function(){return an})),e.d(t,"yk",(function(){return bn})),e.d(t,"ah",(function(){return gn})),e.d(t,"Rg",(function(){return wn})),e.d(t,"mf",(function(){return sn})),e.d(t,"lf",(function(){return ln})),e.d(t,"af",(function(){return mn})),e.d(t,"Ud",(function(){return pn})),e.d(t,"Cf",(function(){return hn})),e.d(t,"Kh",(function(){return xn})),e.d(t,"Hb",(function(){return yn})),e.d(t,"we",(function(){return Sn})),e.d(t,"of",(function(){return kn})),e.d(t,"ng",(function(){return vn})),e.d(t,"nf",(function(){return Bn})),e.d(t,"Ae",(function(){return Pn})),e.d(t,"eg",(function(){return jn})),e.d(t,"fg",(function(){return In})),e.d(t,"gg",(function(){return An})),e.d(t,"dg",(function(){return Dn})),e.d(t,"Mf",(function(){return Tn})),e.d(t,"Nf",(function(){return Cn})),e.d(t,"Wf",(function(){return Mn})),e.d(t,"Vf",(function(){return Fn})),e.d(t,"Yf",(function(){return En})),e.d(t,"Zf",(function(){return Rn})),e.d(t,"bg",(function(){return Ln})),e.d(t,"cg",(function(){return On})),e.d(t,"ig",(function(){return Gn})),e.d(t,"hg",(function(){return Vn})),e.d(t,"ag",(function(){return Wn})),e.d(t,"rg",(function(){return qn})),e.d(t,"qg",(function(){return zn})),e.d(t,"lg",(function(){return Un})),e.d(t,"Of",(function(){return Kn})),e.d(t,"jg",(function(){return Qn})),e.d(t,"kg",(function(){return Nn})),e.d(t,"Xf",(function(){return Xn})),e.d(t,"Tf",(function(){return Yn})),e.d(t,"Pf",(function(){return Hn})),e.d(t,"Qf",(function(){return Jn})),e.d(t,"Rf",(function(){return Zn})),e.d(t,"Sf",(function(){return $n})),e.d(t,"Uf",(function(){return nt})),e.d(t,"Pd",(function(){return tt})),e.d(t,"cf",(function(){return et})),e.d(t,"wh",(function(){return rt})),e.d(t,"jl",(function(){return ut})),e.d(t,"a",(function(){return ft})),e.d(t,"c",(function(){return ct})),e.d(t,"Ih",(function(){return it})),e.d(t,"Ee",(function(){return ot})),e.d(t,"Td",(function(){return _t})),e.d(t,"Df",(function(){return dt})),e.d(t,"oc",(function(){return at})),e.d(t,"Tb",(function(){return bt})),e.d(t,"Ub",(function(){return gt})),e.d(t,"dc",(function(){return wt})),e.d(t,"jc",(function(){return st})),e.d(t,"Zb",(function(){return lt})),e.d(t,"Xb",(function(){return mt})),e.d(t,"sc",(function(){return pt})),e.d(t,"nc",(function(){return ht})),e.d(t,"gc",(function(){return xt})),e.d(t,"Yb",(function(){return yt})),e.d(t,"ic",(function(){return St})),e.d(t,"cd",(function(){return kt})),e.d(t,"Di",(function(){return vt})),e.d(t,"qh",(function(){return Bt})),e.d(t,"ih",(function(){return Pt})),e.d(t,"Jf",(function(){return jt})),e.d(t,"ek",(function(){return It})),e.d(t,"wc",(function(){return At})),e.d(t,"ed",(function(){return Dt})),e.d(t,"dd",(function(){return Tt})),e.d(t,"me",(function(){return Ct})),e.d(t,"ne",(function(){return Mt})),e.d(t,"Lb",(function(){return Ft})),e.d(t,"Mb",(function(){return Et})),e.d(t,"Rb",(function(){return Rt})),e.d(t,"Sb",(function(){return Lt})),e.d(t,"q",(function(){return Ot})),e.d(t,"Nd",(function(){return Gt})),e.d(t,"s",(function(){return Vt})),e.d(t,"Md",(function(){return Wt})),e.d(t,"zf",(function(){return qt})),e.d(t,"be",(function(){return zt})),e.d(t,"Yd",(function(){return Ut})),e.d(t,"jb",(function(){return Kt})),e.d(t,"ib",(function(){return Qt})),e.d(t,"Gk",(function(){return Nt})),e.d(t,"Ph",(function(){return Xt})),e.d(t,"ae",(function(){return Yt})),e.d(t,"Zd",(function(){return Ht})),e.d(t,"Ek",(function(){return Jt})),e.d(t,"hk",(function(){return Zt})),e.d(t,"Li",(function(){return $t})),e.d(t,"Fk",(function(){return ne})),e.d(t,"Nb",(function(){return te})),e.d(t,"ki",(function(){return ee})),e.d(t,"ei",(function(){return re})),e.d(t,"Zh",(function(){return ue})),e.d(t,"od",(function(){return fe})),e.d(t,"nd",(function(){return ce})),e.d(t,"li",(function(){return ie})),e.d(t,"ai",(function(){return oe})),e.d(t,"ci",(function(){return _e})),e.d(t,"hi",(function(){return de})),e.d(t,"ji",(function(){return ae})),e.d(t,"vi",(function(){return be})),e.d(t,"ti",(function(){return ge})),e.d(t,"Fd",(function(){return we})),e.d(t,"Cd",(function(){return se})),e.d(t,"Ed",(function(){return le})),e.d(t,"Ad",(function(){return me})),e.d(t,"mi",(function(){return pe})),e.d(t,"bi",(function(){return he})),e.d(t,"di",(function(){return xe})),e.d(t,"gi",(function(){return ye})),e.d(t,"ii",(function(){return Se})),e.d(t,"wi",(function(){return ke})),e.d(t,"ui",(function(){return ve})),e.d(t,"Gd",(function(){return Be})),e.d(t,"Bd",(function(){return Pe})),e.d(t,"Dd",(function(){return je})),e.d(t,"zd",(function(){return Ie})),e.d(t,"fi",(function(){return Ae})),e.d(t,"pi",(function(){return De})),e.d(t,"xi",(function(){return Te})),e.d(t,"qi",(function(){return Ce})),e.d(t,"Sd",(function(){return Me})),e.d(t,"Zi",(function(){return Fe})),e.d(t,"uh",(function(){return Ee})),e.d(t,"vh",(function(){return Re})),e.d(t,"il",(function(){return Le})),e.d(t,"Hk",(function(){return Oe})),e.d(t,"ml",(function(){return Ge})),e.d(t,"sf",(function(){return Ve})),e.d(t,"r",(function(){return We})),e.d(t,"v",(function(){return qe})),e.d(t,"C",(function(){return ze})),e.d(t,"G",(function(){return Ue})),e.d(t,"R",(function(){return Ke})),e.d(t,"U",(function(){return Qe})),e.d(t,"X",(function(){return Ne})),e.d(t,"Y",(function(){return Xe})),e.d(t,"kb",(function(){return Ye})),e.d(t,"lb",(function(){return He})),e.d(t,"vb",(function(){return Je})),e.d(t,"Eb",(function(){return Ze})),e.d(t,"Cb",(function(){return $e})),e.d(t,"Fb",(function(){return nr})),e.d(t,"Gb",(function(){return tr})),e.d(t,"Kb",(function(){return er})),e.d(t,"Qb",(function(){return rr})),e.d(t,"hc",(function(){return ur})),e.d(t,"mc",(function(){return fr})),e.d(t,"vc",(function(){return cr})),e.d(t,"Ic",(function(){return ir})),e.d(t,"Lc",(function(){return or})),e.d(t,"Oc",(function(){return _r})),e.d(t,"Sc",(function(){return dr})),e.d(t,"sd",(function(){return ar})),e.d(t,"wd",(function(){return br})),e.d(t,"yd",(function(){return gr})),e.d(t,"Ld",(function(){return wr})),e.d(t,"Vd",(function(){return sr})),e.d(t,"he",(function(){return lr})),e.d(t,"oe",(function(){return mr})),e.d(t,"ze",(function(){return pr})),e.d(t,"Ke",(function(){return hr})),e.d(t,"Re",(function(){return xr})),e.d(t,"Se",(function(){return yr})),e.d(t,"uf",(function(){return Sr})),e.d(t,"xh",(function(){return kr})),e.d(t,"yh",(function(){return vr})),e.d(t,"Ah",(function(){return Br})),e.d(t,"Eh",(function(){return Pr})),e.d(t,"Rh",(function(){return jr})),e.d(t,"Sh",(function(){return Ir})),e.d(t,"aj",(function(){return Ar})),e.d(t,"cj",(function(){return Dr})),e.d(t,"fj",(function(){return Tr})),e.d(t,"gj",(function(){return Cr})),e.d(t,"kj",(function(){return Mr})),e.d(t,"lj",(function(){return Fr})),e.d(t,"hj",(function(){return Er})),e.d(t,"jj",(function(){return Rr})),e.d(t,"mj",(function(){return Lr})),e.d(t,"pj",(function(){return Or})),e.d(t,"oj",(function(){return Gr})),e.d(t,"qj",(function(){return Vr})),e.d(t,"nj",(function(){return Wr})),e.d(t,"rj",(function(){return qr})),e.d(t,"zj",(function(){return zr})),e.d(t,"Aj",(function(){return Ur})),e.d(t,"Cj",(function(){return Kr})),e.d(t,"Ej",(function(){return Qr})),e.d(t,"Fj",(function(){return Nr})),e.d(t,"Ij",(function(){return Xr})),e.d(t,"Jj",(function(){return Yr})),e.d(t,"Mj",(function(){return Hr})),e.d(t,"Pj",(function(){return Jr})),e.d(t,"Qj",(function(){return Zr})),e.d(t,"Rj",(function(){return $r})),e.d(t,"Tj",(function(){return nu})),e.d(t,"Uj",(function(){return tu})),e.d(t,"Vj",(function(){return eu})),e.d(t,"Xj",(function(){return ru})),e.d(t,"Yj",(function(){return uu})),e.d(t,"Zj",(function(){return fu})),e.d(t,"ak",(function(){return cu})),e.d(t,"ck",(function(){return iu})),e.d(t,"dk",(function(){return ou})),e.d(t,"nk",(function(){return _u})),e.d(t,"ok",(function(){return du})),e.d(t,"g",(function(){return au})),e.d(t,"o",(function(){return bu})),e.d(t,"u",(function(){return gu})),e.d(t,"x",(function(){return wu})),e.d(t,"y",(function(){return su})),e.d(t,"A",(function(){return lu})),e.d(t,"D",(function(){return mu})),e.d(t,"H",(function(){return pu})),e.d(t,"L",(function(){return hu})),e.d(t,"J",(function(){return xu})),e.d(t,"P",(function(){return yu})),e.d(t,"N",(function(){return Su})),e.d(t,"tb",(function(){return ku})),e.d(t,"nb",(function(){return vu})),e.d(t,"pb",(function(){return Bu})),e.d(t,"rb",(function(){return Pu})),e.d(t,"zb",(function(){return ju})),e.d(t,"Bb",(function(){return Iu})),e.d(t,"Pb",(function(){return Au})),e.d(t,"Wb",(function(){return Du})),e.d(t,"cc",(function(){return Tu})),e.d(t,"ec",(function(){return Cu})),e.d(t,"kc",(function(){return Mu})),e.d(t,"qc",(function(){return Fu})),e.d(t,"rc",(function(){return Eu})),e.d(t,"Ac",(function(){return Ru})),e.d(t,"Dc",(function(){return Lu})),e.d(t,"Fc",(function(){return Ou})),e.d(t,"Hc",(function(){return Gu})),e.d(t,"Jc",(function(){return Vu})),e.d(t,"Mc",(function(){return Wu})),e.d(t,"Pc",(function(){return qu})),e.d(t,"Xc",(function(){return zu})),e.d(t,"Yc",(function(){return Uu})),e.d(t,"bd",(function(){return Ku})),e.d(t,"kd",(function(){return Qu})),e.d(t,"id",(function(){return Nu})),e.d(t,"td",(function(){return Xu})),e.d(t,"Kd",(function(){return Yu})),e.d(t,"Id",(function(){return Hu})),e.d(t,"de",(function(){return Ju})),e.d(t,"ge",(function(){return Zu})),e.d(t,"je",(function(){return $u})),e.d(t,"ye",(function(){return nf})),e.d(t,"De",(function(){return tf})),e.d(t,"Fe",(function(){return ef})),e.d(t,"Ie",(function(){return rf})),e.d(t,"Me",(function(){return uf})),e.d(t,"Ne",(function(){return ff})),e.d(t,"Pe",(function(){return cf})),e.d(t,"Te",(function(){return of})),e.d(t,"Ff",(function(){return _f})),e.d(t,"dh",(function(){return df})),e.d(t,"hh",(function(){return af})),e.d(t,"Gh",(function(){return bf})),e.d(t,"Vh",(function(){return gf})),e.d(t,"Hi",(function(){return wf})),e.d(t,"Qi",(function(){return sf})),e.d(t,"Ti",(function(){return lf})),e.d(t,"Ri",(function(){return mf})),e.d(t,"Vi",(function(){return pf})),e.d(t,"dj",(function(){return hf})),e.d(t,"wj",(function(){return xf})),e.d(t,"yj",(function(){return yf})),e.d(t,"Kj",(function(){return Sf})),e.d(t,"ik",(function(){return kf})),e.d(t,"pk",(function(){return vf})),e.d(t,"uk",(function(){return Bf})),e.d(t,"tf",(function(){return Pf})),e.d(t,"pd",(function(){return jf})),e.d(t,"Gf",(function(){return If})),e.d(t,"vg",(function(){return Af})),e.d(t,"gd",(function(){return Df})),e.d(t,"gb",(function(){return Tf})),e.d(t,"re",(function(){return Cf})),e.d(t,"Kf",(function(){return Mf})),e.d(t,"Nh",(function(){return Ff})),e.d(t,"fb",(function(){return Ef})),e.d(t,"Jh",(function(){return Rf})),e.d(t,"sb",(function(){return Lf})),e.d(t,"si",(function(){return Of})),e.d(t,"ri",(function(){return Gf})),e.d(t,"T",(function(){return Vf})),e.d(t,"vk",(function(){return Wf})),e.d(t,"e",(function(){return qf})),e.d(t,"le",(function(){return zf})),e.d(t,"ac",(function(){return Uf})),e.d(t,"xe",(function(){return Kf})),e.d(t,"th",(function(){return Qf})),e.d(t,"sh",(function(){return Nf})),e.d(t,"Yh",(function(){return Xf})),e.d(t,"ni",(function(){return Yf})),e.d(t,"ug",(function(){return Hf})),e.d(t,"Xd",(function(){return Jf})),e.d(t,"Yi",(function(){return Zf})),e.d(t,"ce",(function(){return $f})),e.d(t,"W",(function(){return nc})),e.d(t,"V",(function(){return tc})),e.d(t,"Z",(function(){return ec})),e.d(t,"Db",(function(){return rc})),e.d(t,"zh",(function(){return uc})),e.d(t,"bj",(function(){return fc})),e.d(t,"ij",(function(){return cc})),e.d(t,"Bj",(function(){return ic})),e.d(t,"Dj",(function(){return oc})),e.d(t,"Gj",(function(){return _c})),e.d(t,"Hj",(function(){return dc})),e.d(t,"Nj",(function(){return ac})),e.d(t,"Oj",(function(){return bc})),e.d(t,"Sj",(function(){return gc})),e.d(t,"Wj",(function(){return wc})),e.d(t,"bk",(function(){return sc})),e.d(t,"f",(function(){return lc})),e.d(t,"p",(function(){return mc})),e.d(t,"t",(function(){return pc})),e.d(t,"w",(function(){return hc})),e.d(t,"z",(function(){return xc})),e.d(t,"B",(function(){return yc})),e.d(t,"E",(function(){return Sc})),e.d(t,"I",(function(){return kc})),e.d(t,"M",(function(){return vc})),e.d(t,"K",(function(){return Bc})),e.d(t,"Q",(function(){return Pc})),e.d(t,"O",(function(){return jc})),e.d(t,"ub",(function(){return Ic})),e.d(t,"mb",(function(){return Ac})),e.d(t,"ob",(function(){return Dc})),e.d(t,"qb",(function(){return Tc})),e.d(t,"yb",(function(){return Cc})),e.d(t,"Ab",(function(){return Mc})),e.d(t,"Ob",(function(){return Fc})),e.d(t,"Vb",(function(){return Ec})),e.d(t,"bc",(function(){return Rc})),e.d(t,"fc",(function(){return Lc})),e.d(t,"lc",(function(){return Oc})),e.d(t,"pc",(function(){return Gc})),e.d(t,"tc",(function(){return Vc})),e.d(t,"zc",(function(){return Wc})),e.d(t,"Cc",(function(){return qc})),e.d(t,"Ec",(function(){return zc})),e.d(t,"Gc",(function(){return Uc})),e.d(t,"Kc",(function(){return Kc})),e.d(t,"Nc",(function(){return Qc})),e.d(t,"Qc",(function(){return Nc})),e.d(t,"Wc",(function(){return Xc})),e.d(t,"Zc",(function(){return Yc})),e.d(t,"ad",(function(){return Hc})),e.d(t,"jd",(function(){return Jc})),e.d(t,"hd",(function(){return Zc})),e.d(t,"ud",(function(){return $c})),e.d(t,"Jd",(function(){return ni})),e.d(t,"Hd",(function(){return ti})),e.d(t,"ee",(function(){return ei})),e.d(t,"fe",(function(){return ri})),e.d(t,"ke",(function(){return ui})),e.d(t,"Ce",(function(){return fi})),e.d(t,"Ge",(function(){return ci})),e.d(t,"He",(function(){return ii})),e.d(t,"Le",(function(){return oi})),e.d(t,"Oe",(function(){return _i})),e.d(t,"Ue",(function(){return di})),e.d(t,"Ef",(function(){return ai})),e.d(t,"ch",(function(){return bi})),e.d(t,"gh",(function(){return gi})),e.d(t,"Fh",(function(){return wi})),e.d(t,"Wh",(function(){return si})),e.d(t,"Gi",(function(){return li})),e.d(t,"Pi",(function(){return mi})),e.d(t,"Ui",(function(){return pi})),e.d(t,"Si",(function(){return hi})),e.d(t,"Wi",(function(){return xi})),e.d(t,"ej",(function(){return yi})),e.d(t,"vj",(function(){return Si})),e.d(t,"xj",(function(){return ki})),e.d(t,"Lj",(function(){return vi})),e.d(t,"jk",(function(){return Bi})),e.d(t,"qk",(function(){return Pi})),e.d(t,"tk",(function(){return ji})),e.d(t,"Qg",(function(){return Ii})),e.d(t,"Je",(function(){return Ai})),e.d(t,"Dh",(function(){return Di})),e.d(t,"oi",(function(){return Ti})),e.d(t,"Ak",(function(){return Ci})),e.d(t,"ff",(function(){return Mi})),e.d(t,"sk",(function(){return Fi})),e.d(t,"rk",(function(){return Ei})),e.d(t,"zk",(function(){return Ri})),e.d(t,"hf",(function(){return Li})),e.d(t,"vd",(function(){return Oi})),e.d(t,"Ki",(function(){return Gi})),e.d(t,"wg",(function(){return Vi})),e.d(t,"d",(function(){return Wi})),e.d(t,"vf",(function(){return qi})),e.d(t,"eh",(function(){return zi})),e.d(t,"nh",(function(){return Ui})),e.d(t,"fh",(function(){return Ki})),e.d(t,"pe",(function(){return Qi})),e.d(t,"oh",(function(){return Ni})),e.d(t,"mg",(function(){return Xi})),e.d(t,"Lf",(function(){return Yi})),e.d(t,"i",(function(){return Hi})),e.d(t,"Ch",(function(){return Ji})),e.d(t,"xc",(function(){return Zi})),e.d(t,"Ii",(function(){return $i})),e.d(t,"j",(function(){return no})),e.d(t,"pg",(function(){return to})),e.d(t,"cb",(function(){return eo})),e.d(t,"db",(function(){return ro})),e.d(t,"sg",(function(){return uo})),e.d(t,"tg",(function(){return fo})),e.d(t,"Uc",(function(){return co})),e.d(t,"Vc",(function(){return io})),e.d(t,"Tc",(function(){return oo})),e.d(t,"h",(function(){return _o})),e.d(t,"Bh",(function(){return ao})),e.d(t,"pf",(function(){return bo})),e.d(t,"Ck",(function(){return go})),e.d(t,"Ei",(function(){return wo})),e.d(t,"gf",(function(){return so})),e.d(t,"Ci",(function(){return lo})),e.d(t,"ue",(function(){return mo})),e.d(t,"ve",(function(){return po})),e.d(t,"Zg",(function(){return ho})),e.d(t,"Bk",(function(){return xo})),e.d(t,"Fi",(function(){return yo})),e.d(t,"ef",(function(){return So})),e.d(t,"Bi",(function(){return ko})),e.d(t,"se",(function(){return vo})),e.d(t,"te",(function(){return Bo})),e.d(t,"Ag",(function(){return Po})),e.d(t,"ld",(function(){return jo})),e.d(t,"Tg",(function(){return Io})),e.d(t,"Ug",(function(){return Ao})),e.d(t,"fk",(function(){return Do})),e.d(t,"Qe",(function(){return To})),e.d(t,"ie",(function(){return Co})),e.d(t,"Jb",(function(){return Mo})),e.d(t,"fd",(function(){return Fo})),e.d(t,"Bc",(function(){return Eo})),e.d(t,"Qd",(function(){return Ro})),e.d(t,"Od",(function(){return Lo})),e.d(t,"jf",(function(){return Oo})),e.d(t,"If",(function(){return Go})),e.d(t,"wk",(function(){return Vo})),e.d(t,"jh",(function(){return Wo})),e.d(t,"kh",(function(){return qo})),e.d(t,"yg",(function(){return zo})),e.d(t,"wb",(function(){return Uo})),e.d(t,"lh",(function(){return Ko})),e.d(t,"Ni",(function(){return Qo})),e.d(t,"kf",(function(){return No})),e.d(t,"S",(function(){return Xo})),e.d(t,"rf",(function(){return Yo})),e.d(t,"gk",(function(){return Ho})),e.d(t,"Oi",(function(){return Jo})),e.d(t,"df",(function(){return Zo})),e.d(t,"n",(function(){return $o})),e.d(t,"sj",(function(){return n_})),e.d(t,"k",(function(){return t_})),e.d(t,"yc",(function(){return e_})),e.d(t,"Ji",(function(){return r_})),e.d(t,"og",(function(){return u_})),e.d(t,"Hf",(function(){return f_})),e.d(t,"Hh",(function(){return c_})),e.d(t,"yf",(function(){return i_})),e.d(t,"xb",(function(){return o_})),e.d(t,"bh",(function(){return __})),e.d(t,"Ng",(function(){return d_})),e.d(t,"rd",(function(){return a_})),e.d(t,"xd",(function(){return b_})),e.d(t,"mk",(function(){return g_})),e.d(t,"Dg",(function(){return w_})),e.d(t,"m",(function(){return s_})),e.d(t,"zg",(function(){return l_})),e.d(t,"md",(function(){return m_})),e.d(t,"Sg",(function(){return p_})),e.d(t,"l",(function(){return h_})),e.d(t,"Ib",(function(){return x_})),e.d(t,"Ve",(function(){return y_})),e.d(t,"F",(function(){return S_})),e.d(t,"uc",(function(){return k_})),e.d(t,"Rc",(function(){return v_})),e.d(t,"We",(function(){return B_})),e.d(t,"Bf",(function(){return P_})),e.d(t,"xg",(function(){return j_})),e.d(t,"Fg",(function(){return I_})),e.d(t,"Pg",(function(){return A_})),e.d(t,"Og",(function(){return D_})),e.d(t,"qd",(function(){return T_})),e.d(t,"lk",(function(){return C_})),e.d(t,"xf",(function(){return M_})),e.d(t,"Xe",(function(){return F_})),e.d(t,"eb",(function(){return E_})),e.d(t,"Cg",(function(){return R_})),e.d(t,"Xh",(function(){return L_})),e.d(t,"Dk",(function(){return O_})),e.d(t,"Ye",(function(){return G_})),e.d(t,"Ze",(function(){return V_})),e.d(t,"if",(function(){return W_})),e.d(t,"Vg",(function(){return q_})),e.d(t,"rh",(function(){return z_})),e.d(t,"qf",(function(){return U_})),e.d(t,"Be",(function(){return K_})),e.d(t,"wf",(function(){return Q_})),e.d(t,"kk",(function(){return N_})),e.d(t,"Qh",(function(){return X_})),e.d(t,"hb",(function(){return Y_})),e.d(t,"tj",(function(){return H_})),e.d(t,"uj",(function(){return J_})),e.d(t,"ab",(function(){return Z_})),e.d(t,"Hg",(function(){return $_})),e.d(t,"Kg",(function(){return nd})),e.d(t,"Ig",(function(){return td})),e.d(t,"Mg",(function(){return ed})),e.d(t,"Bg",(function(){return rd})),e.d(t,"zi",(function(){return ud})),e.d(t,"Af",(function(){return fd})),e.d(t,"Lg",(function(){return cd})),e.d(t,"Gg",(function(){return id})),e.d(t,"Jg",(function(){return od})),e.d(t,"bb",(function(){return _d})),e.d(t,"bf",(function(){return dd})),e.d(t,"yi",(function(){return ad})),e.d(t,"Xi",(function(){return bd})),e.d(t,"hl",(function(){return gd})),e.d(t,"sl",(function(){return wd})),e.d(t,"ll",(function(){return sd})),e.d(t,"al",(function(){return ld})),e.d(t,"bl",(function(){return md})),e.d(t,"cl",(function(){return pd})),e.d(t,"dl",(function(){return hd})),e.d(t,"el",(function(){return xd})),e.d(t,"fl",(function(){return yd})),e.d(t,"gl",(function(){return Sd})),e.d(t,"Jk",(function(){return kd})),e.d(t,"Kk",(function(){return vd})),e.d(t,"Lk",(function(){return Bd})),e.d(t,"Mk",(function(){return Pd})),e.d(t,"Nk",(function(){return jd})),e.d(t,"Ok",(function(){return Id})),e.d(t,"Pk",(function(){return Ad})),e.d(t,"Qk",(function(){return Dd})),e.d(t,"Rk",(function(){return Td})),e.d(t,"Sk",(function(){return Cd})),e.d(t,"Tk",(function(){return Md})),e.d(t,"Uk",(function(){return Fd})),e.d(t,"Vk",(function(){return Ed})),e.d(t,"Wk",(function(){return Rd})),e.d(t,"Xk",(function(){return Ld})),e.d(t,"Yk",(function(){return Od})),e.d(t,"Zk",(function(){return Gd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=0,d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}let b=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof b.encodeInto?function(n,t){return b.encodeInto(n,t)}:function(n,t){const e=b.encode(n);return t.set(e),{read:n.length,written:e.length}};function w(n,t,e){if(void 0===e){const e=b.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),_=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=g(n,t).written,u=e(u,r,c,1)>>>0}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}function p(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=n,t}let h=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function x(n,t){return n>>>=0,h.decode(a().subarray(n,n+t))}h.decode();let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h53147a35b883306e(n,t,p(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__heb879d2dfe8680c6(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h6d85132b64f53af7(n,t,p(e),p(u))}function j(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h97a2292988e656b9(n,t)}function I(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h7ee08ec86ac257f2(n,t,p(e))}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h4686de960c526528(n,t,p(e),p(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,p(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,p(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,p(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(p(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function z(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return p(c(n))}function K(n){return void 0===c(n)}function Q(n,t){return p(x(n,t))}function N(){return p(new Error)}function X(n,t){const e=w(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Y(n,t){let e,u;try{e=n,u=t,console.error(x(n,t))}finally{r.__wbindgen_free(e,u,1)}}function H(n){return p(fetch(c(n)))}function J(n){return c(n).offsetX}function Z(n){return c(n).offsetY}function $(n){return p(c(n).getCoalescedEvents)}function nn(n){return p(c(n).requestFullscreen)}function tn(n){return p(c(n).scheduler)}function en(n){return p(c(n).requestIdleCallback)}function rn(n){return p(c(n).onpointerrawupdate)}function un(){return p(ResizeObserverEntry.prototype)}function fn(n){const t=c(n).webkitFullscreenElement;return s(t)?0:p(t)}function cn(n){return p(c(n).Window)}function on(n,t,e){return p(c(n).postTask(c(t),c(e)))}function _n(n){return p(c(n).requestFullscreen())}function dn(n){return p(c(n).scheduler)}function an(n){return p(n)}function bn(n){c(n).webkitRequestFullscreen()}function gn(n){return p(c(n).performance)}function wn(n){return c(n).now()}function sn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function mn(n){return p(c(n).gpu)}function pn(n){return p(c(n).features)}function hn(n){return p(c(n).limits)}function xn(n,t){return p(c(n).requestDevice(c(t)))}function yn(n,t){c(n).configure(c(t))}function Sn(n){return p(c(n).getCurrentTexture())}function kn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function vn(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Bn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function Pn(n,t,e){return p(c(n).getMappedRange(t,e))}function jn(n){return c(n).maxTextureDimension1D}function In(n){return c(n).maxTextureDimension2D}function An(n){return c(n).maxTextureDimension3D}function Dn(n){return c(n).maxTextureArrayLayers}function Tn(n){return c(n).maxBindGroups}function Cn(n){return c(n).maxBindingsPerBindGroup}function Mn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Fn(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function En(n){return c(n).maxSampledTexturesPerShaderStage}function Rn(n){return c(n).maxSamplersPerShaderStage}function Ln(n){return c(n).maxStorageBuffersPerShaderStage}function On(n){return c(n).maxStorageTexturesPerShaderStage}function Gn(n){return c(n).maxUniformBuffersPerShaderStage}function Vn(n){return c(n).maxUniformBufferBindingSize}function Wn(n){return c(n).maxStorageBufferBindingSize}function qn(n){return c(n).minUniformBufferOffsetAlignment}function zn(n){return c(n).minStorageBufferOffsetAlignment}function Un(n){return c(n).maxVertexBuffers}function Kn(n){return c(n).maxBufferSize}function Qn(n){return c(n).maxVertexAttributes}function Nn(n){return c(n).maxVertexBufferArrayStride}function Xn(n){return c(n).maxInterStageShaderComponents}function Yn(n){return c(n).maxComputeWorkgroupStorageSize}function Hn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Jn(n){return c(n).maxComputeWorkgroupSizeX}function Zn(n){return c(n).maxComputeWorkgroupSizeY}function $n(n){return c(n).maxComputeWorkgroupSizeZ}function nt(n){return c(n).maxComputeWorkgroupsPerDimension}function tt(n){return p(c(n).error)}function et(n,t,e){return c(n).has(x(t,e))}function rt(n){return p(c(n).queue)}function ut(n){const t=c(n);return"object"==typeof t&&null!==t}function ft(n){return p(c(n).Window)}function ct(n){return p(c(n).WorkerGlobalScope)}function it(n,t){return p(c(n).requestAdapter(c(t)))}function ot(n){return p(c(n).getPreferredCanvasFormat())}function _t(n){return p(c(n).features)}function dt(n){return p(c(n).limits)}function at(n,t){return p(c(n).createShaderModule(c(t)))}function bt(n,t){return p(c(n).createBindGroupLayout(c(t)))}function gt(n,t){return p(c(n).createBindGroup(c(t)))}function wt(n,t){return p(c(n).createPipelineLayout(c(t)))}function st(n,t){return p(c(n).createRenderPipeline(c(t)))}function lt(n,t){return p(c(n).createComputePipeline(c(t)))}function mt(n,t){return p(c(n).createBuffer(c(t)))}function pt(n,t){return p(c(n).createTexture(c(t)))}function ht(n,t){return p(c(n).createSampler(c(t)))}function xt(n,t){return p(c(n).createQuerySet(c(t)))}function yt(n,t){return p(c(n).createCommandEncoder(c(t)))}function St(n,t){return p(c(n).createRenderBundleEncoder(c(t)))}function kt(n){c(n).destroy()}function vt(n,t){c(n).onuncapturederror=c(t)}function Bt(n,t){c(n).pushErrorScope(o(t))}function Pt(n){return p(c(n).popErrorScope())}function jt(n,t,e,r){return p(c(n).mapAsync(t>>>0,e,r))}function It(n){c(n).unmap()}function At(n,t){return p(c(n).createView(c(t)))}function Dt(n){c(n).destroy()}function Tt(n){c(n).destroy()}function Ct(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Mt(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Ft(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Et(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Lt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Ot(n,t){return p(c(n).beginComputePass(c(t)))}function Gt(n){c(n).end()}function Vt(n,t){return p(c(n).beginRenderPass(c(t)))}function Wt(n){c(n).end()}function qt(n,t){const e=w(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function zt(n,t){return p(c(n).finish(c(t)))}function Ut(n){return p(c(n).finish())}function Kt(n,t,e){c(n).clearBuffer(c(t),e)}function Qt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Nt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Xt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Yt(n){return p(c(n).finish())}function Ht(n,t){return p(c(n).finish(c(t)))}function Jt(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Zt(n){return c(n).usage}function $t(n){return c(n).size}function ne(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function te(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function ee(n,t){c(n).setPipeline(c(t))}function re(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function ue(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function fe(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function ce(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function ie(n,t){c(n).setPipeline(c(t))}function oe(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function _e(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function de(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function ae(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function be(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ge(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function we(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function se(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function le(n,t,e){c(n).drawIndirect(c(t),e)}function me(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function pe(n,t){c(n).setPipeline(c(t))}function he(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function xe(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ye(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Se(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ke(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ve(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Be(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Pe(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function je(n,t,e){c(n).drawIndirect(c(t),e)}function Ie(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ae(n,t){c(n).setBlendConstant(c(t))}function De(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Te(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Ce(n,t){c(n).setStencilReference(t>>>0)}function Me(n,t){c(n).executeBundles(c(t))}function Fe(n,t){c(n).submit(c(t))}function Ee(n){queueMicrotask(c(n))}function Re(n){return p(c(n).queueMicrotask)}function Le(n){return"function"==typeof c(n)}function Oe(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Ge(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function Ve(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function We(n,t,e){c(n).beginQuery(t>>>0,c(e))}function qe(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function ze(n,t,e){c(n).bindSampler(t>>>0,c(e))}function Ue(n,t){c(n).bindVertexArray(c(t))}function Ke(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function Qe(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ne(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Xe(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Ye(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function He(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function Je(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Ze(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function $e(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function nr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function tr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function er(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function rr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function ur(n){const t=c(n).createQuery();return s(t)?0:p(t)}function fr(n){const t=c(n).createSampler();return s(t)?0:p(t)}function cr(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function ir(n,t){c(n).deleteQuery(c(t))}function or(n,t){c(n).deleteSampler(c(t))}function _r(n,t){c(n).deleteSync(c(t))}function dr(n,t){c(n).deleteVertexArray(c(t))}function ar(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function br(n,t){c(n).drawBuffers(c(t))}function gr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function wr(n,t){c(n).endQuery(t>>>0)}function sr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return s(r)?0:p(r)}function lr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function mr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function pr(){return O((function(n,t,e){return p(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function hr(n,t,e){return p(c(n).getQueryParameter(c(t),e>>>0))}function xr(n,t,e){return p(c(n).getSyncParameter(c(t),e>>>0))}function yr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),x(e,r))}function Sr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function kr(n,t){c(n).readBuffer(t>>>0)}function vr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Br(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Pr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function jr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Ir(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Ar(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Dr(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Tr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Cr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Wr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function qr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function zr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function Ur(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function Kr(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function Qr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Nr(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Xr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Yr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Hr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Jr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Zr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function $r(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function nu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function cu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function iu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function ou(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function _u(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function du(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function au(n,t){c(n).activeTexture(t>>>0)}function bu(n,t,e){c(n).attachShader(c(t),c(e))}function gu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function wu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function su(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function lu(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function mu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function pu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function hu(n,t){c(n).blendEquation(t>>>0)}function xu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function yu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Su(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ku(n,t){c(n).clear(t>>>0)}function vu(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Bu(n,t){c(n).clearDepth(t)}function Pu(n,t){c(n).clearStencil(t)}function ju(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Iu(n,t){c(n).compileShader(c(t))}function Au(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Du(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function Tu(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Cu(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Mu(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Fu(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Eu(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Ru(n,t){c(n).cullFace(t>>>0)}function Lu(n,t){c(n).deleteBuffer(c(t))}function Ou(n,t){c(n).deleteFramebuffer(c(t))}function Gu(n,t){c(n).deleteProgram(c(t))}function Vu(n,t){c(n).deleteRenderbuffer(c(t))}function Wu(n,t){c(n).deleteShader(c(t))}function qu(n,t){c(n).deleteTexture(c(t))}function zu(n,t){c(n).depthFunc(t>>>0)}function Uu(n,t){c(n).depthMask(0!==t)}function Ku(n,t,e){c(n).depthRange(t,e)}function Qu(n,t){c(n).disable(t>>>0)}function Nu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Xu(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Yu(n,t){c(n).enable(t>>>0)}function Hu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ju(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Zu(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function $u(n,t){c(n).frontFace(t>>>0)}function nf(){return O((function(n,t,e){const r=c(n).getExtension(x(t,e));return s(r)?0:p(r)}),arguments)}function tf(){return O((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function ef(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function rf(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function uf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function ff(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function cf(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function of(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function _f(n,t){c(n).linkProgram(c(t))}function df(n,t,e){c(n).pixelStorei(t>>>0,e)}function af(n,t,e){c(n).polygonOffset(t,e)}function bf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function gf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function wf(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function sf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function lf(n,t){c(n).stencilMask(t>>>0)}function mf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function pf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function hf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function xf(n,t,e){c(n).uniform1f(c(t),e)}function yf(n,t,e){c(n).uniform1i(c(t),e)}function Sf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function kf(n,t){c(n).useProgram(c(t))}function vf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Bf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Pf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function jf(n){const t=c(n).document;return s(t)?0:p(t)}function If(n){return p(c(n).location)}function Af(n){return p(c(n).navigator)}function Df(n){return c(n).devicePixelRatio}function Tf(n,t){c(n).cancelIdleCallback(t>>>0)}function Cf(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return s(e)?0:p(e)}),arguments)}function Mf(){return O((function(n,t,e){const r=c(n).matchMedia(x(t,e));return s(r)?0:p(r)}),arguments)}function Ff(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Ef(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Rf(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Lf(n,t){c(n).clearTimeout(t)}function Of(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Gf(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Vf(n){const t=c(n).body;return s(t)?0:p(t)}function Wf(n){return p(c(n).visibilityState)}function qf(n){const t=c(n).activeElement;return s(t)?0:p(t)}function zf(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Uf(){return O((function(n,t,e){return p(c(n).createElement(x(t,e)))}),arguments)}function Kf(n,t,e){const r=c(n).getElementById(x(t,e));return s(r)?0:p(r)}function Qf(){return O((function(n,t,e){const r=c(n).querySelector(x(t,e));return s(r)?0:p(r)}),arguments)}function Nf(){return O((function(n,t,e){return p(c(n).querySelectorAll(x(t,e)))}),arguments)}function Xf(){return O((function(n,t,e,r,u){c(n).setAttribute(x(t,e),x(r,u))}),arguments)}function Yf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Hf(n){return p(c(n).navigator)}function Jf(n,t){return p(c(n).fetch(c(t)))}function Zf(n){return p(c(n).style)}function $f(){return O((function(n){c(n).focus()}),arguments)}function nc(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function tc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function ec(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function rc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function uc(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function fc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function cc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function ic(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function oc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function _c(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function dc(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function ac(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function bc(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function gc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function wc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function sc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function lc(n,t){c(n).activeTexture(t>>>0)}function mc(n,t,e){c(n).attachShader(c(t),c(e))}function pc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function hc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function xc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function yc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Sc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function kc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function vc(n,t){c(n).blendEquation(t>>>0)}function Bc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Pc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function jc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ic(n,t){c(n).clear(t>>>0)}function Ac(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Dc(n,t){c(n).clearDepth(t)}function Tc(n,t){c(n).clearStencil(t)}function Cc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Mc(n,t){c(n).compileShader(c(t))}function Fc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Ec(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function Rc(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Lc(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Oc(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Gc(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Vc(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Wc(n,t){c(n).cullFace(t>>>0)}function qc(n,t){c(n).deleteBuffer(c(t))}function zc(n,t){c(n).deleteFramebuffer(c(t))}function Uc(n,t){c(n).deleteProgram(c(t))}function Kc(n,t){c(n).deleteRenderbuffer(c(t))}function Qc(n,t){c(n).deleteShader(c(t))}function Nc(n,t){c(n).deleteTexture(c(t))}function Xc(n,t){c(n).depthFunc(t>>>0)}function Yc(n,t){c(n).depthMask(0!==t)}function Hc(n,t,e){c(n).depthRange(t,e)}function Jc(n,t){c(n).disable(t>>>0)}function Zc(n,t){c(n).disableVertexAttribArray(t>>>0)}function $c(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ni(n,t){c(n).enable(t>>>0)}function ti(n,t){c(n).enableVertexAttribArray(t>>>0)}function ei(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ri(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function ui(n,t){c(n).frontFace(t>>>0)}function fi(){return O((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function ci(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function ii(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function oi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function _i(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function di(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function ai(n,t){c(n).linkProgram(c(t))}function bi(n,t,e){c(n).pixelStorei(t>>>0,e)}function gi(n,t,e){c(n).polygonOffset(t,e)}function wi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function si(n,t,e,r,u){c(n).scissor(t,e,r,u)}function li(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function mi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function pi(n,t){c(n).stencilMask(t>>>0)}function hi(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function xi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yi(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Si(n,t,e){c(n).uniform1f(c(t),e)}function ki(n,t,e){c(n).uniform1i(c(t),e)}function vi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Bi(n,t){c(n).useProgram(c(t))}function Pi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function ji(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ii(n){return c(n).now()}function Ai(){return O((function(n,t,e,u){const f=w(c(t).getPropertyValue(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Di(){return O((function(n,t,e,u){const f=w(c(t).removeProperty(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Ti(){return O((function(n,t,e,r,u){c(n).setProperty(x(t,e),x(r,u))}),arguments)}function Ci(n){return c(n).width}function Mi(n){return c(n).height}function Fi(n){return c(n).videoWidth}function Ei(n){return c(n).videoHeight}function Ri(n){return c(n).width}function Li(n){return c(n).height}function Oi(n,t){c(n).drawBuffersWEBGL(c(t))}function Gi(n){return p(c(n).signal)}function Vi(){return O((function(){return p(new AbortController)}),arguments)}function Wi(n){c(n).abort()}function qi(n){return c(n).isIntersecting}function zi(n){return c(n).pointerId}function Ui(n){return c(n).pressure}function Ki(n,t){const e=w(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Qi(n){return p(c(n).getCoalescedEvents())}function Ni(n){c(n).preventDefault()}function Xi(n,t){const e=w(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Yi(n){return c(n).matches}function Hi(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Ji(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Zi(n){return c(n).ctrlKey}function $i(n){return c(n).shiftKey}function no(n){return c(n).altKey}function to(n){return c(n).metaKey}function eo(n){return c(n).button}function ro(n){return c(n).buttons}function uo(n){return c(n).movementX}function fo(n){return c(n).movementY}function co(n){return c(n).deltaX}function io(n){return c(n).deltaY}function oo(n){return c(n).deltaMode}function _o(){return O((function(n,t,e,r){c(n).addEventListener(x(t,e),c(r))}),arguments)}function ao(){return O((function(n,t,e,r){c(n).removeEventListener(x(t,e),c(r))}),arguments)}function bo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function go(n){return c(n).width}function wo(n,t){c(n).width=t>>>0}function so(n){return c(n).height}function lo(n,t){c(n).height=t>>>0}function mo(){return O((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function po(){return O((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function ho(){return O((function(n,t){const e=w(c(t).origin,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}),arguments)}function xo(n){return c(n).width}function yo(n,t){c(n).width=t>>>0}function So(n){return c(n).height}function ko(n,t){c(n).height=t>>>0}function vo(){return O((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function Bo(){return O((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function Po(){return O((function(n){return p(new ResizeObserver(c(n)))}),arguments)}function jo(n){c(n).disconnect()}function Io(n,t){c(n).observe(c(t))}function Ao(n,t,e){c(n).observe(c(t),c(e))}function Do(n,t){c(n).unobserve(c(t))}function To(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function Co(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Mo(n){return p(c(n).contentRect)}function Fo(n){return p(c(n).devicePixelContentBoxSize)}function Eo(n){console.debug(c(n))}function Ro(n){console.error(c(n))}function Lo(n,t){console.error(c(n),c(t))}function Oo(n){console.info(c(n))}function Go(n){console.log(c(n))}function Vo(n){console.warn(c(n))}function Wo(n){return p(c(n).port1)}function qo(n){return p(c(n).port2)}function zo(){return O((function(){return p(new MessageChannel)}),arguments)}function Uo(n){c(n).close()}function Ko(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Qo(n){c(n).start()}function No(n){return c(n).inlineSize}function Xo(n){return c(n).blockSize}function Yo(n){let t;try{t=c(n)instanceof Response}catch(n){t=!1}return t}function Ho(n,t){const e=w(c(t).url,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Jo(n){return c(n).status}function Zo(n){return p(c(n).headers)}function $o(){return O((function(n){return p(c(n).arrayBuffer())}),arguments)}function n_(){return O((function(n){return p(c(n).text())}),arguments)}function t_(n){return c(n).altKey}function e_(n){return c(n).ctrlKey}function r_(n){return c(n).shiftKey}function u_(n){return c(n).metaKey}function f_(n){return c(n).location}function c_(n){return c(n).repeat}function i_(n,t){const e=w(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function o_(n,t){const e=w(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function __(n){return c(n).persisted}function d_(){return O((function(n,t,e){return p(new Request(x(n,t),c(e)))}),arguments)}function a_(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function b_(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function g_(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function w_(){return O((function(){return p(new Headers)}),arguments)}function s_(){return O((function(n,t,e,r,u){c(n).append(x(t,e),x(r,u))}),arguments)}function l_(){return O((function(n){return p(new IntersectionObserver(c(n)))}),arguments)}function m_(n){c(n).disconnect()}function p_(n,t){c(n).observe(c(t))}function h_(){return O((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function x_(n,t){return c(n).contains(c(t))}function y_(n,t){const e=c(n)[t>>>0];return s(e)?0:p(e)}function S_(n,t){c(n).bindVertexArrayOES(c(t))}function k_(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function v_(n,t){c(n).deleteVertexArrayOES(c(t))}function B_(n,t){return p(c(n)[t>>>0])}function P_(n){return c(n).length}function j_(){return p(new Array)}function I_(n,t){return p(new Function(x(n,t)))}function A_(n){return p(c(n).next)}function D_(){return O((function(n){return p(c(n).next())}),arguments)}function T_(n){return c(n).done}function C_(n){return p(c(n).value)}function M_(){return p(Symbol.iterator)}function F_(){return O((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function E_(){return O((function(n,t){return p(c(n).call(c(t)))}),arguments)}function R_(){return p(new Object)}function L_(){return O((function(){return p(self.self)}),arguments)}function O_(){return O((function(){return p(window.window)}),arguments)}function G_(){return O((function(){return p(globalThis.globalThis)}),arguments)}function V_(){return O((function(){return p(global.global)}),arguments)}function W_(n,t,e){return c(n).includes(c(t),e)}function q_(n){return p(Array.of(c(n)))}function z_(n,t){return c(n).push(c(t))}function U_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function K_(n,t){return p(Object.getOwnPropertyDescriptor(c(n),c(t)))}function Q_(n,t){return Object.is(c(n),c(t))}function N_(n){return p(c(n).valueOf())}function X_(n){return p(Promise.resolve(c(n)))}function Y_(n,t){return p(c(n).catch(c(t)))}function H_(n,t){return p(c(n).then(c(t)))}function J_(n,t,e){return p(c(n).then(c(t),c(e)))}function Z_(n){return p(c(n).buffer)}function $_(n,t,e){return p(new Int8Array(c(n),t>>>0,e>>>0))}function nd(n,t,e){return p(new Int16Array(c(n),t>>>0,e>>>0))}function td(n,t,e){return p(new Int32Array(c(n),t>>>0,e>>>0))}function ed(n,t,e){return p(new Uint8Array(c(n),t>>>0,e>>>0))}function rd(n){return p(new Uint8Array(c(n)))}function ud(n,t,e){c(n).set(c(t),e>>>0)}function fd(n){return c(n).length}function cd(n,t,e){return p(new Uint16Array(c(n),t>>>0,e>>>0))}function id(n,t,e){return p(new Uint32Array(c(n),t>>>0,e>>>0))}function od(n,t,e){return p(new Float32Array(c(n),t>>>0,e>>>0))}function _d(n){return p(c(n).buffer)}function dd(){return O((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function ad(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function bd(){return O((function(n){return p(JSON.stringify(c(n)))}),arguments)}function gd(n,t){const e=w(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=_;m()[n/4+1]=u,m()[n/4+0]=e}function wd(n,t){throw new Error(x(n,t))}function sd(){return p(r.memory)}function ld(n,t,e){return p(k(n,t,49,v))}function md(n,t,e){return p(k(n,t,49,B))}function pd(n,t,e){return p(k(n,t,49,v))}function hd(n,t,e){return p(k(n,t,49,v))}function xd(n,t,e){return p(k(n,t,49,P))}function yd(n,t,e){return p(k(n,t,49,v))}function Sd(n,t,e){return p(k(n,t,49,v))}function kd(n,t,e){return p(k(n,t,285,j))}function vd(n,t,e){return p(k(n,t,285,I))}function Bd(n,t,e){return p(k(n,t,285,I))}function Pd(n,t,e){return p(k(n,t,285,I))}function jd(n,t,e){return p(k(n,t,285,I))}function Id(n,t,e){return p(k(n,t,285,I))}function Ad(n,t,e){return p(k(n,t,285,A))}function Dd(n,t,e){return p(k(n,t,900,D))}function Td(n,t,e){return p(k(n,t,900,D))}function Cd(n,t,e){return p(k(n,t,900,D))}function Md(n,t,e){return p(k(n,t,900,T))}function Fd(n,t,e){return p(k(n,t,900,D))}function Ed(n,t,e){return p(k(n,t,900,D))}function Rd(n,t,e){return p(k(n,t,900,D))}function Ld(n,t,e){return p(k(n,t,2035,C))}function Od(n,t,e){return p(k(n,t,2035,C))}function Gd(n,t,e){return p(k(n,t,2129,M))}}).call(this,e(260)(n))},411:function(n,t,e){"use strict";e.r(t);var r=e(412),u=e(245);e.d(t,"__wbg_set_wasm",(function(){return u.Ai})),e.d(t,"run",(function(){return u.tl})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.pl})),e.d(t,"__wbindgen_string_get",(function(){return u.ql})),e.d(t,"__wbindgen_cb_drop",(function(){return u.Ik})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.ol})),e.d(t,"__wbindgen_is_undefined",(function(){return u.kl})),e.d(t,"__wbindgen_string_new",(function(){return u.rl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Eg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Mi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Rd})),e.d(t,"__wbg_fetch_386f87a3ebf5003c",(function(){return u.Wd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Wg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Xg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.qe})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Lh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Uh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Oh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Yg})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.ph})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.xk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.mh})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Mh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Th})),e.d(t,"__wbindgen_number_new",(function(){return u.nl})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.yk})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.ah})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Rg})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.mf})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.lf})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.af})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Ud})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.Cf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.Kh})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Hb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.we})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.of})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.ng})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.nf})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.Ae})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.eg})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.fg})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.gg})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.dg})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Mf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Nf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Wf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Vf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Yf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Zf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.bg})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.cg})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.ig})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.hg})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.ag})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.rg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.qg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.lg})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Of})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.jg})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.kg})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Xf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.Tf})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Pf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Qf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Rf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Sf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Uf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Pd})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.cf})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.wh})),e.d(t,"__wbindgen_is_object",(function(){return u.jl})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.Ih})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.Ee})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Td})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.Df})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.oc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Tb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Ub})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.dc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.jc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Zb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Xb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.sc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.nc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.gc})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Yb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.ic})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.cd})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.Di})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.qh})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.ih})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.Jf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.ek})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.wc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.ed})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.dd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.me})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ne})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Lb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Mb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Rb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Sb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.q})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Nd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.s})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Md})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.zf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.be})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Yd})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.jb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.ib})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.Gk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.Ph})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.ae})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Zd})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.Ek})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.hk})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.Li})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.Fk})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Nb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.ki})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.ei})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Zh})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.od})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.nd})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.li})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.ai})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.ci})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.hi})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.ji})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.vi})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.ti})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Fd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.Cd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Ed})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.Ad})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.mi})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.bi})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.di})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.gi})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.ii})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.wi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.ui})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Gd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.Bd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.zd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.fi})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.pi})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.xi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.qi})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Sd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Zi})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.uh})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.vh})),e.d(t,"__wbindgen_is_function",(function(){return u.il})),e.d(t,"__wbindgen_boolean_get",(function(){return u.Hk})),e.d(t,"__wbindgen_number_get",(function(){return u.ml})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.sf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.r})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.v})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.C})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.G})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.R})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.U})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.X})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.Y})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.kb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.lb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.vb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Eb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Fb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Gb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Kb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Qb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.hc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.mc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.vc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Ic})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Lc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Oc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Sc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.sd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.wd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.yd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Ld})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Vd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.he})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.oe})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ze})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Ke})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Re})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Se})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.uf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.xh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.yh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.Ah})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.Eh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Rh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Sh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.aj})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.cj})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.fj})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.gj})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.kj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.lj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.hj})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.jj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.mj})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.pj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.oj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.qj})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.nj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.rj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.zj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.Aj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.Cj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.Ej})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.Fj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Ij})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Jj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Mj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Pj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Qj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Tj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Vj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Xj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Yj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Zj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.ak})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.ck})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.dk})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.nk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.ok})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.o})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.u})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.x})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.y})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.A})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.D})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.H})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.L})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.J})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.P})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.N})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.tb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.nb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.pb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.rb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.zb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.Bb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Pb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Wb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.cc})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.ec})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.kc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.qc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.rc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.Ac})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Dc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Fc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Hc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Jc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Mc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Pc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Xc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Yc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.bd})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.kd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.id})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.td})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Kd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Id})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.de})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ge})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.je})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.ye})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.De})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Fe})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.Ie})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.Me})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ne})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Pe})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Te})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.Ff})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.dh})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.hh})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Gh})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Vh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Hi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Qi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Ti})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Ri})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Vi})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.dj})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.wj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.yj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Kj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.ik})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.pk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.uk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.tf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.pd})),e.d(t,"__wbg_location_2951b5ee34f19221",(function(){return u.Gf})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.vg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.gd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.gb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.re})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Kf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Nh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.fb})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Jh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.sb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.si})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.ri})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.T})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.vk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.le})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.ac})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.xe})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.th})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.sh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Yh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.ni})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.ug})),e.d(t,"__wbg_fetch_921fad6ef9e883dd",(function(){return u.Xd})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Yi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.ce})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.W})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.Z})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Db})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.zh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.bj})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.ij})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.Bj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.Dj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.Gj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.Hj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Nj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Oj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Wj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.bk})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.p})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.t})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.w})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.z})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.B})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.E})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.I})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.M})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.K})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.Q})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.O})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.ub})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.mb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.ob})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.qb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.yb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.Ab})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Ob})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Vb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.bc})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.fc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.lc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.pc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.tc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.zc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Cc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Ec})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Gc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Kc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Nc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Qc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Wc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Zc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.ad})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.jd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.hd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.ud})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Jd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Hd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.ee})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.fe})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ke})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.Ce})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Ge})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.He})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Le})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Oe})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Ue})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.Ef})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.ch})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.gh})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.Fh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Wh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Gi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Pi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ui})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Si})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Wi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.ej})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.vj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.xj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Lj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.jk})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.qk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.tk})),e.d(t,"__wbg_now_4e659b3d15f470d9",(function(){return u.Qg})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Je})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Dh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.oi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.Ak})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.ff})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.sk})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.rk})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.zk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.hf})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.vd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ki})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.wg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.vf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.eh})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.nh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.fh})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.pe})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.oh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.mg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Lf})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Ch})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.xc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ii})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.pg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.cb})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.db})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.sg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.tg})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Uc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Vc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Tc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Bh})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.pf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.Ck})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.Ei})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.gf})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.Ci})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.ue})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.ve})),e.d(t,"__wbg_origin_ee93e29ace71f568",(function(){return u.Zg})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.Bk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.Fi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.ef})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.Bi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.se})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.te})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.Ag})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.ld})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Tg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Ug})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.fk})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Qe})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ie})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Jb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.fd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.Bc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Qd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Od})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.jf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.If})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.wk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.jh})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.kh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.yg})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.wb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.lh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Ni})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.kf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.S})),e.d(t,"__wbg_instanceof_Response_849eb93e75734b6e",(function(){return u.rf})),e.d(t,"__wbg_url_5f6dc4009ac5f99d",(function(){return u.gk})),e.d(t,"__wbg_status_61a01141acd3cf74",(function(){return u.Oi})),e.d(t,"__wbg_headers_9620bfada380764a",(function(){return u.df})),e.d(t,"__wbg_arrayBuffer_29931d52c7206b02",(function(){return u.n})),e.d(t,"__wbg_text_450a059667fd91fd",(function(){return u.sj})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.yc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Ji})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.og})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.Hf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Hh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.yf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.xb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.bh})),e.d(t,"__wbg_newwithstrandinit_3fd6fba4083ff2d0",(function(){return u.Ng})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.rd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.xd})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.mk})),e.d(t,"__wbg_new_ab6fd82b10560829",(function(){return u.Dg})),e.d(t,"__wbg_append_7bfcb4937d1d5e29",(function(){return u.m})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.zg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.md})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Sg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Ib})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Ve})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.F})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.uc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Rc})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.We})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.Bf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.xg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Fg})),e.d(t,"__wbg_next_40fc327bfc8770e6",(function(){return u.Pg})),e.d(t,"__wbg_next_196c84450b364254",(function(){return u.Og})),e.d(t,"__wbg_done_298b57d23c0fc80c",(function(){return u.qd})),e.d(t,"__wbg_value_d93c65011f51a456",(function(){return u.lk})),e.d(t,"__wbg_iterator_2cee6dadfd956dfa",(function(){return u.xf})),e.d(t,"__wbg_get_e3c254076557e348",(function(){return u.Xe})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.eb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Cg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Xh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.Dk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Ye})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Ze})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.if})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Vg})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.rh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.qf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Be})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.wf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.kk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Qh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.hb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.tj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.uj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.ab})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Kg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Mg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.Bg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.zi})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.Af})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Lg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Gg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Jg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.bb})),e.d(t,"__wbg_has_0af94d20077affa2",(function(){return u.bf})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.yi})),e.d(t,"__wbg_stringify_8887fe74e1c50d81",(function(){return u.Xi})),e.d(t,"__wbindgen_debug_string",(function(){return u.hl})),e.d(t,"__wbindgen_throw",(function(){return u.sl})),e.d(t,"__wbindgen_memory",(function(){return u.ll})),e.d(t,"__wbindgen_closure_wrapper637",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper638",(function(){return u.bl})),e.d(t,"__wbindgen_closure_wrapper639",(function(){return u.cl})),e.d(t,"__wbindgen_closure_wrapper640",(function(){return u.dl})),e.d(t,"__wbindgen_closure_wrapper641",(function(){return u.el})),e.d(t,"__wbindgen_closure_wrapper642",(function(){return u.fl})),e.d(t,"__wbindgen_closure_wrapper643",(function(){return u.gl})),e.d(t,"__wbindgen_closure_wrapper1102",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper1103",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper1104",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper1105",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper1106",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper1107",(function(){return u.Ok})),e.d(t,"__wbindgen_closure_wrapper1108",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper2518",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper2519",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper2520",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper2521",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper2522",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper2523",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper2524",(function(){return u.Wk})),e.d(t,"__wbindgen_closure_wrapper4551",(function(){return u.Xk})),e.d(t,"__wbindgen_closure_wrapper4553",(function(){return u.Yk})),e.d(t,"__wbindgen_closure_wrapper5324",(function(){return u.Zk})),Object(u.Ai)(r),r.__wbindgen_start()},412:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(245);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/29.b956722c.js b/assets/js/29.b956722c.js new file mode 100644 index 000000000..97fdcd80a --- /dev/null +++ b/assets/js/29.b956722c.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{249:function(n,t,e){"use strict";(function(n){e.d(t,"ui",(function(){return u})),e.d(t,"il",(function(){return F})),e.d(t,"el",(function(){return W})),e.d(t,"xk",(function(){return q})),e.d(t,"Zk",(function(){return z})),e.d(t,"dl",(function(){return U})),e.d(t,"gl",(function(){return K})),e.d(t,"Bg",(function(){return Q})),e.d(t,"Gi",(function(){return N})),e.d(t,"Nd",(function(){return X})),e.d(t,"ff",(function(){return Y})),e.d(t,"ef",(function(){return H})),e.d(t,"hf",(function(){return J})),e.d(t,"gf",(function(){return Z})),e.d(t,"cl",(function(){return $})),e.d(t,"Fi",(function(){return nn})),e.d(t,"Yj",(function(){return tn})),e.d(t,"Zc",(function(){return en})),e.d(t,"ve",(function(){return rn})),e.d(t,"Cf",(function(){return un})),e.d(t,"Wj",(function(){return cn})),e.d(t,"ld",(function(){return fn})),e.d(t,"kd",(function(){return on})),e.d(t,"Jd",(function(){return _n})),e.d(t,"ei",(function(){return dn})),e.d(t,"Vh",(function(){return an})),e.d(t,"Xh",(function(){return bn})),e.d(t,"fl",(function(){return gn})),e.d(t,"he",(function(){return wn})),e.d(t,"df",(function(){return sn})),e.d(t,"Ue",(function(){return ln})),e.d(t,"ze",(function(){return mn})),e.d(t,"Ch",(function(){return pn})),e.d(t,"ge",(function(){return hn})),e.d(t,"kg",(function(){return xn})),e.d(t,"Sd",(function(){return yn})),e.d(t,"Vd",(function(){return Sn})),e.d(t,"Wh",(function(){return kn})),e.d(t,"Uh",(function(){return vn})),e.d(t,"Bd",(function(){return Bn})),e.d(t,"xd",(function(){return Pn})),e.d(t,"vd",(function(){return In})),e.d(t,"zd",(function(){return jn})),e.d(t,"bi",(function(){return An})),e.d(t,"ci",(function(){return Dn})),e.d(t,"gi",(function(){return Tn})),e.d(t,"oi",(function(){return Cn})),e.d(t,"ni",(function(){return Mn})),e.d(t,"Qd",(function(){return Fn})),e.d(t,"vf",(function(){return En})),e.d(t,"ph",(function(){return Rn})),e.d(t,"Bf",(function(){return Ln})),e.d(t,"xi",(function(){return On})),e.d(t,"Rb",(function(){return Gn})),e.d(t,"Qb",(function(){return Vn})),e.d(t,"Ub",(function(){return Wn})),e.d(t,"Vb",(function(){return qn})),e.d(t,"Wb",(function(){return zn})),e.d(t,"ac",(function(){return Un})),e.d(t,"dc",(function(){return Kn})),e.d(t,"fc",(function(){return Qn})),e.d(t,"gc",(function(){return Nn})),e.d(t,"kc",(function(){return Xn})),e.d(t,"lc",(function(){return Yn})),e.d(t,"pc",(function(){return Hn})),e.d(t,"ad",(function(){return Jn})),e.d(t,"bh",(function(){return Zn})),e.d(t,"jh",(function(){return $n})),e.d(t,"tc",(function(){return nt})),e.d(t,"bd",(function(){return tt})),e.d(t,"mj",(function(){return et})),e.d(t,"Rg",(function(){return rt})),e.d(t,"rf",(function(){return ut})),e.d(t,"wf",(function(){return ct})),e.d(t,"ig",(function(){return ft})),e.d(t,"Eb",(function(){return it})),e.d(t,"re",(function(){return ot})),e.d(t,"uh",(function(){return _t})),e.d(t,"jg",(function(){return dt})),e.d(t,"Id",(function(){return at})),e.d(t,"Od",(function(){return bt})),e.d(t,"Zh",(function(){return gt})),e.d(t,"ji",(function(){return wt})),e.d(t,"ki",(function(){return st})),e.d(t,"ri",(function(){return lt})),e.d(t,"Th",(function(){return mt})),e.d(t,"Yh",(function(){return pt})),e.d(t,"Cd",(function(){return ht})),e.d(t,"yd",(function(){return xt})),e.d(t,"wd",(function(){return yt})),e.d(t,"Ad",(function(){return St})),e.d(t,"ai",(function(){return kt})),e.d(t,"di",(function(){return vt})),e.d(t,"fi",(function(){return Bt})),e.d(t,"qi",(function(){return Pt})),e.d(t,"pi",(function(){return It})),e.d(t,"le",(function(){return jt})),e.d(t,"qf",(function(){return At})),e.d(t,"o",(function(){return Dt})),e.d(t,"q",(function(){return Tt})),e.d(t,"gb",(function(){return Ct})),e.d(t,"hb",(function(){return Mt})),e.d(t,"Ib",(function(){return Ft})),e.d(t,"Jb",(function(){return Et})),e.d(t,"Ob",(function(){return Rt})),e.d(t,"Pb",(function(){return Lt})),e.d(t,"Ud",(function(){return Ot})),e.d(t,"Td",(function(){return Gt})),e.d(t,"Jh",(function(){return Vt})),e.d(t,"Md",(function(){return Wt})),e.d(t,"Ve",(function(){return qt})),e.d(t,"Zf",(function(){return zt})),e.d(t,"ag",(function(){return Ut})),e.d(t,"bg",(function(){return Kt})),e.d(t,"Yf",(function(){return Qt})),e.d(t,"Ff",(function(){return Nt})),e.d(t,"Gf",(function(){return Xt})),e.d(t,"Rf",(function(){return Yt})),e.d(t,"Qf",(function(){return Ht})),e.d(t,"Tf",(function(){return Jt})),e.d(t,"Uf",(function(){return Zt})),e.d(t,"Wf",(function(){return $t})),e.d(t,"Xf",(function(){return ne})),e.d(t,"dg",(function(){return te})),e.d(t,"cg",(function(){return ee})),e.d(t,"Vf",(function(){return re})),e.d(t,"gg",(function(){return ue})),e.d(t,"Hf",(function(){return ce})),e.d(t,"eg",(function(){return fe})),e.d(t,"fg",(function(){return ie})),e.d(t,"pg",(function(){return oe})),e.d(t,"og",(function(){return _e})),e.d(t,"Sf",(function(){return de})),e.d(t,"Jf",(function(){return ae})),e.d(t,"If",(function(){return be})),e.d(t,"Of",(function(){return ge})),e.d(t,"Kf",(function(){return we})),e.d(t,"Lf",(function(){return se})),e.d(t,"Mf",(function(){return le})),e.d(t,"Nf",(function(){return me})),e.d(t,"Pf",(function(){return pe})),e.d(t,"Yk",(function(){return he})),e.d(t,"a",(function(){return xe})),e.d(t,"c",(function(){return ye})),e.d(t,"Eh",(function(){return Se})),e.d(t,"Pd",(function(){return ke})),e.d(t,"uf",(function(){return ve})),e.d(t,"lg",(function(){return Be})),e.d(t,"uk",(function(){return Pe})),e.d(t,"vk",(function(){return Ie})),e.d(t,"Kb",(function(){return je})),e.d(t,"Ri",(function(){return Ae})),e.d(t,"wk",(function(){return De})),e.d(t,"bl",(function(){return Te})),e.d(t,"Pg",(function(){return Ce})),e.d(t,"Qg",(function(){return Me})),e.d(t,"b",(function(){return Fe})),e.d(t,"nk",(function(){return Ee})),e.d(t,"ih",(function(){return Re})),e.d(t,"Oh",(function(){return Le})),e.d(t,"ke",(function(){return Oe})),e.d(t,"Fh",(function(){return Ge})),e.d(t,"Ih",(function(){return Ve})),e.d(t,"Sg",(function(){return We})),e.d(t,"ok",(function(){return qe})),e.d(t,"Gh",(function(){return ze})),e.d(t,"Nh",(function(){return Ue})),e.d(t,"fh",(function(){return Ke})),e.d(t,"oh",(function(){return Qe})),e.d(t,"nh",(function(){return Ne})),e.d(t,"Xk",(function(){return Xe})),e.d(t,"kf",(function(){return Ye})),e.d(t,"p",(function(){return He})),e.d(t,"t",(function(){return Je})),e.d(t,"A",(function(){return Ze})),e.d(t,"E",(function(){return $e})),e.d(t,"P",(function(){return nr})),e.d(t,"S",(function(){return tr})),e.d(t,"V",(function(){return er})),e.d(t,"W",(function(){return rr})),e.d(t,"ib",(function(){return ur})),e.d(t,"jb",(function(){return cr})),e.d(t,"kb",(function(){return fr})),e.d(t,"sb",(function(){return ir})),e.d(t,"Bb",(function(){return or})),e.d(t,"zb",(function(){return _r})),e.d(t,"Cb",(function(){return dr})),e.d(t,"Db",(function(){return ar})),e.d(t,"Hb",(function(){return br})),e.d(t,"Nb",(function(){return gr})),e.d(t,"ec",(function(){return wr})),e.d(t,"jc",(function(){return sr})),e.d(t,"sc",(function(){return lr})),e.d(t,"Fc",(function(){return mr})),e.d(t,"Ic",(function(){return pr})),e.d(t,"Lc",(function(){return hr})),e.d(t,"Pc",(function(){return xr})),e.d(t,"od",(function(){return yr})),e.d(t,"sd",(function(){return Sr})),e.d(t,"ud",(function(){return kr})),e.d(t,"Hd",(function(){return vr})),e.d(t,"Rd",(function(){return Br})),e.d(t,"be",(function(){return Pr})),e.d(t,"ie",(function(){return Ir})),e.d(t,"ue",(function(){return jr})),e.d(t,"Fe",(function(){return Ar})),e.d(t,"Me",(function(){return Dr})),e.d(t,"Ne",(function(){return Tr})),e.d(t,"mf",(function(){return Cr})),e.d(t,"qh",(function(){return Mr})),e.d(t,"rh",(function(){return Fr})),e.d(t,"th",(function(){return Er})),e.d(t,"yh",(function(){return Rr})),e.d(t,"Lh",(function(){return Lr})),e.d(t,"Mh",(function(){return Or})),e.d(t,"Si",(function(){return Gr})),e.d(t,"Ui",(function(){return Vr})),e.d(t,"Xi",(function(){return Wr})),e.d(t,"Yi",(function(){return qr})),e.d(t,"cj",(function(){return zr})),e.d(t,"dj",(function(){return Ur})),e.d(t,"Zi",(function(){return Kr})),e.d(t,"bj",(function(){return Qr})),e.d(t,"ej",(function(){return Nr})),e.d(t,"hj",(function(){return Xr})),e.d(t,"gj",(function(){return Yr})),e.d(t,"ij",(function(){return Hr})),e.d(t,"fj",(function(){return Jr})),e.d(t,"jj",(function(){return Zr})),e.d(t,"rj",(function(){return $r})),e.d(t,"sj",(function(){return nu})),e.d(t,"uj",(function(){return tu})),e.d(t,"wj",(function(){return eu})),e.d(t,"xj",(function(){return ru})),e.d(t,"Aj",(function(){return uu})),e.d(t,"Bj",(function(){return cu})),e.d(t,"Ej",(function(){return fu})),e.d(t,"Hj",(function(){return iu})),e.d(t,"Ij",(function(){return ou})),e.d(t,"Jj",(function(){return _u})),e.d(t,"Lj",(function(){return du})),e.d(t,"Mj",(function(){return au})),e.d(t,"Nj",(function(){return bu})),e.d(t,"Pj",(function(){return gu})),e.d(t,"Qj",(function(){return wu})),e.d(t,"Rj",(function(){return su})),e.d(t,"Sj",(function(){return lu})),e.d(t,"Uj",(function(){return mu})),e.d(t,"Vj",(function(){return pu})),e.d(t,"dk",(function(){return hu})),e.d(t,"ek",(function(){return xu})),e.d(t,"g",(function(){return yu})),e.d(t,"m",(function(){return Su})),e.d(t,"s",(function(){return ku})),e.d(t,"v",(function(){return vu})),e.d(t,"w",(function(){return Bu})),e.d(t,"y",(function(){return Pu})),e.d(t,"B",(function(){return Iu})),e.d(t,"F",(function(){return ju})),e.d(t,"J",(function(){return Au})),e.d(t,"H",(function(){return Du})),e.d(t,"N",(function(){return Tu})),e.d(t,"L",(function(){return Cu})),e.d(t,"qb",(function(){return Mu})),e.d(t,"mb",(function(){return Fu})),e.d(t,"ob",(function(){return Eu})),e.d(t,"wb",(function(){return Ru})),e.d(t,"yb",(function(){return Lu})),e.d(t,"Mb",(function(){return Ou})),e.d(t,"Tb",(function(){return Gu})),e.d(t,"Zb",(function(){return Vu})),e.d(t,"bc",(function(){return Wu})),e.d(t,"hc",(function(){return qu})),e.d(t,"nc",(function(){return zu})),e.d(t,"oc",(function(){return Uu})),e.d(t,"xc",(function(){return Ku})),e.d(t,"Ac",(function(){return Qu})),e.d(t,"Cc",(function(){return Nu})),e.d(t,"Ec",(function(){return Xu})),e.d(t,"Gc",(function(){return Yu})),e.d(t,"Jc",(function(){return Hu})),e.d(t,"Mc",(function(){return Ju})),e.d(t,"Uc",(function(){return Zu})),e.d(t,"Vc",(function(){return $u})),e.d(t,"Yc",(function(){return nc})),e.d(t,"hd",(function(){return tc})),e.d(t,"fd",(function(){return ec})),e.d(t,"pd",(function(){return rc})),e.d(t,"Gd",(function(){return uc})),e.d(t,"Ed",(function(){return cc})),e.d(t,"Xd",(function(){return fc})),e.d(t,"ae",(function(){return ic})),e.d(t,"de",(function(){return oc})),e.d(t,"te",(function(){return _c})),e.d(t,"ye",(function(){return dc})),e.d(t,"Ae",(function(){return ac})),e.d(t,"De",(function(){return bc})),e.d(t,"He",(function(){return gc})),e.d(t,"Ie",(function(){return wc})),e.d(t,"Ke",(function(){return sc})),e.d(t,"Oe",(function(){return lc})),e.d(t,"yf",(function(){return mc})),e.d(t,"Wg",(function(){return pc})),e.d(t,"ah",(function(){return hc})),e.d(t,"Ah",(function(){return xc})),e.d(t,"Ph",(function(){return yc})),e.d(t,"Bi",(function(){return Sc})),e.d(t,"Ji",(function(){return kc})),e.d(t,"Mi",(function(){return vc})),e.d(t,"Ki",(function(){return Bc})),e.d(t,"Oi",(function(){return Pc})),e.d(t,"Vi",(function(){return Ic})),e.d(t,"oj",(function(){return jc})),e.d(t,"qj",(function(){return Ac})),e.d(t,"Cj",(function(){return Dc})),e.d(t,"Zj",(function(){return Tc})),e.d(t,"fk",(function(){return Cc})),e.d(t,"kk",(function(){return Mc})),e.d(t,"lf",(function(){return Fc})),e.d(t,"md",(function(){return Ec})),e.d(t,"tg",(function(){return Rc})),e.d(t,"dd",(function(){return Lc})),e.d(t,"eb",(function(){return Oc})),e.d(t,"me",(function(){return Gc})),e.d(t,"Df",(function(){return Vc})),e.d(t,"Hh",(function(){return Wc})),e.d(t,"db",(function(){return qc})),e.d(t,"Dh",(function(){return zc})),e.d(t,"pb",(function(){return Uc})),e.d(t,"mi",(function(){return Kc})),e.d(t,"li",(function(){return Qc})),e.d(t,"R",(function(){return Nc})),e.d(t,"lk",(function(){return Xc})),e.d(t,"e",(function(){return Yc})),e.d(t,"fe",(function(){return Hc})),e.d(t,"Xb",(function(){return Jc})),e.d(t,"se",(function(){return Zc})),e.d(t,"mh",(function(){return $c})),e.d(t,"lh",(function(){return nf})),e.d(t,"Sh",(function(){return tf})),e.d(t,"hi",(function(){return ef})),e.d(t,"sg",(function(){return rf})),e.d(t,"Qi",(function(){return uf})),e.d(t,"Wd",(function(){return cf})),e.d(t,"U",(function(){return ff})),e.d(t,"T",(function(){return of})),e.d(t,"X",(function(){return _f})),e.d(t,"Ab",(function(){return df})),e.d(t,"sh",(function(){return af})),e.d(t,"Ti",(function(){return bf})),e.d(t,"aj",(function(){return gf})),e.d(t,"tj",(function(){return wf})),e.d(t,"vj",(function(){return sf})),e.d(t,"yj",(function(){return lf})),e.d(t,"zj",(function(){return mf})),e.d(t,"Fj",(function(){return pf})),e.d(t,"Gj",(function(){return hf})),e.d(t,"Kj",(function(){return xf})),e.d(t,"Oj",(function(){return yf})),e.d(t,"Tj",(function(){return Sf})),e.d(t,"f",(function(){return kf})),e.d(t,"n",(function(){return vf})),e.d(t,"r",(function(){return Bf})),e.d(t,"u",(function(){return Pf})),e.d(t,"x",(function(){return If})),e.d(t,"z",(function(){return jf})),e.d(t,"C",(function(){return Af})),e.d(t,"G",(function(){return Df})),e.d(t,"K",(function(){return Tf})),e.d(t,"I",(function(){return Cf})),e.d(t,"O",(function(){return Mf})),e.d(t,"M",(function(){return Ff})),e.d(t,"rb",(function(){return Ef})),e.d(t,"lb",(function(){return Rf})),e.d(t,"nb",(function(){return Lf})),e.d(t,"vb",(function(){return Of})),e.d(t,"xb",(function(){return Gf})),e.d(t,"Lb",(function(){return Vf})),e.d(t,"Sb",(function(){return Wf})),e.d(t,"Yb",(function(){return qf})),e.d(t,"cc",(function(){return zf})),e.d(t,"ic",(function(){return Uf})),e.d(t,"mc",(function(){return Kf})),e.d(t,"qc",(function(){return Qf})),e.d(t,"wc",(function(){return Nf})),e.d(t,"zc",(function(){return Xf})),e.d(t,"Bc",(function(){return Yf})),e.d(t,"Dc",(function(){return Hf})),e.d(t,"Hc",(function(){return Jf})),e.d(t,"Kc",(function(){return Zf})),e.d(t,"Nc",(function(){return $f})),e.d(t,"Tc",(function(){return ni})),e.d(t,"Wc",(function(){return ti})),e.d(t,"Xc",(function(){return ei})),e.d(t,"gd",(function(){return ri})),e.d(t,"ed",(function(){return ui})),e.d(t,"qd",(function(){return ci})),e.d(t,"Fd",(function(){return fi})),e.d(t,"Dd",(function(){return ii})),e.d(t,"Yd",(function(){return oi})),e.d(t,"Zd",(function(){return _i})),e.d(t,"ee",(function(){return di})),e.d(t,"xe",(function(){return ai})),e.d(t,"Be",(function(){return bi})),e.d(t,"Ce",(function(){return gi})),e.d(t,"Ge",(function(){return wi})),e.d(t,"Je",(function(){return si})),e.d(t,"Pe",(function(){return li})),e.d(t,"xf",(function(){return mi})),e.d(t,"Vg",(function(){return pi})),e.d(t,"Zg",(function(){return hi})),e.d(t,"zh",(function(){return xi})),e.d(t,"Qh",(function(){return yi})),e.d(t,"Ai",(function(){return Si})),e.d(t,"Ii",(function(){return ki})),e.d(t,"Ni",(function(){return vi})),e.d(t,"Li",(function(){return Bi})),e.d(t,"Pi",(function(){return Pi})),e.d(t,"Wi",(function(){return Ii})),e.d(t,"nj",(function(){return ji})),e.d(t,"pj",(function(){return Ai})),e.d(t,"Dj",(function(){return Di})),e.d(t,"ak",(function(){return Ti})),e.d(t,"gk",(function(){return Ci})),e.d(t,"jk",(function(){return Mi})),e.d(t,"nd",(function(){return Fi})),e.d(t,"td",(function(){return Ei})),e.d(t,"ck",(function(){return Ri})),e.d(t,"Ee",(function(){return Li})),e.d(t,"xh",(function(){return Oi})),e.d(t,"ii",(function(){return Gi})),e.d(t,"xg",(function(){return Vi})),e.d(t,"jd",(function(){return Wi})),e.d(t,"Lg",(function(){return qi})),e.d(t,"l",(function(){return zi})),e.d(t,"Fb",(function(){return Ui})),e.d(t,"Qe",(function(){return Ki})),e.d(t,"rd",(function(){return Qi})),e.d(t,"ik",(function(){return Ni})),e.d(t,"hk",(function(){return Xi})),e.d(t,"ch",(function(){return Yi})),e.d(t,"dh",(function(){return Hi})),e.d(t,"wg",(function(){return Ji})),e.d(t,"ce",(function(){return Zi})),e.d(t,"nf",(function(){return $i})),e.d(t,"Gb",(function(){return no})),e.d(t,"cd",(function(){return to})),e.d(t,"cf",(function(){return eo})),e.d(t,"Q",(function(){return ro})),e.d(t,"yc",(function(){return uo})),e.d(t,"Ld",(function(){return co})),e.d(t,"Kd",(function(){return fo})),e.d(t,"bf",(function(){return io})),e.d(t,"Af",(function(){return oo})),e.d(t,"mk",(function(){return _o})),e.d(t,"Ei",(function(){return ao})),e.d(t,"ug",(function(){return bo})),e.d(t,"d",(function(){return go})),e.d(t,"tb",(function(){return wo})),e.d(t,"eh",(function(){return so})),e.d(t,"Hi",(function(){return lo})),e.d(t,"qk",(function(){return mo})),e.d(t,"Xe",(function(){return po})),e.d(t,"if",(function(){return ho})),e.d(t,"sk",(function(){return xo})),e.d(t,"yi",(function(){return yo})),e.d(t,"Ye",(function(){return So})),e.d(t,"wi",(function(){return ko})),e.d(t,"pe",(function(){return vo})),e.d(t,"qe",(function(){return Bo})),e.d(t,"pk",(function(){return Po})),e.d(t,"Ze",(function(){return Io})),e.d(t,"k",(function(){return jo})),e.d(t,"vc",(function(){return Ao})),e.d(t,"Di",(function(){return Do})),e.d(t,"mg",(function(){return To})),e.d(t,"zf",(function(){return Co})),e.d(t,"Bh",(function(){return Mo})),e.d(t,"pf",(function(){return Fo})),e.d(t,"ub",(function(){return Eo})),e.d(t,"rk",(function(){return Ro})),e.d(t,"zi",(function(){return Lo})),e.d(t,"We",(function(){return Oo})),e.d(t,"vi",(function(){return Go})),e.d(t,"ne",(function(){return Vo})),e.d(t,"oe",(function(){return Wo})),e.d(t,"Ug",(function(){return qo})),e.d(t,"h",(function(){return zo})),e.d(t,"vh",(function(){return Uo})),e.d(t,"yg",(function(){return Ko})),e.d(t,"id",(function(){return Qo})),e.d(t,"Mg",(function(){return No})),e.d(t,"Ng",(function(){return Xo})),e.d(t,"Xj",(function(){return Yo})),e.d(t,"Rc",(function(){return Ho})),e.d(t,"Sc",(function(){return Jo})),e.d(t,"Qc",(function(){return Zo})),e.d(t,"D",(function(){return $o})),e.d(t,"rc",(function(){return n_})),e.d(t,"Oc",(function(){return t_})),e.d(t,"Le",(function(){return e_})),e.d(t,"hh",(function(){return r_})),e.d(t,"hg",(function(){return u_})),e.d(t,"Ef",(function(){return c_})),e.d(t,"i",(function(){return f_})),e.d(t,"wh",(function(){return i_})),e.d(t,"uc",(function(){return o_})),e.d(t,"Ci",(function(){return __})),e.d(t,"j",(function(){return d_})),e.d(t,"ng",(function(){return a_})),e.d(t,"ab",(function(){return b_})),e.d(t,"bb",(function(){return g_})),e.d(t,"qg",(function(){return w_})),e.d(t,"rg",(function(){return s_})),e.d(t,"Xg",(function(){return l_})),e.d(t,"gh",(function(){return m_})),e.d(t,"Yg",(function(){return p_})),e.d(t,"je",(function(){return h_})),e.d(t,"Tg",(function(){return x_})),e.d(t,"Kg",(function(){return y_})),e.d(t,"Re",(function(){return S_})),e.d(t,"tf",(function(){return k_})),e.d(t,"vg",(function(){return v_})),e.d(t,"Cg",(function(){return B_})),e.d(t,"cb",(function(){return P_})),e.d(t,"Ag",(function(){return I_})),e.d(t,"Rh",(function(){return j_})),e.d(t,"tk",(function(){return A_})),e.d(t,"Se",(function(){return D_})),e.d(t,"Te",(function(){return T_})),e.d(t,"af",(function(){return C_})),e.d(t,"Og",(function(){return M_})),e.d(t,"kh",(function(){return F_})),e.d(t,"jf",(function(){return E_})),e.d(t,"we",(function(){return R_})),e.d(t,"of",(function(){return L_})),e.d(t,"bk",(function(){return O_})),e.d(t,"Kh",(function(){return G_})),e.d(t,"fb",(function(){return V_})),e.d(t,"kj",(function(){return W_})),e.d(t,"lj",(function(){return q_})),e.d(t,"Y",(function(){return z_})),e.d(t,"Eg",(function(){return U_})),e.d(t,"Hg",(function(){return K_})),e.d(t,"Fg",(function(){return Q_})),e.d(t,"Jg",(function(){return N_})),e.d(t,"zg",(function(){return X_})),e.d(t,"ti",(function(){return Y_})),e.d(t,"sf",(function(){return H_})),e.d(t,"Ig",(function(){return J_})),e.d(t,"Dg",(function(){return Z_})),e.d(t,"Gg",(function(){return $_})),e.d(t,"Z",(function(){return nd})),e.d(t,"si",(function(){return td})),e.d(t,"Wk",(function(){return ed})),e.d(t,"hl",(function(){return rd})),e.d(t,"al",(function(){return ud})),e.d(t,"Ak",(function(){return cd})),e.d(t,"Bk",(function(){return fd})),e.d(t,"Ck",(function(){return id})),e.d(t,"Dk",(function(){return od})),e.d(t,"Ek",(function(){return _d})),e.d(t,"Fk",(function(){return dd})),e.d(t,"Gk",(function(){return ad})),e.d(t,"Pk",(function(){return bd})),e.d(t,"Qk",(function(){return gd})),e.d(t,"Rk",(function(){return wd})),e.d(t,"Sk",(function(){return sd})),e.d(t,"Tk",(function(){return ld})),e.d(t,"Uk",(function(){return md})),e.d(t,"Vk",(function(){return pd})),e.d(t,"yk",(function(){return hd})),e.d(t,"zk",(function(){return xd})),e.d(t,"Hk",(function(){return yd})),e.d(t,"Ik",(function(){return Sd})),e.d(t,"Jk",(function(){return kd})),e.d(t,"Kk",(function(){return vd})),e.d(t,"Lk",(function(){return Bd})),e.d(t,"Mk",(function(){return Pd})),e.d(t,"Nk",(function(){return Id})),e.d(t,"Ok",(function(){return jd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);let r;function u(n){r=n}const c=new Array(128).fill(void 0);function f(n){return c[n]}c.push(void 0,null,!0,!1);let i=c.length;function o(n){const t=f(n);return function(n){n<132||(c[n]=i,i=n)}(n),t}function _(n){i===c.length&&c.push(c.length+1);const t=i;return i=c[t],c[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))}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 c=b();let f=0;for(;f127)break;c[u+f]=t}if(f!==r){0!==f&&(n=n.slice(f)),u=e(u,r,r=f+3*n.length,1)>>>0;const t=b().subarray(u+f,u+r);f+=l(n,t).written,u=e(u,r,f,1)>>>0}return w=f,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(n,t,e,u){const c={a:n,b:t,cnt:1,dtor:e},f=(...n)=>{c.cnt++;const t=c.a;c.a=0;try{return u(t,c.b,...n)}finally{0==--c.cnt?(r.__wbindgen_export_2.get(c.dtor)(t,c.b),S.unregister(c)):c.a=t}};return f.original=c,S.register(f,c,c),f}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h17ee8532a0479032(n,t,_(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3045c31424c9eba7(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1839972dabacecca(n,t,_(e),_(u))}function I(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277081505b5d1896(n,t,_(e))}function j(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h11539b31b8cb07a5(n,t,_(e),_(u))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3af2247627e449d4(n,t)}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,_(e))}function T(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,_(e))}function C(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===f(n)}function U(n){return _(f(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function N(n,t){const e=m(f(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function X(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){let t;try{t=f(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function H(n){let t;try{t=f(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function J(n){let t;try{t=f(n)instanceof GPUValidationError}catch(n){t=!1}return t}function Z(n){let t;try{t=f(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function $(n){return _(n)}function nn(n){return f(n).size}function tn(n){return f(n).usage}function en(n){f(n).destroy()}function rn(n,t,e){return _(f(n).getMappedRange(t,e))}function un(n,t,e,r){return _(f(n).mapAsync(t>>>0,e,r))}function cn(n){f(n).unmap()}function fn(n,t,e,r){f(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function on(n,t,e){f(n).dispatchWorkgroupsIndirect(f(t),e)}function _n(n){f(n).end()}function dn(n,t){f(n).setPipeline(f(t))}function an(n,t,e){f(n).setBindGroup(t>>>0,f(e))}function bn(n,t,e,r,u,c,i){f(n).setBindGroup(t>>>0,f(e),R(r,u),c,i>>>0)}function gn(n,t){const e=f(t),u="string"==typeof e?e:void 0;var c=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=c}function wn(n,t){return _(f(n).getBindGroupLayout(t>>>0))}function sn(n){let t;try{t=f(n)instanceof GPUAdapter}catch(n){t=!1}return t}function ln(n){return _(f(n).gpu)}function mn(n){return _(f(n).getPreferredCanvasFormat())}function pn(n,t){return _(f(n).requestAdapter(f(t)))}function hn(n,t){return _(f(n).getBindGroupLayout(t>>>0))}function xn(n,t){const e=m(f(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function yn(n){return _(f(n).finish())}function Sn(n,t){return _(f(n).finish(f(t)))}function kn(n,t,e){f(n).setBindGroup(t>>>0,f(e))}function vn(n,t,e,r,u,c,i){f(n).setBindGroup(t>>>0,f(e),R(r,u),c,i>>>0)}function Bn(n,t,e,r,u){f(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Pn(n,t,e,r,u,c){f(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,c>>>0)}function In(n,t,e){f(n).drawIndexedIndirect(f(t),e)}function jn(n,t,e){f(n).drawIndirect(f(t),e)}function An(n,t,e,r){f(n).setIndexBuffer(f(t),o(e),r)}function Dn(n,t,e,r,u){f(n).setIndexBuffer(f(t),o(e),r,u)}function Tn(n,t){f(n).setPipeline(f(t))}function Cn(n,t,e,r){f(n).setVertexBuffer(t>>>0,f(e),r)}function Mn(n,t,e,r,u){f(n).setVertexBuffer(t>>>0,f(e),r,u)}function Fn(n){return _(f(n).features)}function En(n){return _(f(n).limits)}function Rn(n){return _(f(n).queue)}function Ln(n){return _(f(n).lost)}function On(n,t){f(n).onuncapturederror=f(t)}function Gn(n,t){return _(f(n).createBindGroup(f(t)))}function Vn(n,t){return _(f(n).createBindGroupLayout(f(t)))}function Wn(n,t){return _(f(n).createBuffer(f(t)))}function qn(n,t){return _(f(n).createCommandEncoder(f(t)))}function zn(n,t){return _(f(n).createComputePipeline(f(t)))}function Un(n,t){return _(f(n).createPipelineLayout(f(t)))}function Kn(n,t){return _(f(n).createQuerySet(f(t)))}function Qn(n,t){return _(f(n).createRenderBundleEncoder(f(t)))}function Nn(n,t){return _(f(n).createRenderPipeline(f(t)))}function Xn(n,t){return _(f(n).createSampler(f(t)))}function Yn(n,t){return _(f(n).createShaderModule(f(t)))}function Hn(n,t){return _(f(n).createTexture(f(t)))}function Jn(n){f(n).destroy()}function Zn(n){return _(f(n).popErrorScope())}function $n(n,t){f(n).pushErrorScope(o(t))}function nt(n,t){return _(f(n).createView(f(t)))}function tt(n){f(n).destroy()}function et(n){return _(f(n).type)}function rt(n){return f(n).offset}function ut(n){return f(n).length}function ct(n){return f(n).lineNum}function ft(n,t){const e=m(f(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function it(n,t){f(n).configure(f(t))}function ot(n){return _(f(n).getCurrentTexture())}function _t(n){return _(f(n).reason)}function dt(n,t){const e=m(f(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function at(n){f(n).end()}function bt(n,t){f(n).executeBundles(f(t))}function gt(n,t){f(n).setBlendConstant(f(t))}function wt(n,t,e,r,u){f(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function st(n,t){f(n).setStencilReference(t>>>0)}function lt(n,t,e,r,u,c,i){f(n).setViewport(t,e,r,u,c,i)}function mt(n,t,e){f(n).setBindGroup(t>>>0,f(e))}function pt(n,t,e,r,u,c,i){f(n).setBindGroup(t>>>0,f(e),R(r,u),c,i>>>0)}function ht(n,t,e,r,u){f(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function xt(n,t,e,r,u,c){f(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,c>>>0)}function yt(n,t,e){f(n).drawIndexedIndirect(f(t),e)}function St(n,t,e){f(n).drawIndirect(f(t),e)}function kt(n,t,e,r){f(n).setIndexBuffer(f(t),o(e),r)}function vt(n,t,e,r,u){f(n).setIndexBuffer(f(t),o(e),r,u)}function Bt(n,t){f(n).setPipeline(f(t))}function Pt(n,t,e,r){f(n).setVertexBuffer(t>>>0,f(e),r)}function It(n,t,e,r,u){f(n).setVertexBuffer(t>>>0,f(e),r,u)}function jt(n){return _(f(n).getCompilationInfo())}function At(n,t){const e=m(f(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Dt(n,t){return _(f(n).beginComputePass(f(t)))}function Tt(n,t){return _(f(n).beginRenderPass(f(t)))}function Ct(n,t,e){f(n).clearBuffer(f(t),e)}function Mt(n,t,e,r){f(n).clearBuffer(f(t),e,r)}function Ft(n,t,e,r,u,c){f(n).copyBufferToBuffer(f(t),e,f(r),u,c)}function Et(n,t,e,r){f(n).copyBufferToTexture(f(t),f(e),f(r))}function Rt(n,t,e,r){f(n).copyTextureToBuffer(f(t),f(e),f(r))}function Lt(n,t,e,r){f(n).copyTextureToTexture(f(t),f(e),f(r))}function Ot(n){return _(f(n).finish())}function Gt(n,t){return _(f(n).finish(f(t)))}function Vt(n,t,e,r,u,c){f(n).resolveQuerySet(f(t),e>>>0,r>>>0,f(u),c>>>0)}function Wt(n){return _(f(n).error)}function qt(n,t,e){return f(n).has(g(t,e))}function zt(n){return f(n).maxTextureDimension1D}function Ut(n){return f(n).maxTextureDimension2D}function Kt(n){return f(n).maxTextureDimension3D}function Qt(n){return f(n).maxTextureArrayLayers}function Nt(n){return f(n).maxBindGroups}function Xt(n){return f(n).maxBindingsPerBindGroup}function Yt(n){return f(n).maxDynamicUniformBuffersPerPipelineLayout}function Ht(n){return f(n).maxDynamicStorageBuffersPerPipelineLayout}function Jt(n){return f(n).maxSampledTexturesPerShaderStage}function Zt(n){return f(n).maxSamplersPerShaderStage}function $t(n){return f(n).maxStorageBuffersPerShaderStage}function ne(n){return f(n).maxStorageTexturesPerShaderStage}function te(n){return f(n).maxUniformBuffersPerShaderStage}function ee(n){return f(n).maxUniformBufferBindingSize}function re(n){return f(n).maxStorageBufferBindingSize}function ue(n){return f(n).maxVertexBuffers}function ce(n){return f(n).maxBufferSize}function fe(n){return f(n).maxVertexAttributes}function ie(n){return f(n).maxVertexBufferArrayStride}function oe(n){return f(n).minUniformBufferOffsetAlignment}function _e(n){return f(n).minStorageBufferOffsetAlignment}function de(n){return f(n).maxInterStageShaderComponents}function ae(n){return f(n).maxColorAttachments}function be(n){return f(n).maxColorAttachmentBytesPerSample}function ge(n){return f(n).maxComputeWorkgroupStorageSize}function we(n){return f(n).maxComputeInvocationsPerWorkgroup}function se(n){return f(n).maxComputeWorkgroupSizeX}function le(n){return f(n).maxComputeWorkgroupSizeY}function me(n){return f(n).maxComputeWorkgroupSizeZ}function pe(n){return f(n).maxComputeWorkgroupsPerDimension}function he(n){const t=f(n);return"object"==typeof t&&null!==t}function xe(n){return _(f(n).Window)}function ye(n){return _(f(n).WorkerGlobalScope)}function Se(n,t){return _(f(n).requestDevice(f(t)))}function ke(n){return _(f(n).features)}function ve(n){return _(f(n).limits)}function Be(n){return _(f(n).messages)}function Pe(n,t,e,r,u,c){f(n).writeBuffer(f(t),e,f(r),u,c)}function Ie(n,t,e,r,u){f(n).writeTexture(f(t),f(e),f(r),f(u))}function je(n,t,e,r){f(n).copyExternalImageToTexture(f(t),f(e),f(r))}function Ae(n,t){f(n).submit(f(t))}function De(n){const t=f(n);return"boolean"==typeof t?t?1:0:2}function Te(n,t){const e=f(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Ce(n){return f(n).offsetX}function Me(n){return f(n).offsetY}function Fe(n){return _(f(n).Window)}function Ee(n){const t=f(n).webkitFullscreenElement;return p(t)?0:_(t)}function Re(){return _(ResizeObserverEntry.prototype)}function Le(n){return _(f(n).scheduler)}function Oe(n){return _(f(n).getCoalescedEvents)}function Ge(n){return _(f(n).requestFullscreen)}function Ve(n){return _(f(n).requestIdleCallback)}function We(n){return _(f(n).onpointerrawupdate)}function qe(n){f(n).webkitRequestFullscreen()}function ze(n){return _(f(n).requestFullscreen())}function Ue(n){return _(f(n).scheduler)}function Ke(n,t,e){return _(f(n).postTask(f(t),f(e)))}function Qe(n){queueMicrotask(f(n))}function Ne(n){return _(f(n).queueMicrotask)}function Xe(n){return"function"==typeof f(n)}function Ye(n){let t;try{t=f(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function He(n,t,e){f(n).beginQuery(t>>>0,f(e))}function Je(n,t,e,r,u,c){f(n).bindBufferRange(t>>>0,e>>>0,f(r),u,c)}function Ze(n,t,e){f(n).bindSampler(t>>>0,f(e))}function $e(n,t){f(n).bindVertexArray(f(t))}function nr(n,t,e,r,u,c,i,o,_,d,a){f(n).blitFramebuffer(t,e,r,u,c,i,o,_,d>>>0,a>>>0)}function tr(n,t,e,r){f(n).bufferData(t>>>0,e,r>>>0)}function er(n,t,e,r){f(n).bufferData(t>>>0,f(e),r>>>0)}function rr(n,t,e,r){f(n).bufferSubData(t>>>0,e,f(r))}function ur(n,t,e,r,u){f(n).clearBufferfv(t>>>0,e,O(r,u))}function cr(n,t,e,r,u){f(n).clearBufferiv(t>>>0,e,G(r,u))}function fr(n,t,e,r,u){f(n).clearBufferuiv(t>>>0,e,R(r,u))}function ir(n,t,e,r){return f(n).clientWaitSync(f(t),e>>>0,r>>>0)}function or(n,t,e,r,u,c,i,o,_,d){f(n).compressedTexSubImage2D(t>>>0,e,r,u,c,i,o>>>0,_,d)}function _r(n,t,e,r,u,c,i,o,_){f(n).compressedTexSubImage2D(t>>>0,e,r,u,c,i,o>>>0,f(_))}function dr(n,t,e,r,u,c,i,o,_,d,a,b){f(n).compressedTexSubImage3D(t>>>0,e,r,u,c,i,o,_,d>>>0,a,b)}function ar(n,t,e,r,u,c,i,o,_,d,a){f(n).compressedTexSubImage3D(t>>>0,e,r,u,c,i,o,_,d>>>0,f(a))}function br(n,t,e,r,u,c){f(n).copyBufferSubData(t>>>0,e>>>0,r,u,c)}function gr(n,t,e,r,u,c,i,o,_,d){f(n).copyTexSubImage3D(t>>>0,e,r,u,c,i,o,_,d)}function wr(n){const t=f(n).createQuery();return p(t)?0:_(t)}function sr(n){const t=f(n).createSampler();return p(t)?0:_(t)}function lr(n){const t=f(n).createVertexArray();return p(t)?0:_(t)}function mr(n,t){f(n).deleteQuery(f(t))}function pr(n,t){f(n).deleteSampler(f(t))}function hr(n,t){f(n).deleteSync(f(t))}function xr(n,t){f(n).deleteVertexArray(f(t))}function yr(n,t,e,r,u){f(n).drawArraysInstanced(t>>>0,e,r,u)}function Sr(n,t){f(n).drawBuffers(f(t))}function kr(n,t,e,r,u,c){f(n).drawElementsInstanced(t>>>0,e,r>>>0,u,c)}function vr(n,t){f(n).endQuery(t>>>0)}function Br(n,t,e){const r=f(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function Pr(n,t,e,r,u,c){f(n).framebufferTextureLayer(t>>>0,e>>>0,f(r),u,c)}function Ir(n,t,e,r){f(n).getBufferSubData(t>>>0,e,f(r))}function jr(){return V((function(n,t,e){return _(f(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Ar(n,t,e){return _(f(n).getQueryParameter(f(t),e>>>0))}function Dr(n,t,e){return _(f(n).getSyncParameter(f(t),e>>>0))}function Tr(n,t,e,r){return f(n).getUniformBlockIndex(f(t),g(e,r))}function Cr(){return V((function(n,t,e){f(n).invalidateFramebuffer(t>>>0,f(e))}),arguments)}function Mr(n,t){f(n).readBuffer(t>>>0)}function Fr(){return V((function(n,t,e,r,u,c,i,o){f(n).readPixels(t,e,r,u,c>>>0,i>>>0,f(o))}),arguments)}function Er(){return V((function(n,t,e,r,u,c,i,o){f(n).readPixels(t,e,r,u,c>>>0,i>>>0,o)}),arguments)}function Rr(n,t,e,r,u,c){f(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,c)}function Lr(n,t,e,r){f(n).samplerParameterf(f(t),e>>>0,r)}function Or(n,t,e,r){f(n).samplerParameteri(f(t),e>>>0,r)}function Gr(){return V((function(n,t,e,r,u,c,i,o,_,d){f(n).texImage2D(t>>>0,e,r,u,c,i,o>>>0,_>>>0,f(d))}),arguments)}function Vr(){return V((function(n,t,e,r,u,c,i,o,_,d,a){f(n).texImage3D(t>>>0,e,r,u,c,i,o,_>>>0,d>>>0,f(a))}),arguments)}function Wr(n,t,e,r,u,c){f(n).texStorage2D(t>>>0,e,r>>>0,u,c)}function qr(n,t,e,r,u,c,i){f(n).texStorage3D(t>>>0,e,r>>>0,u,c,i)}function zr(){return V((function(n,t,e,r,u,c,i,o,_,d){f(n).texSubImage2D(t>>>0,e,r,u,c,i,o>>>0,_>>>0,f(d))}),arguments)}function Ur(){return V((function(n,t,e,r,u,c,i,o,_,d){f(n).texSubImage2D(t>>>0,e,r,u,c,i,o>>>0,_>>>0,d)}),arguments)}function Kr(){return V((function(n,t,e,r,u,c,i,o,_,d){f(n).texSubImage2D(t>>>0,e,r,u,c,i,o>>>0,_>>>0,f(d))}),arguments)}function Qr(){return V((function(n,t,e,r,u,c,i,o,_,d){f(n).texSubImage2D(t>>>0,e,r,u,c,i,o>>>0,_>>>0,f(d))}),arguments)}function Nr(){return V((function(n,t,e,r,u,c,i,o,_,d){f(n).texSubImage2D(t>>>0,e,r,u,c,i,o>>>0,_>>>0,f(d))}),arguments)}function Xr(){return V((function(n,t,e,r,u,c,i,o,_,d,a,b){f(n).texSubImage3D(t>>>0,e,r,u,c,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Yr(){return V((function(n,t,e,r,u,c,i,o,_,d,a,b){f(n).texSubImage3D(t>>>0,e,r,u,c,i,o,_,d>>>0,a>>>0,f(b))}),arguments)}function Hr(){return V((function(n,t,e,r,u,c,i,o,_,d,a,b){f(n).texSubImage3D(t>>>0,e,r,u,c,i,o,_,d>>>0,a>>>0,f(b))}),arguments)}function Jr(){return V((function(n,t,e,r,u,c,i,o,_,d,a,b){f(n).texSubImage3D(t>>>0,e,r,u,c,i,o,_,d>>>0,a>>>0,f(b))}),arguments)}function Zr(){return V((function(n,t,e,r,u,c,i,o,_,d,a,b){f(n).texSubImage3D(t>>>0,e,r,u,c,i,o,_,d>>>0,a>>>0,f(b))}),arguments)}function $r(n,t,e){f(n).uniform1ui(f(t),e>>>0)}function nu(n,t,e,r){f(n).uniform2fv(f(t),O(e,r))}function tu(n,t,e,r){f(n).uniform2iv(f(t),G(e,r))}function eu(n,t,e,r){f(n).uniform2uiv(f(t),R(e,r))}function ru(n,t,e,r){f(n).uniform3fv(f(t),O(e,r))}function uu(n,t,e,r){f(n).uniform3iv(f(t),G(e,r))}function cu(n,t,e,r){f(n).uniform3uiv(f(t),R(e,r))}function fu(n,t,e,r){f(n).uniform4fv(f(t),O(e,r))}function iu(n,t,e,r){f(n).uniform4iv(f(t),G(e,r))}function ou(n,t,e,r){f(n).uniform4uiv(f(t),R(e,r))}function _u(n,t,e,r){f(n).uniformBlockBinding(f(t),e>>>0,r>>>0)}function du(n,t,e,r,u){f(n).uniformMatrix2fv(f(t),0!==e,O(r,u))}function au(n,t,e,r,u){f(n).uniformMatrix2x3fv(f(t),0!==e,O(r,u))}function bu(n,t,e,r,u){f(n).uniformMatrix2x4fv(f(t),0!==e,O(r,u))}function gu(n,t,e,r,u){f(n).uniformMatrix3fv(f(t),0!==e,O(r,u))}function wu(n,t,e,r,u){f(n).uniformMatrix3x2fv(f(t),0!==e,O(r,u))}function su(n,t,e,r,u){f(n).uniformMatrix3x4fv(f(t),0!==e,O(r,u))}function lu(n,t,e,r,u){f(n).uniformMatrix4fv(f(t),0!==e,O(r,u))}function mu(n,t,e,r,u){f(n).uniformMatrix4x2fv(f(t),0!==e,O(r,u))}function pu(n,t,e,r,u){f(n).uniformMatrix4x3fv(f(t),0!==e,O(r,u))}function hu(n,t,e){f(n).vertexAttribDivisor(t>>>0,e>>>0)}function xu(n,t,e,r,u,c){f(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,c)}function yu(n,t){f(n).activeTexture(t>>>0)}function Su(n,t,e){f(n).attachShader(f(t),f(e))}function ku(n,t,e,r,u){f(n).bindAttribLocation(f(t),e>>>0,g(r,u))}function vu(n,t,e){f(n).bindBuffer(t>>>0,f(e))}function Bu(n,t,e){f(n).bindFramebuffer(t>>>0,f(e))}function Pu(n,t,e){f(n).bindRenderbuffer(t>>>0,f(e))}function Iu(n,t,e){f(n).bindTexture(t>>>0,f(e))}function ju(n,t,e,r,u){f(n).blendColor(t,e,r,u)}function Au(n,t){f(n).blendEquation(t>>>0)}function Du(n,t,e){f(n).blendEquationSeparate(t>>>0,e>>>0)}function Tu(n,t,e){f(n).blendFunc(t>>>0,e>>>0)}function Cu(n,t,e,r,u){f(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Mu(n,t){f(n).clear(t>>>0)}function Fu(n,t){f(n).clearDepth(t)}function Eu(n,t){f(n).clearStencil(t)}function Ru(n,t,e,r,u){f(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Lu(n,t){f(n).compileShader(f(t))}function Ou(n,t,e,r,u,c,i,o,_){f(n).copyTexSubImage2D(t>>>0,e,r,u,c,i,o,_)}function Gu(n){const t=f(n).createBuffer();return p(t)?0:_(t)}function Vu(n){const t=f(n).createFramebuffer();return p(t)?0:_(t)}function Wu(n){const t=f(n).createProgram();return p(t)?0:_(t)}function qu(n){const t=f(n).createRenderbuffer();return p(t)?0:_(t)}function zu(n,t){const e=f(n).createShader(t>>>0);return p(e)?0:_(e)}function Uu(n){const t=f(n).createTexture();return p(t)?0:_(t)}function Ku(n,t){f(n).cullFace(t>>>0)}function Qu(n,t){f(n).deleteBuffer(f(t))}function Nu(n,t){f(n).deleteFramebuffer(f(t))}function Xu(n,t){f(n).deleteProgram(f(t))}function Yu(n,t){f(n).deleteRenderbuffer(f(t))}function Hu(n,t){f(n).deleteShader(f(t))}function Ju(n,t){f(n).deleteTexture(f(t))}function Zu(n,t){f(n).depthFunc(t>>>0)}function $u(n,t){f(n).depthMask(0!==t)}function nc(n,t,e){f(n).depthRange(t,e)}function tc(n,t){f(n).disable(t>>>0)}function ec(n,t){f(n).disableVertexAttribArray(t>>>0)}function rc(n,t,e,r){f(n).drawArrays(t>>>0,e,r)}function uc(n,t){f(n).enable(t>>>0)}function cc(n,t){f(n).enableVertexAttribArray(t>>>0)}function fc(n,t,e,r,u){f(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,f(u))}function ic(n,t,e,r,u,c){f(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,f(u),c)}function oc(n,t){f(n).frontFace(t>>>0)}function _c(){return V((function(n,t,e){const r=f(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function dc(){return V((function(n,t){return _(f(n).getParameter(t>>>0))}),arguments)}function ac(n,t,e){const u=f(t).getProgramInfoLog(f(e));var c=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=c}function bc(n,t,e){return _(f(n).getProgramParameter(f(t),e>>>0))}function gc(n,t,e){const u=f(t).getShaderInfoLog(f(e));var c=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=c}function wc(n,t,e){return _(f(n).getShaderParameter(f(t),e>>>0))}function sc(n){const t=f(n).getSupportedExtensions();return p(t)?0:_(t)}function lc(n,t,e,r){const u=f(n).getUniformLocation(f(t),g(e,r));return p(u)?0:_(u)}function mc(n,t){f(n).linkProgram(f(t))}function pc(n,t,e){f(n).pixelStorei(t>>>0,e)}function hc(n,t,e){f(n).polygonOffset(t,e)}function xc(n,t,e,r,u){f(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function yc(n,t,e,r,u){f(n).scissor(t,e,r,u)}function Sc(n,t,e,r){f(n).shaderSource(f(t),g(e,r))}function kc(n,t,e,r,u){f(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function vc(n,t){f(n).stencilMask(t>>>0)}function Bc(n,t,e){f(n).stencilMaskSeparate(t>>>0,e>>>0)}function Pc(n,t,e,r,u){f(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ic(n,t,e,r){f(n).texParameteri(t>>>0,e>>>0,r)}function jc(n,t,e){f(n).uniform1f(f(t),e)}function Ac(n,t,e){f(n).uniform1i(f(t),e)}function Dc(n,t,e,r,u,c){f(n).uniform4f(f(t),e,r,u,c)}function Tc(n,t){f(n).useProgram(f(t))}function Cc(n,t,e,r,u,c,i){f(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,c,i)}function Mc(n,t,e,r,u){f(n).viewport(t,e,r,u)}function Fc(n){let t;try{t=f(n)instanceof Window}catch(n){t=!1}return t}function Ec(n){const t=f(n).document;return p(t)?0:_(t)}function Rc(n){return _(f(n).navigator)}function Lc(n){return f(n).devicePixelRatio}function Oc(n,t){f(n).cancelIdleCallback(t>>>0)}function Gc(){return V((function(n,t){const e=f(n).getComputedStyle(f(t));return p(e)?0:_(e)}),arguments)}function Vc(){return V((function(n,t,e){const r=f(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function Wc(){return V((function(n,t){return f(n).requestIdleCallback(f(t))}),arguments)}function qc(){return V((function(n,t){f(n).cancelAnimationFrame(t)}),arguments)}function zc(){return V((function(n,t){return f(n).requestAnimationFrame(f(t))}),arguments)}function Uc(n,t){f(n).clearTimeout(t)}function Kc(){return V((function(n,t){return f(n).setTimeout(f(t))}),arguments)}function Qc(){return V((function(n,t,e){return f(n).setTimeout(f(t),e)}),arguments)}function Nc(n){const t=f(n).body;return p(t)?0:_(t)}function Xc(n){return _(f(n).visibilityState)}function Yc(n){const t=f(n).activeElement;return p(t)?0:_(t)}function Hc(n){const t=f(n).fullscreenElement;return p(t)?0:_(t)}function Jc(){return V((function(n,t,e){return _(f(n).createElement(g(t,e)))}),arguments)}function Zc(n,t,e){const r=f(n).getElementById(g(t,e));return p(r)?0:_(r)}function $c(){return V((function(n,t,e){const r=f(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function nf(){return V((function(n,t,e){return _(f(n).querySelectorAll(g(t,e)))}),arguments)}function tf(){return V((function(n,t,e,r,u){f(n).setAttribute(g(t,e),g(r,u))}),arguments)}function ef(){return V((function(n,t){f(n).setPointerCapture(t)}),arguments)}function rf(n){return _(f(n).navigator)}function uf(n){return _(f(n).style)}function cf(){return V((function(n){f(n).focus()}),arguments)}function ff(n,t,e,r){f(n).bufferData(t>>>0,e,r>>>0)}function of(n,t,e,r){f(n).bufferData(t>>>0,f(e),r>>>0)}function _f(n,t,e,r){f(n).bufferSubData(t>>>0,e,f(r))}function df(n,t,e,r,u,c,i,o,_){f(n).compressedTexSubImage2D(t>>>0,e,r,u,c,i,o>>>0,f(_))}function af(){return V((function(n,t,e,r,u,c,i,o){f(n).readPixels(t,e,r,u,c>>>0,i>>>0,f(o))}),arguments)}function bf(){return V((function(n,t,e,r,u,c,i,o,_,d){f(n).texImage2D(t>>>0,e,r,u,c,i,o>>>0,_>>>0,f(d))}),arguments)}function gf(){return V((function(n,t,e,r,u,c,i,o,_,d){f(n).texSubImage2D(t>>>0,e,r,u,c,i,o>>>0,_>>>0,f(d))}),arguments)}function wf(n,t,e,r){f(n).uniform2fv(f(t),O(e,r))}function sf(n,t,e,r){f(n).uniform2iv(f(t),G(e,r))}function lf(n,t,e,r){f(n).uniform3fv(f(t),O(e,r))}function mf(n,t,e,r){f(n).uniform3iv(f(t),G(e,r))}function pf(n,t,e,r){f(n).uniform4fv(f(t),O(e,r))}function hf(n,t,e,r){f(n).uniform4iv(f(t),G(e,r))}function xf(n,t,e,r,u){f(n).uniformMatrix2fv(f(t),0!==e,O(r,u))}function yf(n,t,e,r,u){f(n).uniformMatrix3fv(f(t),0!==e,O(r,u))}function Sf(n,t,e,r,u){f(n).uniformMatrix4fv(f(t),0!==e,O(r,u))}function kf(n,t){f(n).activeTexture(t>>>0)}function vf(n,t,e){f(n).attachShader(f(t),f(e))}function Bf(n,t,e,r,u){f(n).bindAttribLocation(f(t),e>>>0,g(r,u))}function Pf(n,t,e){f(n).bindBuffer(t>>>0,f(e))}function If(n,t,e){f(n).bindFramebuffer(t>>>0,f(e))}function jf(n,t,e){f(n).bindRenderbuffer(t>>>0,f(e))}function Af(n,t,e){f(n).bindTexture(t>>>0,f(e))}function Df(n,t,e,r,u){f(n).blendColor(t,e,r,u)}function Tf(n,t){f(n).blendEquation(t>>>0)}function Cf(n,t,e){f(n).blendEquationSeparate(t>>>0,e>>>0)}function Mf(n,t,e){f(n).blendFunc(t>>>0,e>>>0)}function Ff(n,t,e,r,u){f(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ef(n,t){f(n).clear(t>>>0)}function Rf(n,t){f(n).clearDepth(t)}function Lf(n,t){f(n).clearStencil(t)}function Of(n,t,e,r,u){f(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Gf(n,t){f(n).compileShader(f(t))}function Vf(n,t,e,r,u,c,i,o,_){f(n).copyTexSubImage2D(t>>>0,e,r,u,c,i,o,_)}function Wf(n){const t=f(n).createBuffer();return p(t)?0:_(t)}function qf(n){const t=f(n).createFramebuffer();return p(t)?0:_(t)}function zf(n){const t=f(n).createProgram();return p(t)?0:_(t)}function Uf(n){const t=f(n).createRenderbuffer();return p(t)?0:_(t)}function Kf(n,t){const e=f(n).createShader(t>>>0);return p(e)?0:_(e)}function Qf(n){const t=f(n).createTexture();return p(t)?0:_(t)}function Nf(n,t){f(n).cullFace(t>>>0)}function Xf(n,t){f(n).deleteBuffer(f(t))}function Yf(n,t){f(n).deleteFramebuffer(f(t))}function Hf(n,t){f(n).deleteProgram(f(t))}function Jf(n,t){f(n).deleteRenderbuffer(f(t))}function Zf(n,t){f(n).deleteShader(f(t))}function $f(n,t){f(n).deleteTexture(f(t))}function ni(n,t){f(n).depthFunc(t>>>0)}function ti(n,t){f(n).depthMask(0!==t)}function ei(n,t,e){f(n).depthRange(t,e)}function ri(n,t){f(n).disable(t>>>0)}function ui(n,t){f(n).disableVertexAttribArray(t>>>0)}function ci(n,t,e,r){f(n).drawArrays(t>>>0,e,r)}function fi(n,t){f(n).enable(t>>>0)}function ii(n,t){f(n).enableVertexAttribArray(t>>>0)}function oi(n,t,e,r,u){f(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,f(u))}function _i(n,t,e,r,u,c){f(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,f(u),c)}function di(n,t){f(n).frontFace(t>>>0)}function ai(){return V((function(n,t){return _(f(n).getParameter(t>>>0))}),arguments)}function bi(n,t,e){const u=f(t).getProgramInfoLog(f(e));var c=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=c}function gi(n,t,e){return _(f(n).getProgramParameter(f(t),e>>>0))}function wi(n,t,e){const u=f(t).getShaderInfoLog(f(e));var c=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=c}function si(n,t,e){return _(f(n).getShaderParameter(f(t),e>>>0))}function li(n,t,e,r){const u=f(n).getUniformLocation(f(t),g(e,r));return p(u)?0:_(u)}function mi(n,t){f(n).linkProgram(f(t))}function pi(n,t,e){f(n).pixelStorei(t>>>0,e)}function hi(n,t,e){f(n).polygonOffset(t,e)}function xi(n,t,e,r,u){f(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function yi(n,t,e,r,u){f(n).scissor(t,e,r,u)}function Si(n,t,e,r){f(n).shaderSource(f(t),g(e,r))}function ki(n,t,e,r,u){f(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function vi(n,t){f(n).stencilMask(t>>>0)}function Bi(n,t,e){f(n).stencilMaskSeparate(t>>>0,e>>>0)}function Pi(n,t,e,r,u){f(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ii(n,t,e,r){f(n).texParameteri(t>>>0,e>>>0,r)}function ji(n,t,e){f(n).uniform1f(f(t),e)}function Ai(n,t,e){f(n).uniform1i(f(t),e)}function Di(n,t,e,r,u,c){f(n).uniform4f(f(t),e,r,u,c)}function Ti(n,t){f(n).useProgram(f(t))}function Ci(n,t,e,r,u,c,i){f(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,c,i)}function Mi(n,t,e,r,u){f(n).viewport(t,e,r,u)}function Fi(n,t,e,r,u){f(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Ei(n,t,e,r,u,c){f(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,c)}function Ri(n,t,e){f(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function Li(){return V((function(n,t,e,u){const c=m(f(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=c}),arguments)}function Oi(){return V((function(n,t,e,u){const c=m(f(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=c}),arguments)}function Gi(){return V((function(n,t,e,r,u){f(n).setProperty(g(t,e),g(r,u))}),arguments)}function Vi(){return V((function(n){return _(new IntersectionObserver(f(n)))}),arguments)}function Wi(n){f(n).disconnect()}function qi(n,t){f(n).observe(f(t))}function zi(){return V((function(n,t){return _(f(n).appendChild(f(t)))}),arguments)}function Ui(n,t){return f(n).contains(f(t))}function Ki(n,t){const e=f(n)[t>>>0];return p(e)?0:_(e)}function Qi(n,t){f(n).drawBuffersWEBGL(f(t))}function Ni(n){return f(n).videoWidth}function Xi(n){return f(n).videoHeight}function Yi(n){return _(f(n).port1)}function Hi(n){return _(f(n).port2)}function Ji(){return V((function(){return _(new MessageChannel)}),arguments)}function Zi(n,t,e,r,u,c,i){f(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,f(r),u,c,i)}function $i(n){return f(n).isIntersecting}function no(n){return _(f(n).contentRect)}function to(n){return _(f(n).devicePixelContentBoxSize)}function eo(n){return f(n).inlineSize}function ro(n){return f(n).blockSize}function uo(n){console.debug(f(n))}function co(n){console.error(f(n))}function fo(n,t){console.error(f(n),f(t))}function io(n){console.info(f(n))}function oo(n){console.log(f(n))}function _o(n){console.warn(f(n))}function ao(n){return _(f(n).signal)}function bo(){return V((function(){return _(new AbortController)}),arguments)}function go(n){f(n).abort()}function wo(n){f(n).close()}function so(){return V((function(n,t){f(n).postMessage(f(t))}),arguments)}function lo(n){f(n).start()}function mo(n){return f(n).width}function po(n){return f(n).height}function ho(n){let t;try{t=f(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function xo(n){return f(n).width}function yo(n,t){f(n).width=t>>>0}function So(n){return f(n).height}function ko(n,t){f(n).height=t>>>0}function vo(){return V((function(n,t,e){const r=f(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function Bo(){return V((function(n,t,e,r){const u=f(n).getContext(g(t,e),f(r));return p(u)?0:_(u)}),arguments)}function Po(n){return f(n).width}function Io(n){return f(n).height}function jo(n){return f(n).altKey}function Ao(n){return f(n).ctrlKey}function Do(n){return f(n).shiftKey}function To(n){return f(n).metaKey}function Co(n){return f(n).location}function Mo(n){return f(n).repeat}function Fo(n,t){const e=m(f(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Eo(n,t){const e=m(f(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ro(n){return f(n).width}function Lo(n,t){f(n).width=t>>>0}function Oo(n){return f(n).height}function Go(n,t){f(n).height=t>>>0}function Vo(){return V((function(n,t,e){const r=f(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function Wo(){return V((function(n,t,e,r){const u=f(n).getContext(g(t,e),f(r));return p(u)?0:_(u)}),arguments)}function qo(n){return f(n).persisted}function zo(){return V((function(n,t,e,r){f(n).addEventListener(g(t,e),f(r))}),arguments)}function Uo(){return V((function(n,t,e,r){f(n).removeEventListener(g(t,e),f(r))}),arguments)}function Ko(){return V((function(n){return _(new ResizeObserver(f(n)))}),arguments)}function Qo(n){f(n).disconnect()}function No(n,t){f(n).observe(f(t))}function Xo(n,t,e){f(n).observe(f(t),f(e))}function Yo(n,t){f(n).unobserve(f(t))}function Ho(n){return f(n).deltaX}function Jo(n){return f(n).deltaY}function Zo(n){return f(n).deltaMode}function $o(n,t){f(n).bindVertexArrayOES(f(t))}function n_(n){const t=f(n).createVertexArrayOES();return p(t)?0:_(t)}function t_(n,t){f(n).deleteVertexArrayOES(f(t))}function e_(n){const t=f(n).getSupportedProfiles();return p(t)?0:_(t)}function r_(n){f(n).preventDefault()}function u_(n,t){const e=m(f(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function c_(n){return f(n).matches}function f_(){return V((function(n,t){f(n).addListener(f(t))}),arguments)}function i_(){return V((function(n,t){f(n).removeListener(f(t))}),arguments)}function o_(n){return f(n).ctrlKey}function __(n){return f(n).shiftKey}function d_(n){return f(n).altKey}function a_(n){return f(n).metaKey}function b_(n){return f(n).button}function g_(n){return f(n).buttons}function w_(n){return f(n).movementX}function s_(n){return f(n).movementY}function l_(n){return f(n).pointerId}function m_(n){return f(n).pressure}function p_(n,t){const e=m(f(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function h_(n){return _(f(n).getCoalescedEvents())}function x_(n){return _(f(n).performance)}function y_(n){return f(n).now()}function S_(n,t){return _(f(n)[t>>>0])}function k_(n){return f(n).length}function v_(){return _(new Array)}function B_(n,t){return _(new Function(g(n,t)))}function P_(){return V((function(n,t){return _(f(n).call(f(t)))}),arguments)}function I_(){return _(new Object)}function j_(){return V((function(){return _(self.self)}),arguments)}function A_(){return V((function(){return _(window.window)}),arguments)}function D_(){return V((function(){return _(globalThis.globalThis)}),arguments)}function T_(){return V((function(){return _(global.global)}),arguments)}function C_(n,t,e){return f(n).includes(f(t),e)}function M_(n){return _(Array.of(f(n)))}function F_(n,t){return f(n).push(f(t))}function E_(n){let t;try{t=f(n)instanceof Object}catch(n){t=!1}return t}function R_(n,t){return _(Object.getOwnPropertyDescriptor(f(n),f(t)))}function L_(n,t){return Object.is(f(n),f(t))}function O_(n){return _(f(n).valueOf())}function G_(n){return _(Promise.resolve(f(n)))}function V_(n,t){return _(f(n).catch(f(t)))}function W_(n,t){return _(f(n).then(f(t)))}function q_(n,t,e){return _(f(n).then(f(t),f(e)))}function z_(n){return _(f(n).buffer)}function U_(n,t,e){return _(new Int8Array(f(n),t>>>0,e>>>0))}function K_(n,t,e){return _(new Int16Array(f(n),t>>>0,e>>>0))}function Q_(n,t,e){return _(new Int32Array(f(n),t>>>0,e>>>0))}function N_(n,t,e){return _(new Uint8Array(f(n),t>>>0,e>>>0))}function X_(n){return _(new Uint8Array(f(n)))}function Y_(n,t,e){f(n).set(f(t),e>>>0)}function H_(n){return f(n).length}function J_(n,t,e){return _(new Uint16Array(f(n),t>>>0,e>>>0))}function Z_(n,t,e){return _(new Uint32Array(f(n),t>>>0,e>>>0))}function $_(n,t,e){return _(new Float32Array(f(n),t>>>0,e>>>0))}function nd(n){return _(f(n).buffer)}function td(){return V((function(n,t,e){return Reflect.set(f(n),f(t),f(e))}),arguments)}function ed(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}(f(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function rd(n,t){throw new Error(g(n,t))}function ud(){return _(r.memory)}function cd(n,t,e){return _(k(n,t,9,v))}function fd(n,t,e){return _(k(n,t,9,v))}function id(n,t,e){return _(k(n,t,9,v))}function od(n,t,e){return _(k(n,t,9,v))}function _d(n,t,e){return _(k(n,t,9,B))}function dd(n,t,e){return _(k(n,t,9,P))}function ad(n,t,e){return _(k(n,t,9,v))}function bd(n,t,e){return _(k(n,t,194,I))}function gd(n,t,e){return _(k(n,t,194,I))}function wd(n,t,e){return _(k(n,t,194,j))}function sd(n,t,e){return _(k(n,t,194,I))}function ld(n,t,e){return _(k(n,t,194,I))}function md(n,t,e){return _(k(n,t,194,A))}function pd(n,t,e){return _(k(n,t,194,I))}function hd(n,t,e){return _(k(n,t,1413,D))}function xd(n,t,e){return _(k(n,t,1413,D))}function yd(n,t,e){return _(k(n,t,2678,T))}function Sd(n,t,e){return _(k(n,t,2678,T))}function kd(n,t,e){return _(k(n,t,2678,C))}function vd(n,t,e){return _(k(n,t,2678,T))}function Bd(n,t,e){return _(k(n,t,2678,T))}function Pd(n,t,e){return _(k(n,t,2678,T))}function Id(n,t,e){return _(k(n,t,2678,T))}function jd(n,t,e){return _(k(n,t,2756,M))}}).call(this,e(260)(n))},412:function(n,t,e){"use strict";e.r(t);var r=e(413),u=e(249);e.d(t,"__wbg_set_wasm",(function(){return u.ui})),e.d(t,"run",(function(){return u.il})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.el})),e.d(t,"__wbindgen_cb_drop",(function(){return u.xk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Zk})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.dl})),e.d(t,"__wbindgen_string_new",(function(){return u.gl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Bg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Gi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Nd})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.ff})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.hf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.gf})),e.d(t,"__wbindgen_number_new",(function(){return u.cl})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Fi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.Yj})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.Zc})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.ve})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Cf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.Wj})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.ld})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.kd})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Jd})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.ei})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.Xh})),e.d(t,"__wbindgen_string_get",(function(){return u.fl})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.he})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.df})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.Ue})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.ze})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Ch})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.ge})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.kg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Sd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.Vd})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.Wh})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.Uh})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.xd})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.vd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.zd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.bi})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.ci})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.gi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.oi})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.ni})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Qd})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.vf})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.ph})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Bf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.xi})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Qb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Ub})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Vb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Wb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.ac})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.dc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.fc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.gc})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.kc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.lc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.pc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.ad})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.bh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.jh})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.tc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.bd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.mj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.Rg})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.rf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.wf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.ig})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Eb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.re})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.uh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.jg})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Id})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Od})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.Zh})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.ji})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.ki})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.ri})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.Yh})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.yd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.wd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Ad})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.ai})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.di})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.qi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.pi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.le})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.qf})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.o})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.q})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.gb})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.hb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Ib})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Jb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Ob})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Pb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Ud})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Td})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.Jh})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Md})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.Ve})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.Zf})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.ag})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.bg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.Yf})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Ff})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Gf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.Qf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.Tf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.Uf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.dg})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.cg})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.Vf})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.gg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Hf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.eg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.fg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.pg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.og})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.Sf})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Jf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.If})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Of})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Kf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Lf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Nf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.Pf})),e.d(t,"__wbindgen_is_object",(function(){return u.Yk})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Eh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Pd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.uf})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.lg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.uk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.vk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Kb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.Ri})),e.d(t,"__wbindgen_boolean_get",(function(){return u.wk})),e.d(t,"__wbindgen_number_get",(function(){return u.bl})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Pg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Qg})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.nk})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.ih})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Oh})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.ke})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Fh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Ih})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Sg})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ok})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Gh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Nh})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.fh})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.oh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.nh})),e.d(t,"__wbindgen_is_function",(function(){return u.Xk})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.kf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.ib})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.jb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.kb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.sb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.zb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Db})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Hb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Nb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.ec})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.jc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.sc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Fc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Ic})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Lc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Pc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.od})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.sd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.ud})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Hd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Rd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.be})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ie})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.mf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.qh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.rh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.th})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.yh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Lh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Mh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Si})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ui})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Xi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Yi})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.cj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.dj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Zi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.bj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.ej})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.hj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.gj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.ij})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.fj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.jj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.rj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.sj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.uj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.wj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.xj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Aj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Bj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Ej})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Hj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Ij})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Jj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Lj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Mj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Nj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Pj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Qj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Vj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.dk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.ek})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.qb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.ob})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.wb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.bc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.hc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.nc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.oc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Gc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Jc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Mc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Vc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Yc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.pd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Xd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ae})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.de})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.yf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Wg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.ah})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Ah})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Ph})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Bi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Ji})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Mi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Ki})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Oi})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Vi})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.oj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.qj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Cj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Zj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.fk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.kk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.lf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.md})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.tg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.dd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Df})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Hh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Dh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.pb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.mi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.li})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.lk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.fe})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Xb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.mh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.lh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Sh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.hi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.sg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Qi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Wd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Ab})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.sh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.aj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.tj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.vj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.yj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.zj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Fj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Kj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Oj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Tj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.rb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.lb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.nb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.vb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.xb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Lb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Sb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Yb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.ic})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.mc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.qc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.wc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.zc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Bc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Dc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Tc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Xc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.gd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.ed})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.qd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Fd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Dd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.Zd})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ee})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.xf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Vg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Zg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.zh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Qh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Ai})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Ii})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ni})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Li})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Pi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Wi})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.nj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.pj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Dj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.ak})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.gk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.jk})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.nd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.td})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.ck})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.xh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.ii})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.xg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.jd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Lg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Fb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.rd})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.ik})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.hk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.ch})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.dh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.wg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ce})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.nf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Gb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.cd})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.yc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Ld})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Kd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Af})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.mk})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ei})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.ug})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.tb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.eh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Hi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.qk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.if})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.sk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.yi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.wi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.pk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Di})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.mg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.zf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Bh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.pf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.ub})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.rk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.zi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.vi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Ug})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.vh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.yg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.id})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Mg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Ng})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Xj})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Rc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Sc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Qc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.rc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Oc})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.hh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.hg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Ef})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.wh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.uc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ci})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.ng})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.qg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.rg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Xg})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.gh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Yg})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.je})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Tg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Kg})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.tf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.vg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Cg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Ag})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Rh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.tk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Og})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.kh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.jf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.of})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.bk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Kh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.kj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.lj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Eg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Fg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Jg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.zg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ti})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.sf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Dg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Gg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.si})),e.d(t,"__wbindgen_debug_string",(function(){return u.Wk})),e.d(t,"__wbindgen_throw",(function(){return u.hl})),e.d(t,"__wbindgen_memory",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper564",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper565",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper566",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper567",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper568",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper569",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper570",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper943",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper944",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper945",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper946",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper947",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper948",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper949",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper3088",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper3090",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper6716",(function(){return u.Hk})),e.d(t,"__wbindgen_closure_wrapper6717",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper6718",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper6719",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper6720",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper6721",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper6722",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper6901",(function(){return u.Ok})),Object(u.ui)(r),r.__wbindgen_start()},413:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(249);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/29.def47739.js b/assets/js/29.def47739.js deleted file mode 100644 index 27c5d83f1..000000000 --- a/assets/js/29.def47739.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{256:function(n,t,e){"use strict";(function(n){e.d(t,"gc",(function(){return u})),e.d(t,"Uc",(function(){return M})),e.d(t,"Qc",(function(){return R})),e.d(t,"vc",(function(){return x})),e.d(t,"Nc",(function(){return I})),e.d(t,"Pc",(function(){return K})),e.d(t,"Sc",(function(){return P})),e.d(t,"rb",(function(){return S})),e.d(t,"kc",(function(){return j})),e.d(t,"J",(function(){return z})),e.d(t,"xb",(function(){return L})),e.d(t,"yb",(function(){return W})),e.d(t,"N",(function(){return D})),e.d(t,"Sb",(function(){return B})),e.d(t,"Yb",(function(){return X})),e.d(t,"Vb",(function(){return Y})),e.d(t,"zb",(function(){return J})),e.d(t,"Kb",(function(){return N})),e.d(t,"rc",(function(){return U})),e.d(t,"a",(function(){return G})),e.d(t,"Hb",(function(){return H})),e.d(t,"Tb",(function(){return Q})),e.d(t,"Xb",(function(){return V})),e.d(t,"Oc",(function(){return $})),e.d(t,"sc",(function(){return Z})),e.d(t,"Lb",(function(){return nn})),e.d(t,"Mb",(function(){return tn})),e.d(t,"Mc",(function(){return en})),e.d(t,"Y",(function(){return rn})),e.d(t,"G",(function(){return un})),e.d(t,"D",(function(){return cn})),e.d(t,"o",(function(){return _n})),e.d(t,"O",(function(){return on})),e.d(t,"fb",(function(){return fn})),e.d(t,"Ub",(function(){return dn})),e.d(t,"n",(function(){return bn})),e.d(t,"Rb",(function(){return an})),e.d(t,"q",(function(){return sn})),e.d(t,"ec",(function(){return ln})),e.d(t,"dc",(function(){return wn})),e.d(t,"j",(function(){return gn})),e.d(t,"pc",(function(){return pn})),e.d(t,"c",(function(){return mn})),e.d(t,"L",(function(){return yn})),e.d(t,"v",(function(){return hn})),e.d(t,"P",(function(){return vn})),e.d(t,"ac",(function(){return kn})),e.d(t,"bc",(function(){return Cn})),e.d(t,"mc",(function(){return En})),e.d(t,"K",(function(){return Fn})),e.d(t,"R",(function(){return On})),e.d(t,"Pb",(function(){return Tn})),e.d(t,"cc",(function(){return qn})),e.d(t,"tc",(function(){return Mn})),e.d(t,"V",(function(){return An})),e.d(t,"Rc",(function(){return Rn})),e.d(t,"jc",(function(){return xn})),e.d(t,"mb",(function(){return In})),e.d(t,"b",(function(){return Kn})),e.d(t,"Z",(function(){return Pn})),e.d(t,"Cb",(function(){return Sn})),e.d(t,"Ib",(function(){return jn})),e.d(t,"Db",(function(){return zn})),e.d(t,"M",(function(){return Ln})),e.d(t,"Jb",(function(){return Wn})),e.d(t,"hb",(function(){return Dn})),e.d(t,"gb",(function(){return Bn})),e.d(t,"e",(function(){return Xn})),e.d(t,"Ob",(function(){return Yn})),e.d(t,"w",(function(){return Jn})),e.d(t,"hc",(function(){return Nn})),e.d(t,"f",(function(){return Un})),e.d(t,"jb",(function(){return Gn})),e.d(t,"k",(function(){return Hn})),e.d(t,"l",(function(){return Qn})),e.d(t,"kb",(function(){return Vn})),e.d(t,"lb",(function(){return $n})),e.d(t,"A",(function(){return Zn})),e.d(t,"B",(function(){return nt})),e.d(t,"z",(function(){return tt})),e.d(t,"d",(function(){return et})),e.d(t,"Nb",(function(){return rt})),e.d(t,"pb",(function(){return ut})),e.d(t,"E",(function(){return ct})),e.d(t,"vb",(function(){return _t})),e.d(t,"wb",(function(){return ot})),e.d(t,"oc",(function(){return it})),e.d(t,"u",(function(){return ft})),e.d(t,"C",(function(){return dt})),e.d(t,"y",(function(){return bt})),e.d(t,"I",(function(){return at})),e.d(t,"H",(function(){return st})),e.d(t,"W",(function(){return lt})),e.d(t,"eb",(function(){return wt})),e.d(t,"qc",(function(){return gt})),e.d(t,"Eb",(function(){return pt})),e.d(t,"Fb",(function(){return mt})),e.d(t,"nb",(function(){return yt})),e.d(t,"r",(function(){return ht})),e.d(t,"Gb",(function(){return vt})),e.d(t,"lc",(function(){return kt})),e.d(t,"X",(function(){return Ct})),e.d(t,"i",(function(){return Et})),e.d(t,"g",(function(){return Ft})),e.d(t,"x",(function(){return Ot})),e.d(t,"ic",(function(){return Tt})),e.d(t,"ib",(function(){return qt})),e.d(t,"db",(function(){return Mt})),e.d(t,"Qb",(function(){return At})),e.d(t,"bb",(function(){return Rt})),e.d(t,"s",(function(){return xt})),e.d(t,"Bb",(function(){return It})),e.d(t,"ob",(function(){return Kt})),e.d(t,"F",(function(){return Pt})),e.d(t,"ub",(function(){return St})),e.d(t,"h",(function(){return jt})),e.d(t,"t",(function(){return zt})),e.d(t,"Ab",(function(){return Lt})),e.d(t,"tb",(function(){return Wt})),e.d(t,"S",(function(){return Dt})),e.d(t,"cb",(function(){return Bt})),e.d(t,"sb",(function(){return Xt})),e.d(t,"m",(function(){return Yt})),e.d(t,"qb",(function(){return Jt})),e.d(t,"Zb",(function(){return Nt})),e.d(t,"uc",(function(){return Ut})),e.d(t,"T",(function(){return Gt})),e.d(t,"U",(function(){return Ht})),e.d(t,"Q",(function(){return Qt})),e.d(t,"ab",(function(){return Vt})),e.d(t,"Wb",(function(){return $t})),e.d(t,"p",(function(){return Zt})),e.d(t,"nc",(function(){return ne})),e.d(t,"fc",(function(){return te})),e.d(t,"Lc",(function(){return ee})),e.d(t,"Tc",(function(){return re})),e.d(t,"wc",(function(){return ue})),e.d(t,"xc",(function(){return ce})),e.d(t,"yc",(function(){return _e})),e.d(t,"zc",(function(){return oe})),e.d(t,"Ac",(function(){return ie})),e.d(t,"Bc",(function(){return fe})),e.d(t,"Cc",(function(){return de})),e.d(t,"Dc",(function(){return be})),e.d(t,"Ec",(function(){return ae})),e.d(t,"Fc",(function(){return se})),e.d(t,"Gc",(function(){return le})),e.d(t,"Hc",(function(){return we})),e.d(t,"Ic",(function(){return ge})),e.d(t,"Jc",(function(){return pe})),e.d(t,"Kc",(function(){return me}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);let r;function u(n){r=n}const c=new Array(128).fill(void 0);function _(n){return c[n]}c.push(void 0,null,!0,!1);let o=c.length;function i(n){const t=_(n);return function(n){n<132||(c[n]=o,o=n)}(n),t}function f(n){o===c.length&&c.push(c.length+1);const t=o;return o=c[t],c[t]=n,t}let d=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});d.decode();let b=null;function a(){return null!==b&&0!==b.byteLength||(b=new Uint8Array(r.memory.buffer)),b}function s(n,t){return n>>>=0,d.decode(a().subarray(n,n+t))}let l=0;let w=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof w.encodeInto?function(n,t){return w.encodeInto(n,t)}:function(n,t){const e=w.encode(n);return t.set(e),{read:n.length,written:e.length}};function p(n,t,e){if(void 0===e){const e=w.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),l=e.length,r}let r=n.length,u=t(r,1)>>>0;const c=a();let _=0;for(;_127)break;c[u+_]=t}if(_!==r){0!==_&&(n=n.slice(_)),u=e(u,r,r=_+3*n.length,1)>>>0;const t=a().subarray(u+_,u+r);_+=g(n,t).written,u=e(u,r,_,1)>>>0}return l=_,u}function m(n){return null==n}let y=null;function h(){return null!==y&&0!==y.byteLength||(y=new Int32Array(r.memory.buffer)),y}const v="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(n,t,e,u){const c={a:n,b:t,cnt:1,dtor:e},_=(...n)=>{c.cnt++;const t=c.a;c.a=0;try{return u(t,c.b,...n)}finally{0==--c.cnt?(r.__wbindgen_export_2.get(c.dtor)(t,c.b),v.unregister(c)):c.a=t}};return _.original=c,v.register(_,c,c),_}function C(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hfb699b6c6472fcb2(n,t)}function E(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2ef2c016758fe2d7(n,t,f(e))}function F(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h72a646add3f39a34(n,t,f(e),f(u))}function O(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,f(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function q(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,f(e))}function M(){r.run()}function A(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(f(n))}}function R(n){i(n)}function x(n){const t=i(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function I(n){return void 0===_(n)}function K(n){return f(_(n))}function P(n,t){return f(s(n,t))}function S(){return f(new Error)}function j(n,t){const e=p(_(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function z(n,t){let e,u;try{e=n,u=t,console.error(s(n,t))}finally{r.__wbindgen_free(e,u,1)}}function L(n){return _(n).offsetX}function W(n){return _(n).offsetY}function D(n){return f(_(n).getCoalescedEvents)}function B(n){return f(_(n).requestFullscreen)}function X(n){return f(_(n).scheduler)}function Y(n){return f(_(n).requestIdleCallback)}function J(n){return f(_(n).onpointerrawupdate)}function N(){return f(ResizeObserverEntry.prototype)}function U(n){const t=_(n).webkitFullscreenElement;return m(t)?0:f(t)}function G(n){return f(_(n).Window)}function H(n,t,e){return f(_(n).postTask(_(t),_(e)))}function Q(n){return f(_(n).requestFullscreen())}function V(n){return f(_(n).scheduler)}function $(n){return f(n)}function Z(n){_(n).webkitRequestFullscreen()}function nn(n){queueMicrotask(_(n))}function tn(n){return f(_(n).queueMicrotask)}function en(n){return"function"==typeof _(n)}function rn(n){let t;try{t=_(n)instanceof Window}catch(n){t=!1}return t}function un(n){const t=_(n).document;return m(t)?0:f(t)}function cn(n){return _(n).devicePixelRatio}function _n(n,t){_(n).cancelIdleCallback(t>>>0)}function on(){return A((function(n,t){const e=_(n).getComputedStyle(_(t));return m(e)?0:f(e)}),arguments)}function fn(){return A((function(n,t,e){const r=_(n).matchMedia(s(t,e));return m(r)?0:f(r)}),arguments)}function dn(){return A((function(n,t){return _(n).requestIdleCallback(_(t))}),arguments)}function bn(){return A((function(n,t){_(n).cancelAnimationFrame(t)}),arguments)}function an(){return A((function(n,t){return _(n).requestAnimationFrame(_(t))}),arguments)}function sn(n,t){_(n).clearTimeout(t)}function ln(){return A((function(n,t){return _(n).setTimeout(_(t))}),arguments)}function wn(){return A((function(n,t,e){return _(n).setTimeout(_(t),e)}),arguments)}function gn(n){const t=_(n).body;return m(t)?0:f(t)}function pn(n){return f(_(n).visibilityState)}function mn(n){const t=_(n).activeElement;return m(t)?0:f(t)}function yn(n){const t=_(n).fullscreenElement;return m(t)?0:f(t)}function hn(){return A((function(n,t,e){return f(_(n).createElement(s(t,e)))}),arguments)}function vn(n,t,e){const r=_(n).getElementById(s(t,e));return m(r)?0:f(r)}function kn(){return A((function(n,t,e,r,u){_(n).setAttribute(s(t,e),s(r,u))}),arguments)}function Cn(){return A((function(n,t){_(n).setPointerCapture(t)}),arguments)}function En(n){return f(_(n).style)}function Fn(){return A((function(n){_(n).focus()}),arguments)}function On(){return A((function(n,t,e,u){const c=p(_(t).getPropertyValue(s(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),o=l;h()[n/4+1]=o,h()[n/4+0]=c}),arguments)}function Tn(){return A((function(n,t,e,u){const c=p(_(t).removeProperty(s(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),o=l;h()[n/4+1]=o,h()[n/4+0]=c}),arguments)}function qn(){return A((function(n,t,e,r,u){_(n).setProperty(s(t,e),s(r,u))}),arguments)}function Mn(n){return _(n).width}function An(n){return _(n).height}function Rn(n,t){const e=_(t),u="string"==typeof e?e:void 0;var c=m(u)?0:p(u,r.__wbindgen_malloc,r.__wbindgen_realloc),o=l;h()[n/4+1]=o,h()[n/4+0]=c}function xn(n){return f(_(n).signal)}function In(){return A((function(){return f(new AbortController)}),arguments)}function Kn(n){_(n).abort()}function Pn(n){return _(n).isIntersecting}function Sn(n){return _(n).pointerId}function jn(n){return _(n).pressure}function zn(n,t){const e=p(_(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function Ln(n){return f(_(n).getCoalescedEvents())}function Wn(n){_(n).preventDefault()}function Dn(n,t){const e=p(_(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function Bn(n){return _(n).matches}function Xn(){return A((function(n,t){_(n).addListener(_(t))}),arguments)}function Yn(){return A((function(n,t){_(n).removeListener(_(t))}),arguments)}function Jn(n){return _(n).ctrlKey}function Nn(n){return _(n).shiftKey}function Un(n){return _(n).altKey}function Gn(n){return _(n).metaKey}function Hn(n){return _(n).button}function Qn(n){return _(n).buttons}function Vn(n){return _(n).movementX}function $n(n){return _(n).movementY}function Zn(n){return _(n).deltaX}function nt(n){return _(n).deltaY}function tt(n){return _(n).deltaMode}function et(){return A((function(n,t,e,r){_(n).addEventListener(s(t,e),_(r))}),arguments)}function rt(){return A((function(n,t,e,r){_(n).removeEventListener(s(t,e),_(r))}),arguments)}function ut(){return A((function(n){return f(new ResizeObserver(_(n)))}),arguments)}function ct(n){_(n).disconnect()}function _t(n,t){_(n).observe(_(t))}function ot(n,t,e){_(n).observe(_(t),_(e))}function it(n,t){_(n).unobserve(_(t))}function ft(n){return f(_(n).contentRect)}function dt(n){return f(_(n).devicePixelContentBoxSize)}function bt(n){console.debug(_(n))}function at(n){console.error(_(n))}function st(n,t){console.error(_(n),_(t))}function lt(n){console.info(_(n))}function wt(n){console.log(_(n))}function gt(n){console.warn(_(n))}function pt(n){return f(_(n).port1)}function mt(n){return f(_(n).port2)}function yt(){return A((function(){return f(new MessageChannel)}),arguments)}function ht(n){_(n).close()}function vt(){return A((function(n,t){_(n).postMessage(_(t))}),arguments)}function kt(n){_(n).start()}function Ct(n){return _(n).inlineSize}function Et(n){return _(n).blockSize}function Ft(n){return _(n).altKey}function Ot(n){return _(n).ctrlKey}function Tt(n){return _(n).shiftKey}function qt(n){return _(n).metaKey}function Mt(n){return _(n).location}function At(n){return _(n).repeat}function Rt(n,t){const e=p(_(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function xt(n,t){const e=p(_(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function It(n){return _(n).persisted}function Kt(){return A((function(n){return f(new IntersectionObserver(_(n)))}),arguments)}function Pt(n){_(n).disconnect()}function St(n,t){_(n).observe(_(t))}function jt(){return A((function(n,t){return f(_(n).appendChild(_(t)))}),arguments)}function zt(n,t){return _(n).contains(_(t))}function Lt(n){return f(_(n).performance)}function Wt(n){return _(n).now()}function Dt(n,t){return f(_(n)[t>>>0])}function Bt(n){return _(n).length}function Xt(n,t){return f(new Function(s(n,t)))}function Yt(){return A((function(n,t){return f(_(n).call(_(t)))}),arguments)}function Jt(){return f(new Object)}function Nt(){return A((function(){return f(self.self)}),arguments)}function Ut(){return A((function(){return f(window.window)}),arguments)}function Gt(){return A((function(){return f(globalThis.globalThis)}),arguments)}function Ht(){return A((function(){return f(global.global)}),arguments)}function Qt(n,t){return f(Object.getOwnPropertyDescriptor(_(n),_(t)))}function Vt(n,t){return Object.is(_(n),_(t))}function $t(n){return f(Promise.resolve(_(n)))}function Zt(n,t){return f(_(n).catch(_(t)))}function ne(n,t){return f(_(n).then(_(t)))}function te(){return A((function(n,t,e){return Reflect.set(_(n),_(t),_(e))}),arguments)}function ee(n,t){const e=p(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}(_(t)),r.__wbindgen_malloc,r.__wbindgen_realloc),u=l;h()[n/4+1]=u,h()[n/4+0]=e}function re(n,t){throw new Error(s(n,t))}function ue(n,t,e){return f(k(n,t,13,C))}function ce(n,t,e){return f(k(n,t,13,E))}function _e(n,t,e){return f(k(n,t,13,E))}function oe(n,t,e){return f(k(n,t,13,E))}function ie(n,t,e){return f(k(n,t,13,F))}function fe(n,t,e){return f(k(n,t,13,E))}function de(n,t,e){return f(k(n,t,13,E))}function be(n,t,e){return f(k(n,t,175,O))}function ae(n,t,e){return f(k(n,t,175,O))}function se(n,t,e){return f(k(n,t,175,O))}function le(n,t,e){return f(k(n,t,175,T))}function we(n,t,e){return f(k(n,t,175,O))}function ge(n,t,e){return f(k(n,t,175,O))}function pe(n,t,e){return f(k(n,t,175,O))}function me(n,t,e){return f(k(n,t,245,q))}}).call(this,e(260)(n))},413:function(n,t,e){"use strict";e.r(t);var r=e(414),u=e(256);e.d(t,"__wbg_set_wasm",(function(){return u.gc})),e.d(t,"run",(function(){return u.Uc})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Qc})),e.d(t,"__wbindgen_cb_drop",(function(){return u.vc})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Nc})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.Pc})),e.d(t,"__wbindgen_string_new",(function(){return u.Sc})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.rb})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.kc})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.J})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.xb})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.yb})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.N})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Sb})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Yb})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Vb})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.zb})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.Kb})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.rc})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.a})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.Hb})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Tb})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Xb})),e.d(t,"__wbindgen_number_new",(function(){return u.Oc})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.sc})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.Lb})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.Mb})),e.d(t,"__wbindgen_is_function",(function(){return u.Mc})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.Y})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.G})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.D})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.o})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.O})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.fb})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Ub})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.n})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Rb})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.q})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.ec})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.dc})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.j})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.pc})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.c})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.L})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.v})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.P})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.ac})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.bc})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.mc})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.K})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.R})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Pb})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.cc})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.tc})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.V})),e.d(t,"__wbindgen_string_get",(function(){return u.Rc})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.jc})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.mb})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.b})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.Z})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Cb})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.Ib})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Db})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.M})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.Jb})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.hb})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.gb})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.e})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Ob})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.w})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.hc})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.f})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.jb})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.k})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.l})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.kb})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.lb})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.A})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.B})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.z})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.d})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Nb})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.pb})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.E})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.vb})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.wb})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.oc})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.u})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.C})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.y})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.I})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.H})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.W})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.eb})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.qc})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.Eb})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.Fb})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.nb})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.r})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.Gb})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.lc})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.X})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.i})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.g})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.x})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.ic})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.ib})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.db})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Qb})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.bb})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.s})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Bb})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.ob})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.F})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.ub})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.h})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.t})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Ab})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.tb})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.S})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.cb})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.sb})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.m})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.qb})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Zb})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.uc})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.T})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.U})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Q})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.ab})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Wb})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.p})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.nc})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.fc})),e.d(t,"__wbindgen_debug_string",(function(){return u.Lc})),e.d(t,"__wbindgen_throw",(function(){return u.Tc})),e.d(t,"__wbindgen_closure_wrapper193",(function(){return u.wc})),e.d(t,"__wbindgen_closure_wrapper194",(function(){return u.xc})),e.d(t,"__wbindgen_closure_wrapper195",(function(){return u.yc})),e.d(t,"__wbindgen_closure_wrapper196",(function(){return u.zc})),e.d(t,"__wbindgen_closure_wrapper197",(function(){return u.Ac})),e.d(t,"__wbindgen_closure_wrapper198",(function(){return u.Bc})),e.d(t,"__wbindgen_closure_wrapper199",(function(){return u.Cc})),e.d(t,"__wbindgen_closure_wrapper554",(function(){return u.Dc})),e.d(t,"__wbindgen_closure_wrapper555",(function(){return u.Ec})),e.d(t,"__wbindgen_closure_wrapper556",(function(){return u.Fc})),e.d(t,"__wbindgen_closure_wrapper557",(function(){return u.Gc})),e.d(t,"__wbindgen_closure_wrapper558",(function(){return u.Hc})),e.d(t,"__wbindgen_closure_wrapper559",(function(){return u.Ic})),e.d(t,"__wbindgen_closure_wrapper560",(function(){return u.Jc})),e.d(t,"__wbindgen_closure_wrapper688",(function(){return u.Kc})),Object(u.gc)(r),r.__wbindgen_start()},414:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(256);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/3.28addd83.js b/assets/js/3.b46c225d.js similarity index 83% rename from assets/js/3.28addd83.js rename to assets/js/3.b46c225d.js index cafa808a8..13460d852 100644 --- a/assets/js/3.28addd83.js +++ b/assets/js/3.b46c225d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{276:function(t,e,a){},278:function(t,e,a){},280:function(t,e,a){"use strict";a(276)},282:function(t,e,a){"use strict";a.r(e);var s=a(292),i=a(284),n=a(258);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(8),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},284:function(t,e,a){"use strict";a.r(e);var s=a(258);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(280),a(8)),l=Object(o.a)(r,void 0,void 0,!1,null,null,null);e.default=l.exports},285:function(t,e,a){},288:function(t,e,a){},289:function(t,e,a){"use strict";a(278)},290:function(t,e,a){},292:function(t,e,a){"use strict";a.r(e);var s=a(258),i={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:a(273).default},beforeCreate(){this.$options.components.SidebarLinks=a(282).default},methods:{isActive:s.e}},n=(a(289),a(8)),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},293:function(t,e,a){"use strict";a(285)},295:function(t,e,a){"use strict";a(288)},296:function(t,e,a){"use strict";a(290)},302:function(t,e,a){},303:function(t,e,a){},312:function(t,e,a){"use strict";a.r(e);var s={components:{NavLink:a(272).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},i=(a(293),a(8)),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},313:function(t,e,a){"use strict";a.r(e);a(91);var s=a(258);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(320),a(321),a(8)),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([[3],{275:function(t,e,a){},277:function(t,e,a){},279:function(t,e,a){"use strict";a(275)},281:function(t,e,a){"use strict";a.r(e);var s=a(291),i=a(283),n=a(257);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(8),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},283:function(t,e,a){"use strict";a.r(e);var s=a(257);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(279),a(8)),l=Object(o.a)(r,void 0,void 0,!1,null,null,null);e.default=l.exports},284:function(t,e,a){},287:function(t,e,a){},288:function(t,e,a){"use strict";a(277)},289:function(t,e,a){},291:function(t,e,a){"use strict";a.r(e);var s=a(257),i={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:a(272).default},beforeCreate(){this.$options.components.SidebarLinks=a(281).default},methods:{isActive:s.e}},n=(a(288),a(8)),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},292:function(t,e,a){"use strict";a(284)},294:function(t,e,a){"use strict";a(287)},295:function(t,e,a){"use strict";a(289)},301:function(t,e,a){},302:function(t,e,a){},311:function(t,e,a){"use strict";a.r(e);var s={components:{NavLink:a(259).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},i=(a(292),a(8)),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},312:function(t,e,a){"use strict";a.r(e);a(91);var s=a(257);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(319),a(320),a(8)),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/30.670397b2.js b/assets/js/30.670397b2.js deleted file mode 100644 index 722680582..000000000 --- a/assets/js/30.670397b2.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{249:function(n,t,e){"use strict";(function(n){e.d(t,"ji",(function(){return u})),e.d(t,"Xk",(function(){return F})),e.d(t,"Tk",(function(){return W})),e.d(t,"mk",(function(){return q})),e.d(t,"Ok",(function(){return z})),e.d(t,"Sk",(function(){return U})),e.d(t,"Vk",(function(){return K})),e.d(t,"sg",(function(){return Q})),e.d(t,"vi",(function(){return X})),e.d(t,"Od",(function(){return N})),e.d(t,"ef",(function(){return Y})),e.d(t,"df",(function(){return H})),e.d(t,"Ue",(function(){return J})),e.d(t,"Rd",(function(){return Z})),e.d(t,"sf",(function(){return $})),e.d(t,"th",(function(){return nn})),e.d(t,"Fb",(function(){return tn})),e.d(t,"re",(function(){return en})),e.d(t,"Rk",(function(){return rn})),e.d(t,"gf",(function(){return un})),e.d(t,"cg",(function(){return fn})),e.d(t,"ff",(function(){return cn})),e.d(t,"ve",(function(){return on})),e.d(t,"Tf",(function(){return _n})),e.d(t,"Uf",(function(){return dn})),e.d(t,"Vf",(function(){return an})),e.d(t,"Sf",(function(){return bn})),e.d(t,"Bf",(function(){return gn})),e.d(t,"Cf",(function(){return wn})),e.d(t,"Lf",(function(){return sn})),e.d(t,"Kf",(function(){return ln})),e.d(t,"Nf",(function(){return mn})),e.d(t,"Of",(function(){return pn})),e.d(t,"Qf",(function(){return hn})),e.d(t,"Rf",(function(){return xn})),e.d(t,"Xf",(function(){return yn})),e.d(t,"Wf",(function(){return Sn})),e.d(t,"Pf",(function(){return kn})),e.d(t,"gg",(function(){return vn})),e.d(t,"fg",(function(){return Bn})),e.d(t,"ag",(function(){return Pn})),e.d(t,"Df",(function(){return jn})),e.d(t,"Yf",(function(){return In})),e.d(t,"Zf",(function(){return An})),e.d(t,"Mf",(function(){return Dn})),e.d(t,"If",(function(){return Tn})),e.d(t,"Ef",(function(){return Cn})),e.d(t,"Ff",(function(){return Mn})),e.d(t,"Gf",(function(){return Fn})),e.d(t,"Hf",(function(){return En})),e.d(t,"Jf",(function(){return Rn})),e.d(t,"Md",(function(){return Ln})),e.d(t,"Uk",(function(){return On})),e.d(t,"Ve",(function(){return Gn})),e.d(t,"fh",(function(){return Vn})),e.d(t,"Nk",(function(){return Wn})),e.d(t,"a",(function(){return qn})),e.d(t,"c",(function(){return zn})),e.d(t,"rh",(function(){return Un})),e.d(t,"ze",(function(){return Kn})),e.d(t,"Qd",(function(){return Qn})),e.d(t,"tf",(function(){return Xn})),e.d(t,"mc",(function(){return Nn})),e.d(t,"Rb",(function(){return Yn})),e.d(t,"Sb",(function(){return Hn})),e.d(t,"bc",(function(){return Jn})),e.d(t,"hc",(function(){return Zn})),e.d(t,"Xb",(function(){return $n})),e.d(t,"Vb",(function(){return nt})),e.d(t,"qc",(function(){return tt})),e.d(t,"lc",(function(){return et})),e.d(t,"ec",(function(){return rt})),e.d(t,"Wb",(function(){return ut})),e.d(t,"gc",(function(){return ft})),e.d(t,"ad",(function(){return ct})),e.d(t,"mi",(function(){return it})),e.d(t,"Zg",(function(){return ot})),e.d(t,"Rg",(function(){return _t})),e.d(t,"yf",(function(){return dt})),e.d(t,"Kj",(function(){return at})),e.d(t,"uc",(function(){return bt})),e.d(t,"cd",(function(){return gt})),e.d(t,"bd",(function(){return wt})),e.d(t,"he",(function(){return st})),e.d(t,"ie",(function(){return lt})),e.d(t,"Jb",(function(){return mt})),e.d(t,"Kb",(function(){return pt})),e.d(t,"Pb",(function(){return ht})),e.d(t,"Qb",(function(){return xt})),e.d(t,"o",(function(){return yt})),e.d(t,"Kd",(function(){return St})),e.d(t,"q",(function(){return kt})),e.d(t,"Jd",(function(){return vt})),e.d(t,"pf",(function(){return Bt})),e.d(t,"Wd",(function(){return Pt})),e.d(t,"Td",(function(){return jt})),e.d(t,"hb",(function(){return It})),e.d(t,"gb",(function(){return At})),e.d(t,"kk",(function(){return Dt})),e.d(t,"yh",(function(){return Tt})),e.d(t,"Vd",(function(){return Ct})),e.d(t,"Ud",(function(){return Mt})),e.d(t,"ik",(function(){return Ft})),e.d(t,"Mj",(function(){return Et})),e.d(t,"ui",(function(){return Rt})),e.d(t,"jk",(function(){return Lt})),e.d(t,"Lb",(function(){return Ot})),e.d(t,"Th",(function(){return Gt})),e.d(t,"Nh",(function(){return Vt})),e.d(t,"Ih",(function(){return Wt})),e.d(t,"md",(function(){return qt})),e.d(t,"ld",(function(){return zt})),e.d(t,"Uh",(function(){return Ut})),e.d(t,"Jh",(function(){return Kt})),e.d(t,"Lh",(function(){return Qt})),e.d(t,"Qh",(function(){return Xt})),e.d(t,"Sh",(function(){return Nt})),e.d(t,"ei",(function(){return Yt})),e.d(t,"ci",(function(){return Ht})),e.d(t,"Cd",(function(){return Jt})),e.d(t,"zd",(function(){return Zt})),e.d(t,"Bd",(function(){return $t})),e.d(t,"xd",(function(){return ne})),e.d(t,"Vh",(function(){return te})),e.d(t,"Kh",(function(){return ee})),e.d(t,"Mh",(function(){return re})),e.d(t,"Ph",(function(){return ue})),e.d(t,"Rh",(function(){return fe})),e.d(t,"fi",(function(){return ce})),e.d(t,"di",(function(){return ie})),e.d(t,"Dd",(function(){return oe})),e.d(t,"yd",(function(){return _e})),e.d(t,"Ad",(function(){return de})),e.d(t,"wd",(function(){return ae})),e.d(t,"Oh",(function(){return be})),e.d(t,"Yh",(function(){return ge})),e.d(t,"gi",(function(){return we})),e.d(t,"Zh",(function(){return se})),e.d(t,"Pd",(function(){return le})),e.d(t,"Gi",(function(){return me})),e.d(t,"lk",(function(){return pe})),e.d(t,"Qk",(function(){return he})),e.d(t,"Gg",(function(){return xe})),e.d(t,"Hg",(function(){return ye})),e.d(t,"le",(function(){return Se})),e.d(t,"uh",(function(){return ke})),e.d(t,"Dh",(function(){return ve})),e.d(t,"xh",(function(){return Be})),e.d(t,"Ig",(function(){return Pe})),e.d(t,"Yg",(function(){return je})),e.d(t,"bk",(function(){return Ie})),e.d(t,"b",(function(){return Ae})),e.d(t,"Vg",(function(){return De})),e.d(t,"vh",(function(){return Te})),e.d(t,"Ch",(function(){return Ce})),e.d(t,"ck",(function(){return Me})),e.d(t,"dh",(function(){return Fe})),e.d(t,"eh",(function(){return Ee})),e.d(t,"Mk",(function(){return Re})),e.d(t,"jf",(function(){return Le})),e.d(t,"p",(function(){return Oe})),e.d(t,"t",(function(){return Ge})),e.d(t,"A",(function(){return Ve})),e.d(t,"E",(function(){return We})),e.d(t,"P",(function(){return qe})),e.d(t,"S",(function(){return ze})),e.d(t,"V",(function(){return Ue})),e.d(t,"W",(function(){return Ke})),e.d(t,"ib",(function(){return Qe})),e.d(t,"jb",(function(){return Xe})),e.d(t,"tb",(function(){return Ne})),e.d(t,"Cb",(function(){return Ye})),e.d(t,"Ab",(function(){return He})),e.d(t,"Db",(function(){return Je})),e.d(t,"Eb",(function(){return Ze})),e.d(t,"Ib",(function(){return $e})),e.d(t,"Ob",(function(){return nr})),e.d(t,"fc",(function(){return tr})),e.d(t,"kc",(function(){return er})),e.d(t,"tc",(function(){return rr})),e.d(t,"Gc",(function(){return ur})),e.d(t,"Jc",(function(){return fr})),e.d(t,"Mc",(function(){return cr})),e.d(t,"Qc",(function(){return ir})),e.d(t,"pd",(function(){return or})),e.d(t,"td",(function(){return _r})),e.d(t,"vd",(function(){return dr})),e.d(t,"Id",(function(){return ar})),e.d(t,"Sd",(function(){return br})),e.d(t,"ce",(function(){return gr})),e.d(t,"je",(function(){return wr})),e.d(t,"ue",(function(){return sr})),e.d(t,"Fe",(function(){return lr})),e.d(t,"Me",(function(){return mr})),e.d(t,"Ne",(function(){return pr})),e.d(t,"lf",(function(){return hr})),e.d(t,"gh",(function(){return xr})),e.d(t,"hh",(function(){return yr})),e.d(t,"jh",(function(){return Sr})),e.d(t,"nh",(function(){return kr})),e.d(t,"Ah",(function(){return vr})),e.d(t,"Bh",(function(){return Br})),e.d(t,"Hi",(function(){return Pr})),e.d(t,"Ji",(function(){return jr})),e.d(t,"Mi",(function(){return Ir})),e.d(t,"Ni",(function(){return Ar})),e.d(t,"Ri",(function(){return Dr})),e.d(t,"Si",(function(){return Tr})),e.d(t,"Oi",(function(){return Cr})),e.d(t,"Qi",(function(){return Mr})),e.d(t,"Ti",(function(){return Fr})),e.d(t,"Wi",(function(){return Er})),e.d(t,"Vi",(function(){return Rr})),e.d(t,"Xi",(function(){return Lr})),e.d(t,"Ui",(function(){return Or})),e.d(t,"Yi",(function(){return Gr})),e.d(t,"fj",(function(){return Vr})),e.d(t,"gj",(function(){return Wr})),e.d(t,"ij",(function(){return qr})),e.d(t,"kj",(function(){return zr})),e.d(t,"lj",(function(){return Ur})),e.d(t,"oj",(function(){return Kr})),e.d(t,"pj",(function(){return Qr})),e.d(t,"sj",(function(){return Xr})),e.d(t,"vj",(function(){return Nr})),e.d(t,"wj",(function(){return Yr})),e.d(t,"xj",(function(){return Hr})),e.d(t,"zj",(function(){return Jr})),e.d(t,"Aj",(function(){return Zr})),e.d(t,"Bj",(function(){return $r})),e.d(t,"Dj",(function(){return nu})),e.d(t,"Ej",(function(){return tu})),e.d(t,"Fj",(function(){return eu})),e.d(t,"Gj",(function(){return ru})),e.d(t,"Ij",(function(){return uu})),e.d(t,"Jj",(function(){return fu})),e.d(t,"Rj",(function(){return cu})),e.d(t,"Sj",(function(){return iu})),e.d(t,"g",(function(){return ou})),e.d(t,"m",(function(){return _u})),e.d(t,"s",(function(){return du})),e.d(t,"v",(function(){return au})),e.d(t,"w",(function(){return bu})),e.d(t,"y",(function(){return gu})),e.d(t,"B",(function(){return wu})),e.d(t,"F",(function(){return su})),e.d(t,"J",(function(){return lu})),e.d(t,"H",(function(){return mu})),e.d(t,"N",(function(){return pu})),e.d(t,"L",(function(){return hu})),e.d(t,"rb",(function(){return xu})),e.d(t,"lb",(function(){return yu})),e.d(t,"nb",(function(){return Su})),e.d(t,"pb",(function(){return ku})),e.d(t,"xb",(function(){return vu})),e.d(t,"zb",(function(){return Bu})),e.d(t,"Nb",(function(){return Pu})),e.d(t,"Ub",(function(){return ju})),e.d(t,"ac",(function(){return Iu})),e.d(t,"cc",(function(){return Au})),e.d(t,"ic",(function(){return Du})),e.d(t,"oc",(function(){return Tu})),e.d(t,"pc",(function(){return Cu})),e.d(t,"yc",(function(){return Mu})),e.d(t,"Bc",(function(){return Fu})),e.d(t,"Dc",(function(){return Eu})),e.d(t,"Fc",(function(){return Ru})),e.d(t,"Hc",(function(){return Lu})),e.d(t,"Kc",(function(){return Ou})),e.d(t,"Nc",(function(){return Gu})),e.d(t,"Vc",(function(){return Vu})),e.d(t,"Wc",(function(){return Wu})),e.d(t,"Zc",(function(){return qu})),e.d(t,"id",(function(){return zu})),e.d(t,"gd",(function(){return Uu})),e.d(t,"qd",(function(){return Ku})),e.d(t,"Hd",(function(){return Qu})),e.d(t,"Fd",(function(){return Xu})),e.d(t,"Yd",(function(){return Nu})),e.d(t,"be",(function(){return Yu})),e.d(t,"ee",(function(){return Hu})),e.d(t,"te",(function(){return Ju})),e.d(t,"ye",(function(){return Zu})),e.d(t,"Ae",(function(){return $u})),e.d(t,"De",(function(){return nf})),e.d(t,"He",(function(){return tf})),e.d(t,"Ie",(function(){return ef})),e.d(t,"Ke",(function(){return rf})),e.d(t,"Oe",(function(){return uf})),e.d(t,"vf",(function(){return ff})),e.d(t,"Mg",(function(){return cf})),e.d(t,"Qg",(function(){return of})),e.d(t,"ph",(function(){return _f})),e.d(t,"Eh",(function(){return df})),e.d(t,"qi",(function(){return af})),e.d(t,"yi",(function(){return bf})),e.d(t,"Bi",(function(){return gf})),e.d(t,"zi",(function(){return wf})),e.d(t,"Di",(function(){return sf})),e.d(t,"Ki",(function(){return lf})),e.d(t,"cj",(function(){return mf})),e.d(t,"ej",(function(){return pf})),e.d(t,"qj",(function(){return hf})),e.d(t,"Nj",(function(){return xf})),e.d(t,"Tj",(function(){return yf})),e.d(t,"Yj",(function(){return Sf})),e.d(t,"kf",(function(){return kf})),e.d(t,"nd",(function(){return vf})),e.d(t,"kg",(function(){return Bf})),e.d(t,"ed",(function(){return Pf})),e.d(t,"eb",(function(){return jf})),e.d(t,"me",(function(){return If})),e.d(t,"zf",(function(){return Af})),e.d(t,"wh",(function(){return Df})),e.d(t,"db",(function(){return Tf})),e.d(t,"sh",(function(){return Cf})),e.d(t,"qb",(function(){return Mf})),e.d(t,"bi",(function(){return Ff})),e.d(t,"ai",(function(){return Ef})),e.d(t,"R",(function(){return Rf})),e.d(t,"Zj",(function(){return Lf})),e.d(t,"e",(function(){return Of})),e.d(t,"ge",(function(){return Gf})),e.d(t,"Yb",(function(){return Vf})),e.d(t,"se",(function(){return Wf})),e.d(t,"ch",(function(){return qf})),e.d(t,"bh",(function(){return zf})),e.d(t,"Hh",(function(){return Uf})),e.d(t,"Wh",(function(){return Kf})),e.d(t,"jg",(function(){return Qf})),e.d(t,"Fi",(function(){return Xf})),e.d(t,"Xd",(function(){return Nf})),e.d(t,"U",(function(){return Yf})),e.d(t,"T",(function(){return Hf})),e.d(t,"X",(function(){return Jf})),e.d(t,"Bb",(function(){return Zf})),e.d(t,"ih",(function(){return $f})),e.d(t,"Ii",(function(){return nc})),e.d(t,"Pi",(function(){return tc})),e.d(t,"hj",(function(){return ec})),e.d(t,"jj",(function(){return rc})),e.d(t,"mj",(function(){return uc})),e.d(t,"nj",(function(){return fc})),e.d(t,"tj",(function(){return cc})),e.d(t,"uj",(function(){return ic})),e.d(t,"yj",(function(){return oc})),e.d(t,"Cj",(function(){return _c})),e.d(t,"Hj",(function(){return dc})),e.d(t,"f",(function(){return ac})),e.d(t,"n",(function(){return bc})),e.d(t,"r",(function(){return gc})),e.d(t,"u",(function(){return wc})),e.d(t,"x",(function(){return sc})),e.d(t,"z",(function(){return lc})),e.d(t,"C",(function(){return mc})),e.d(t,"G",(function(){return pc})),e.d(t,"K",(function(){return hc})),e.d(t,"I",(function(){return xc})),e.d(t,"O",(function(){return yc})),e.d(t,"M",(function(){return Sc})),e.d(t,"sb",(function(){return kc})),e.d(t,"kb",(function(){return vc})),e.d(t,"mb",(function(){return Bc})),e.d(t,"ob",(function(){return Pc})),e.d(t,"wb",(function(){return jc})),e.d(t,"yb",(function(){return Ic})),e.d(t,"Mb",(function(){return Ac})),e.d(t,"Tb",(function(){return Dc})),e.d(t,"Zb",(function(){return Tc})),e.d(t,"dc",(function(){return Cc})),e.d(t,"jc",(function(){return Mc})),e.d(t,"nc",(function(){return Fc})),e.d(t,"rc",(function(){return Ec})),e.d(t,"xc",(function(){return Rc})),e.d(t,"Ac",(function(){return Lc})),e.d(t,"Cc",(function(){return Oc})),e.d(t,"Ec",(function(){return Gc})),e.d(t,"Ic",(function(){return Vc})),e.d(t,"Lc",(function(){return Wc})),e.d(t,"Oc",(function(){return qc})),e.d(t,"Uc",(function(){return zc})),e.d(t,"Xc",(function(){return Uc})),e.d(t,"Yc",(function(){return Kc})),e.d(t,"hd",(function(){return Qc})),e.d(t,"fd",(function(){return Xc})),e.d(t,"rd",(function(){return Nc})),e.d(t,"Gd",(function(){return Yc})),e.d(t,"Ed",(function(){return Hc})),e.d(t,"Zd",(function(){return Jc})),e.d(t,"ae",(function(){return Zc})),e.d(t,"fe",(function(){return $c})),e.d(t,"xe",(function(){return ni})),e.d(t,"Be",(function(){return ti})),e.d(t,"Ce",(function(){return ei})),e.d(t,"Ge",(function(){return ri})),e.d(t,"Je",(function(){return ui})),e.d(t,"Pe",(function(){return fi})),e.d(t,"uf",(function(){return ci})),e.d(t,"Lg",(function(){return ii})),e.d(t,"Pg",(function(){return oi})),e.d(t,"oh",(function(){return _i})),e.d(t,"Fh",(function(){return di})),e.d(t,"pi",(function(){return ai})),e.d(t,"xi",(function(){return bi})),e.d(t,"Ci",(function(){return gi})),e.d(t,"Ai",(function(){return wi})),e.d(t,"Ei",(function(){return si})),e.d(t,"Li",(function(){return li})),e.d(t,"bj",(function(){return mi})),e.d(t,"dj",(function(){return pi})),e.d(t,"rj",(function(){return hi})),e.d(t,"Oj",(function(){return xi})),e.d(t,"Uj",(function(){return yi})),e.d(t,"Xj",(function(){return Si})),e.d(t,"Ee",(function(){return ki})),e.d(t,"mh",(function(){return vi})),e.d(t,"Xh",(function(){return Bi})),e.d(t,"ek",(function(){return Pi})),e.d(t,"Xe",(function(){return ji})),e.d(t,"Wj",(function(){return Ii})),e.d(t,"Vj",(function(){return Ai})),e.d(t,"dk",(function(){return Di})),e.d(t,"Ze",(function(){return Ti})),e.d(t,"sd",(function(){return Ci})),e.d(t,"ti",(function(){return Mi})),e.d(t,"lg",(function(){return Fi})),e.d(t,"d",(function(){return Ei})),e.d(t,"mf",(function(){return Ri})),e.d(t,"Ng",(function(){return Li})),e.d(t,"Wg",(function(){return Oi})),e.d(t,"Og",(function(){return Gi})),e.d(t,"ke",(function(){return Vi})),e.d(t,"Xg",(function(){return Wi})),e.d(t,"bg",(function(){return qi})),e.d(t,"Af",(function(){return zi})),e.d(t,"i",(function(){return Ui})),e.d(t,"lh",(function(){return Ki})),e.d(t,"vc",(function(){return Qi})),e.d(t,"ri",(function(){return Xi})),e.d(t,"j",(function(){return Ni})),e.d(t,"eg",(function(){return Yi})),e.d(t,"ab",(function(){return Hi})),e.d(t,"bb",(function(){return Ji})),e.d(t,"hg",(function(){return Zi})),e.d(t,"ig",(function(){return $i})),e.d(t,"Sc",(function(){return no})),e.d(t,"Tc",(function(){return to})),e.d(t,"Rc",(function(){return eo})),e.d(t,"h",(function(){return ro})),e.d(t,"kh",(function(){return uo})),e.d(t,"hf",(function(){return fo})),e.d(t,"gk",(function(){return co})),e.d(t,"ni",(function(){return io})),e.d(t,"Ye",(function(){return oo})),e.d(t,"li",(function(){return _o})),e.d(t,"pe",(function(){return ao})),e.d(t,"qe",(function(){return bo})),e.d(t,"fk",(function(){return go})),e.d(t,"oi",(function(){return wo})),e.d(t,"We",(function(){return so})),e.d(t,"ki",(function(){return lo})),e.d(t,"ne",(function(){return mo})),e.d(t,"oe",(function(){return po})),e.d(t,"pg",(function(){return ho})),e.d(t,"jd",(function(){return xo})),e.d(t,"Dg",(function(){return yo})),e.d(t,"Eg",(function(){return So})),e.d(t,"Lj",(function(){return ko})),e.d(t,"Le",(function(){return vo})),e.d(t,"de",(function(){return Bo})),e.d(t,"Hb",(function(){return Po})),e.d(t,"dd",(function(){return jo})),e.d(t,"zc",(function(){return Io})),e.d(t,"Nd",(function(){return Ao})),e.d(t,"Ld",(function(){return Do})),e.d(t,"bf",(function(){return To})),e.d(t,"xf",(function(){return Co})),e.d(t,"ak",(function(){return Mo})),e.d(t,"Sg",(function(){return Fo})),e.d(t,"Tg",(function(){return Eo})),e.d(t,"ng",(function(){return Ro})),e.d(t,"ub",(function(){return Lo})),e.d(t,"Ug",(function(){return Oo})),e.d(t,"wi",(function(){return Go})),e.d(t,"cf",(function(){return Vo})),e.d(t,"Q",(function(){return Wo})),e.d(t,"k",(function(){return qo})),e.d(t,"wc",(function(){return zo})),e.d(t,"si",(function(){return Uo})),e.d(t,"dg",(function(){return Ko})),e.d(t,"wf",(function(){return Qo})),e.d(t,"qh",(function(){return Xo})),e.d(t,"of",(function(){return No})),e.d(t,"vb",(function(){return Yo})),e.d(t,"Kg",(function(){return Ho})),e.d(t,"od",(function(){return Jo})),e.d(t,"ud",(function(){return Zo})),e.d(t,"Qj",(function(){return $o})),e.d(t,"og",(function(){return n_})),e.d(t,"kd",(function(){return t_})),e.d(t,"Cg",(function(){return e_})),e.d(t,"l",(function(){return r_})),e.d(t,"Gb",(function(){return u_})),e.d(t,"Qe",(function(){return f_})),e.d(t,"D",(function(){return c_})),e.d(t,"sc",(function(){return i_})),e.d(t,"Pc",(function(){return o_})),e.d(t,"Jg",(function(){return __})),e.d(t,"Bg",(function(){return d_})),e.d(t,"Re",(function(){return a_})),e.d(t,"rf",(function(){return b_})),e.d(t,"mg",(function(){return g_})),e.d(t,"tg",(function(){return w_})),e.d(t,"cb",(function(){return s_})),e.d(t,"rg",(function(){return l_})),e.d(t,"Gh",(function(){return m_})),e.d(t,"hk",(function(){return p_})),e.d(t,"Se",(function(){return h_})),e.d(t,"Te",(function(){return x_})),e.d(t,"af",(function(){return y_})),e.d(t,"Fg",(function(){return S_})),e.d(t,"ah",(function(){return k_})),e.d(t,"if",(function(){return v_})),e.d(t,"we",(function(){return B_})),e.d(t,"nf",(function(){return P_})),e.d(t,"Pj",(function(){return j_})),e.d(t,"zh",(function(){return I_})),e.d(t,"fb",(function(){return A_})),e.d(t,"Zi",(function(){return D_})),e.d(t,"aj",(function(){return T_})),e.d(t,"Y",(function(){return C_})),e.d(t,"vg",(function(){return M_})),e.d(t,"yg",(function(){return F_})),e.d(t,"wg",(function(){return E_})),e.d(t,"Ag",(function(){return R_})),e.d(t,"qg",(function(){return L_})),e.d(t,"ii",(function(){return O_})),e.d(t,"qf",(function(){return G_})),e.d(t,"zg",(function(){return V_})),e.d(t,"ug",(function(){return W_})),e.d(t,"xg",(function(){return q_})),e.d(t,"Z",(function(){return z_})),e.d(t,"hi",(function(){return U_})),e.d(t,"Lk",(function(){return K_})),e.d(t,"Wk",(function(){return Q_})),e.d(t,"Pk",(function(){return X_})),e.d(t,"pk",(function(){return N_})),e.d(t,"qk",(function(){return Y_})),e.d(t,"rk",(function(){return H_})),e.d(t,"sk",(function(){return J_})),e.d(t,"tk",(function(){return Z_})),e.d(t,"uk",(function(){return $_})),e.d(t,"vk",(function(){return nd})),e.d(t,"Ek",(function(){return td})),e.d(t,"Fk",(function(){return ed})),e.d(t,"Gk",(function(){return rd})),e.d(t,"Hk",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"nk",(function(){return od})),e.d(t,"ok",(function(){return _d})),e.d(t,"wk",(function(){return dd})),e.d(t,"xk",(function(){return ad})),e.d(t,"yk",(function(){return bd})),e.d(t,"zk",(function(){return gd})),e.d(t,"Ak",(function(){return wd})),e.d(t,"Bk",(function(){return sd})),e.d(t,"Ck",(function(){return ld})),e.d(t,"Dk",(function(){return md}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}function _(n){i===f.length&&f.push(f.length+1);const t=i;return i=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))}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,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1ff124460aa020e8(n,t,_(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hff2bb5d0aa2bdfb2(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h75e283bc1e654013(n,t,_(e),_(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1ba8619bfbd8584d(n,t,_(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdc7d08744fa9f29e(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc659b53e989b2e5d(n,t,_(e),_(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,_(e))}function T(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,_(e))}function C(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n){return _(c(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function X(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function N(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function H(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function J(n){return _(c(n).gpu)}function Z(n){return _(c(n).features)}function $(n){return _(c(n).limits)}function nn(n,t){return _(c(n).requestDevice(c(t)))}function tn(n,t){c(n).configure(c(t))}function en(n){return _(c(n).getCurrentTexture())}function rn(n){return _(n)}function un(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function fn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function cn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function on(n,t,e){return _(c(n).getMappedRange(t,e))}function _n(n){return c(n).maxTextureDimension1D}function dn(n){return c(n).maxTextureDimension2D}function an(n){return c(n).maxTextureDimension3D}function bn(n){return c(n).maxTextureArrayLayers}function gn(n){return c(n).maxBindGroups}function wn(n){return c(n).maxBindingsPerBindGroup}function sn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function ln(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function mn(n){return c(n).maxSampledTexturesPerShaderStage}function pn(n){return c(n).maxSamplersPerShaderStage}function hn(n){return c(n).maxStorageBuffersPerShaderStage}function xn(n){return c(n).maxStorageTexturesPerShaderStage}function yn(n){return c(n).maxUniformBuffersPerShaderStage}function Sn(n){return c(n).maxUniformBufferBindingSize}function kn(n){return c(n).maxStorageBufferBindingSize}function vn(n){return c(n).minUniformBufferOffsetAlignment}function Bn(n){return c(n).minStorageBufferOffsetAlignment}function Pn(n){return c(n).maxVertexBuffers}function jn(n){return c(n).maxBufferSize}function In(n){return c(n).maxVertexAttributes}function An(n){return c(n).maxVertexBufferArrayStride}function Dn(n){return c(n).maxInterStageShaderComponents}function Tn(n){return c(n).maxComputeWorkgroupStorageSize}function Cn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Mn(n){return c(n).maxComputeWorkgroupSizeX}function Fn(n){return c(n).maxComputeWorkgroupSizeY}function En(n){return c(n).maxComputeWorkgroupSizeZ}function Rn(n){return c(n).maxComputeWorkgroupsPerDimension}function Ln(n){return _(c(n).error)}function On(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function Gn(n,t,e){return c(n).has(g(t,e))}function Vn(n){return _(c(n).queue)}function Wn(n){const t=c(n);return"object"==typeof t&&null!==t}function qn(n){return _(c(n).Window)}function zn(n){return _(c(n).WorkerGlobalScope)}function Un(n,t){return _(c(n).requestAdapter(c(t)))}function Kn(n){return _(c(n).getPreferredCanvasFormat())}function Qn(n){return _(c(n).features)}function Xn(n){return _(c(n).limits)}function Nn(n,t){return _(c(n).createShaderModule(c(t)))}function Yn(n,t){return _(c(n).createBindGroupLayout(c(t)))}function Hn(n,t){return _(c(n).createBindGroup(c(t)))}function Jn(n,t){return _(c(n).createPipelineLayout(c(t)))}function Zn(n,t){return _(c(n).createRenderPipeline(c(t)))}function $n(n,t){return _(c(n).createComputePipeline(c(t)))}function nt(n,t){return _(c(n).createBuffer(c(t)))}function tt(n,t){return _(c(n).createTexture(c(t)))}function et(n,t){return _(c(n).createSampler(c(t)))}function rt(n,t){return _(c(n).createQuerySet(c(t)))}function ut(n,t){return _(c(n).createCommandEncoder(c(t)))}function ft(n,t){return _(c(n).createRenderBundleEncoder(c(t)))}function ct(n){c(n).destroy()}function it(n,t){c(n).onuncapturederror=c(t)}function ot(n,t){c(n).pushErrorScope(o(t))}function _t(n){return _(c(n).popErrorScope())}function dt(n,t,e,r){return _(c(n).mapAsync(t>>>0,e,r))}function at(n){c(n).unmap()}function bt(n,t){return _(c(n).createView(c(t)))}function gt(n){c(n).destroy()}function wt(n){c(n).destroy()}function st(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function lt(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function mt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function pt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function ht(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function xt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function yt(n,t){return _(c(n).beginComputePass(c(t)))}function St(n){c(n).end()}function kt(n,t){return _(c(n).beginRenderPass(c(t)))}function vt(n){c(n).end()}function Bt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Pt(n,t){return _(c(n).finish(c(t)))}function jt(n){return _(c(n).finish())}function It(n,t,e){c(n).clearBuffer(c(t),e)}function At(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Dt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Tt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Ct(n){return _(c(n).finish())}function Mt(n,t){return _(c(n).finish(c(t)))}function Ft(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Et(n){return c(n).usage}function Rt(n){return c(n).size}function Lt(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ot(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Gt(n,t){c(n).setPipeline(c(t))}function Vt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Wt(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function qt(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function zt(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function Ut(n,t){c(n).setPipeline(c(t))}function Kt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Qt(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Xt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Nt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Yt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Ht(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Jt(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Zt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function $t(n,t,e){c(n).drawIndirect(c(t),e)}function ne(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function te(n,t){c(n).setPipeline(c(t))}function ee(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function re(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ue(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function fe(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ce(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ie(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function oe(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function _e(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function de(n,t,e){c(n).drawIndirect(c(t),e)}function ae(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function be(n,t){c(n).setBlendConstant(c(t))}function ge(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function we(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function se(n,t){c(n).setStencilReference(t>>>0)}function le(n,t){c(n).executeBundles(c(t))}function me(n,t){c(n).submit(c(t))}function pe(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function he(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function xe(n){return c(n).offsetX}function ye(n){return c(n).offsetY}function Se(n){return _(c(n).getCoalescedEvents)}function ke(n){return _(c(n).requestFullscreen)}function ve(n){return _(c(n).scheduler)}function Be(n){return _(c(n).requestIdleCallback)}function Pe(n){return _(c(n).onpointerrawupdate)}function je(){return _(ResizeObserverEntry.prototype)}function Ie(n){const t=c(n).webkitFullscreenElement;return p(t)?0:_(t)}function Ae(n){return _(c(n).Window)}function De(n,t,e){return _(c(n).postTask(c(t),c(e)))}function Te(n){return _(c(n).requestFullscreen())}function Ce(n){return _(c(n).scheduler)}function Me(n){c(n).webkitRequestFullscreen()}function Fe(n){queueMicrotask(c(n))}function Ee(n){return _(c(n).queueMicrotask)}function Re(n){return"function"==typeof c(n)}function Le(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Oe(n,t,e){c(n).beginQuery(t>>>0,c(e))}function Ge(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function Ve(n,t,e){c(n).bindSampler(t>>>0,c(e))}function We(n,t){c(n).bindVertexArray(c(t))}function qe(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function ze(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 Ke(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Qe(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function Xe(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function Ne(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Ye(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function He(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function Je(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function Ze(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function $e(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function nr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function tr(n){const t=c(n).createQuery();return p(t)?0:_(t)}function er(n){const t=c(n).createSampler();return p(t)?0:_(t)}function rr(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function ur(n,t){c(n).deleteQuery(c(t))}function fr(n,t){c(n).deleteSampler(c(t))}function cr(n,t){c(n).deleteSync(c(t))}function ir(n,t){c(n).deleteVertexArray(c(t))}function or(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function _r(n,t){c(n).drawBuffers(c(t))}function dr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function ar(n,t){c(n).endQuery(t>>>0)}function br(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function gr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function wr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function sr(){return O((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function lr(n,t,e){return _(c(n).getQueryParameter(c(t),e>>>0))}function mr(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function pr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function hr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function xr(n,t){c(n).readBuffer(t>>>0)}function yr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Sr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function kr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function vr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Br(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Pr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function jr(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Ir(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Ar(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Dr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Tr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Cr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function Wr(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function qr(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function zr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Ur(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Kr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Qr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Xr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Nr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Yr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function Hr(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function Jr(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function Zr(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function $r(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function nu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function cu(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function iu(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function ou(n,t){c(n).activeTexture(t>>>0)}function _u(n,t,e){c(n).attachShader(c(t),c(e))}function du(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function au(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function bu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function gu(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function wu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function su(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function lu(n,t){c(n).blendEquation(t>>>0)}function mu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function pu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function hu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function xu(n,t){c(n).clear(t>>>0)}function yu(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Su(n,t){c(n).clearDepth(t)}function ku(n,t){c(n).clearStencil(t)}function vu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Bu(n,t){c(n).compileShader(c(t))}function Pu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function ju(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Iu(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Au(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Du(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Tu(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Cu(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Mu(n,t){c(n).cullFace(t>>>0)}function Fu(n,t){c(n).deleteBuffer(c(t))}function Eu(n,t){c(n).deleteFramebuffer(c(t))}function Ru(n,t){c(n).deleteProgram(c(t))}function Lu(n,t){c(n).deleteRenderbuffer(c(t))}function Ou(n,t){c(n).deleteShader(c(t))}function Gu(n,t){c(n).deleteTexture(c(t))}function Vu(n,t){c(n).depthFunc(t>>>0)}function Wu(n,t){c(n).depthMask(0!==t)}function qu(n,t,e){c(n).depthRange(t,e)}function zu(n,t){c(n).disable(t>>>0)}function Uu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Ku(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Qu(n,t){c(n).enable(t>>>0)}function Xu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Nu(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Yu(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Hu(n,t){c(n).frontFace(t>>>0)}function Ju(){return O((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function Zu(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function $u(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function nf(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function tf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ef(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function rf(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function uf(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function ff(n,t){c(n).linkProgram(c(t))}function cf(n,t,e){c(n).pixelStorei(t>>>0,e)}function of(n,t,e){c(n).polygonOffset(t,e)}function _f(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function df(n,t,e,r,u){c(n).scissor(t,e,r,u)}function af(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function bf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function gf(n,t){c(n).stencilMask(t>>>0)}function wf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function sf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function lf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function mf(n,t,e){c(n).uniform1f(c(t),e)}function pf(n,t,e){c(n).uniform1i(c(t),e)}function hf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function xf(n,t){c(n).useProgram(c(t))}function yf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Sf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function kf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function vf(n){const t=c(n).document;return p(t)?0:_(t)}function Bf(n){return _(c(n).navigator)}function Pf(n){return c(n).devicePixelRatio}function jf(n,t){c(n).cancelIdleCallback(t>>>0)}function If(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:_(e)}),arguments)}function Af(){return O((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function Df(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Tf(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Cf(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Mf(n,t){c(n).clearTimeout(t)}function Ff(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Ef(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Rf(n){const t=c(n).body;return p(t)?0:_(t)}function Lf(n){return _(c(n).visibilityState)}function Of(n){const t=c(n).activeElement;return p(t)?0:_(t)}function Gf(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function Vf(){return O((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function Wf(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function qf(){return O((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function zf(){return O((function(n,t,e){return _(c(n).querySelectorAll(g(t,e)))}),arguments)}function Uf(){return O((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function Kf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Qf(n){return _(c(n).navigator)}function Xf(n){return _(c(n).style)}function Nf(){return O((function(n){c(n).focus()}),arguments)}function Yf(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Hf(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Jf(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Zf(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function $f(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function nc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function tc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function ec(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function rc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function uc(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function fc(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function cc(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function ic(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function oc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function _c(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function dc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function ac(n,t){c(n).activeTexture(t>>>0)}function bc(n,t,e){c(n).attachShader(c(t),c(e))}function gc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function wc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function sc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function lc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function mc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function pc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function hc(n,t){c(n).blendEquation(t>>>0)}function xc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function yc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Sc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function kc(n,t){c(n).clear(t>>>0)}function vc(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Bc(n,t){c(n).clearDepth(t)}function Pc(n,t){c(n).clearStencil(t)}function jc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Ic(n,t){c(n).compileShader(c(t))}function Ac(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Dc(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Tc(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Cc(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Mc(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Fc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Ec(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Rc(n,t){c(n).cullFace(t>>>0)}function Lc(n,t){c(n).deleteBuffer(c(t))}function Oc(n,t){c(n).deleteFramebuffer(c(t))}function Gc(n,t){c(n).deleteProgram(c(t))}function Vc(n,t){c(n).deleteRenderbuffer(c(t))}function Wc(n,t){c(n).deleteShader(c(t))}function qc(n,t){c(n).deleteTexture(c(t))}function zc(n,t){c(n).depthFunc(t>>>0)}function Uc(n,t){c(n).depthMask(0!==t)}function Kc(n,t,e){c(n).depthRange(t,e)}function Qc(n,t){c(n).disable(t>>>0)}function Xc(n,t){c(n).disableVertexAttribArray(t>>>0)}function Nc(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Yc(n,t){c(n).enable(t>>>0)}function Hc(n,t){c(n).enableVertexAttribArray(t>>>0)}function Jc(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Zc(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function $c(n,t){c(n).frontFace(t>>>0)}function ni(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function ti(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ei(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function ri(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ui(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function fi(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function ci(n,t){c(n).linkProgram(c(t))}function ii(n,t,e){c(n).pixelStorei(t>>>0,e)}function oi(n,t,e){c(n).polygonOffset(t,e)}function _i(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function di(n,t,e,r,u){c(n).scissor(t,e,r,u)}function ai(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function bi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function gi(n,t){c(n).stencilMask(t>>>0)}function wi(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function si(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function li(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function mi(n,t,e){c(n).uniform1f(c(t),e)}function pi(n,t,e){c(n).uniform1i(c(t),e)}function hi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function xi(n,t){c(n).useProgram(c(t))}function yi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Si(n,t,e,r,u){c(n).viewport(t,e,r,u)}function ki(){return O((function(n,t,e,u){const f=m(c(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function vi(){return O((function(n,t,e,u){const f=m(c(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Bi(){return O((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Pi(n){return c(n).width}function ji(n){return c(n).height}function Ii(n){return c(n).videoWidth}function Ai(n){return c(n).videoHeight}function Di(n){return c(n).width}function Ti(n){return c(n).height}function Ci(n,t){c(n).drawBuffersWEBGL(c(t))}function Mi(n){return _(c(n).signal)}function Fi(){return O((function(){return _(new AbortController)}),arguments)}function Ei(n){c(n).abort()}function Ri(n){return c(n).isIntersecting}function Li(n){return c(n).pointerId}function Oi(n){return c(n).pressure}function Gi(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Vi(n){return _(c(n).getCoalescedEvents())}function Wi(n){c(n).preventDefault()}function qi(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function zi(n){return c(n).matches}function Ui(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Ki(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Qi(n){return c(n).ctrlKey}function Xi(n){return c(n).shiftKey}function Ni(n){return c(n).altKey}function Yi(n){return c(n).metaKey}function Hi(n){return c(n).button}function Ji(n){return c(n).buttons}function Zi(n){return c(n).movementX}function $i(n){return c(n).movementY}function no(n){return c(n).deltaX}function to(n){return c(n).deltaY}function eo(n){return c(n).deltaMode}function ro(){return O((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function uo(){return O((function(n,t,e,r){c(n).removeEventListener(g(t,e),c(r))}),arguments)}function fo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function co(n){return c(n).width}function io(n,t){c(n).width=t>>>0}function oo(n){return c(n).height}function _o(n,t){c(n).height=t>>>0}function ao(){return O((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function bo(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function go(n){return c(n).width}function wo(n,t){c(n).width=t>>>0}function so(n){return c(n).height}function lo(n,t){c(n).height=t>>>0}function mo(){return O((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function po(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function ho(){return O((function(n){return _(new ResizeObserver(c(n)))}),arguments)}function xo(n){c(n).disconnect()}function yo(n,t){c(n).observe(c(t))}function So(n,t,e){c(n).observe(c(t),c(e))}function ko(n,t){c(n).unobserve(c(t))}function vo(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function Bo(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Po(n){return _(c(n).contentRect)}function jo(n){return _(c(n).devicePixelContentBoxSize)}function Io(n){console.debug(c(n))}function Ao(n){console.error(c(n))}function Do(n,t){console.error(c(n),c(t))}function To(n){console.info(c(n))}function Co(n){console.log(c(n))}function Mo(n){console.warn(c(n))}function Fo(n){return _(c(n).port1)}function Eo(n){return _(c(n).port2)}function Ro(){return O((function(){return _(new MessageChannel)}),arguments)}function Lo(n){c(n).close()}function Oo(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Go(n){c(n).start()}function Vo(n){return c(n).inlineSize}function Wo(n){return c(n).blockSize}function qo(n){return c(n).altKey}function zo(n){return c(n).ctrlKey}function Uo(n){return c(n).shiftKey}function Ko(n){return c(n).metaKey}function Qo(n){return c(n).location}function Xo(n){return c(n).repeat}function No(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Yo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ho(n){return c(n).persisted}function Jo(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Zo(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function $o(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function n_(){return O((function(n){return _(new IntersectionObserver(c(n)))}),arguments)}function t_(n){c(n).disconnect()}function e_(n,t){c(n).observe(c(t))}function r_(){return O((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function u_(n,t){return c(n).contains(c(t))}function f_(n,t){const e=c(n)[t>>>0];return p(e)?0:_(e)}function c_(n,t){c(n).bindVertexArrayOES(c(t))}function i_(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function o_(n,t){c(n).deleteVertexArrayOES(c(t))}function __(n){return _(c(n).performance)}function d_(n){return c(n).now()}function a_(n,t){return _(c(n)[t>>>0])}function b_(n){return c(n).length}function g_(){return _(new Array)}function w_(n,t){return _(new Function(g(n,t)))}function s_(){return O((function(n,t){return _(c(n).call(c(t)))}),arguments)}function l_(){return _(new Object)}function m_(){return O((function(){return _(self.self)}),arguments)}function p_(){return O((function(){return _(window.window)}),arguments)}function h_(){return O((function(){return _(globalThis.globalThis)}),arguments)}function x_(){return O((function(){return _(global.global)}),arguments)}function y_(n,t,e){return c(n).includes(c(t),e)}function S_(n){return _(Array.of(c(n)))}function k_(n,t){return c(n).push(c(t))}function v_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function B_(n,t){return _(Object.getOwnPropertyDescriptor(c(n),c(t)))}function P_(n,t){return Object.is(c(n),c(t))}function j_(n){return _(c(n).valueOf())}function I_(n){return _(Promise.resolve(c(n)))}function A_(n,t){return _(c(n).catch(c(t)))}function D_(n,t){return _(c(n).then(c(t)))}function T_(n,t,e){return _(c(n).then(c(t),c(e)))}function C_(n){return _(c(n).buffer)}function M_(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function F_(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function E_(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function R_(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function L_(n){return _(new Uint8Array(c(n)))}function O_(n,t,e){c(n).set(c(t),e>>>0)}function G_(n){return c(n).length}function V_(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function W_(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function q_(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function z_(n){return _(c(n).buffer)}function U_(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function K_(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;x()[n/4+1]=u,x()[n/4+0]=e}function Q_(n,t){throw new Error(g(n,t))}function X_(){return _(r.memory)}function N_(n,t,e){return _(k(n,t,9,v))}function Y_(n,t,e){return _(k(n,t,9,v))}function H_(n,t,e){return _(k(n,t,9,B))}function J_(n,t,e){return _(k(n,t,9,v))}function Z_(n,t,e){return _(k(n,t,9,v))}function $_(n,t,e){return _(k(n,t,9,P))}function nd(n,t,e){return _(k(n,t,9,v))}function td(n,t,e){return _(k(n,t,175,j))}function ed(n,t,e){return _(k(n,t,175,j))}function rd(n,t,e){return _(k(n,t,175,I))}function ud(n,t,e){return _(k(n,t,175,j))}function fd(n,t,e){return _(k(n,t,175,j))}function cd(n,t,e){return _(k(n,t,175,j))}function id(n,t,e){return _(k(n,t,175,A))}function od(n,t,e){return _(k(n,t,1413,D))}function _d(n,t,e){return _(k(n,t,1413,D))}function dd(n,t,e){return _(k(n,t,2636,T))}function ad(n,t,e){return _(k(n,t,2636,T))}function bd(n,t,e){return _(k(n,t,2636,T))}function gd(n,t,e){return _(k(n,t,2636,C))}function wd(n,t,e){return _(k(n,t,2636,T))}function sd(n,t,e){return _(k(n,t,2636,T))}function ld(n,t,e){return _(k(n,t,2636,T))}function md(n,t,e){return _(k(n,t,2712,M))}}).call(this,e(260)(n))},415:function(n,t,e){"use strict";e.r(t);var r=e(416),u=e(249);e.d(t,"__wbg_set_wasm",(function(){return u.ji})),e.d(t,"run",(function(){return u.Xk})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Tk})),e.d(t,"__wbindgen_cb_drop",(function(){return u.mk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Ok})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.Sk})),e.d(t,"__wbindgen_string_new",(function(){return u.Vk})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.sg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.vi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Od})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.df})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.Ue})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Rd})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.sf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.th})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Fb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.re})),e.d(t,"__wbindgen_number_new",(function(){return u.Rk})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.gf})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.cg})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.ff})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.ve})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.Tf})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.Uf})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.Vf})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.Sf})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Bf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Cf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Lf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Kf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Nf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Of})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.Qf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.Rf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.Pf})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.gg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.fg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.ag})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Df})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.Yf})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.Zf})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.If})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Ef})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Ff})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Gf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Hf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Jf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Md})),e.d(t,"__wbindgen_string_get",(function(){return u.Uk})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.Ve})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.fh})),e.d(t,"__wbindgen_is_object",(function(){return u.Nk})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.rh})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.ze})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Qd})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.tf})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.mc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Sb})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.bc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.hc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Xb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Vb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.qc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.lc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.ec})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Wb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.gc})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.ad})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.mi})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.Zg})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.Rg})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.yf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.Kj})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.uc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.cd})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.bd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.he})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ie})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Jb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Kb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Pb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Qb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.o})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Kd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.q})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Jd})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.pf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.Wd})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Td})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.hb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.gb})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.kk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.yh})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.Vd})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Ud})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.ik})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.Mj})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.ui})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.jk})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Lb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.Nh})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Ih})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.md})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.ld})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.Uh})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.Jh})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.Lh})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.Qh})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.Sh})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.ei})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.ci})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.xd})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.Kh})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.Mh})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.Ph})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.Rh})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.di})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.wd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.Oh})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.Yh})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.gi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.Zh})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Pd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Gi})),e.d(t,"__wbindgen_boolean_get",(function(){return u.lk})),e.d(t,"__wbindgen_number_get",(function(){return u.Qk})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Gg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Hg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.le})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.uh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Dh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.xh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Ig})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.Yg})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.bk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.Vg})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.vh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Ch})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ck})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.dh})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.eh})),e.d(t,"__wbindgen_is_function",(function(){return u.Mk})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.jf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.ib})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.jb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.tb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Ab})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Eb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Ib})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Ob})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.fc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.kc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.tc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Gc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Jc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Mc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Qc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.pd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.td})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.vd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Id})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Sd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ce})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.je})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.lf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.gh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.hh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.jh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.nh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Ah})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Bh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Hi})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ji})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Mi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Ni})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.Ri})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.Si})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Oi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.Qi})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.Wi})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.Vi})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Xi})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.Ui})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Yi})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.fj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.gj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.ij})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.kj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.lj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.oj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.pj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.sj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.vj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.wj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.xj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.zj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Aj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Bj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Dj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Ej})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Fj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Ij})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Jj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.Rj})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.Sj})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.rb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.lb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.pb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.xb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.ac})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.ic})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.oc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.pc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Zc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.qd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Hd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Fd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.be})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ee})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.vf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Mg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.Qg})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.ph})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Eh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.qi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.yi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Bi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.zi})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Di})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Ki})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.cj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.ej})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.qj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Nj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Tj})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Yj})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.kf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.nd})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.kg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.ed})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.zf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.wh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.sh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.qb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.bi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.ai})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Zj})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ge})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Yb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.ch})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.bh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Hh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.Wh})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.jg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Fi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Xd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Bb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.ih})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ii})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.Pi})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.hj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.jj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.mj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.nj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.tj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.uj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.yj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Cj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Hj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.sb})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.kb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.ob})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.wb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.jc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.nc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.rc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Yc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.rd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Zd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ae})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.fe})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.uf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Lg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Pg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.oh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Fh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.pi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.xi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ci})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Ai})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Ei})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Li})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.bj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.dj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.rj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.Oj})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Uj})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Xj})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.mh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.Xh})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.ek})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Wj})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Vj})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.dk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.sd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.ti})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.lg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.mf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Ng})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.Wg})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Og})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.ke})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.Xg})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.bg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Af})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.lh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.ri})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.eg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.hg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.ig})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Sc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Tc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Rc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.kh})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.hf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.gk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.ni})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.li})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.fk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.oi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.ki})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.pg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.jd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Dg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Eg})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Lj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.de})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Hb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.dd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.zc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Nd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Ld})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.xf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.ak})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.Sg})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.Tg})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.ng})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.ub})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.Ug})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.wi})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.si})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.dg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.wf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.qh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.of})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.vb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Kg})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.od})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.ud})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.Qj})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.og})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.kd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Cg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Gb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.sc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Pc})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Jg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Bg})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.rf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.mg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.tg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.rg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Gh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.hk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Fg})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.ah})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.if})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.nf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.Pj})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.zh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Zi})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.aj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.vg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.yg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.wg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Ag})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.qg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ii})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.qf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.zg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.xg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.hi})),e.d(t,"__wbindgen_debug_string",(function(){return u.Lk})),e.d(t,"__wbindgen_throw",(function(){return u.Wk})),e.d(t,"__wbindgen_memory",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper553",(function(){return u.pk})),e.d(t,"__wbindgen_closure_wrapper554",(function(){return u.qk})),e.d(t,"__wbindgen_closure_wrapper555",(function(){return u.rk})),e.d(t,"__wbindgen_closure_wrapper556",(function(){return u.sk})),e.d(t,"__wbindgen_closure_wrapper557",(function(){return u.tk})),e.d(t,"__wbindgen_closure_wrapper558",(function(){return u.uk})),e.d(t,"__wbindgen_closure_wrapper559",(function(){return u.vk})),e.d(t,"__wbindgen_closure_wrapper867",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper868",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper869",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper870",(function(){return u.Hk})),e.d(t,"__wbindgen_closure_wrapper871",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper872",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper873",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper3049",(function(){return u.nk})),e.d(t,"__wbindgen_closure_wrapper3051",(function(){return u.ok})),e.d(t,"__wbindgen_closure_wrapper6423",(function(){return u.wk})),e.d(t,"__wbindgen_closure_wrapper6424",(function(){return u.xk})),e.d(t,"__wbindgen_closure_wrapper6425",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper6426",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper6427",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper6428",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper6429",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper6567",(function(){return u.Dk})),Object(u.ji)(r),r.__wbindgen_start()},416:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(249);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/30.c8b81c03.js b/assets/js/30.c8b81c03.js new file mode 100644 index 000000000..1fadbf2c7 --- /dev/null +++ b/assets/js/30.c8b81c03.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{250:function(n,t,e){"use strict";(function(n){e.d(t,"ui",(function(){return u})),e.d(t,"il",(function(){return F})),e.d(t,"el",(function(){return W})),e.d(t,"xk",(function(){return q})),e.d(t,"Zk",(function(){return z})),e.d(t,"dl",(function(){return U})),e.d(t,"gl",(function(){return K})),e.d(t,"Bg",(function(){return Q})),e.d(t,"Gi",(function(){return N})),e.d(t,"Nd",(function(){return X})),e.d(t,"ff",(function(){return Y})),e.d(t,"ef",(function(){return H})),e.d(t,"hf",(function(){return J})),e.d(t,"gf",(function(){return Z})),e.d(t,"cl",(function(){return $})),e.d(t,"Fi",(function(){return nn})),e.d(t,"Yj",(function(){return tn})),e.d(t,"Zc",(function(){return en})),e.d(t,"ve",(function(){return rn})),e.d(t,"Cf",(function(){return un})),e.d(t,"Wj",(function(){return fn})),e.d(t,"ld",(function(){return cn})),e.d(t,"kd",(function(){return on})),e.d(t,"Jd",(function(){return _n})),e.d(t,"ei",(function(){return dn})),e.d(t,"Vh",(function(){return an})),e.d(t,"Xh",(function(){return bn})),e.d(t,"fl",(function(){return gn})),e.d(t,"he",(function(){return wn})),e.d(t,"df",(function(){return sn})),e.d(t,"Ue",(function(){return ln})),e.d(t,"ze",(function(){return mn})),e.d(t,"Ch",(function(){return pn})),e.d(t,"ge",(function(){return hn})),e.d(t,"kg",(function(){return xn})),e.d(t,"Sd",(function(){return yn})),e.d(t,"Vd",(function(){return Sn})),e.d(t,"Wh",(function(){return kn})),e.d(t,"Uh",(function(){return vn})),e.d(t,"Bd",(function(){return Bn})),e.d(t,"xd",(function(){return Pn})),e.d(t,"vd",(function(){return In})),e.d(t,"zd",(function(){return jn})),e.d(t,"bi",(function(){return An})),e.d(t,"ci",(function(){return Dn})),e.d(t,"gi",(function(){return Tn})),e.d(t,"oi",(function(){return Cn})),e.d(t,"ni",(function(){return Mn})),e.d(t,"Qd",(function(){return Fn})),e.d(t,"vf",(function(){return En})),e.d(t,"ph",(function(){return Rn})),e.d(t,"Bf",(function(){return Ln})),e.d(t,"xi",(function(){return On})),e.d(t,"Rb",(function(){return Gn})),e.d(t,"Qb",(function(){return Vn})),e.d(t,"Ub",(function(){return Wn})),e.d(t,"Vb",(function(){return qn})),e.d(t,"Wb",(function(){return zn})),e.d(t,"ac",(function(){return Un})),e.d(t,"dc",(function(){return Kn})),e.d(t,"fc",(function(){return Qn})),e.d(t,"gc",(function(){return Nn})),e.d(t,"kc",(function(){return Xn})),e.d(t,"lc",(function(){return Yn})),e.d(t,"pc",(function(){return Hn})),e.d(t,"ad",(function(){return Jn})),e.d(t,"bh",(function(){return Zn})),e.d(t,"jh",(function(){return $n})),e.d(t,"tc",(function(){return nt})),e.d(t,"bd",(function(){return tt})),e.d(t,"mj",(function(){return et})),e.d(t,"Rg",(function(){return rt})),e.d(t,"rf",(function(){return ut})),e.d(t,"wf",(function(){return ft})),e.d(t,"ig",(function(){return ct})),e.d(t,"Eb",(function(){return it})),e.d(t,"re",(function(){return ot})),e.d(t,"uh",(function(){return _t})),e.d(t,"jg",(function(){return dt})),e.d(t,"Id",(function(){return at})),e.d(t,"Od",(function(){return bt})),e.d(t,"Zh",(function(){return gt})),e.d(t,"ji",(function(){return wt})),e.d(t,"ki",(function(){return st})),e.d(t,"ri",(function(){return lt})),e.d(t,"Th",(function(){return mt})),e.d(t,"Yh",(function(){return pt})),e.d(t,"Cd",(function(){return ht})),e.d(t,"yd",(function(){return xt})),e.d(t,"wd",(function(){return yt})),e.d(t,"Ad",(function(){return St})),e.d(t,"ai",(function(){return kt})),e.d(t,"di",(function(){return vt})),e.d(t,"fi",(function(){return Bt})),e.d(t,"qi",(function(){return Pt})),e.d(t,"pi",(function(){return It})),e.d(t,"le",(function(){return jt})),e.d(t,"qf",(function(){return At})),e.d(t,"o",(function(){return Dt})),e.d(t,"q",(function(){return Tt})),e.d(t,"gb",(function(){return Ct})),e.d(t,"hb",(function(){return Mt})),e.d(t,"Ib",(function(){return Ft})),e.d(t,"Jb",(function(){return Et})),e.d(t,"Ob",(function(){return Rt})),e.d(t,"Pb",(function(){return Lt})),e.d(t,"Ud",(function(){return Ot})),e.d(t,"Td",(function(){return Gt})),e.d(t,"Jh",(function(){return Vt})),e.d(t,"Md",(function(){return Wt})),e.d(t,"Ve",(function(){return qt})),e.d(t,"Zf",(function(){return zt})),e.d(t,"ag",(function(){return Ut})),e.d(t,"bg",(function(){return Kt})),e.d(t,"Yf",(function(){return Qt})),e.d(t,"Ff",(function(){return Nt})),e.d(t,"Gf",(function(){return Xt})),e.d(t,"Rf",(function(){return Yt})),e.d(t,"Qf",(function(){return Ht})),e.d(t,"Tf",(function(){return Jt})),e.d(t,"Uf",(function(){return Zt})),e.d(t,"Wf",(function(){return $t})),e.d(t,"Xf",(function(){return ne})),e.d(t,"dg",(function(){return te})),e.d(t,"cg",(function(){return ee})),e.d(t,"Vf",(function(){return re})),e.d(t,"gg",(function(){return ue})),e.d(t,"Hf",(function(){return fe})),e.d(t,"eg",(function(){return ce})),e.d(t,"fg",(function(){return ie})),e.d(t,"pg",(function(){return oe})),e.d(t,"og",(function(){return _e})),e.d(t,"Sf",(function(){return de})),e.d(t,"Jf",(function(){return ae})),e.d(t,"If",(function(){return be})),e.d(t,"Of",(function(){return ge})),e.d(t,"Kf",(function(){return we})),e.d(t,"Lf",(function(){return se})),e.d(t,"Mf",(function(){return le})),e.d(t,"Nf",(function(){return me})),e.d(t,"Pf",(function(){return pe})),e.d(t,"Yk",(function(){return he})),e.d(t,"a",(function(){return xe})),e.d(t,"c",(function(){return ye})),e.d(t,"Eh",(function(){return Se})),e.d(t,"Pd",(function(){return ke})),e.d(t,"uf",(function(){return ve})),e.d(t,"lg",(function(){return Be})),e.d(t,"uk",(function(){return Pe})),e.d(t,"vk",(function(){return Ie})),e.d(t,"Kb",(function(){return je})),e.d(t,"Ri",(function(){return Ae})),e.d(t,"wk",(function(){return De})),e.d(t,"bl",(function(){return Te})),e.d(t,"Pg",(function(){return Ce})),e.d(t,"Qg",(function(){return Me})),e.d(t,"b",(function(){return Fe})),e.d(t,"nk",(function(){return Ee})),e.d(t,"ih",(function(){return Re})),e.d(t,"Oh",(function(){return Le})),e.d(t,"ke",(function(){return Oe})),e.d(t,"Fh",(function(){return Ge})),e.d(t,"Ih",(function(){return Ve})),e.d(t,"Sg",(function(){return We})),e.d(t,"ok",(function(){return qe})),e.d(t,"Gh",(function(){return ze})),e.d(t,"Nh",(function(){return Ue})),e.d(t,"fh",(function(){return Ke})),e.d(t,"oh",(function(){return Qe})),e.d(t,"nh",(function(){return Ne})),e.d(t,"Xk",(function(){return Xe})),e.d(t,"kf",(function(){return Ye})),e.d(t,"p",(function(){return He})),e.d(t,"t",(function(){return Je})),e.d(t,"A",(function(){return Ze})),e.d(t,"E",(function(){return $e})),e.d(t,"P",(function(){return nr})),e.d(t,"S",(function(){return tr})),e.d(t,"V",(function(){return er})),e.d(t,"W",(function(){return rr})),e.d(t,"ib",(function(){return ur})),e.d(t,"jb",(function(){return fr})),e.d(t,"kb",(function(){return cr})),e.d(t,"sb",(function(){return ir})),e.d(t,"Bb",(function(){return or})),e.d(t,"zb",(function(){return _r})),e.d(t,"Cb",(function(){return dr})),e.d(t,"Db",(function(){return ar})),e.d(t,"Hb",(function(){return br})),e.d(t,"Nb",(function(){return gr})),e.d(t,"ec",(function(){return wr})),e.d(t,"jc",(function(){return sr})),e.d(t,"sc",(function(){return lr})),e.d(t,"Fc",(function(){return mr})),e.d(t,"Ic",(function(){return pr})),e.d(t,"Lc",(function(){return hr})),e.d(t,"Pc",(function(){return xr})),e.d(t,"od",(function(){return yr})),e.d(t,"sd",(function(){return Sr})),e.d(t,"ud",(function(){return kr})),e.d(t,"Hd",(function(){return vr})),e.d(t,"Rd",(function(){return Br})),e.d(t,"be",(function(){return Pr})),e.d(t,"ie",(function(){return Ir})),e.d(t,"ue",(function(){return jr})),e.d(t,"Fe",(function(){return Ar})),e.d(t,"Me",(function(){return Dr})),e.d(t,"Ne",(function(){return Tr})),e.d(t,"mf",(function(){return Cr})),e.d(t,"qh",(function(){return Mr})),e.d(t,"rh",(function(){return Fr})),e.d(t,"th",(function(){return Er})),e.d(t,"yh",(function(){return Rr})),e.d(t,"Lh",(function(){return Lr})),e.d(t,"Mh",(function(){return Or})),e.d(t,"Si",(function(){return Gr})),e.d(t,"Ui",(function(){return Vr})),e.d(t,"Xi",(function(){return Wr})),e.d(t,"Yi",(function(){return qr})),e.d(t,"cj",(function(){return zr})),e.d(t,"dj",(function(){return Ur})),e.d(t,"Zi",(function(){return Kr})),e.d(t,"bj",(function(){return Qr})),e.d(t,"ej",(function(){return Nr})),e.d(t,"hj",(function(){return Xr})),e.d(t,"gj",(function(){return Yr})),e.d(t,"ij",(function(){return Hr})),e.d(t,"fj",(function(){return Jr})),e.d(t,"jj",(function(){return Zr})),e.d(t,"rj",(function(){return $r})),e.d(t,"sj",(function(){return nu})),e.d(t,"uj",(function(){return tu})),e.d(t,"wj",(function(){return eu})),e.d(t,"xj",(function(){return ru})),e.d(t,"Aj",(function(){return uu})),e.d(t,"Bj",(function(){return fu})),e.d(t,"Ej",(function(){return cu})),e.d(t,"Hj",(function(){return iu})),e.d(t,"Ij",(function(){return ou})),e.d(t,"Jj",(function(){return _u})),e.d(t,"Lj",(function(){return du})),e.d(t,"Mj",(function(){return au})),e.d(t,"Nj",(function(){return bu})),e.d(t,"Pj",(function(){return gu})),e.d(t,"Qj",(function(){return wu})),e.d(t,"Rj",(function(){return su})),e.d(t,"Sj",(function(){return lu})),e.d(t,"Uj",(function(){return mu})),e.d(t,"Vj",(function(){return pu})),e.d(t,"dk",(function(){return hu})),e.d(t,"ek",(function(){return xu})),e.d(t,"g",(function(){return yu})),e.d(t,"m",(function(){return Su})),e.d(t,"s",(function(){return ku})),e.d(t,"v",(function(){return vu})),e.d(t,"w",(function(){return Bu})),e.d(t,"y",(function(){return Pu})),e.d(t,"B",(function(){return Iu})),e.d(t,"F",(function(){return ju})),e.d(t,"J",(function(){return Au})),e.d(t,"H",(function(){return Du})),e.d(t,"N",(function(){return Tu})),e.d(t,"L",(function(){return Cu})),e.d(t,"qb",(function(){return Mu})),e.d(t,"mb",(function(){return Fu})),e.d(t,"ob",(function(){return Eu})),e.d(t,"wb",(function(){return Ru})),e.d(t,"yb",(function(){return Lu})),e.d(t,"Mb",(function(){return Ou})),e.d(t,"Tb",(function(){return Gu})),e.d(t,"Zb",(function(){return Vu})),e.d(t,"bc",(function(){return Wu})),e.d(t,"hc",(function(){return qu})),e.d(t,"nc",(function(){return zu})),e.d(t,"oc",(function(){return Uu})),e.d(t,"xc",(function(){return Ku})),e.d(t,"Ac",(function(){return Qu})),e.d(t,"Cc",(function(){return Nu})),e.d(t,"Ec",(function(){return Xu})),e.d(t,"Gc",(function(){return Yu})),e.d(t,"Jc",(function(){return Hu})),e.d(t,"Mc",(function(){return Ju})),e.d(t,"Uc",(function(){return Zu})),e.d(t,"Vc",(function(){return $u})),e.d(t,"Yc",(function(){return nf})),e.d(t,"hd",(function(){return tf})),e.d(t,"fd",(function(){return ef})),e.d(t,"pd",(function(){return rf})),e.d(t,"Gd",(function(){return uf})),e.d(t,"Ed",(function(){return ff})),e.d(t,"Xd",(function(){return cf})),e.d(t,"ae",(function(){return of})),e.d(t,"de",(function(){return _f})),e.d(t,"te",(function(){return df})),e.d(t,"ye",(function(){return af})),e.d(t,"Ae",(function(){return bf})),e.d(t,"De",(function(){return gf})),e.d(t,"He",(function(){return wf})),e.d(t,"Ie",(function(){return sf})),e.d(t,"Ke",(function(){return lf})),e.d(t,"Oe",(function(){return mf})),e.d(t,"yf",(function(){return pf})),e.d(t,"Wg",(function(){return hf})),e.d(t,"ah",(function(){return xf})),e.d(t,"Ah",(function(){return yf})),e.d(t,"Ph",(function(){return Sf})),e.d(t,"Bi",(function(){return kf})),e.d(t,"Ji",(function(){return vf})),e.d(t,"Mi",(function(){return Bf})),e.d(t,"Ki",(function(){return Pf})),e.d(t,"Oi",(function(){return If})),e.d(t,"Vi",(function(){return jf})),e.d(t,"oj",(function(){return Af})),e.d(t,"qj",(function(){return Df})),e.d(t,"Cj",(function(){return Tf})),e.d(t,"Zj",(function(){return Cf})),e.d(t,"fk",(function(){return Mf})),e.d(t,"kk",(function(){return Ff})),e.d(t,"lf",(function(){return Ef})),e.d(t,"md",(function(){return Rf})),e.d(t,"tg",(function(){return Lf})),e.d(t,"dd",(function(){return Of})),e.d(t,"eb",(function(){return Gf})),e.d(t,"me",(function(){return Vf})),e.d(t,"Df",(function(){return Wf})),e.d(t,"Hh",(function(){return qf})),e.d(t,"db",(function(){return zf})),e.d(t,"Dh",(function(){return Uf})),e.d(t,"pb",(function(){return Kf})),e.d(t,"mi",(function(){return Qf})),e.d(t,"li",(function(){return Nf})),e.d(t,"R",(function(){return Xf})),e.d(t,"lk",(function(){return Yf})),e.d(t,"e",(function(){return Hf})),e.d(t,"fe",(function(){return Jf})),e.d(t,"Xb",(function(){return Zf})),e.d(t,"se",(function(){return $f})),e.d(t,"mh",(function(){return nc})),e.d(t,"lh",(function(){return tc})),e.d(t,"Sh",(function(){return ec})),e.d(t,"hi",(function(){return rc})),e.d(t,"sg",(function(){return uc})),e.d(t,"Qi",(function(){return fc})),e.d(t,"Wd",(function(){return cc})),e.d(t,"U",(function(){return ic})),e.d(t,"T",(function(){return oc})),e.d(t,"X",(function(){return _c})),e.d(t,"Ab",(function(){return dc})),e.d(t,"sh",(function(){return ac})),e.d(t,"Ti",(function(){return bc})),e.d(t,"aj",(function(){return gc})),e.d(t,"tj",(function(){return wc})),e.d(t,"vj",(function(){return sc})),e.d(t,"yj",(function(){return lc})),e.d(t,"zj",(function(){return mc})),e.d(t,"Fj",(function(){return pc})),e.d(t,"Gj",(function(){return hc})),e.d(t,"Kj",(function(){return xc})),e.d(t,"Oj",(function(){return yc})),e.d(t,"Tj",(function(){return Sc})),e.d(t,"f",(function(){return kc})),e.d(t,"n",(function(){return vc})),e.d(t,"r",(function(){return Bc})),e.d(t,"u",(function(){return Pc})),e.d(t,"x",(function(){return Ic})),e.d(t,"z",(function(){return jc})),e.d(t,"C",(function(){return Ac})),e.d(t,"G",(function(){return Dc})),e.d(t,"K",(function(){return Tc})),e.d(t,"I",(function(){return Cc})),e.d(t,"O",(function(){return Mc})),e.d(t,"M",(function(){return Fc})),e.d(t,"rb",(function(){return Ec})),e.d(t,"lb",(function(){return Rc})),e.d(t,"nb",(function(){return Lc})),e.d(t,"vb",(function(){return Oc})),e.d(t,"xb",(function(){return Gc})),e.d(t,"Lb",(function(){return Vc})),e.d(t,"Sb",(function(){return Wc})),e.d(t,"Yb",(function(){return qc})),e.d(t,"cc",(function(){return zc})),e.d(t,"ic",(function(){return Uc})),e.d(t,"mc",(function(){return Kc})),e.d(t,"qc",(function(){return Qc})),e.d(t,"wc",(function(){return Nc})),e.d(t,"zc",(function(){return Xc})),e.d(t,"Bc",(function(){return Yc})),e.d(t,"Dc",(function(){return Hc})),e.d(t,"Hc",(function(){return Jc})),e.d(t,"Kc",(function(){return Zc})),e.d(t,"Nc",(function(){return $c})),e.d(t,"Tc",(function(){return ni})),e.d(t,"Wc",(function(){return ti})),e.d(t,"Xc",(function(){return ei})),e.d(t,"gd",(function(){return ri})),e.d(t,"ed",(function(){return ui})),e.d(t,"qd",(function(){return fi})),e.d(t,"Fd",(function(){return ci})),e.d(t,"Dd",(function(){return ii})),e.d(t,"Yd",(function(){return oi})),e.d(t,"Zd",(function(){return _i})),e.d(t,"ee",(function(){return di})),e.d(t,"xe",(function(){return ai})),e.d(t,"Be",(function(){return bi})),e.d(t,"Ce",(function(){return gi})),e.d(t,"Ge",(function(){return wi})),e.d(t,"Je",(function(){return si})),e.d(t,"Pe",(function(){return li})),e.d(t,"xf",(function(){return mi})),e.d(t,"Vg",(function(){return pi})),e.d(t,"Zg",(function(){return hi})),e.d(t,"zh",(function(){return xi})),e.d(t,"Qh",(function(){return yi})),e.d(t,"Ai",(function(){return Si})),e.d(t,"Ii",(function(){return ki})),e.d(t,"Ni",(function(){return vi})),e.d(t,"Li",(function(){return Bi})),e.d(t,"Pi",(function(){return Pi})),e.d(t,"Wi",(function(){return Ii})),e.d(t,"nj",(function(){return ji})),e.d(t,"pj",(function(){return Ai})),e.d(t,"Dj",(function(){return Di})),e.d(t,"ak",(function(){return Ti})),e.d(t,"gk",(function(){return Ci})),e.d(t,"jk",(function(){return Mi})),e.d(t,"nd",(function(){return Fi})),e.d(t,"td",(function(){return Ei})),e.d(t,"ck",(function(){return Ri})),e.d(t,"Ee",(function(){return Li})),e.d(t,"xh",(function(){return Oi})),e.d(t,"ii",(function(){return Gi})),e.d(t,"xg",(function(){return Vi})),e.d(t,"jd",(function(){return Wi})),e.d(t,"Lg",(function(){return qi})),e.d(t,"l",(function(){return zi})),e.d(t,"Fb",(function(){return Ui})),e.d(t,"Qe",(function(){return Ki})),e.d(t,"rd",(function(){return Qi})),e.d(t,"ik",(function(){return Ni})),e.d(t,"hk",(function(){return Xi})),e.d(t,"ch",(function(){return Yi})),e.d(t,"dh",(function(){return Hi})),e.d(t,"wg",(function(){return Ji})),e.d(t,"ce",(function(){return Zi})),e.d(t,"nf",(function(){return $i})),e.d(t,"Gb",(function(){return no})),e.d(t,"cd",(function(){return to})),e.d(t,"cf",(function(){return eo})),e.d(t,"Q",(function(){return ro})),e.d(t,"yc",(function(){return uo})),e.d(t,"Ld",(function(){return fo})),e.d(t,"Kd",(function(){return co})),e.d(t,"bf",(function(){return io})),e.d(t,"Af",(function(){return oo})),e.d(t,"mk",(function(){return _o})),e.d(t,"Ei",(function(){return ao})),e.d(t,"ug",(function(){return bo})),e.d(t,"d",(function(){return go})),e.d(t,"tb",(function(){return wo})),e.d(t,"eh",(function(){return so})),e.d(t,"Hi",(function(){return lo})),e.d(t,"qk",(function(){return mo})),e.d(t,"Xe",(function(){return po})),e.d(t,"if",(function(){return ho})),e.d(t,"sk",(function(){return xo})),e.d(t,"yi",(function(){return yo})),e.d(t,"Ye",(function(){return So})),e.d(t,"wi",(function(){return ko})),e.d(t,"pe",(function(){return vo})),e.d(t,"qe",(function(){return Bo})),e.d(t,"pk",(function(){return Po})),e.d(t,"Ze",(function(){return Io})),e.d(t,"k",(function(){return jo})),e.d(t,"vc",(function(){return Ao})),e.d(t,"Di",(function(){return Do})),e.d(t,"mg",(function(){return To})),e.d(t,"zf",(function(){return Co})),e.d(t,"Bh",(function(){return Mo})),e.d(t,"pf",(function(){return Fo})),e.d(t,"ub",(function(){return Eo})),e.d(t,"rk",(function(){return Ro})),e.d(t,"zi",(function(){return Lo})),e.d(t,"We",(function(){return Oo})),e.d(t,"vi",(function(){return Go})),e.d(t,"ne",(function(){return Vo})),e.d(t,"oe",(function(){return Wo})),e.d(t,"Ug",(function(){return qo})),e.d(t,"h",(function(){return zo})),e.d(t,"vh",(function(){return Uo})),e.d(t,"yg",(function(){return Ko})),e.d(t,"id",(function(){return Qo})),e.d(t,"Mg",(function(){return No})),e.d(t,"Ng",(function(){return Xo})),e.d(t,"Xj",(function(){return Yo})),e.d(t,"Rc",(function(){return Ho})),e.d(t,"Sc",(function(){return Jo})),e.d(t,"Qc",(function(){return Zo})),e.d(t,"D",(function(){return $o})),e.d(t,"rc",(function(){return n_})),e.d(t,"Oc",(function(){return t_})),e.d(t,"Le",(function(){return e_})),e.d(t,"hh",(function(){return r_})),e.d(t,"hg",(function(){return u_})),e.d(t,"Ef",(function(){return f_})),e.d(t,"i",(function(){return c_})),e.d(t,"wh",(function(){return i_})),e.d(t,"uc",(function(){return o_})),e.d(t,"Ci",(function(){return __})),e.d(t,"j",(function(){return d_})),e.d(t,"ng",(function(){return a_})),e.d(t,"ab",(function(){return b_})),e.d(t,"bb",(function(){return g_})),e.d(t,"qg",(function(){return w_})),e.d(t,"rg",(function(){return s_})),e.d(t,"Xg",(function(){return l_})),e.d(t,"gh",(function(){return m_})),e.d(t,"Yg",(function(){return p_})),e.d(t,"je",(function(){return h_})),e.d(t,"Tg",(function(){return x_})),e.d(t,"Kg",(function(){return y_})),e.d(t,"Re",(function(){return S_})),e.d(t,"tf",(function(){return k_})),e.d(t,"vg",(function(){return v_})),e.d(t,"Cg",(function(){return B_})),e.d(t,"cb",(function(){return P_})),e.d(t,"Ag",(function(){return I_})),e.d(t,"Rh",(function(){return j_})),e.d(t,"tk",(function(){return A_})),e.d(t,"Se",(function(){return D_})),e.d(t,"Te",(function(){return T_})),e.d(t,"af",(function(){return C_})),e.d(t,"Og",(function(){return M_})),e.d(t,"kh",(function(){return F_})),e.d(t,"jf",(function(){return E_})),e.d(t,"we",(function(){return R_})),e.d(t,"of",(function(){return L_})),e.d(t,"bk",(function(){return O_})),e.d(t,"Kh",(function(){return G_})),e.d(t,"fb",(function(){return V_})),e.d(t,"kj",(function(){return W_})),e.d(t,"lj",(function(){return q_})),e.d(t,"Y",(function(){return z_})),e.d(t,"Eg",(function(){return U_})),e.d(t,"Hg",(function(){return K_})),e.d(t,"Fg",(function(){return Q_})),e.d(t,"Jg",(function(){return N_})),e.d(t,"zg",(function(){return X_})),e.d(t,"ti",(function(){return Y_})),e.d(t,"sf",(function(){return H_})),e.d(t,"Ig",(function(){return J_})),e.d(t,"Dg",(function(){return Z_})),e.d(t,"Gg",(function(){return $_})),e.d(t,"Z",(function(){return nd})),e.d(t,"si",(function(){return td})),e.d(t,"Wk",(function(){return ed})),e.d(t,"hl",(function(){return rd})),e.d(t,"al",(function(){return ud})),e.d(t,"Ak",(function(){return fd})),e.d(t,"Bk",(function(){return cd})),e.d(t,"Ck",(function(){return id})),e.d(t,"Dk",(function(){return od})),e.d(t,"Ek",(function(){return _d})),e.d(t,"Fk",(function(){return dd})),e.d(t,"Gk",(function(){return ad})),e.d(t,"Pk",(function(){return bd})),e.d(t,"Qk",(function(){return gd})),e.d(t,"Rk",(function(){return wd})),e.d(t,"Sk",(function(){return sd})),e.d(t,"Tk",(function(){return ld})),e.d(t,"Uk",(function(){return md})),e.d(t,"Vk",(function(){return pd})),e.d(t,"yk",(function(){return hd})),e.d(t,"zk",(function(){return xd})),e.d(t,"Hk",(function(){return yd})),e.d(t,"Ik",(function(){return Sd})),e.d(t,"Jk",(function(){return kd})),e.d(t,"Kk",(function(){return vd})),e.d(t,"Lk",(function(){return Bd})),e.d(t,"Mk",(function(){return Pd})),e.d(t,"Nk",(function(){return Id})),e.d(t,"Ok",(function(){return jd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}function _(n){i===f.length&&f.push(f.length+1);const t=i;return i=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))}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,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he6dbf27c88744161(n,t,_(e),_(u))}function B(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h85df4091c19a570f(n,t,_(e))}function P(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__ha2fbd8194450b878(n,t)}function I(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc7194248716fcd94(n,t,_(e),_(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h030871b31bdf1d2d(n,t,_(e))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h482b3a863b4d5488(n,t)}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,_(e))}function T(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,_(e))}function C(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n){return _(c(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function N(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function X(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function H(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function J(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function Z(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function $(n){return _(n)}function nn(n){return c(n).size}function tn(n){return c(n).usage}function en(n){c(n).destroy()}function rn(n,t,e){return _(c(n).getMappedRange(t,e))}function un(n,t,e,r){return _(c(n).mapAsync(t>>>0,e,r))}function fn(n){c(n).unmap()}function cn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function on(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function _n(n){c(n).end()}function dn(n,t){c(n).setPipeline(c(t))}function an(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function bn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function gn(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function wn(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function sn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function ln(n){return _(c(n).gpu)}function mn(n){return _(c(n).getPreferredCanvasFormat())}function pn(n,t){return _(c(n).requestAdapter(c(t)))}function hn(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function xn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function yn(n){return _(c(n).finish())}function Sn(n,t){return _(c(n).finish(c(t)))}function kn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function vn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Bn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Pn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function In(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function jn(n,t,e){c(n).drawIndirect(c(t),e)}function An(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Dn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Tn(n,t){c(n).setPipeline(c(t))}function Cn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Mn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Fn(n){return _(c(n).features)}function En(n){return _(c(n).limits)}function Rn(n){return _(c(n).queue)}function Ln(n){return _(c(n).lost)}function On(n,t){c(n).onuncapturederror=c(t)}function Gn(n,t){return _(c(n).createBindGroup(c(t)))}function Vn(n,t){return _(c(n).createBindGroupLayout(c(t)))}function Wn(n,t){return _(c(n).createBuffer(c(t)))}function qn(n,t){return _(c(n).createCommandEncoder(c(t)))}function zn(n,t){return _(c(n).createComputePipeline(c(t)))}function Un(n,t){return _(c(n).createPipelineLayout(c(t)))}function Kn(n,t){return _(c(n).createQuerySet(c(t)))}function Qn(n,t){return _(c(n).createRenderBundleEncoder(c(t)))}function Nn(n,t){return _(c(n).createRenderPipeline(c(t)))}function Xn(n,t){return _(c(n).createSampler(c(t)))}function Yn(n,t){return _(c(n).createShaderModule(c(t)))}function Hn(n,t){return _(c(n).createTexture(c(t)))}function Jn(n){c(n).destroy()}function Zn(n){return _(c(n).popErrorScope())}function $n(n,t){c(n).pushErrorScope(o(t))}function nt(n,t){return _(c(n).createView(c(t)))}function tt(n){c(n).destroy()}function et(n){return _(c(n).type)}function rt(n){return c(n).offset}function ut(n){return c(n).length}function ft(n){return c(n).lineNum}function ct(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function it(n,t){c(n).configure(c(t))}function ot(n){return _(c(n).getCurrentTexture())}function _t(n){return _(c(n).reason)}function dt(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function at(n){c(n).end()}function bt(n,t){c(n).executeBundles(c(t))}function gt(n,t){c(n).setBlendConstant(c(t))}function wt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function st(n,t){c(n).setStencilReference(t>>>0)}function lt(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function mt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function pt(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ht(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function xt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function yt(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function St(n,t,e){c(n).drawIndirect(c(t),e)}function kt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function vt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Bt(n,t){c(n).setPipeline(c(t))}function Pt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function It(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function jt(n){return _(c(n).getCompilationInfo())}function At(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Dt(n,t){return _(c(n).beginComputePass(c(t)))}function Tt(n,t){return _(c(n).beginRenderPass(c(t)))}function Ct(n,t,e){c(n).clearBuffer(c(t),e)}function Mt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Ft(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Et(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Lt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Ot(n){return _(c(n).finish())}function Gt(n,t){return _(c(n).finish(c(t)))}function Vt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Wt(n){return _(c(n).error)}function qt(n,t,e){return c(n).has(g(t,e))}function zt(n){return c(n).maxTextureDimension1D}function Ut(n){return c(n).maxTextureDimension2D}function Kt(n){return c(n).maxTextureDimension3D}function Qt(n){return c(n).maxTextureArrayLayers}function Nt(n){return c(n).maxBindGroups}function Xt(n){return c(n).maxBindingsPerBindGroup}function Yt(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Ht(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function Jt(n){return c(n).maxSampledTexturesPerShaderStage}function Zt(n){return c(n).maxSamplersPerShaderStage}function $t(n){return c(n).maxStorageBuffersPerShaderStage}function ne(n){return c(n).maxStorageTexturesPerShaderStage}function te(n){return c(n).maxUniformBuffersPerShaderStage}function ee(n){return c(n).maxUniformBufferBindingSize}function re(n){return c(n).maxStorageBufferBindingSize}function ue(n){return c(n).maxVertexBuffers}function fe(n){return c(n).maxBufferSize}function ce(n){return c(n).maxVertexAttributes}function ie(n){return c(n).maxVertexBufferArrayStride}function oe(n){return c(n).minUniformBufferOffsetAlignment}function _e(n){return c(n).minStorageBufferOffsetAlignment}function de(n){return c(n).maxInterStageShaderComponents}function ae(n){return c(n).maxColorAttachments}function be(n){return c(n).maxColorAttachmentBytesPerSample}function ge(n){return c(n).maxComputeWorkgroupStorageSize}function we(n){return c(n).maxComputeInvocationsPerWorkgroup}function se(n){return c(n).maxComputeWorkgroupSizeX}function le(n){return c(n).maxComputeWorkgroupSizeY}function me(n){return c(n).maxComputeWorkgroupSizeZ}function pe(n){return c(n).maxComputeWorkgroupsPerDimension}function he(n){const t=c(n);return"object"==typeof t&&null!==t}function xe(n){return _(c(n).Window)}function ye(n){return _(c(n).WorkerGlobalScope)}function Se(n,t){return _(c(n).requestDevice(c(t)))}function ke(n){return _(c(n).features)}function ve(n){return _(c(n).limits)}function Be(n){return _(c(n).messages)}function Pe(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Ie(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function je(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Ae(n,t){c(n).submit(c(t))}function De(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Te(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Ce(n){return c(n).offsetX}function Me(n){return c(n).offsetY}function Fe(n){return _(c(n).Window)}function Ee(n){const t=c(n).webkitFullscreenElement;return p(t)?0:_(t)}function Re(){return _(ResizeObserverEntry.prototype)}function Le(n){return _(c(n).scheduler)}function Oe(n){return _(c(n).getCoalescedEvents)}function Ge(n){return _(c(n).requestFullscreen)}function Ve(n){return _(c(n).requestIdleCallback)}function We(n){return _(c(n).onpointerrawupdate)}function qe(n){c(n).webkitRequestFullscreen()}function ze(n){return _(c(n).requestFullscreen())}function Ue(n){return _(c(n).scheduler)}function Ke(n,t,e){return _(c(n).postTask(c(t),c(e)))}function Qe(n){queueMicrotask(c(n))}function Ne(n){return _(c(n).queueMicrotask)}function Xe(n){return"function"==typeof c(n)}function Ye(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function He(n,t,e){c(n).beginQuery(t>>>0,c(e))}function Je(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function Ze(n,t,e){c(n).bindSampler(t>>>0,c(e))}function $e(n,t){c(n).bindVertexArray(c(t))}function nr(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function tr(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function er(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function rr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function ur(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function fr(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function cr(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function ir(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function or(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function _r(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function dr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function ar(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function br(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function gr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function wr(n){const t=c(n).createQuery();return p(t)?0:_(t)}function sr(n){const t=c(n).createSampler();return p(t)?0:_(t)}function lr(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function mr(n,t){c(n).deleteQuery(c(t))}function pr(n,t){c(n).deleteSampler(c(t))}function hr(n,t){c(n).deleteSync(c(t))}function xr(n,t){c(n).deleteVertexArray(c(t))}function yr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function Sr(n,t){c(n).drawBuffers(c(t))}function kr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function vr(n,t){c(n).endQuery(t>>>0)}function Br(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function Pr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Ir(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function jr(){return V((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Ar(n,t,e){return _(c(n).getQueryParameter(c(t),e>>>0))}function Dr(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Tr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Cr(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Mr(n,t){c(n).readBuffer(t>>>0)}function Fr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Er(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Rr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Lr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Or(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Gr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Vr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Wr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function qr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function zr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Ur(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Kr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function nu(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function tu(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function eu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function ru(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function uu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function fu(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function cu(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function iu(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function ou(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function _u(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function du(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function au(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function bu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function gu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function hu(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function xu(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function yu(n,t){c(n).activeTexture(t>>>0)}function Su(n,t,e){c(n).attachShader(c(t),c(e))}function ku(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function vu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Bu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Pu(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Iu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function ju(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Au(n,t){c(n).blendEquation(t>>>0)}function Du(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Tu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Cu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Mu(n,t){c(n).clear(t>>>0)}function Fu(n,t){c(n).clearDepth(t)}function Eu(n,t){c(n).clearStencil(t)}function Ru(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Lu(n,t){c(n).compileShader(c(t))}function Ou(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Gu(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Vu(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Wu(n){const t=c(n).createProgram();return p(t)?0:_(t)}function qu(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function zu(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Uu(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Ku(n,t){c(n).cullFace(t>>>0)}function Qu(n,t){c(n).deleteBuffer(c(t))}function Nu(n,t){c(n).deleteFramebuffer(c(t))}function Xu(n,t){c(n).deleteProgram(c(t))}function Yu(n,t){c(n).deleteRenderbuffer(c(t))}function Hu(n,t){c(n).deleteShader(c(t))}function Ju(n,t){c(n).deleteTexture(c(t))}function Zu(n,t){c(n).depthFunc(t>>>0)}function $u(n,t){c(n).depthMask(0!==t)}function nf(n,t,e){c(n).depthRange(t,e)}function tf(n,t){c(n).disable(t>>>0)}function ef(n,t){c(n).disableVertexAttribArray(t>>>0)}function rf(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function uf(n,t){c(n).enable(t>>>0)}function ff(n,t){c(n).enableVertexAttribArray(t>>>0)}function cf(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function of(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function _f(n,t){c(n).frontFace(t>>>0)}function df(){return V((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function af(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function bf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function gf(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function wf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function sf(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function lf(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function mf(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function pf(n,t){c(n).linkProgram(c(t))}function hf(n,t,e){c(n).pixelStorei(t>>>0,e)}function xf(n,t,e){c(n).polygonOffset(t,e)}function yf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Sf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function kf(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function vf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Bf(n,t){c(n).stencilMask(t>>>0)}function Pf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function If(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function jf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Af(n,t,e){c(n).uniform1f(c(t),e)}function Df(n,t,e){c(n).uniform1i(c(t),e)}function Tf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Cf(n,t){c(n).useProgram(c(t))}function Mf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Ff(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ef(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Rf(n){const t=c(n).document;return p(t)?0:_(t)}function Lf(n){return _(c(n).navigator)}function Of(n){return c(n).devicePixelRatio}function Gf(n,t){c(n).cancelIdleCallback(t>>>0)}function Vf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:_(e)}),arguments)}function Wf(){return V((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function qf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function zf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Uf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Kf(n,t){c(n).clearTimeout(t)}function Qf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Nf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Xf(n){const t=c(n).body;return p(t)?0:_(t)}function Yf(n){return _(c(n).visibilityState)}function Hf(n){const t=c(n).activeElement;return p(t)?0:_(t)}function Jf(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function Zf(){return V((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function $f(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function nc(){return V((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function tc(){return V((function(n,t,e){return _(c(n).querySelectorAll(g(t,e)))}),arguments)}function ec(){return V((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function rc(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function uc(n){return _(c(n).navigator)}function fc(n){return _(c(n).style)}function cc(){return V((function(n){c(n).focus()}),arguments)}function ic(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function oc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function _c(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function dc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function ac(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function bc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function gc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function wc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function sc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function lc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function mc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function pc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function hc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function xc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function yc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function Sc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function kc(n,t){c(n).activeTexture(t>>>0)}function vc(n,t,e){c(n).attachShader(c(t),c(e))}function Bc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function Pc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Ic(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function jc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Ac(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Dc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Tc(n,t){c(n).blendEquation(t>>>0)}function Cc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Mc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Fc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ec(n,t){c(n).clear(t>>>0)}function Rc(n,t){c(n).clearDepth(t)}function Lc(n,t){c(n).clearStencil(t)}function Oc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Gc(n,t){c(n).compileShader(c(t))}function Vc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Wc(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function qc(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function zc(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Uc(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Kc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Qc(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Nc(n,t){c(n).cullFace(t>>>0)}function Xc(n,t){c(n).deleteBuffer(c(t))}function Yc(n,t){c(n).deleteFramebuffer(c(t))}function Hc(n,t){c(n).deleteProgram(c(t))}function Jc(n,t){c(n).deleteRenderbuffer(c(t))}function Zc(n,t){c(n).deleteShader(c(t))}function $c(n,t){c(n).deleteTexture(c(t))}function ni(n,t){c(n).depthFunc(t>>>0)}function ti(n,t){c(n).depthMask(0!==t)}function ei(n,t,e){c(n).depthRange(t,e)}function ri(n,t){c(n).disable(t>>>0)}function ui(n,t){c(n).disableVertexAttribArray(t>>>0)}function fi(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ci(n,t){c(n).enable(t>>>0)}function ii(n,t){c(n).enableVertexAttribArray(t>>>0)}function oi(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function _i(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function di(n,t){c(n).frontFace(t>>>0)}function ai(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function bi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function gi(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function wi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function si(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function li(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function mi(n,t){c(n).linkProgram(c(t))}function pi(n,t,e){c(n).pixelStorei(t>>>0,e)}function hi(n,t,e){c(n).polygonOffset(t,e)}function xi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function yi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Si(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function ki(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function vi(n,t){c(n).stencilMask(t>>>0)}function Bi(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Pi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ii(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function ji(n,t,e){c(n).uniform1f(c(t),e)}function Ai(n,t,e){c(n).uniform1i(c(t),e)}function Di(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ti(n,t){c(n).useProgram(c(t))}function Ci(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Mi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Fi(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Ei(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Ri(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function Li(){return V((function(n,t,e,u){const f=m(c(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Oi(){return V((function(n,t,e,u){const f=m(c(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Gi(){return V((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Vi(){return V((function(n){return _(new IntersectionObserver(c(n)))}),arguments)}function Wi(n){c(n).disconnect()}function qi(n,t){c(n).observe(c(t))}function zi(){return V((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Ui(n,t){return c(n).contains(c(t))}function Ki(n,t){const e=c(n)[t>>>0];return p(e)?0:_(e)}function Qi(n,t){c(n).drawBuffersWEBGL(c(t))}function Ni(n){return c(n).videoWidth}function Xi(n){return c(n).videoHeight}function Yi(n){return _(c(n).port1)}function Hi(n){return _(c(n).port2)}function Ji(){return V((function(){return _(new MessageChannel)}),arguments)}function Zi(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function $i(n){return c(n).isIntersecting}function no(n){return _(c(n).contentRect)}function to(n){return _(c(n).devicePixelContentBoxSize)}function eo(n){return c(n).inlineSize}function ro(n){return c(n).blockSize}function uo(n){console.debug(c(n))}function fo(n){console.error(c(n))}function co(n,t){console.error(c(n),c(t))}function io(n){console.info(c(n))}function oo(n){console.log(c(n))}function _o(n){console.warn(c(n))}function ao(n){return _(c(n).signal)}function bo(){return V((function(){return _(new AbortController)}),arguments)}function go(n){c(n).abort()}function wo(n){c(n).close()}function so(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function lo(n){c(n).start()}function mo(n){return c(n).width}function po(n){return c(n).height}function ho(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function xo(n){return c(n).width}function yo(n,t){c(n).width=t>>>0}function So(n){return c(n).height}function ko(n,t){c(n).height=t>>>0}function vo(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function Bo(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function Po(n){return c(n).width}function Io(n){return c(n).height}function jo(n){return c(n).altKey}function Ao(n){return c(n).ctrlKey}function Do(n){return c(n).shiftKey}function To(n){return c(n).metaKey}function Co(n){return c(n).location}function Mo(n){return c(n).repeat}function Fo(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Eo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ro(n){return c(n).width}function Lo(n,t){c(n).width=t>>>0}function Oo(n){return c(n).height}function Go(n,t){c(n).height=t>>>0}function Vo(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function Wo(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function qo(n){return c(n).persisted}function zo(){return V((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function Uo(){return V((function(n,t,e,r){c(n).removeEventListener(g(t,e),c(r))}),arguments)}function Ko(){return V((function(n){return _(new ResizeObserver(c(n)))}),arguments)}function Qo(n){c(n).disconnect()}function No(n,t){c(n).observe(c(t))}function Xo(n,t,e){c(n).observe(c(t),c(e))}function Yo(n,t){c(n).unobserve(c(t))}function Ho(n){return c(n).deltaX}function Jo(n){return c(n).deltaY}function Zo(n){return c(n).deltaMode}function $o(n,t){c(n).bindVertexArrayOES(c(t))}function n_(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function t_(n,t){c(n).deleteVertexArrayOES(c(t))}function e_(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function r_(n){c(n).preventDefault()}function u_(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function f_(n){return c(n).matches}function c_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function i_(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function o_(n){return c(n).ctrlKey}function __(n){return c(n).shiftKey}function d_(n){return c(n).altKey}function a_(n){return c(n).metaKey}function b_(n){return c(n).button}function g_(n){return c(n).buttons}function w_(n){return c(n).movementX}function s_(n){return c(n).movementY}function l_(n){return c(n).pointerId}function m_(n){return c(n).pressure}function p_(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function h_(n){return _(c(n).getCoalescedEvents())}function x_(n){return _(c(n).performance)}function y_(n){return c(n).now()}function S_(n,t){return _(c(n)[t>>>0])}function k_(n){return c(n).length}function v_(){return _(new Array)}function B_(n,t){return _(new Function(g(n,t)))}function P_(){return V((function(n,t){return _(c(n).call(c(t)))}),arguments)}function I_(){return _(new Object)}function j_(){return V((function(){return _(self.self)}),arguments)}function A_(){return V((function(){return _(window.window)}),arguments)}function D_(){return V((function(){return _(globalThis.globalThis)}),arguments)}function T_(){return V((function(){return _(global.global)}),arguments)}function C_(n,t,e){return c(n).includes(c(t),e)}function M_(n){return _(Array.of(c(n)))}function F_(n,t){return c(n).push(c(t))}function E_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function R_(n,t){return _(Object.getOwnPropertyDescriptor(c(n),c(t)))}function L_(n,t){return Object.is(c(n),c(t))}function O_(n){return _(c(n).valueOf())}function G_(n){return _(Promise.resolve(c(n)))}function V_(n,t){return _(c(n).catch(c(t)))}function W_(n,t){return _(c(n).then(c(t)))}function q_(n,t,e){return _(c(n).then(c(t),c(e)))}function z_(n){return _(c(n).buffer)}function U_(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function K_(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Q_(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function N_(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function X_(n){return _(new Uint8Array(c(n)))}function Y_(n,t,e){c(n).set(c(t),e>>>0)}function H_(n){return c(n).length}function J_(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function Z_(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function $_(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function nd(n){return _(c(n).buffer)}function td(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ed(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;x()[n/4+1]=u,x()[n/4+0]=e}function rd(n,t){throw new Error(g(n,t))}function ud(){return _(r.memory)}function fd(n,t,e){return _(k(n,t,9,v))}function cd(n,t,e){return _(k(n,t,9,B))}function id(n,t,e){return _(k(n,t,9,P))}function od(n,t,e){return _(k(n,t,9,B))}function _d(n,t,e){return _(k(n,t,9,B))}function dd(n,t,e){return _(k(n,t,9,B))}function ad(n,t,e){return _(k(n,t,9,B))}function bd(n,t,e){return _(k(n,t,201,I))}function gd(n,t,e){return _(k(n,t,201,j))}function wd(n,t,e){return _(k(n,t,201,j))}function sd(n,t,e){return _(k(n,t,201,A))}function ld(n,t,e){return _(k(n,t,201,j))}function md(n,t,e){return _(k(n,t,201,j))}function pd(n,t,e){return _(k(n,t,201,j))}function hd(n,t,e){return _(k(n,t,1407,D))}function xd(n,t,e){return _(k(n,t,1407,D))}function yd(n,t,e){return _(k(n,t,2672,T))}function Sd(n,t,e){return _(k(n,t,2672,T))}function kd(n,t,e){return _(k(n,t,2672,C))}function vd(n,t,e){return _(k(n,t,2672,T))}function Bd(n,t,e){return _(k(n,t,2672,T))}function Pd(n,t,e){return _(k(n,t,2672,T))}function Id(n,t,e){return _(k(n,t,2672,T))}function jd(n,t,e){return _(k(n,t,2750,M))}}).call(this,e(260)(n))},414:function(n,t,e){"use strict";e.r(t);var r=e(415),u=e(250);e.d(t,"__wbg_set_wasm",(function(){return u.ui})),e.d(t,"run",(function(){return u.il})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.el})),e.d(t,"__wbindgen_cb_drop",(function(){return u.xk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Zk})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.dl})),e.d(t,"__wbindgen_string_new",(function(){return u.gl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Bg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Gi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Nd})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.ff})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.hf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.gf})),e.d(t,"__wbindgen_number_new",(function(){return u.cl})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Fi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.Yj})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.Zc})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.ve})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Cf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.Wj})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.ld})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.kd})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Jd})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.ei})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.Xh})),e.d(t,"__wbindgen_string_get",(function(){return u.fl})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.he})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.df})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.Ue})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.ze})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Ch})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.ge})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.kg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Sd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.Vd})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.Wh})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.Uh})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.xd})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.vd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.zd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.bi})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.ci})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.gi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.oi})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.ni})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Qd})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.vf})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.ph})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Bf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.xi})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Qb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Ub})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Vb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Wb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.ac})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.dc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.fc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.gc})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.kc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.lc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.pc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.ad})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.bh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.jh})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.tc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.bd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.mj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.Rg})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.rf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.wf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.ig})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Eb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.re})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.uh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.jg})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Id})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Od})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.Zh})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.ji})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.ki})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.ri})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.Yh})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.yd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.wd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Ad})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.ai})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.di})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.qi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.pi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.le})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.qf})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.o})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.q})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.gb})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.hb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Ib})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Jb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Ob})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Pb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Ud})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Td})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.Jh})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Md})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.Ve})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.Zf})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.ag})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.bg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.Yf})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Ff})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Gf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.Qf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.Tf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.Uf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.dg})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.cg})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.Vf})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.gg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Hf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.eg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.fg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.pg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.og})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.Sf})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Jf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.If})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Of})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Kf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Lf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Nf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.Pf})),e.d(t,"__wbindgen_is_object",(function(){return u.Yk})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Eh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Pd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.uf})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.lg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.uk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.vk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Kb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.Ri})),e.d(t,"__wbindgen_boolean_get",(function(){return u.wk})),e.d(t,"__wbindgen_number_get",(function(){return u.bl})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Pg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Qg})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.nk})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.ih})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Oh})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.ke})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Fh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Ih})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Sg})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ok})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Gh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Nh})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.fh})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.oh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.nh})),e.d(t,"__wbindgen_is_function",(function(){return u.Xk})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.kf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.ib})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.jb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.kb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.sb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.zb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Db})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Hb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Nb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.ec})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.jc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.sc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Fc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Ic})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Lc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Pc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.od})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.sd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.ud})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Hd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Rd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.be})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ie})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.mf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.qh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.rh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.th})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.yh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Lh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Mh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Si})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ui})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Xi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Yi})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.cj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.dj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Zi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.bj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.ej})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.hj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.gj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.ij})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.fj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.jj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.rj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.sj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.uj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.wj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.xj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Aj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Bj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Ej})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Hj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Ij})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Jj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Lj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Mj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Nj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Pj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Qj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Vj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.dk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.ek})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.qb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.ob})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.wb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.bc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.hc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.nc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.oc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Gc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Jc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Mc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Vc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Yc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.pd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Xd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ae})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.de})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.yf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Wg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.ah})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Ah})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Ph})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Bi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Ji})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Mi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Ki})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Oi})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Vi})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.oj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.qj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Cj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Zj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.fk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.kk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.lf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.md})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.tg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.dd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Df})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Hh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Dh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.pb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.mi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.li})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.lk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.fe})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Xb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.mh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.lh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Sh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.hi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.sg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Qi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Wd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Ab})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.sh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.aj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.tj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.vj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.yj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.zj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Fj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Kj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Oj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Tj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.rb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.lb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.nb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.vb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.xb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Lb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Sb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Yb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.ic})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.mc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.qc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.wc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.zc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Bc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Dc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Tc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Xc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.gd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.ed})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.qd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Fd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Dd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.Zd})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ee})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.xf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Vg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Zg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.zh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Qh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Ai})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Ii})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ni})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Li})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Pi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Wi})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.nj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.pj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Dj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.ak})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.gk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.jk})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.nd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.td})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.ck})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.xh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.ii})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.xg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.jd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Lg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Fb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.rd})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.ik})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.hk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.ch})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.dh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.wg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ce})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.nf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Gb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.cd})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.yc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Ld})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Kd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Af})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.mk})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ei})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.ug})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.tb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.eh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Hi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.qk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.if})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.sk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.yi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.wi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.pk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Di})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.mg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.zf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Bh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.pf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.ub})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.rk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.zi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.vi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Ug})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.vh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.yg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.id})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Mg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Ng})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Xj})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Rc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Sc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Qc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.rc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Oc})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.hh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.hg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Ef})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.wh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.uc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ci})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.ng})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.qg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.rg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Xg})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.gh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Yg})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.je})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Tg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Kg})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.tf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.vg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Cg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Ag})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Rh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.tk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Og})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.kh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.jf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.of})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.bk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Kh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.kj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.lj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Eg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Fg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Jg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.zg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ti})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.sf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Dg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Gg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.si})),e.d(t,"__wbindgen_debug_string",(function(){return u.Wk})),e.d(t,"__wbindgen_throw",(function(){return u.hl})),e.d(t,"__wbindgen_memory",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper564",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper565",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper566",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper567",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper568",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper569",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper570",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper947",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper948",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper949",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper950",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper951",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper952",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper953",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper3091",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper3093",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper6720",(function(){return u.Hk})),e.d(t,"__wbindgen_closure_wrapper6721",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper6722",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper6723",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper6724",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper6725",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper6726",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper6905",(function(){return u.Ok})),Object(u.ui)(r),r.__wbindgen_start()},415:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(250);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/31.555ef45b.js b/assets/js/31.555ef45b.js new file mode 100644 index 000000000..22611d17c --- /dev/null +++ b/assets/js/31.555ef45b.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{251:function(n,t,e){"use strict";(function(n){e.d(t,"ui",(function(){return u})),e.d(t,"il",(function(){return F})),e.d(t,"el",(function(){return W})),e.d(t,"xk",(function(){return q})),e.d(t,"Zk",(function(){return z})),e.d(t,"dl",(function(){return U})),e.d(t,"gl",(function(){return K})),e.d(t,"Bg",(function(){return Q})),e.d(t,"Gi",(function(){return N})),e.d(t,"Nd",(function(){return X})),e.d(t,"Pg",(function(){return Y})),e.d(t,"Qg",(function(){return H})),e.d(t,"b",(function(){return J})),e.d(t,"nk",(function(){return Z})),e.d(t,"ih",(function(){return $})),e.d(t,"Oh",(function(){return nn})),e.d(t,"ke",(function(){return tn})),e.d(t,"Fh",(function(){return en})),e.d(t,"Ih",(function(){return rn})),e.d(t,"Sg",(function(){return un})),e.d(t,"ok",(function(){return fn})),e.d(t,"Gh",(function(){return cn})),e.d(t,"Nh",(function(){return on})),e.d(t,"fh",(function(){return _n})),e.d(t,"cl",(function(){return dn})),e.d(t,"Tg",(function(){return an})),e.d(t,"Kg",(function(){return bn})),e.d(t,"ff",(function(){return gn})),e.d(t,"ef",(function(){return wn})),e.d(t,"hf",(function(){return sn})),e.d(t,"gf",(function(){return ln})),e.d(t,"Fi",(function(){return mn})),e.d(t,"Yj",(function(){return pn})),e.d(t,"Zc",(function(){return hn})),e.d(t,"ve",(function(){return xn})),e.d(t,"Cf",(function(){return yn})),e.d(t,"Wj",(function(){return Sn})),e.d(t,"ld",(function(){return kn})),e.d(t,"kd",(function(){return vn})),e.d(t,"Jd",(function(){return Bn})),e.d(t,"ei",(function(){return Pn})),e.d(t,"Vh",(function(){return In})),e.d(t,"Xh",(function(){return jn})),e.d(t,"fl",(function(){return An})),e.d(t,"he",(function(){return Dn})),e.d(t,"df",(function(){return Tn})),e.d(t,"Ue",(function(){return Cn})),e.d(t,"ze",(function(){return Mn})),e.d(t,"Ch",(function(){return Fn})),e.d(t,"ge",(function(){return En})),e.d(t,"kg",(function(){return Rn})),e.d(t,"Sd",(function(){return Ln})),e.d(t,"Vd",(function(){return On})),e.d(t,"Wh",(function(){return Gn})),e.d(t,"Uh",(function(){return Vn})),e.d(t,"Bd",(function(){return Wn})),e.d(t,"xd",(function(){return qn})),e.d(t,"vd",(function(){return zn})),e.d(t,"zd",(function(){return Un})),e.d(t,"bi",(function(){return Kn})),e.d(t,"ci",(function(){return Qn})),e.d(t,"gi",(function(){return Nn})),e.d(t,"oi",(function(){return Xn})),e.d(t,"ni",(function(){return Yn})),e.d(t,"Qd",(function(){return Hn})),e.d(t,"vf",(function(){return Jn})),e.d(t,"ph",(function(){return Zn})),e.d(t,"Bf",(function(){return $n})),e.d(t,"xi",(function(){return nt})),e.d(t,"Rb",(function(){return tt})),e.d(t,"Qb",(function(){return et})),e.d(t,"Ub",(function(){return rt})),e.d(t,"Vb",(function(){return ut})),e.d(t,"Wb",(function(){return ft})),e.d(t,"ac",(function(){return ct})),e.d(t,"dc",(function(){return it})),e.d(t,"fc",(function(){return ot})),e.d(t,"gc",(function(){return _t})),e.d(t,"kc",(function(){return dt})),e.d(t,"lc",(function(){return at})),e.d(t,"pc",(function(){return bt})),e.d(t,"ad",(function(){return gt})),e.d(t,"bh",(function(){return wt})),e.d(t,"jh",(function(){return st})),e.d(t,"tc",(function(){return lt})),e.d(t,"bd",(function(){return mt})),e.d(t,"mj",(function(){return pt})),e.d(t,"Rg",(function(){return ht})),e.d(t,"rf",(function(){return xt})),e.d(t,"wf",(function(){return yt})),e.d(t,"ig",(function(){return St})),e.d(t,"Eb",(function(){return kt})),e.d(t,"re",(function(){return vt})),e.d(t,"uh",(function(){return Bt})),e.d(t,"jg",(function(){return Pt})),e.d(t,"Id",(function(){return It})),e.d(t,"Od",(function(){return jt})),e.d(t,"Zh",(function(){return At})),e.d(t,"ji",(function(){return Dt})),e.d(t,"ki",(function(){return Tt})),e.d(t,"ri",(function(){return Ct})),e.d(t,"Th",(function(){return Mt})),e.d(t,"Yh",(function(){return Ft})),e.d(t,"Cd",(function(){return Et})),e.d(t,"yd",(function(){return Rt})),e.d(t,"wd",(function(){return Lt})),e.d(t,"Ad",(function(){return Ot})),e.d(t,"ai",(function(){return Gt})),e.d(t,"di",(function(){return Vt})),e.d(t,"fi",(function(){return Wt})),e.d(t,"qi",(function(){return qt})),e.d(t,"pi",(function(){return zt})),e.d(t,"le",(function(){return Ut})),e.d(t,"qf",(function(){return Kt})),e.d(t,"o",(function(){return Qt})),e.d(t,"q",(function(){return Nt})),e.d(t,"gb",(function(){return Xt})),e.d(t,"hb",(function(){return Yt})),e.d(t,"Ib",(function(){return Ht})),e.d(t,"Jb",(function(){return Jt})),e.d(t,"Ob",(function(){return Zt})),e.d(t,"Pb",(function(){return $t})),e.d(t,"Ud",(function(){return ne})),e.d(t,"Td",(function(){return te})),e.d(t,"Jh",(function(){return ee})),e.d(t,"Md",(function(){return re})),e.d(t,"Ve",(function(){return ue})),e.d(t,"Zf",(function(){return fe})),e.d(t,"ag",(function(){return ce})),e.d(t,"bg",(function(){return ie})),e.d(t,"Yf",(function(){return oe})),e.d(t,"Ff",(function(){return _e})),e.d(t,"Gf",(function(){return de})),e.d(t,"Rf",(function(){return ae})),e.d(t,"Qf",(function(){return be})),e.d(t,"Tf",(function(){return ge})),e.d(t,"Uf",(function(){return we})),e.d(t,"Wf",(function(){return se})),e.d(t,"Xf",(function(){return le})),e.d(t,"dg",(function(){return me})),e.d(t,"cg",(function(){return pe})),e.d(t,"Vf",(function(){return he})),e.d(t,"gg",(function(){return xe})),e.d(t,"Hf",(function(){return ye})),e.d(t,"eg",(function(){return Se})),e.d(t,"fg",(function(){return ke})),e.d(t,"pg",(function(){return ve})),e.d(t,"og",(function(){return Be})),e.d(t,"Sf",(function(){return Pe})),e.d(t,"Jf",(function(){return Ie})),e.d(t,"If",(function(){return je})),e.d(t,"Of",(function(){return Ae})),e.d(t,"Kf",(function(){return De})),e.d(t,"Lf",(function(){return Te})),e.d(t,"Mf",(function(){return Ce})),e.d(t,"Nf",(function(){return Me})),e.d(t,"Pf",(function(){return Fe})),e.d(t,"Yk",(function(){return Ee})),e.d(t,"a",(function(){return Re})),e.d(t,"c",(function(){return Le})),e.d(t,"Eh",(function(){return Oe})),e.d(t,"Pd",(function(){return Ge})),e.d(t,"uf",(function(){return Ve})),e.d(t,"lg",(function(){return We})),e.d(t,"uk",(function(){return qe})),e.d(t,"vk",(function(){return ze})),e.d(t,"Kb",(function(){return Ue})),e.d(t,"Ri",(function(){return Ke})),e.d(t,"oh",(function(){return Qe})),e.d(t,"nh",(function(){return Ne})),e.d(t,"Xk",(function(){return Xe})),e.d(t,"wk",(function(){return Ye})),e.d(t,"bl",(function(){return He})),e.d(t,"kf",(function(){return Je})),e.d(t,"p",(function(){return Ze})),e.d(t,"t",(function(){return $e})),e.d(t,"A",(function(){return nr})),e.d(t,"E",(function(){return tr})),e.d(t,"P",(function(){return er})),e.d(t,"S",(function(){return rr})),e.d(t,"V",(function(){return ur})),e.d(t,"W",(function(){return fr})),e.d(t,"ib",(function(){return cr})),e.d(t,"jb",(function(){return ir})),e.d(t,"kb",(function(){return or})),e.d(t,"sb",(function(){return _r})),e.d(t,"Bb",(function(){return dr})),e.d(t,"zb",(function(){return ar})),e.d(t,"Cb",(function(){return br})),e.d(t,"Db",(function(){return gr})),e.d(t,"Hb",(function(){return wr})),e.d(t,"Nb",(function(){return sr})),e.d(t,"ec",(function(){return lr})),e.d(t,"jc",(function(){return mr})),e.d(t,"sc",(function(){return pr})),e.d(t,"Fc",(function(){return hr})),e.d(t,"Ic",(function(){return xr})),e.d(t,"Lc",(function(){return yr})),e.d(t,"Pc",(function(){return Sr})),e.d(t,"od",(function(){return kr})),e.d(t,"sd",(function(){return vr})),e.d(t,"ud",(function(){return Br})),e.d(t,"Hd",(function(){return Pr})),e.d(t,"Rd",(function(){return Ir})),e.d(t,"be",(function(){return jr})),e.d(t,"ie",(function(){return Ar})),e.d(t,"ue",(function(){return Dr})),e.d(t,"Fe",(function(){return Tr})),e.d(t,"Me",(function(){return Cr})),e.d(t,"Ne",(function(){return Mr})),e.d(t,"mf",(function(){return Fr})),e.d(t,"qh",(function(){return Er})),e.d(t,"rh",(function(){return Rr})),e.d(t,"th",(function(){return Lr})),e.d(t,"yh",(function(){return Or})),e.d(t,"Lh",(function(){return Gr})),e.d(t,"Mh",(function(){return Vr})),e.d(t,"Si",(function(){return Wr})),e.d(t,"Ui",(function(){return qr})),e.d(t,"Xi",(function(){return zr})),e.d(t,"Yi",(function(){return Ur})),e.d(t,"cj",(function(){return Kr})),e.d(t,"dj",(function(){return Qr})),e.d(t,"Zi",(function(){return Nr})),e.d(t,"bj",(function(){return Xr})),e.d(t,"ej",(function(){return Yr})),e.d(t,"hj",(function(){return Hr})),e.d(t,"gj",(function(){return Jr})),e.d(t,"ij",(function(){return Zr})),e.d(t,"fj",(function(){return $r})),e.d(t,"jj",(function(){return nu})),e.d(t,"rj",(function(){return tu})),e.d(t,"sj",(function(){return eu})),e.d(t,"uj",(function(){return ru})),e.d(t,"wj",(function(){return uu})),e.d(t,"xj",(function(){return fu})),e.d(t,"Aj",(function(){return cu})),e.d(t,"Bj",(function(){return iu})),e.d(t,"Ej",(function(){return ou})),e.d(t,"Hj",(function(){return _u})),e.d(t,"Ij",(function(){return du})),e.d(t,"Jj",(function(){return au})),e.d(t,"Lj",(function(){return bu})),e.d(t,"Mj",(function(){return gu})),e.d(t,"Nj",(function(){return wu})),e.d(t,"Pj",(function(){return su})),e.d(t,"Qj",(function(){return lu})),e.d(t,"Rj",(function(){return mu})),e.d(t,"Sj",(function(){return pu})),e.d(t,"Uj",(function(){return hu})),e.d(t,"Vj",(function(){return xu})),e.d(t,"dk",(function(){return yu})),e.d(t,"ek",(function(){return Su})),e.d(t,"g",(function(){return ku})),e.d(t,"m",(function(){return vu})),e.d(t,"s",(function(){return Bu})),e.d(t,"v",(function(){return Pu})),e.d(t,"w",(function(){return Iu})),e.d(t,"y",(function(){return ju})),e.d(t,"B",(function(){return Au})),e.d(t,"F",(function(){return Du})),e.d(t,"J",(function(){return Tu})),e.d(t,"H",(function(){return Cu})),e.d(t,"N",(function(){return Mu})),e.d(t,"L",(function(){return Fu})),e.d(t,"qb",(function(){return Eu})),e.d(t,"mb",(function(){return Ru})),e.d(t,"ob",(function(){return Lu})),e.d(t,"wb",(function(){return Ou})),e.d(t,"yb",(function(){return Gu})),e.d(t,"Mb",(function(){return Vu})),e.d(t,"Tb",(function(){return Wu})),e.d(t,"Zb",(function(){return qu})),e.d(t,"bc",(function(){return zu})),e.d(t,"hc",(function(){return Uu})),e.d(t,"nc",(function(){return Ku})),e.d(t,"oc",(function(){return Qu})),e.d(t,"xc",(function(){return Nu})),e.d(t,"Ac",(function(){return Xu})),e.d(t,"Cc",(function(){return Yu})),e.d(t,"Ec",(function(){return Hu})),e.d(t,"Gc",(function(){return Ju})),e.d(t,"Jc",(function(){return Zu})),e.d(t,"Mc",(function(){return $u})),e.d(t,"Uc",(function(){return nf})),e.d(t,"Vc",(function(){return tf})),e.d(t,"Yc",(function(){return ef})),e.d(t,"hd",(function(){return rf})),e.d(t,"fd",(function(){return uf})),e.d(t,"pd",(function(){return ff})),e.d(t,"Gd",(function(){return cf})),e.d(t,"Ed",(function(){return of})),e.d(t,"Xd",(function(){return _f})),e.d(t,"ae",(function(){return df})),e.d(t,"de",(function(){return af})),e.d(t,"te",(function(){return bf})),e.d(t,"ye",(function(){return gf})),e.d(t,"Ae",(function(){return wf})),e.d(t,"De",(function(){return sf})),e.d(t,"He",(function(){return lf})),e.d(t,"Ie",(function(){return mf})),e.d(t,"Ke",(function(){return pf})),e.d(t,"Oe",(function(){return hf})),e.d(t,"yf",(function(){return xf})),e.d(t,"Wg",(function(){return yf})),e.d(t,"ah",(function(){return Sf})),e.d(t,"Ah",(function(){return kf})),e.d(t,"Ph",(function(){return vf})),e.d(t,"Bi",(function(){return Bf})),e.d(t,"Ji",(function(){return Pf})),e.d(t,"Mi",(function(){return If})),e.d(t,"Ki",(function(){return jf})),e.d(t,"Oi",(function(){return Af})),e.d(t,"Vi",(function(){return Df})),e.d(t,"oj",(function(){return Tf})),e.d(t,"qj",(function(){return Cf})),e.d(t,"Cj",(function(){return Mf})),e.d(t,"Zj",(function(){return Ff})),e.d(t,"fk",(function(){return Ef})),e.d(t,"kk",(function(){return Rf})),e.d(t,"lf",(function(){return Lf})),e.d(t,"md",(function(){return Of})),e.d(t,"tg",(function(){return Gf})),e.d(t,"dd",(function(){return Vf})),e.d(t,"eb",(function(){return Wf})),e.d(t,"me",(function(){return qf})),e.d(t,"Df",(function(){return zf})),e.d(t,"Hh",(function(){return Uf})),e.d(t,"db",(function(){return Kf})),e.d(t,"Dh",(function(){return Qf})),e.d(t,"pb",(function(){return Nf})),e.d(t,"mi",(function(){return Xf})),e.d(t,"li",(function(){return Yf})),e.d(t,"R",(function(){return Hf})),e.d(t,"lk",(function(){return Jf})),e.d(t,"e",(function(){return Zf})),e.d(t,"fe",(function(){return $f})),e.d(t,"Xb",(function(){return nc})),e.d(t,"se",(function(){return tc})),e.d(t,"mh",(function(){return ec})),e.d(t,"lh",(function(){return rc})),e.d(t,"Sh",(function(){return uc})),e.d(t,"hi",(function(){return fc})),e.d(t,"sg",(function(){return cc})),e.d(t,"Qi",(function(){return ic})),e.d(t,"Wd",(function(){return oc})),e.d(t,"U",(function(){return _c})),e.d(t,"T",(function(){return dc})),e.d(t,"X",(function(){return ac})),e.d(t,"Ab",(function(){return bc})),e.d(t,"sh",(function(){return gc})),e.d(t,"Ti",(function(){return wc})),e.d(t,"aj",(function(){return sc})),e.d(t,"tj",(function(){return lc})),e.d(t,"vj",(function(){return mc})),e.d(t,"yj",(function(){return pc})),e.d(t,"zj",(function(){return hc})),e.d(t,"Fj",(function(){return xc})),e.d(t,"Gj",(function(){return yc})),e.d(t,"Kj",(function(){return Sc})),e.d(t,"Oj",(function(){return kc})),e.d(t,"Tj",(function(){return vc})),e.d(t,"f",(function(){return Bc})),e.d(t,"n",(function(){return Pc})),e.d(t,"r",(function(){return Ic})),e.d(t,"u",(function(){return jc})),e.d(t,"x",(function(){return Ac})),e.d(t,"z",(function(){return Dc})),e.d(t,"C",(function(){return Tc})),e.d(t,"G",(function(){return Cc})),e.d(t,"K",(function(){return Mc})),e.d(t,"I",(function(){return Fc})),e.d(t,"O",(function(){return Ec})),e.d(t,"M",(function(){return Rc})),e.d(t,"rb",(function(){return Lc})),e.d(t,"lb",(function(){return Oc})),e.d(t,"nb",(function(){return Gc})),e.d(t,"vb",(function(){return Vc})),e.d(t,"xb",(function(){return Wc})),e.d(t,"Lb",(function(){return qc})),e.d(t,"Sb",(function(){return zc})),e.d(t,"Yb",(function(){return Uc})),e.d(t,"cc",(function(){return Kc})),e.d(t,"ic",(function(){return Qc})),e.d(t,"mc",(function(){return Nc})),e.d(t,"qc",(function(){return Xc})),e.d(t,"wc",(function(){return Yc})),e.d(t,"zc",(function(){return Hc})),e.d(t,"Bc",(function(){return Jc})),e.d(t,"Dc",(function(){return Zc})),e.d(t,"Hc",(function(){return $c})),e.d(t,"Kc",(function(){return ni})),e.d(t,"Nc",(function(){return ti})),e.d(t,"Tc",(function(){return ei})),e.d(t,"Wc",(function(){return ri})),e.d(t,"Xc",(function(){return ui})),e.d(t,"gd",(function(){return fi})),e.d(t,"ed",(function(){return ci})),e.d(t,"qd",(function(){return ii})),e.d(t,"Fd",(function(){return oi})),e.d(t,"Dd",(function(){return _i})),e.d(t,"Yd",(function(){return di})),e.d(t,"Zd",(function(){return ai})),e.d(t,"ee",(function(){return bi})),e.d(t,"xe",(function(){return gi})),e.d(t,"Be",(function(){return wi})),e.d(t,"Ce",(function(){return si})),e.d(t,"Ge",(function(){return li})),e.d(t,"Je",(function(){return mi})),e.d(t,"Pe",(function(){return pi})),e.d(t,"xf",(function(){return hi})),e.d(t,"Vg",(function(){return xi})),e.d(t,"Zg",(function(){return yi})),e.d(t,"zh",(function(){return Si})),e.d(t,"Qh",(function(){return ki})),e.d(t,"Ai",(function(){return vi})),e.d(t,"Ii",(function(){return Bi})),e.d(t,"Ni",(function(){return Pi})),e.d(t,"Li",(function(){return Ii})),e.d(t,"Pi",(function(){return ji})),e.d(t,"Wi",(function(){return Ai})),e.d(t,"nj",(function(){return Di})),e.d(t,"pj",(function(){return Ti})),e.d(t,"Dj",(function(){return Ci})),e.d(t,"ak",(function(){return Mi})),e.d(t,"gk",(function(){return Fi})),e.d(t,"jk",(function(){return Ei})),e.d(t,"nd",(function(){return Ri})),e.d(t,"td",(function(){return Li})),e.d(t,"ck",(function(){return Oi})),e.d(t,"Ee",(function(){return Gi})),e.d(t,"xh",(function(){return Vi})),e.d(t,"ii",(function(){return Wi})),e.d(t,"xg",(function(){return qi})),e.d(t,"jd",(function(){return zi})),e.d(t,"Lg",(function(){return Ui})),e.d(t,"l",(function(){return Ki})),e.d(t,"Fb",(function(){return Qi})),e.d(t,"Qe",(function(){return Ni})),e.d(t,"rd",(function(){return Xi})),e.d(t,"ik",(function(){return Yi})),e.d(t,"hk",(function(){return Hi})),e.d(t,"ch",(function(){return Ji})),e.d(t,"dh",(function(){return Zi})),e.d(t,"wg",(function(){return $i})),e.d(t,"ce",(function(){return no})),e.d(t,"nf",(function(){return to})),e.d(t,"Gb",(function(){return eo})),e.d(t,"cd",(function(){return ro})),e.d(t,"cf",(function(){return uo})),e.d(t,"Q",(function(){return fo})),e.d(t,"yc",(function(){return co})),e.d(t,"Ld",(function(){return io})),e.d(t,"Kd",(function(){return oo})),e.d(t,"bf",(function(){return _o})),e.d(t,"Af",(function(){return ao})),e.d(t,"mk",(function(){return bo})),e.d(t,"Ei",(function(){return go})),e.d(t,"ug",(function(){return wo})),e.d(t,"d",(function(){return so})),e.d(t,"tb",(function(){return lo})),e.d(t,"eh",(function(){return mo})),e.d(t,"Hi",(function(){return po})),e.d(t,"qk",(function(){return ho})),e.d(t,"Xe",(function(){return xo})),e.d(t,"if",(function(){return yo})),e.d(t,"sk",(function(){return So})),e.d(t,"yi",(function(){return ko})),e.d(t,"Ye",(function(){return vo})),e.d(t,"wi",(function(){return Bo})),e.d(t,"pe",(function(){return Po})),e.d(t,"qe",(function(){return Io})),e.d(t,"pk",(function(){return jo})),e.d(t,"Ze",(function(){return Ao})),e.d(t,"k",(function(){return Do})),e.d(t,"vc",(function(){return To})),e.d(t,"Di",(function(){return Co})),e.d(t,"mg",(function(){return Mo})),e.d(t,"zf",(function(){return Fo})),e.d(t,"Bh",(function(){return Eo})),e.d(t,"pf",(function(){return Ro})),e.d(t,"ub",(function(){return Lo})),e.d(t,"rk",(function(){return Oo})),e.d(t,"zi",(function(){return Go})),e.d(t,"We",(function(){return Vo})),e.d(t,"vi",(function(){return Wo})),e.d(t,"ne",(function(){return qo})),e.d(t,"oe",(function(){return zo})),e.d(t,"Ug",(function(){return Uo})),e.d(t,"h",(function(){return Ko})),e.d(t,"vh",(function(){return Qo})),e.d(t,"yg",(function(){return No})),e.d(t,"id",(function(){return Xo})),e.d(t,"Mg",(function(){return Yo})),e.d(t,"Ng",(function(){return Ho})),e.d(t,"Xj",(function(){return Jo})),e.d(t,"Rc",(function(){return Zo})),e.d(t,"Sc",(function(){return $o})),e.d(t,"Qc",(function(){return n_})),e.d(t,"D",(function(){return t_})),e.d(t,"rc",(function(){return e_})),e.d(t,"Oc",(function(){return r_})),e.d(t,"Le",(function(){return u_})),e.d(t,"hh",(function(){return f_})),e.d(t,"hg",(function(){return c_})),e.d(t,"Ef",(function(){return i_})),e.d(t,"i",(function(){return o_})),e.d(t,"wh",(function(){return __})),e.d(t,"uc",(function(){return d_})),e.d(t,"Ci",(function(){return a_})),e.d(t,"j",(function(){return b_})),e.d(t,"ng",(function(){return g_})),e.d(t,"ab",(function(){return w_})),e.d(t,"bb",(function(){return s_})),e.d(t,"qg",(function(){return l_})),e.d(t,"rg",(function(){return m_})),e.d(t,"Xg",(function(){return p_})),e.d(t,"gh",(function(){return h_})),e.d(t,"Yg",(function(){return x_})),e.d(t,"je",(function(){return y_})),e.d(t,"Re",(function(){return S_})),e.d(t,"tf",(function(){return k_})),e.d(t,"vg",(function(){return v_})),e.d(t,"Cg",(function(){return B_})),e.d(t,"cb",(function(){return P_})),e.d(t,"Ag",(function(){return I_})),e.d(t,"Rh",(function(){return j_})),e.d(t,"tk",(function(){return A_})),e.d(t,"Se",(function(){return D_})),e.d(t,"Te",(function(){return T_})),e.d(t,"af",(function(){return C_})),e.d(t,"Og",(function(){return M_})),e.d(t,"kh",(function(){return F_})),e.d(t,"jf",(function(){return E_})),e.d(t,"we",(function(){return R_})),e.d(t,"of",(function(){return L_})),e.d(t,"bk",(function(){return O_})),e.d(t,"Kh",(function(){return G_})),e.d(t,"fb",(function(){return V_})),e.d(t,"kj",(function(){return W_})),e.d(t,"lj",(function(){return q_})),e.d(t,"Y",(function(){return z_})),e.d(t,"Eg",(function(){return U_})),e.d(t,"Hg",(function(){return K_})),e.d(t,"Fg",(function(){return Q_})),e.d(t,"Jg",(function(){return N_})),e.d(t,"zg",(function(){return X_})),e.d(t,"ti",(function(){return Y_})),e.d(t,"sf",(function(){return H_})),e.d(t,"Ig",(function(){return J_})),e.d(t,"Dg",(function(){return Z_})),e.d(t,"Gg",(function(){return $_})),e.d(t,"Z",(function(){return nd})),e.d(t,"si",(function(){return td})),e.d(t,"Wk",(function(){return ed})),e.d(t,"hl",(function(){return rd})),e.d(t,"al",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"Lk",(function(){return od})),e.d(t,"Mk",(function(){return _d})),e.d(t,"Nk",(function(){return dd})),e.d(t,"Ok",(function(){return ad})),e.d(t,"Pk",(function(){return bd})),e.d(t,"Qk",(function(){return gd})),e.d(t,"Rk",(function(){return wd})),e.d(t,"Sk",(function(){return sd})),e.d(t,"Tk",(function(){return ld})),e.d(t,"Uk",(function(){return md})),e.d(t,"Vk",(function(){return pd})),e.d(t,"yk",(function(){return hd})),e.d(t,"zk",(function(){return xd})),e.d(t,"Ak",(function(){return yd})),e.d(t,"Bk",(function(){return Sd})),e.d(t,"Ck",(function(){return kd})),e.d(t,"Dk",(function(){return vd})),e.d(t,"Ek",(function(){return Bd})),e.d(t,"Fk",(function(){return Pd})),e.d(t,"Gk",(function(){return Id})),e.d(t,"Hk",(function(){return jd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}function _(n){i===f.length&&f.push(f.length+1);const t=i;return i=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))}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,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hf56cfcaf0f07e470(n,t)}function B(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2323c1e3d5169684(n,t,_(e))}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h37eeca1b87c193e7(n,t,_(e),_(u))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__he189020c510938e7(n,t)}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1233dd15b7cbc925(n,t,_(e))}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__haac507802bb397af(n,t,_(e),_(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,_(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,_(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n){return _(c(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function N(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function X(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){return c(n).offsetX}function H(n){return c(n).offsetY}function J(n){return _(c(n).Window)}function Z(n){const t=c(n).webkitFullscreenElement;return p(t)?0:_(t)}function $(){return _(ResizeObserverEntry.prototype)}function nn(n){return _(c(n).scheduler)}function tn(n){return _(c(n).getCoalescedEvents)}function en(n){return _(c(n).requestFullscreen)}function rn(n){return _(c(n).requestIdleCallback)}function un(n){return _(c(n).onpointerrawupdate)}function fn(n){c(n).webkitRequestFullscreen()}function cn(n){return _(c(n).requestFullscreen())}function on(n){return _(c(n).scheduler)}function _n(n,t,e){return _(c(n).postTask(c(t),c(e)))}function dn(n){return _(n)}function an(n){return _(c(n).performance)}function bn(n){return c(n).now()}function gn(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function wn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function sn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function mn(n){return c(n).size}function pn(n){return c(n).usage}function hn(n){c(n).destroy()}function xn(n,t,e){return _(c(n).getMappedRange(t,e))}function yn(n,t,e,r){return _(c(n).mapAsync(t>>>0,e,r))}function Sn(n){c(n).unmap()}function kn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function vn(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function Bn(n){c(n).end()}function Pn(n,t){c(n).setPipeline(c(t))}function In(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function jn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function An(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function Dn(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Tn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function Cn(n){return _(c(n).gpu)}function Mn(n){return _(c(n).getPreferredCanvasFormat())}function Fn(n,t){return _(c(n).requestAdapter(c(t)))}function En(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Rn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ln(n){return _(c(n).finish())}function On(n,t){return _(c(n).finish(c(t)))}function Gn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Vn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Wn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function qn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function zn(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Un(n,t,e){c(n).drawIndirect(c(t),e)}function Kn(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Qn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Nn(n,t){c(n).setPipeline(c(t))}function Xn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Yn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Hn(n){return _(c(n).features)}function Jn(n){return _(c(n).limits)}function Zn(n){return _(c(n).queue)}function $n(n){return _(c(n).lost)}function nt(n,t){c(n).onuncapturederror=c(t)}function tt(n,t){return _(c(n).createBindGroup(c(t)))}function et(n,t){return _(c(n).createBindGroupLayout(c(t)))}function rt(n,t){return _(c(n).createBuffer(c(t)))}function ut(n,t){return _(c(n).createCommandEncoder(c(t)))}function ft(n,t){return _(c(n).createComputePipeline(c(t)))}function ct(n,t){return _(c(n).createPipelineLayout(c(t)))}function it(n,t){return _(c(n).createQuerySet(c(t)))}function ot(n,t){return _(c(n).createRenderBundleEncoder(c(t)))}function _t(n,t){return _(c(n).createRenderPipeline(c(t)))}function dt(n,t){return _(c(n).createSampler(c(t)))}function at(n,t){return _(c(n).createShaderModule(c(t)))}function bt(n,t){return _(c(n).createTexture(c(t)))}function gt(n){c(n).destroy()}function wt(n){return _(c(n).popErrorScope())}function st(n,t){c(n).pushErrorScope(o(t))}function lt(n,t){return _(c(n).createView(c(t)))}function mt(n){c(n).destroy()}function pt(n){return _(c(n).type)}function ht(n){return c(n).offset}function xt(n){return c(n).length}function yt(n){return c(n).lineNum}function St(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function kt(n,t){c(n).configure(c(t))}function vt(n){return _(c(n).getCurrentTexture())}function Bt(n){return _(c(n).reason)}function Pt(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function It(n){c(n).end()}function jt(n,t){c(n).executeBundles(c(t))}function At(n,t){c(n).setBlendConstant(c(t))}function Dt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Tt(n,t){c(n).setStencilReference(t>>>0)}function Ct(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Mt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Ft(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Et(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Rt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Lt(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ot(n,t,e){c(n).drawIndirect(c(t),e)}function Gt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Vt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Wt(n,t){c(n).setPipeline(c(t))}function qt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function zt(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Ut(n){return _(c(n).getCompilationInfo())}function Kt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Qt(n,t){return _(c(n).beginComputePass(c(t)))}function Nt(n,t){return _(c(n).beginRenderPass(c(t)))}function Xt(n,t,e){c(n).clearBuffer(c(t),e)}function Yt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Ht(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Jt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Zt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function $t(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function ne(n){return _(c(n).finish())}function te(n,t){return _(c(n).finish(c(t)))}function ee(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function re(n){return _(c(n).error)}function ue(n,t,e){return c(n).has(g(t,e))}function fe(n){return c(n).maxTextureDimension1D}function ce(n){return c(n).maxTextureDimension2D}function ie(n){return c(n).maxTextureDimension3D}function oe(n){return c(n).maxTextureArrayLayers}function _e(n){return c(n).maxBindGroups}function de(n){return c(n).maxBindingsPerBindGroup}function ae(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function be(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function ge(n){return c(n).maxSampledTexturesPerShaderStage}function we(n){return c(n).maxSamplersPerShaderStage}function se(n){return c(n).maxStorageBuffersPerShaderStage}function le(n){return c(n).maxStorageTexturesPerShaderStage}function me(n){return c(n).maxUniformBuffersPerShaderStage}function pe(n){return c(n).maxUniformBufferBindingSize}function he(n){return c(n).maxStorageBufferBindingSize}function xe(n){return c(n).maxVertexBuffers}function ye(n){return c(n).maxBufferSize}function Se(n){return c(n).maxVertexAttributes}function ke(n){return c(n).maxVertexBufferArrayStride}function ve(n){return c(n).minUniformBufferOffsetAlignment}function Be(n){return c(n).minStorageBufferOffsetAlignment}function Pe(n){return c(n).maxInterStageShaderComponents}function Ie(n){return c(n).maxColorAttachments}function je(n){return c(n).maxColorAttachmentBytesPerSample}function Ae(n){return c(n).maxComputeWorkgroupStorageSize}function De(n){return c(n).maxComputeInvocationsPerWorkgroup}function Te(n){return c(n).maxComputeWorkgroupSizeX}function Ce(n){return c(n).maxComputeWorkgroupSizeY}function Me(n){return c(n).maxComputeWorkgroupSizeZ}function Fe(n){return c(n).maxComputeWorkgroupsPerDimension}function Ee(n){const t=c(n);return"object"==typeof t&&null!==t}function Re(n){return _(c(n).Window)}function Le(n){return _(c(n).WorkerGlobalScope)}function Oe(n,t){return _(c(n).requestDevice(c(t)))}function Ge(n){return _(c(n).features)}function Ve(n){return _(c(n).limits)}function We(n){return _(c(n).messages)}function qe(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function ze(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ue(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Ke(n,t){c(n).submit(c(t))}function Qe(n){queueMicrotask(c(n))}function Ne(n){return _(c(n).queueMicrotask)}function Xe(n){return"function"==typeof c(n)}function Ye(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function He(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Je(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Ze(n,t,e){c(n).beginQuery(t>>>0,c(e))}function $e(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function nr(n,t,e){c(n).bindSampler(t>>>0,c(e))}function tr(n,t){c(n).bindVertexArray(c(t))}function er(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function rr(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function ur(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function fr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function cr(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function ir(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function or(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function _r(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function dr(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function ar(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function br(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function gr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function wr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function sr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function lr(n){const t=c(n).createQuery();return p(t)?0:_(t)}function mr(n){const t=c(n).createSampler();return p(t)?0:_(t)}function pr(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function hr(n,t){c(n).deleteQuery(c(t))}function xr(n,t){c(n).deleteSampler(c(t))}function yr(n,t){c(n).deleteSync(c(t))}function Sr(n,t){c(n).deleteVertexArray(c(t))}function kr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function vr(n,t){c(n).drawBuffers(c(t))}function Br(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function Pr(n,t){c(n).endQuery(t>>>0)}function Ir(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function jr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Ar(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dr(){return V((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Tr(n,t,e){return _(c(n).getQueryParameter(c(t),e>>>0))}function Cr(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Mr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Fr(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Er(n,t){c(n).readBuffer(t>>>0)}function Rr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Lr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Or(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Gr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Vr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Wr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function qr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function zr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Ur(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Kr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function nu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function tu(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function eu(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function ru(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function uu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function fu(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function cu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function iu(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function ou(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function _u(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function du(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function au(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function bu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function gu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function hu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function xu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function yu(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function Su(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function ku(n,t){c(n).activeTexture(t>>>0)}function vu(n,t,e){c(n).attachShader(c(t),c(e))}function Bu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function Pu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Iu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function ju(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Au(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Du(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Tu(n,t){c(n).blendEquation(t>>>0)}function Cu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Mu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Fu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Eu(n,t){c(n).clear(t>>>0)}function Ru(n,t){c(n).clearDepth(t)}function Lu(n,t){c(n).clearStencil(t)}function Ou(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Gu(n,t){c(n).compileShader(c(t))}function Vu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Wu(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function qu(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function zu(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Uu(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Ku(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Qu(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Nu(n,t){c(n).cullFace(t>>>0)}function Xu(n,t){c(n).deleteBuffer(c(t))}function Yu(n,t){c(n).deleteFramebuffer(c(t))}function Hu(n,t){c(n).deleteProgram(c(t))}function Ju(n,t){c(n).deleteRenderbuffer(c(t))}function Zu(n,t){c(n).deleteShader(c(t))}function $u(n,t){c(n).deleteTexture(c(t))}function nf(n,t){c(n).depthFunc(t>>>0)}function tf(n,t){c(n).depthMask(0!==t)}function ef(n,t,e){c(n).depthRange(t,e)}function rf(n,t){c(n).disable(t>>>0)}function uf(n,t){c(n).disableVertexAttribArray(t>>>0)}function ff(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function cf(n,t){c(n).enable(t>>>0)}function of(n,t){c(n).enableVertexAttribArray(t>>>0)}function _f(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function df(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function af(n,t){c(n).frontFace(t>>>0)}function bf(){return V((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function gf(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function wf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function sf(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function lf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function mf(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function pf(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function hf(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function xf(n,t){c(n).linkProgram(c(t))}function yf(n,t,e){c(n).pixelStorei(t>>>0,e)}function Sf(n,t,e){c(n).polygonOffset(t,e)}function kf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function vf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Bf(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Pf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function If(n,t){c(n).stencilMask(t>>>0)}function jf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Af(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Df(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Tf(n,t,e){c(n).uniform1f(c(t),e)}function Cf(n,t,e){c(n).uniform1i(c(t),e)}function Mf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ff(n,t){c(n).useProgram(c(t))}function Ef(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Rf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Lf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Of(n){const t=c(n).document;return p(t)?0:_(t)}function Gf(n){return _(c(n).navigator)}function Vf(n){return c(n).devicePixelRatio}function Wf(n,t){c(n).cancelIdleCallback(t>>>0)}function qf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:_(e)}),arguments)}function zf(){return V((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function Uf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Kf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Qf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Nf(n,t){c(n).clearTimeout(t)}function Xf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Yf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Hf(n){const t=c(n).body;return p(t)?0:_(t)}function Jf(n){return _(c(n).visibilityState)}function Zf(n){const t=c(n).activeElement;return p(t)?0:_(t)}function $f(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function nc(){return V((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function tc(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function ec(){return V((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function rc(){return V((function(n,t,e){return _(c(n).querySelectorAll(g(t,e)))}),arguments)}function uc(){return V((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function fc(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function cc(n){return _(c(n).navigator)}function ic(n){return _(c(n).style)}function oc(){return V((function(n){c(n).focus()}),arguments)}function _c(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function dc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function ac(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function bc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function gc(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function wc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function sc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function lc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function mc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function pc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function hc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function xc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function yc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function Sc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function kc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function vc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function Bc(n,t){c(n).activeTexture(t>>>0)}function Pc(n,t,e){c(n).attachShader(c(t),c(e))}function Ic(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function jc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Ac(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Dc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Tc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Cc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Mc(n,t){c(n).blendEquation(t>>>0)}function Fc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Ec(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Rc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Lc(n,t){c(n).clear(t>>>0)}function Oc(n,t){c(n).clearDepth(t)}function Gc(n,t){c(n).clearStencil(t)}function Vc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Wc(n,t){c(n).compileShader(c(t))}function qc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function zc(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Uc(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Kc(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Qc(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Nc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Xc(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Yc(n,t){c(n).cullFace(t>>>0)}function Hc(n,t){c(n).deleteBuffer(c(t))}function Jc(n,t){c(n).deleteFramebuffer(c(t))}function Zc(n,t){c(n).deleteProgram(c(t))}function $c(n,t){c(n).deleteRenderbuffer(c(t))}function ni(n,t){c(n).deleteShader(c(t))}function ti(n,t){c(n).deleteTexture(c(t))}function ei(n,t){c(n).depthFunc(t>>>0)}function ri(n,t){c(n).depthMask(0!==t)}function ui(n,t,e){c(n).depthRange(t,e)}function fi(n,t){c(n).disable(t>>>0)}function ci(n,t){c(n).disableVertexAttribArray(t>>>0)}function ii(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function oi(n,t){c(n).enable(t>>>0)}function _i(n,t){c(n).enableVertexAttribArray(t>>>0)}function di(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ai(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function bi(n,t){c(n).frontFace(t>>>0)}function gi(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function wi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function si(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function li(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function mi(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function pi(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function hi(n,t){c(n).linkProgram(c(t))}function xi(n,t,e){c(n).pixelStorei(t>>>0,e)}function yi(n,t,e){c(n).polygonOffset(t,e)}function Si(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function ki(n,t,e,r,u){c(n).scissor(t,e,r,u)}function vi(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Bi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Pi(n,t){c(n).stencilMask(t>>>0)}function Ii(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function ji(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ai(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Di(n,t,e){c(n).uniform1f(c(t),e)}function Ti(n,t,e){c(n).uniform1i(c(t),e)}function Ci(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Mi(n,t){c(n).useProgram(c(t))}function Fi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Ei(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ri(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Li(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Oi(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function Gi(){return V((function(n,t,e,u){const f=m(c(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Vi(){return V((function(n,t,e,u){const f=m(c(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Wi(){return V((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function qi(){return V((function(n){return _(new IntersectionObserver(c(n)))}),arguments)}function zi(n){c(n).disconnect()}function Ui(n,t){c(n).observe(c(t))}function Ki(){return V((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Qi(n,t){return c(n).contains(c(t))}function Ni(n,t){const e=c(n)[t>>>0];return p(e)?0:_(e)}function Xi(n,t){c(n).drawBuffersWEBGL(c(t))}function Yi(n){return c(n).videoWidth}function Hi(n){return c(n).videoHeight}function Ji(n){return _(c(n).port1)}function Zi(n){return _(c(n).port2)}function $i(){return V((function(){return _(new MessageChannel)}),arguments)}function no(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function to(n){return c(n).isIntersecting}function eo(n){return _(c(n).contentRect)}function ro(n){return _(c(n).devicePixelContentBoxSize)}function uo(n){return c(n).inlineSize}function fo(n){return c(n).blockSize}function co(n){console.debug(c(n))}function io(n){console.error(c(n))}function oo(n,t){console.error(c(n),c(t))}function _o(n){console.info(c(n))}function ao(n){console.log(c(n))}function bo(n){console.warn(c(n))}function go(n){return _(c(n).signal)}function wo(){return V((function(){return _(new AbortController)}),arguments)}function so(n){c(n).abort()}function lo(n){c(n).close()}function mo(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function po(n){c(n).start()}function ho(n){return c(n).width}function xo(n){return c(n).height}function yo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function So(n){return c(n).width}function ko(n,t){c(n).width=t>>>0}function vo(n){return c(n).height}function Bo(n,t){c(n).height=t>>>0}function Po(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function Io(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function jo(n){return c(n).width}function Ao(n){return c(n).height}function Do(n){return c(n).altKey}function To(n){return c(n).ctrlKey}function Co(n){return c(n).shiftKey}function Mo(n){return c(n).metaKey}function Fo(n){return c(n).location}function Eo(n){return c(n).repeat}function Ro(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Lo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Oo(n){return c(n).width}function Go(n,t){c(n).width=t>>>0}function Vo(n){return c(n).height}function Wo(n,t){c(n).height=t>>>0}function qo(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function zo(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function Uo(n){return c(n).persisted}function Ko(){return V((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function Qo(){return V((function(n,t,e,r){c(n).removeEventListener(g(t,e),c(r))}),arguments)}function No(){return V((function(n){return _(new ResizeObserver(c(n)))}),arguments)}function Xo(n){c(n).disconnect()}function Yo(n,t){c(n).observe(c(t))}function Ho(n,t,e){c(n).observe(c(t),c(e))}function Jo(n,t){c(n).unobserve(c(t))}function Zo(n){return c(n).deltaX}function $o(n){return c(n).deltaY}function n_(n){return c(n).deltaMode}function t_(n,t){c(n).bindVertexArrayOES(c(t))}function e_(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function r_(n,t){c(n).deleteVertexArrayOES(c(t))}function u_(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function f_(n){c(n).preventDefault()}function c_(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function i_(n){return c(n).matches}function o_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function __(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function d_(n){return c(n).ctrlKey}function a_(n){return c(n).shiftKey}function b_(n){return c(n).altKey}function g_(n){return c(n).metaKey}function w_(n){return c(n).button}function s_(n){return c(n).buttons}function l_(n){return c(n).movementX}function m_(n){return c(n).movementY}function p_(n){return c(n).pointerId}function h_(n){return c(n).pressure}function x_(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function y_(n){return _(c(n).getCoalescedEvents())}function S_(n,t){return _(c(n)[t>>>0])}function k_(n){return c(n).length}function v_(){return _(new Array)}function B_(n,t){return _(new Function(g(n,t)))}function P_(){return V((function(n,t){return _(c(n).call(c(t)))}),arguments)}function I_(){return _(new Object)}function j_(){return V((function(){return _(self.self)}),arguments)}function A_(){return V((function(){return _(window.window)}),arguments)}function D_(){return V((function(){return _(globalThis.globalThis)}),arguments)}function T_(){return V((function(){return _(global.global)}),arguments)}function C_(n,t,e){return c(n).includes(c(t),e)}function M_(n){return _(Array.of(c(n)))}function F_(n,t){return c(n).push(c(t))}function E_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function R_(n,t){return _(Object.getOwnPropertyDescriptor(c(n),c(t)))}function L_(n,t){return Object.is(c(n),c(t))}function O_(n){return _(c(n).valueOf())}function G_(n){return _(Promise.resolve(c(n)))}function V_(n,t){return _(c(n).catch(c(t)))}function W_(n,t){return _(c(n).then(c(t)))}function q_(n,t,e){return _(c(n).then(c(t),c(e)))}function z_(n){return _(c(n).buffer)}function U_(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function K_(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Q_(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function N_(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function X_(n){return _(new Uint8Array(c(n)))}function Y_(n,t,e){c(n).set(c(t),e>>>0)}function H_(n){return c(n).length}function J_(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function Z_(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function $_(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function nd(n){return _(c(n).buffer)}function td(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ed(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;x()[n/4+1]=u,x()[n/4+0]=e}function rd(n,t){throw new Error(g(n,t))}function ud(){return _(r.memory)}function fd(n,t,e){return _(k(n,t,9,v))}function cd(n,t,e){return _(k(n,t,9,B))}function id(n,t,e){return _(k(n,t,9,B))}function od(n,t,e){return _(k(n,t,9,B))}function _d(n,t,e){return _(k(n,t,9,P))}function dd(n,t,e){return _(k(n,t,9,B))}function ad(n,t,e){return _(k(n,t,9,B))}function bd(n,t,e){return _(k(n,t,176,I))}function gd(n,t,e){return _(k(n,t,176,j))}function wd(n,t,e){return _(k(n,t,176,j))}function sd(n,t,e){return _(k(n,t,176,j))}function ld(n,t,e){return _(k(n,t,176,j))}function md(n,t,e){return _(k(n,t,176,j))}function pd(n,t,e){return _(k(n,t,176,A))}function hd(n,t,e){return _(k(n,t,364,D))}function xd(n,t,e){return _(k(n,t,364,D))}function yd(n,t,e){return _(k(n,t,364,T))}function Sd(n,t,e){return _(k(n,t,364,D))}function kd(n,t,e){return _(k(n,t,364,D))}function vd(n,t,e){return _(k(n,t,364,D))}function Bd(n,t,e){return _(k(n,t,364,D))}function Pd(n,t,e){return _(k(n,t,1505,C))}function Id(n,t,e){return _(k(n,t,1505,C))}function jd(n,t,e){return _(k(n,t,1683,M))}}).call(this,e(260)(n))},416:function(n,t,e){"use strict";e.r(t);var r=e(417),u=e(251);e.d(t,"__wbg_set_wasm",(function(){return u.ui})),e.d(t,"run",(function(){return u.il})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.el})),e.d(t,"__wbindgen_cb_drop",(function(){return u.xk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Zk})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.dl})),e.d(t,"__wbindgen_string_new",(function(){return u.gl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Bg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Gi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Nd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Pg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Qg})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.nk})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.ih})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Oh})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.ke})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Fh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Ih})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Sg})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ok})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Gh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Nh})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.fh})),e.d(t,"__wbindgen_number_new",(function(){return u.cl})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Tg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Kg})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.ff})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.hf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.gf})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Fi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.Yj})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.Zc})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.ve})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Cf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.Wj})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.ld})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.kd})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Jd})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.ei})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.Xh})),e.d(t,"__wbindgen_string_get",(function(){return u.fl})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.he})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.df})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.Ue})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.ze})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Ch})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.ge})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.kg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Sd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.Vd})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.Wh})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.Uh})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.xd})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.vd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.zd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.bi})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.ci})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.gi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.oi})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.ni})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Qd})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.vf})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.ph})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Bf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.xi})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Qb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Ub})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Vb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Wb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.ac})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.dc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.fc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.gc})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.kc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.lc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.pc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.ad})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.bh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.jh})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.tc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.bd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.mj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.Rg})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.rf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.wf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.ig})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Eb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.re})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.uh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.jg})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Id})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Od})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.Zh})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.ji})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.ki})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.ri})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.Yh})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.yd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.wd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Ad})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.ai})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.di})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.qi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.pi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.le})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.qf})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.o})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.q})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.gb})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.hb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Ib})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Jb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Ob})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Pb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Ud})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Td})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.Jh})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Md})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.Ve})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.Zf})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.ag})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.bg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.Yf})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Ff})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Gf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.Qf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.Tf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.Uf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.dg})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.cg})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.Vf})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.gg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Hf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.eg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.fg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.pg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.og})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.Sf})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Jf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.If})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Of})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Kf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Lf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Nf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.Pf})),e.d(t,"__wbindgen_is_object",(function(){return u.Yk})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Eh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Pd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.uf})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.lg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.uk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.vk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Kb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.Ri})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.oh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.nh})),e.d(t,"__wbindgen_is_function",(function(){return u.Xk})),e.d(t,"__wbindgen_boolean_get",(function(){return u.wk})),e.d(t,"__wbindgen_number_get",(function(){return u.bl})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.kf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.ib})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.jb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.kb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.sb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.zb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Db})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Hb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Nb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.ec})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.jc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.sc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Fc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Ic})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Lc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Pc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.od})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.sd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.ud})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Hd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Rd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.be})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ie})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.mf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.qh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.rh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.th})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.yh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Lh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Mh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Si})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ui})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Xi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Yi})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.cj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.dj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Zi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.bj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.ej})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.hj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.gj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.ij})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.fj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.jj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.rj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.sj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.uj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.wj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.xj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Aj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Bj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Ej})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Hj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Ij})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Jj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Lj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Mj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Nj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Pj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Qj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Vj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.dk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.ek})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.qb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.ob})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.wb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.bc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.hc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.nc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.oc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Gc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Jc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Mc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Vc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Yc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.pd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Xd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ae})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.de})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.yf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Wg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.ah})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Ah})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Ph})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Bi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Ji})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Mi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Ki})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Oi})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Vi})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.oj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.qj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Cj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Zj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.fk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.kk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.lf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.md})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.tg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.dd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Df})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Hh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Dh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.pb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.mi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.li})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.lk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.fe})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Xb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.mh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.lh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Sh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.hi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.sg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Qi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Wd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Ab})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.sh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.aj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.tj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.vj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.yj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.zj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Fj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Kj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Oj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Tj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.rb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.lb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.nb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.vb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.xb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Lb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Sb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Yb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.ic})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.mc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.qc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.wc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.zc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Bc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Dc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Tc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Xc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.gd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.ed})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.qd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Fd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Dd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.Zd})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ee})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.xf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Vg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Zg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.zh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Qh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Ai})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Ii})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ni})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Li})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Pi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Wi})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.nj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.pj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Dj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.ak})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.gk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.jk})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.nd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.td})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.ck})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.xh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.ii})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.xg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.jd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Lg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Fb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.rd})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.ik})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.hk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.ch})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.dh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.wg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ce})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.nf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Gb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.cd})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.yc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Ld})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Kd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Af})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.mk})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ei})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.ug})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.tb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.eh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Hi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.qk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.if})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.sk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.yi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.wi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.pk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Di})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.mg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.zf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Bh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.pf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.ub})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.rk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.zi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.vi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Ug})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.vh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.yg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.id})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Mg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Ng})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Xj})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Rc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Sc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Qc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.rc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Oc})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.hh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.hg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Ef})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.wh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.uc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ci})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.ng})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.qg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.rg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Xg})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.gh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Yg})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.je})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.tf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.vg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Cg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Ag})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Rh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.tk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Og})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.kh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.jf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.of})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.bk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Kh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.kj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.lj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Eg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Fg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Jg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.zg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ti})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.sf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Dg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Gg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.si})),e.d(t,"__wbindgen_debug_string",(function(){return u.Wk})),e.d(t,"__wbindgen_throw",(function(){return u.hl})),e.d(t,"__wbindgen_memory",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper564",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper565",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper566",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper567",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper568",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper569",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper570",(function(){return u.Ok})),e.d(t,"__wbindgen_closure_wrapper892",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper893",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper894",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper895",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper896",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper897",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper898",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper1294",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper1295",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper1296",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper1297",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper1298",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper1299",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper1300",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper3365",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper3367",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper4100",(function(){return u.Hk})),Object(u.ui)(r),r.__wbindgen_start()},417:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(251);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/31.c1d6319c.js b/assets/js/31.c1d6319c.js deleted file mode 100644 index 227276b6b..000000000 --- a/assets/js/31.c1d6319c.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{250:function(n,t,e){"use strict";(function(n){e.d(t,"ji",(function(){return u})),e.d(t,"Xk",(function(){return F})),e.d(t,"Tk",(function(){return W})),e.d(t,"mk",(function(){return q})),e.d(t,"Ok",(function(){return z})),e.d(t,"Vk",(function(){return U})),e.d(t,"Sk",(function(){return K})),e.d(t,"sg",(function(){return Q})),e.d(t,"vi",(function(){return X})),e.d(t,"Od",(function(){return N})),e.d(t,"ef",(function(){return Y})),e.d(t,"df",(function(){return H})),e.d(t,"Ue",(function(){return J})),e.d(t,"Rd",(function(){return Z})),e.d(t,"sf",(function(){return $})),e.d(t,"th",(function(){return nn})),e.d(t,"Fb",(function(){return tn})),e.d(t,"re",(function(){return en})),e.d(t,"Rk",(function(){return rn})),e.d(t,"gf",(function(){return un})),e.d(t,"cg",(function(){return fn})),e.d(t,"ff",(function(){return cn})),e.d(t,"ve",(function(){return on})),e.d(t,"Tf",(function(){return _n})),e.d(t,"Uf",(function(){return dn})),e.d(t,"Vf",(function(){return an})),e.d(t,"Sf",(function(){return bn})),e.d(t,"Bf",(function(){return gn})),e.d(t,"Cf",(function(){return wn})),e.d(t,"Lf",(function(){return sn})),e.d(t,"Kf",(function(){return ln})),e.d(t,"Nf",(function(){return mn})),e.d(t,"Of",(function(){return pn})),e.d(t,"Qf",(function(){return hn})),e.d(t,"Rf",(function(){return xn})),e.d(t,"Xf",(function(){return yn})),e.d(t,"Wf",(function(){return Sn})),e.d(t,"Pf",(function(){return kn})),e.d(t,"gg",(function(){return vn})),e.d(t,"fg",(function(){return Bn})),e.d(t,"ag",(function(){return Pn})),e.d(t,"Df",(function(){return jn})),e.d(t,"Yf",(function(){return In})),e.d(t,"Zf",(function(){return An})),e.d(t,"Mf",(function(){return Dn})),e.d(t,"If",(function(){return Tn})),e.d(t,"Ef",(function(){return Cn})),e.d(t,"Ff",(function(){return Mn})),e.d(t,"Gf",(function(){return Fn})),e.d(t,"Hf",(function(){return En})),e.d(t,"Jf",(function(){return Rn})),e.d(t,"Md",(function(){return Ln})),e.d(t,"Uk",(function(){return On})),e.d(t,"Ve",(function(){return Gn})),e.d(t,"fh",(function(){return Vn})),e.d(t,"Nk",(function(){return Wn})),e.d(t,"a",(function(){return qn})),e.d(t,"c",(function(){return zn})),e.d(t,"rh",(function(){return Un})),e.d(t,"ze",(function(){return Kn})),e.d(t,"Qd",(function(){return Qn})),e.d(t,"tf",(function(){return Xn})),e.d(t,"mc",(function(){return Nn})),e.d(t,"Rb",(function(){return Yn})),e.d(t,"Sb",(function(){return Hn})),e.d(t,"bc",(function(){return Jn})),e.d(t,"hc",(function(){return Zn})),e.d(t,"Xb",(function(){return $n})),e.d(t,"Vb",(function(){return nt})),e.d(t,"qc",(function(){return tt})),e.d(t,"lc",(function(){return et})),e.d(t,"ec",(function(){return rt})),e.d(t,"Wb",(function(){return ut})),e.d(t,"gc",(function(){return ft})),e.d(t,"ad",(function(){return ct})),e.d(t,"mi",(function(){return it})),e.d(t,"Zg",(function(){return ot})),e.d(t,"Rg",(function(){return _t})),e.d(t,"yf",(function(){return dt})),e.d(t,"Kj",(function(){return at})),e.d(t,"uc",(function(){return bt})),e.d(t,"cd",(function(){return gt})),e.d(t,"bd",(function(){return wt})),e.d(t,"he",(function(){return st})),e.d(t,"ie",(function(){return lt})),e.d(t,"Jb",(function(){return mt})),e.d(t,"Kb",(function(){return pt})),e.d(t,"Pb",(function(){return ht})),e.d(t,"Qb",(function(){return xt})),e.d(t,"o",(function(){return yt})),e.d(t,"Kd",(function(){return St})),e.d(t,"q",(function(){return kt})),e.d(t,"Jd",(function(){return vt})),e.d(t,"pf",(function(){return Bt})),e.d(t,"Wd",(function(){return Pt})),e.d(t,"Td",(function(){return jt})),e.d(t,"hb",(function(){return It})),e.d(t,"gb",(function(){return At})),e.d(t,"kk",(function(){return Dt})),e.d(t,"yh",(function(){return Tt})),e.d(t,"Vd",(function(){return Ct})),e.d(t,"Ud",(function(){return Mt})),e.d(t,"ik",(function(){return Ft})),e.d(t,"Mj",(function(){return Et})),e.d(t,"ui",(function(){return Rt})),e.d(t,"jk",(function(){return Lt})),e.d(t,"Lb",(function(){return Ot})),e.d(t,"Th",(function(){return Gt})),e.d(t,"Nh",(function(){return Vt})),e.d(t,"Ih",(function(){return Wt})),e.d(t,"md",(function(){return qt})),e.d(t,"ld",(function(){return zt})),e.d(t,"Uh",(function(){return Ut})),e.d(t,"Jh",(function(){return Kt})),e.d(t,"Lh",(function(){return Qt})),e.d(t,"Qh",(function(){return Xt})),e.d(t,"Sh",(function(){return Nt})),e.d(t,"ei",(function(){return Yt})),e.d(t,"ci",(function(){return Ht})),e.d(t,"Cd",(function(){return Jt})),e.d(t,"zd",(function(){return Zt})),e.d(t,"Bd",(function(){return $t})),e.d(t,"xd",(function(){return ne})),e.d(t,"Vh",(function(){return te})),e.d(t,"Kh",(function(){return ee})),e.d(t,"Mh",(function(){return re})),e.d(t,"Ph",(function(){return ue})),e.d(t,"Rh",(function(){return fe})),e.d(t,"fi",(function(){return ce})),e.d(t,"di",(function(){return ie})),e.d(t,"Dd",(function(){return oe})),e.d(t,"yd",(function(){return _e})),e.d(t,"Ad",(function(){return de})),e.d(t,"wd",(function(){return ae})),e.d(t,"Oh",(function(){return be})),e.d(t,"Yh",(function(){return ge})),e.d(t,"gi",(function(){return we})),e.d(t,"Zh",(function(){return se})),e.d(t,"Pd",(function(){return le})),e.d(t,"Gi",(function(){return me})),e.d(t,"lk",(function(){return pe})),e.d(t,"Qk",(function(){return he})),e.d(t,"Gg",(function(){return xe})),e.d(t,"Hg",(function(){return ye})),e.d(t,"le",(function(){return Se})),e.d(t,"uh",(function(){return ke})),e.d(t,"Dh",(function(){return ve})),e.d(t,"xh",(function(){return Be})),e.d(t,"Ig",(function(){return Pe})),e.d(t,"Yg",(function(){return je})),e.d(t,"bk",(function(){return Ie})),e.d(t,"b",(function(){return Ae})),e.d(t,"Vg",(function(){return De})),e.d(t,"vh",(function(){return Te})),e.d(t,"Ch",(function(){return Ce})),e.d(t,"ck",(function(){return Me})),e.d(t,"dh",(function(){return Fe})),e.d(t,"eh",(function(){return Ee})),e.d(t,"Mk",(function(){return Re})),e.d(t,"jf",(function(){return Le})),e.d(t,"p",(function(){return Oe})),e.d(t,"t",(function(){return Ge})),e.d(t,"A",(function(){return Ve})),e.d(t,"E",(function(){return We})),e.d(t,"P",(function(){return qe})),e.d(t,"S",(function(){return ze})),e.d(t,"V",(function(){return Ue})),e.d(t,"W",(function(){return Ke})),e.d(t,"ib",(function(){return Qe})),e.d(t,"jb",(function(){return Xe})),e.d(t,"tb",(function(){return Ne})),e.d(t,"Cb",(function(){return Ye})),e.d(t,"Ab",(function(){return He})),e.d(t,"Db",(function(){return Je})),e.d(t,"Eb",(function(){return Ze})),e.d(t,"Ib",(function(){return $e})),e.d(t,"Ob",(function(){return nr})),e.d(t,"fc",(function(){return tr})),e.d(t,"kc",(function(){return er})),e.d(t,"tc",(function(){return rr})),e.d(t,"Gc",(function(){return ur})),e.d(t,"Jc",(function(){return fr})),e.d(t,"Mc",(function(){return cr})),e.d(t,"Qc",(function(){return ir})),e.d(t,"pd",(function(){return or})),e.d(t,"td",(function(){return _r})),e.d(t,"vd",(function(){return dr})),e.d(t,"Id",(function(){return ar})),e.d(t,"Sd",(function(){return br})),e.d(t,"ce",(function(){return gr})),e.d(t,"je",(function(){return wr})),e.d(t,"ue",(function(){return sr})),e.d(t,"Fe",(function(){return lr})),e.d(t,"Me",(function(){return mr})),e.d(t,"Ne",(function(){return pr})),e.d(t,"lf",(function(){return hr})),e.d(t,"gh",(function(){return xr})),e.d(t,"hh",(function(){return yr})),e.d(t,"jh",(function(){return Sr})),e.d(t,"nh",(function(){return kr})),e.d(t,"Ah",(function(){return vr})),e.d(t,"Bh",(function(){return Br})),e.d(t,"Hi",(function(){return Pr})),e.d(t,"Ji",(function(){return jr})),e.d(t,"Mi",(function(){return Ir})),e.d(t,"Ni",(function(){return Ar})),e.d(t,"Ri",(function(){return Dr})),e.d(t,"Si",(function(){return Tr})),e.d(t,"Oi",(function(){return Cr})),e.d(t,"Qi",(function(){return Mr})),e.d(t,"Ti",(function(){return Fr})),e.d(t,"Wi",(function(){return Er})),e.d(t,"Vi",(function(){return Rr})),e.d(t,"Xi",(function(){return Lr})),e.d(t,"Ui",(function(){return Or})),e.d(t,"Yi",(function(){return Gr})),e.d(t,"fj",(function(){return Vr})),e.d(t,"gj",(function(){return Wr})),e.d(t,"ij",(function(){return qr})),e.d(t,"kj",(function(){return zr})),e.d(t,"lj",(function(){return Ur})),e.d(t,"oj",(function(){return Kr})),e.d(t,"pj",(function(){return Qr})),e.d(t,"sj",(function(){return Xr})),e.d(t,"vj",(function(){return Nr})),e.d(t,"wj",(function(){return Yr})),e.d(t,"xj",(function(){return Hr})),e.d(t,"zj",(function(){return Jr})),e.d(t,"Aj",(function(){return Zr})),e.d(t,"Bj",(function(){return $r})),e.d(t,"Dj",(function(){return nu})),e.d(t,"Ej",(function(){return tu})),e.d(t,"Fj",(function(){return eu})),e.d(t,"Gj",(function(){return ru})),e.d(t,"Ij",(function(){return uu})),e.d(t,"Jj",(function(){return fu})),e.d(t,"Rj",(function(){return cu})),e.d(t,"Sj",(function(){return iu})),e.d(t,"g",(function(){return ou})),e.d(t,"m",(function(){return _u})),e.d(t,"s",(function(){return du})),e.d(t,"v",(function(){return au})),e.d(t,"w",(function(){return bu})),e.d(t,"y",(function(){return gu})),e.d(t,"B",(function(){return wu})),e.d(t,"F",(function(){return su})),e.d(t,"J",(function(){return lu})),e.d(t,"H",(function(){return mu})),e.d(t,"N",(function(){return pu})),e.d(t,"L",(function(){return hu})),e.d(t,"rb",(function(){return xu})),e.d(t,"lb",(function(){return yu})),e.d(t,"nb",(function(){return Su})),e.d(t,"pb",(function(){return ku})),e.d(t,"xb",(function(){return vu})),e.d(t,"zb",(function(){return Bu})),e.d(t,"Nb",(function(){return Pu})),e.d(t,"Ub",(function(){return ju})),e.d(t,"ac",(function(){return Iu})),e.d(t,"cc",(function(){return Au})),e.d(t,"ic",(function(){return Du})),e.d(t,"oc",(function(){return Tu})),e.d(t,"pc",(function(){return Cu})),e.d(t,"yc",(function(){return Mu})),e.d(t,"Bc",(function(){return Fu})),e.d(t,"Dc",(function(){return Eu})),e.d(t,"Fc",(function(){return Ru})),e.d(t,"Hc",(function(){return Lu})),e.d(t,"Kc",(function(){return Ou})),e.d(t,"Nc",(function(){return Gu})),e.d(t,"Vc",(function(){return Vu})),e.d(t,"Wc",(function(){return Wu})),e.d(t,"Zc",(function(){return qu})),e.d(t,"id",(function(){return zu})),e.d(t,"gd",(function(){return Uu})),e.d(t,"qd",(function(){return Ku})),e.d(t,"Hd",(function(){return Qu})),e.d(t,"Fd",(function(){return Xu})),e.d(t,"Yd",(function(){return Nu})),e.d(t,"be",(function(){return Yu})),e.d(t,"ee",(function(){return Hu})),e.d(t,"te",(function(){return Ju})),e.d(t,"ye",(function(){return Zu})),e.d(t,"Ae",(function(){return $u})),e.d(t,"De",(function(){return nf})),e.d(t,"He",(function(){return tf})),e.d(t,"Ie",(function(){return ef})),e.d(t,"Ke",(function(){return rf})),e.d(t,"Oe",(function(){return uf})),e.d(t,"vf",(function(){return ff})),e.d(t,"Mg",(function(){return cf})),e.d(t,"Qg",(function(){return of})),e.d(t,"ph",(function(){return _f})),e.d(t,"Eh",(function(){return df})),e.d(t,"qi",(function(){return af})),e.d(t,"yi",(function(){return bf})),e.d(t,"Bi",(function(){return gf})),e.d(t,"zi",(function(){return wf})),e.d(t,"Di",(function(){return sf})),e.d(t,"Ki",(function(){return lf})),e.d(t,"cj",(function(){return mf})),e.d(t,"ej",(function(){return pf})),e.d(t,"qj",(function(){return hf})),e.d(t,"Nj",(function(){return xf})),e.d(t,"Tj",(function(){return yf})),e.d(t,"Yj",(function(){return Sf})),e.d(t,"kf",(function(){return kf})),e.d(t,"nd",(function(){return vf})),e.d(t,"kg",(function(){return Bf})),e.d(t,"ed",(function(){return Pf})),e.d(t,"eb",(function(){return jf})),e.d(t,"me",(function(){return If})),e.d(t,"zf",(function(){return Af})),e.d(t,"wh",(function(){return Df})),e.d(t,"db",(function(){return Tf})),e.d(t,"sh",(function(){return Cf})),e.d(t,"qb",(function(){return Mf})),e.d(t,"bi",(function(){return Ff})),e.d(t,"ai",(function(){return Ef})),e.d(t,"R",(function(){return Rf})),e.d(t,"Zj",(function(){return Lf})),e.d(t,"e",(function(){return Of})),e.d(t,"ge",(function(){return Gf})),e.d(t,"Yb",(function(){return Vf})),e.d(t,"se",(function(){return Wf})),e.d(t,"ch",(function(){return qf})),e.d(t,"bh",(function(){return zf})),e.d(t,"Hh",(function(){return Uf})),e.d(t,"Wh",(function(){return Kf})),e.d(t,"jg",(function(){return Qf})),e.d(t,"Fi",(function(){return Xf})),e.d(t,"Xd",(function(){return Nf})),e.d(t,"U",(function(){return Yf})),e.d(t,"T",(function(){return Hf})),e.d(t,"X",(function(){return Jf})),e.d(t,"Bb",(function(){return Zf})),e.d(t,"ih",(function(){return $f})),e.d(t,"Ii",(function(){return nc})),e.d(t,"Pi",(function(){return tc})),e.d(t,"hj",(function(){return ec})),e.d(t,"jj",(function(){return rc})),e.d(t,"mj",(function(){return uc})),e.d(t,"nj",(function(){return fc})),e.d(t,"tj",(function(){return cc})),e.d(t,"uj",(function(){return ic})),e.d(t,"yj",(function(){return oc})),e.d(t,"Cj",(function(){return _c})),e.d(t,"Hj",(function(){return dc})),e.d(t,"f",(function(){return ac})),e.d(t,"n",(function(){return bc})),e.d(t,"r",(function(){return gc})),e.d(t,"u",(function(){return wc})),e.d(t,"x",(function(){return sc})),e.d(t,"z",(function(){return lc})),e.d(t,"C",(function(){return mc})),e.d(t,"G",(function(){return pc})),e.d(t,"K",(function(){return hc})),e.d(t,"I",(function(){return xc})),e.d(t,"O",(function(){return yc})),e.d(t,"M",(function(){return Sc})),e.d(t,"sb",(function(){return kc})),e.d(t,"kb",(function(){return vc})),e.d(t,"mb",(function(){return Bc})),e.d(t,"ob",(function(){return Pc})),e.d(t,"wb",(function(){return jc})),e.d(t,"yb",(function(){return Ic})),e.d(t,"Mb",(function(){return Ac})),e.d(t,"Tb",(function(){return Dc})),e.d(t,"Zb",(function(){return Tc})),e.d(t,"dc",(function(){return Cc})),e.d(t,"jc",(function(){return Mc})),e.d(t,"nc",(function(){return Fc})),e.d(t,"rc",(function(){return Ec})),e.d(t,"xc",(function(){return Rc})),e.d(t,"Ac",(function(){return Lc})),e.d(t,"Cc",(function(){return Oc})),e.d(t,"Ec",(function(){return Gc})),e.d(t,"Ic",(function(){return Vc})),e.d(t,"Lc",(function(){return Wc})),e.d(t,"Oc",(function(){return qc})),e.d(t,"Uc",(function(){return zc})),e.d(t,"Xc",(function(){return Uc})),e.d(t,"Yc",(function(){return Kc})),e.d(t,"hd",(function(){return Qc})),e.d(t,"fd",(function(){return Xc})),e.d(t,"rd",(function(){return Nc})),e.d(t,"Gd",(function(){return Yc})),e.d(t,"Ed",(function(){return Hc})),e.d(t,"Zd",(function(){return Jc})),e.d(t,"ae",(function(){return Zc})),e.d(t,"fe",(function(){return $c})),e.d(t,"xe",(function(){return ni})),e.d(t,"Be",(function(){return ti})),e.d(t,"Ce",(function(){return ei})),e.d(t,"Ge",(function(){return ri})),e.d(t,"Je",(function(){return ui})),e.d(t,"Pe",(function(){return fi})),e.d(t,"uf",(function(){return ci})),e.d(t,"Lg",(function(){return ii})),e.d(t,"Pg",(function(){return oi})),e.d(t,"oh",(function(){return _i})),e.d(t,"Fh",(function(){return di})),e.d(t,"pi",(function(){return ai})),e.d(t,"xi",(function(){return bi})),e.d(t,"Ci",(function(){return gi})),e.d(t,"Ai",(function(){return wi})),e.d(t,"Ei",(function(){return si})),e.d(t,"Li",(function(){return li})),e.d(t,"bj",(function(){return mi})),e.d(t,"dj",(function(){return pi})),e.d(t,"rj",(function(){return hi})),e.d(t,"Oj",(function(){return xi})),e.d(t,"Uj",(function(){return yi})),e.d(t,"Xj",(function(){return Si})),e.d(t,"Ee",(function(){return ki})),e.d(t,"mh",(function(){return vi})),e.d(t,"Xh",(function(){return Bi})),e.d(t,"ek",(function(){return Pi})),e.d(t,"Xe",(function(){return ji})),e.d(t,"Wj",(function(){return Ii})),e.d(t,"Vj",(function(){return Ai})),e.d(t,"dk",(function(){return Di})),e.d(t,"Ze",(function(){return Ti})),e.d(t,"sd",(function(){return Ci})),e.d(t,"ti",(function(){return Mi})),e.d(t,"lg",(function(){return Fi})),e.d(t,"d",(function(){return Ei})),e.d(t,"mf",(function(){return Ri})),e.d(t,"Ng",(function(){return Li})),e.d(t,"Wg",(function(){return Oi})),e.d(t,"Og",(function(){return Gi})),e.d(t,"ke",(function(){return Vi})),e.d(t,"Xg",(function(){return Wi})),e.d(t,"bg",(function(){return qi})),e.d(t,"Af",(function(){return zi})),e.d(t,"i",(function(){return Ui})),e.d(t,"lh",(function(){return Ki})),e.d(t,"vc",(function(){return Qi})),e.d(t,"ri",(function(){return Xi})),e.d(t,"j",(function(){return Ni})),e.d(t,"eg",(function(){return Yi})),e.d(t,"ab",(function(){return Hi})),e.d(t,"bb",(function(){return Ji})),e.d(t,"hg",(function(){return Zi})),e.d(t,"ig",(function(){return $i})),e.d(t,"Sc",(function(){return no})),e.d(t,"Tc",(function(){return to})),e.d(t,"Rc",(function(){return eo})),e.d(t,"h",(function(){return ro})),e.d(t,"kh",(function(){return uo})),e.d(t,"hf",(function(){return fo})),e.d(t,"gk",(function(){return co})),e.d(t,"ni",(function(){return io})),e.d(t,"Ye",(function(){return oo})),e.d(t,"li",(function(){return _o})),e.d(t,"pe",(function(){return ao})),e.d(t,"qe",(function(){return bo})),e.d(t,"fk",(function(){return go})),e.d(t,"oi",(function(){return wo})),e.d(t,"We",(function(){return so})),e.d(t,"ki",(function(){return lo})),e.d(t,"ne",(function(){return mo})),e.d(t,"oe",(function(){return po})),e.d(t,"pg",(function(){return ho})),e.d(t,"jd",(function(){return xo})),e.d(t,"Dg",(function(){return yo})),e.d(t,"Eg",(function(){return So})),e.d(t,"Lj",(function(){return ko})),e.d(t,"Le",(function(){return vo})),e.d(t,"de",(function(){return Bo})),e.d(t,"Hb",(function(){return Po})),e.d(t,"dd",(function(){return jo})),e.d(t,"zc",(function(){return Io})),e.d(t,"Nd",(function(){return Ao})),e.d(t,"Ld",(function(){return Do})),e.d(t,"bf",(function(){return To})),e.d(t,"xf",(function(){return Co})),e.d(t,"ak",(function(){return Mo})),e.d(t,"Sg",(function(){return Fo})),e.d(t,"Tg",(function(){return Eo})),e.d(t,"ng",(function(){return Ro})),e.d(t,"ub",(function(){return Lo})),e.d(t,"Ug",(function(){return Oo})),e.d(t,"wi",(function(){return Go})),e.d(t,"cf",(function(){return Vo})),e.d(t,"Q",(function(){return Wo})),e.d(t,"k",(function(){return qo})),e.d(t,"wc",(function(){return zo})),e.d(t,"si",(function(){return Uo})),e.d(t,"dg",(function(){return Ko})),e.d(t,"wf",(function(){return Qo})),e.d(t,"qh",(function(){return Xo})),e.d(t,"of",(function(){return No})),e.d(t,"vb",(function(){return Yo})),e.d(t,"Kg",(function(){return Ho})),e.d(t,"od",(function(){return Jo})),e.d(t,"ud",(function(){return Zo})),e.d(t,"Qj",(function(){return $o})),e.d(t,"og",(function(){return n_})),e.d(t,"kd",(function(){return t_})),e.d(t,"Cg",(function(){return e_})),e.d(t,"l",(function(){return r_})),e.d(t,"Gb",(function(){return u_})),e.d(t,"Qe",(function(){return f_})),e.d(t,"D",(function(){return c_})),e.d(t,"sc",(function(){return i_})),e.d(t,"Pc",(function(){return o_})),e.d(t,"Jg",(function(){return __})),e.d(t,"Bg",(function(){return d_})),e.d(t,"Re",(function(){return a_})),e.d(t,"rf",(function(){return b_})),e.d(t,"mg",(function(){return g_})),e.d(t,"tg",(function(){return w_})),e.d(t,"cb",(function(){return s_})),e.d(t,"rg",(function(){return l_})),e.d(t,"Gh",(function(){return m_})),e.d(t,"hk",(function(){return p_})),e.d(t,"Se",(function(){return h_})),e.d(t,"Te",(function(){return x_})),e.d(t,"af",(function(){return y_})),e.d(t,"Fg",(function(){return S_})),e.d(t,"ah",(function(){return k_})),e.d(t,"if",(function(){return v_})),e.d(t,"we",(function(){return B_})),e.d(t,"nf",(function(){return P_})),e.d(t,"Pj",(function(){return j_})),e.d(t,"zh",(function(){return I_})),e.d(t,"fb",(function(){return A_})),e.d(t,"Zi",(function(){return D_})),e.d(t,"aj",(function(){return T_})),e.d(t,"Y",(function(){return C_})),e.d(t,"vg",(function(){return M_})),e.d(t,"yg",(function(){return F_})),e.d(t,"wg",(function(){return E_})),e.d(t,"Ag",(function(){return R_})),e.d(t,"qg",(function(){return L_})),e.d(t,"ii",(function(){return O_})),e.d(t,"qf",(function(){return G_})),e.d(t,"zg",(function(){return V_})),e.d(t,"ug",(function(){return W_})),e.d(t,"xg",(function(){return q_})),e.d(t,"Z",(function(){return z_})),e.d(t,"hi",(function(){return U_})),e.d(t,"Lk",(function(){return K_})),e.d(t,"Wk",(function(){return Q_})),e.d(t,"Pk",(function(){return X_})),e.d(t,"pk",(function(){return N_})),e.d(t,"qk",(function(){return Y_})),e.d(t,"rk",(function(){return H_})),e.d(t,"sk",(function(){return J_})),e.d(t,"tk",(function(){return Z_})),e.d(t,"uk",(function(){return $_})),e.d(t,"vk",(function(){return nd})),e.d(t,"Ek",(function(){return td})),e.d(t,"Fk",(function(){return ed})),e.d(t,"Gk",(function(){return rd})),e.d(t,"Hk",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"nk",(function(){return od})),e.d(t,"ok",(function(){return _d})),e.d(t,"wk",(function(){return dd})),e.d(t,"xk",(function(){return ad})),e.d(t,"yk",(function(){return bd})),e.d(t,"zk",(function(){return gd})),e.d(t,"Ak",(function(){return wd})),e.d(t,"Bk",(function(){return sd})),e.d(t,"Ck",(function(){return ld})),e.d(t,"Dk",(function(){return md}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});_.decode();let d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}function b(n,t){return n>>>=0,_.decode(a().subarray(n,n+t))}function g(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=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 a().subarray(r,r+e.length).set(e),w=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=l(n,t).written,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1cf07050ec24a09e(n,t,g(e))}function B(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2b5e512824b5ef4a(n,t,g(e),g(u))}function P(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb977dc675da10f5d(n,t)}function j(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__ha2d437a53b278f47(n,t)}function I(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h22444d640c8e109c(n,t,g(e))}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h870530946a8a3455(n,t,g(e),g(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,g(e))}function T(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,g(e))}function C(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,g(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(g(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n,t){return g(b(n,t))}function K(n){return g(c(n))}function Q(){return g(new Error)}function X(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function N(n,t){let e,u;try{e=n,u=t,console.error(b(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function H(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function J(n){return g(c(n).gpu)}function Z(n){return g(c(n).features)}function $(n){return g(c(n).limits)}function nn(n,t){return g(c(n).requestDevice(c(t)))}function tn(n,t){c(n).configure(c(t))}function en(n){return g(c(n).getCurrentTexture())}function rn(n){return g(n)}function un(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function fn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function cn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function on(n,t,e){return g(c(n).getMappedRange(t,e))}function _n(n){return c(n).maxTextureDimension1D}function dn(n){return c(n).maxTextureDimension2D}function an(n){return c(n).maxTextureDimension3D}function bn(n){return c(n).maxTextureArrayLayers}function gn(n){return c(n).maxBindGroups}function wn(n){return c(n).maxBindingsPerBindGroup}function sn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function ln(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function mn(n){return c(n).maxSampledTexturesPerShaderStage}function pn(n){return c(n).maxSamplersPerShaderStage}function hn(n){return c(n).maxStorageBuffersPerShaderStage}function xn(n){return c(n).maxStorageTexturesPerShaderStage}function yn(n){return c(n).maxUniformBuffersPerShaderStage}function Sn(n){return c(n).maxUniformBufferBindingSize}function kn(n){return c(n).maxStorageBufferBindingSize}function vn(n){return c(n).minUniformBufferOffsetAlignment}function Bn(n){return c(n).minStorageBufferOffsetAlignment}function Pn(n){return c(n).maxVertexBuffers}function jn(n){return c(n).maxBufferSize}function In(n){return c(n).maxVertexAttributes}function An(n){return c(n).maxVertexBufferArrayStride}function Dn(n){return c(n).maxInterStageShaderComponents}function Tn(n){return c(n).maxComputeWorkgroupStorageSize}function Cn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Mn(n){return c(n).maxComputeWorkgroupSizeX}function Fn(n){return c(n).maxComputeWorkgroupSizeY}function En(n){return c(n).maxComputeWorkgroupSizeZ}function Rn(n){return c(n).maxComputeWorkgroupsPerDimension}function Ln(n){return g(c(n).error)}function On(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function Gn(n,t,e){return c(n).has(b(t,e))}function Vn(n){return g(c(n).queue)}function Wn(n){const t=c(n);return"object"==typeof t&&null!==t}function qn(n){return g(c(n).Window)}function zn(n){return g(c(n).WorkerGlobalScope)}function Un(n,t){return g(c(n).requestAdapter(c(t)))}function Kn(n){return g(c(n).getPreferredCanvasFormat())}function Qn(n){return g(c(n).features)}function Xn(n){return g(c(n).limits)}function Nn(n,t){return g(c(n).createShaderModule(c(t)))}function Yn(n,t){return g(c(n).createBindGroupLayout(c(t)))}function Hn(n,t){return g(c(n).createBindGroup(c(t)))}function Jn(n,t){return g(c(n).createPipelineLayout(c(t)))}function Zn(n,t){return g(c(n).createRenderPipeline(c(t)))}function $n(n,t){return g(c(n).createComputePipeline(c(t)))}function nt(n,t){return g(c(n).createBuffer(c(t)))}function tt(n,t){return g(c(n).createTexture(c(t)))}function et(n,t){return g(c(n).createSampler(c(t)))}function rt(n,t){return g(c(n).createQuerySet(c(t)))}function ut(n,t){return g(c(n).createCommandEncoder(c(t)))}function ft(n,t){return g(c(n).createRenderBundleEncoder(c(t)))}function ct(n){c(n).destroy()}function it(n,t){c(n).onuncapturederror=c(t)}function ot(n,t){c(n).pushErrorScope(o(t))}function _t(n){return g(c(n).popErrorScope())}function dt(n,t,e,r){return g(c(n).mapAsync(t>>>0,e,r))}function at(n){c(n).unmap()}function bt(n,t){return g(c(n).createView(c(t)))}function gt(n){c(n).destroy()}function wt(n){c(n).destroy()}function st(n,t){return g(c(n).getBindGroupLayout(t>>>0))}function lt(n,t){return g(c(n).getBindGroupLayout(t>>>0))}function mt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function pt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function ht(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function xt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function yt(n,t){return g(c(n).beginComputePass(c(t)))}function St(n){c(n).end()}function kt(n,t){return g(c(n).beginRenderPass(c(t)))}function vt(n){c(n).end()}function Bt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Pt(n,t){return g(c(n).finish(c(t)))}function jt(n){return g(c(n).finish())}function It(n,t,e){c(n).clearBuffer(c(t),e)}function At(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Dt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Tt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Ct(n){return g(c(n).finish())}function Mt(n,t){return g(c(n).finish(c(t)))}function Ft(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Et(n){return c(n).usage}function Rt(n){return c(n).size}function Lt(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ot(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Gt(n,t){c(n).setPipeline(c(t))}function Vt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Wt(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function qt(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function zt(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function Ut(n,t){c(n).setPipeline(c(t))}function Kt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Qt(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Xt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Nt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Yt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Ht(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Jt(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Zt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function $t(n,t,e){c(n).drawIndirect(c(t),e)}function ne(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function te(n,t){c(n).setPipeline(c(t))}function ee(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function re(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ue(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function fe(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ce(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ie(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function oe(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function _e(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function de(n,t,e){c(n).drawIndirect(c(t),e)}function ae(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function be(n,t){c(n).setBlendConstant(c(t))}function ge(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function we(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function se(n,t){c(n).setStencilReference(t>>>0)}function le(n,t){c(n).executeBundles(c(t))}function me(n,t){c(n).submit(c(t))}function pe(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function he(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function xe(n){return c(n).offsetX}function ye(n){return c(n).offsetY}function Se(n){return g(c(n).getCoalescedEvents)}function ke(n){return g(c(n).requestFullscreen)}function ve(n){return g(c(n).scheduler)}function Be(n){return g(c(n).requestIdleCallback)}function Pe(n){return g(c(n).onpointerrawupdate)}function je(){return g(ResizeObserverEntry.prototype)}function Ie(n){const t=c(n).webkitFullscreenElement;return p(t)?0:g(t)}function Ae(n){return g(c(n).Window)}function De(n,t,e){return g(c(n).postTask(c(t),c(e)))}function Te(n){return g(c(n).requestFullscreen())}function Ce(n){return g(c(n).scheduler)}function Me(n){c(n).webkitRequestFullscreen()}function Fe(n){queueMicrotask(c(n))}function Ee(n){return g(c(n).queueMicrotask)}function Re(n){return"function"==typeof c(n)}function Le(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Oe(n,t,e){c(n).beginQuery(t>>>0,c(e))}function Ge(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function Ve(n,t,e){c(n).bindSampler(t>>>0,c(e))}function We(n,t){c(n).bindVertexArray(c(t))}function qe(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function ze(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 Ke(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Qe(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function Xe(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function Ne(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Ye(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function He(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function Je(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function Ze(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function $e(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function nr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function tr(n){const t=c(n).createQuery();return p(t)?0:g(t)}function er(n){const t=c(n).createSampler();return p(t)?0:g(t)}function rr(n){const t=c(n).createVertexArray();return p(t)?0:g(t)}function ur(n,t){c(n).deleteQuery(c(t))}function fr(n,t){c(n).deleteSampler(c(t))}function cr(n,t){c(n).deleteSync(c(t))}function ir(n,t){c(n).deleteVertexArray(c(t))}function or(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function _r(n,t){c(n).drawBuffers(c(t))}function dr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function ar(n,t){c(n).endQuery(t>>>0)}function br(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:g(r)}function gr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function wr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function sr(){return O((function(n,t,e){return g(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function lr(n,t,e){return g(c(n).getQueryParameter(c(t),e>>>0))}function mr(n,t,e){return g(c(n).getSyncParameter(c(t),e>>>0))}function pr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),b(e,r))}function hr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function xr(n,t){c(n).readBuffer(t>>>0)}function yr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Sr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function kr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function vr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Br(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Pr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function jr(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Ir(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Ar(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Dr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Tr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Cr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function Wr(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function qr(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function zr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Ur(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Kr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Qr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Xr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Nr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Yr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function Hr(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function Jr(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function Zr(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function $r(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function nu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function cu(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function iu(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function ou(n,t){c(n).activeTexture(t>>>0)}function _u(n,t,e){c(n).attachShader(c(t),c(e))}function du(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,b(r,u))}function au(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function bu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function gu(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function wu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function su(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function lu(n,t){c(n).blendEquation(t>>>0)}function mu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function pu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function hu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function xu(n,t){c(n).clear(t>>>0)}function yu(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Su(n,t){c(n).clearDepth(t)}function ku(n,t){c(n).clearStencil(t)}function vu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Bu(n,t){c(n).compileShader(c(t))}function Pu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function ju(n){const t=c(n).createBuffer();return p(t)?0:g(t)}function Iu(n){const t=c(n).createFramebuffer();return p(t)?0:g(t)}function Au(n){const t=c(n).createProgram();return p(t)?0:g(t)}function Du(n){const t=c(n).createRenderbuffer();return p(t)?0:g(t)}function Tu(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:g(e)}function Cu(n){const t=c(n).createTexture();return p(t)?0:g(t)}function Mu(n,t){c(n).cullFace(t>>>0)}function Fu(n,t){c(n).deleteBuffer(c(t))}function Eu(n,t){c(n).deleteFramebuffer(c(t))}function Ru(n,t){c(n).deleteProgram(c(t))}function Lu(n,t){c(n).deleteRenderbuffer(c(t))}function Ou(n,t){c(n).deleteShader(c(t))}function Gu(n,t){c(n).deleteTexture(c(t))}function Vu(n,t){c(n).depthFunc(t>>>0)}function Wu(n,t){c(n).depthMask(0!==t)}function qu(n,t,e){c(n).depthRange(t,e)}function zu(n,t){c(n).disable(t>>>0)}function Uu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Ku(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Qu(n,t){c(n).enable(t>>>0)}function Xu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Nu(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Yu(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Hu(n,t){c(n).frontFace(t>>>0)}function Ju(){return O((function(n,t,e){const r=c(n).getExtension(b(t,e));return p(r)?0:g(r)}),arguments)}function Zu(){return O((function(n,t){return g(c(n).getParameter(t>>>0))}),arguments)}function $u(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function nf(n,t,e){return g(c(n).getProgramParameter(c(t),e>>>0))}function tf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ef(n,t,e){return g(c(n).getShaderParameter(c(t),e>>>0))}function rf(n){const t=c(n).getSupportedExtensions();return p(t)?0:g(t)}function uf(n,t,e,r){const u=c(n).getUniformLocation(c(t),b(e,r));return p(u)?0:g(u)}function ff(n,t){c(n).linkProgram(c(t))}function cf(n,t,e){c(n).pixelStorei(t>>>0,e)}function of(n,t,e){c(n).polygonOffset(t,e)}function _f(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function df(n,t,e,r,u){c(n).scissor(t,e,r,u)}function af(n,t,e,r){c(n).shaderSource(c(t),b(e,r))}function bf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function gf(n,t){c(n).stencilMask(t>>>0)}function wf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function sf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function lf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function mf(n,t,e){c(n).uniform1f(c(t),e)}function pf(n,t,e){c(n).uniform1i(c(t),e)}function hf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function xf(n,t){c(n).useProgram(c(t))}function yf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Sf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function kf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function vf(n){const t=c(n).document;return p(t)?0:g(t)}function Bf(n){return g(c(n).navigator)}function Pf(n){return c(n).devicePixelRatio}function jf(n,t){c(n).cancelIdleCallback(t>>>0)}function If(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:g(e)}),arguments)}function Af(){return O((function(n,t,e){const r=c(n).matchMedia(b(t,e));return p(r)?0:g(r)}),arguments)}function Df(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Tf(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Cf(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Mf(n,t){c(n).clearTimeout(t)}function Ff(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Ef(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Rf(n){const t=c(n).body;return p(t)?0:g(t)}function Lf(n){return g(c(n).visibilityState)}function Of(n){const t=c(n).activeElement;return p(t)?0:g(t)}function Gf(n){const t=c(n).fullscreenElement;return p(t)?0:g(t)}function Vf(){return O((function(n,t,e){return g(c(n).createElement(b(t,e)))}),arguments)}function Wf(n,t,e){const r=c(n).getElementById(b(t,e));return p(r)?0:g(r)}function qf(){return O((function(n,t,e){const r=c(n).querySelector(b(t,e));return p(r)?0:g(r)}),arguments)}function zf(){return O((function(n,t,e){return g(c(n).querySelectorAll(b(t,e)))}),arguments)}function Uf(){return O((function(n,t,e,r,u){c(n).setAttribute(b(t,e),b(r,u))}),arguments)}function Kf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Qf(n){return g(c(n).navigator)}function Xf(n){return g(c(n).style)}function Nf(){return O((function(n){c(n).focus()}),arguments)}function Yf(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Hf(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Jf(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Zf(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function $f(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function nc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function tc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function ec(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function rc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function uc(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function fc(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function cc(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function ic(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function oc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function _c(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function dc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function ac(n,t){c(n).activeTexture(t>>>0)}function bc(n,t,e){c(n).attachShader(c(t),c(e))}function gc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,b(r,u))}function wc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function sc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function lc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function mc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function pc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function hc(n,t){c(n).blendEquation(t>>>0)}function xc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function yc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Sc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function kc(n,t){c(n).clear(t>>>0)}function vc(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Bc(n,t){c(n).clearDepth(t)}function Pc(n,t){c(n).clearStencil(t)}function jc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Ic(n,t){c(n).compileShader(c(t))}function Ac(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Dc(n){const t=c(n).createBuffer();return p(t)?0:g(t)}function Tc(n){const t=c(n).createFramebuffer();return p(t)?0:g(t)}function Cc(n){const t=c(n).createProgram();return p(t)?0:g(t)}function Mc(n){const t=c(n).createRenderbuffer();return p(t)?0:g(t)}function Fc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:g(e)}function Ec(n){const t=c(n).createTexture();return p(t)?0:g(t)}function Rc(n,t){c(n).cullFace(t>>>0)}function Lc(n,t){c(n).deleteBuffer(c(t))}function Oc(n,t){c(n).deleteFramebuffer(c(t))}function Gc(n,t){c(n).deleteProgram(c(t))}function Vc(n,t){c(n).deleteRenderbuffer(c(t))}function Wc(n,t){c(n).deleteShader(c(t))}function qc(n,t){c(n).deleteTexture(c(t))}function zc(n,t){c(n).depthFunc(t>>>0)}function Uc(n,t){c(n).depthMask(0!==t)}function Kc(n,t,e){c(n).depthRange(t,e)}function Qc(n,t){c(n).disable(t>>>0)}function Xc(n,t){c(n).disableVertexAttribArray(t>>>0)}function Nc(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Yc(n,t){c(n).enable(t>>>0)}function Hc(n,t){c(n).enableVertexAttribArray(t>>>0)}function Jc(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Zc(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function $c(n,t){c(n).frontFace(t>>>0)}function ni(){return O((function(n,t){return g(c(n).getParameter(t>>>0))}),arguments)}function ti(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ei(n,t,e){return g(c(n).getProgramParameter(c(t),e>>>0))}function ri(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ui(n,t,e){return g(c(n).getShaderParameter(c(t),e>>>0))}function fi(n,t,e,r){const u=c(n).getUniformLocation(c(t),b(e,r));return p(u)?0:g(u)}function ci(n,t){c(n).linkProgram(c(t))}function ii(n,t,e){c(n).pixelStorei(t>>>0,e)}function oi(n,t,e){c(n).polygonOffset(t,e)}function _i(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function di(n,t,e,r,u){c(n).scissor(t,e,r,u)}function ai(n,t,e,r){c(n).shaderSource(c(t),b(e,r))}function bi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function gi(n,t){c(n).stencilMask(t>>>0)}function wi(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function si(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function li(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function mi(n,t,e){c(n).uniform1f(c(t),e)}function pi(n,t,e){c(n).uniform1i(c(t),e)}function hi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function xi(n,t){c(n).useProgram(c(t))}function yi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Si(n,t,e,r,u){c(n).viewport(t,e,r,u)}function ki(){return O((function(n,t,e,u){const f=m(c(t).getPropertyValue(b(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function vi(){return O((function(n,t,e,u){const f=m(c(t).removeProperty(b(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Bi(){return O((function(n,t,e,r,u){c(n).setProperty(b(t,e),b(r,u))}),arguments)}function Pi(n){return c(n).width}function ji(n){return c(n).height}function Ii(n){return c(n).videoWidth}function Ai(n){return c(n).videoHeight}function Di(n){return c(n).width}function Ti(n){return c(n).height}function Ci(n,t){c(n).drawBuffersWEBGL(c(t))}function Mi(n){return g(c(n).signal)}function Fi(){return O((function(){return g(new AbortController)}),arguments)}function Ei(n){c(n).abort()}function Ri(n){return c(n).isIntersecting}function Li(n){return c(n).pointerId}function Oi(n){return c(n).pressure}function Gi(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Vi(n){return g(c(n).getCoalescedEvents())}function Wi(n){c(n).preventDefault()}function qi(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function zi(n){return c(n).matches}function Ui(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Ki(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Qi(n){return c(n).ctrlKey}function Xi(n){return c(n).shiftKey}function Ni(n){return c(n).altKey}function Yi(n){return c(n).metaKey}function Hi(n){return c(n).button}function Ji(n){return c(n).buttons}function Zi(n){return c(n).movementX}function $i(n){return c(n).movementY}function no(n){return c(n).deltaX}function to(n){return c(n).deltaY}function eo(n){return c(n).deltaMode}function ro(){return O((function(n,t,e,r){c(n).addEventListener(b(t,e),c(r))}),arguments)}function uo(){return O((function(n,t,e,r){c(n).removeEventListener(b(t,e),c(r))}),arguments)}function fo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function co(n){return c(n).width}function io(n,t){c(n).width=t>>>0}function oo(n){return c(n).height}function _o(n,t){c(n).height=t>>>0}function ao(){return O((function(n,t,e){const r=c(n).getContext(b(t,e));return p(r)?0:g(r)}),arguments)}function bo(){return O((function(n,t,e,r){const u=c(n).getContext(b(t,e),c(r));return p(u)?0:g(u)}),arguments)}function go(n){return c(n).width}function wo(n,t){c(n).width=t>>>0}function so(n){return c(n).height}function lo(n,t){c(n).height=t>>>0}function mo(){return O((function(n,t,e){const r=c(n).getContext(b(t,e));return p(r)?0:g(r)}),arguments)}function po(){return O((function(n,t,e,r){const u=c(n).getContext(b(t,e),c(r));return p(u)?0:g(u)}),arguments)}function ho(){return O((function(n){return g(new ResizeObserver(c(n)))}),arguments)}function xo(n){c(n).disconnect()}function yo(n,t){c(n).observe(c(t))}function So(n,t,e){c(n).observe(c(t),c(e))}function ko(n,t){c(n).unobserve(c(t))}function vo(n){const t=c(n).getSupportedProfiles();return p(t)?0:g(t)}function Bo(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Po(n){return g(c(n).contentRect)}function jo(n){return g(c(n).devicePixelContentBoxSize)}function Io(n){console.debug(c(n))}function Ao(n){console.error(c(n))}function Do(n,t){console.error(c(n),c(t))}function To(n){console.info(c(n))}function Co(n){console.log(c(n))}function Mo(n){console.warn(c(n))}function Fo(n){return g(c(n).port1)}function Eo(n){return g(c(n).port2)}function Ro(){return O((function(){return g(new MessageChannel)}),arguments)}function Lo(n){c(n).close()}function Oo(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Go(n){c(n).start()}function Vo(n){return c(n).inlineSize}function Wo(n){return c(n).blockSize}function qo(n){return c(n).altKey}function zo(n){return c(n).ctrlKey}function Uo(n){return c(n).shiftKey}function Ko(n){return c(n).metaKey}function Qo(n){return c(n).location}function Xo(n){return c(n).repeat}function No(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Yo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ho(n){return c(n).persisted}function Jo(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Zo(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function $o(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function n_(){return O((function(n){return g(new IntersectionObserver(c(n)))}),arguments)}function t_(n){c(n).disconnect()}function e_(n,t){c(n).observe(c(t))}function r_(){return O((function(n,t){return g(c(n).appendChild(c(t)))}),arguments)}function u_(n,t){return c(n).contains(c(t))}function f_(n,t){const e=c(n)[t>>>0];return p(e)?0:g(e)}function c_(n,t){c(n).bindVertexArrayOES(c(t))}function i_(n){const t=c(n).createVertexArrayOES();return p(t)?0:g(t)}function o_(n,t){c(n).deleteVertexArrayOES(c(t))}function __(n){return g(c(n).performance)}function d_(n){return c(n).now()}function a_(n,t){return g(c(n)[t>>>0])}function b_(n){return c(n).length}function g_(){return g(new Array)}function w_(n,t){return g(new Function(b(n,t)))}function s_(){return O((function(n,t){return g(c(n).call(c(t)))}),arguments)}function l_(){return g(new Object)}function m_(){return O((function(){return g(self.self)}),arguments)}function p_(){return O((function(){return g(window.window)}),arguments)}function h_(){return O((function(){return g(globalThis.globalThis)}),arguments)}function x_(){return O((function(){return g(global.global)}),arguments)}function y_(n,t,e){return c(n).includes(c(t),e)}function S_(n){return g(Array.of(c(n)))}function k_(n,t){return c(n).push(c(t))}function v_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function B_(n,t){return g(Object.getOwnPropertyDescriptor(c(n),c(t)))}function P_(n,t){return Object.is(c(n),c(t))}function j_(n){return g(c(n).valueOf())}function I_(n){return g(Promise.resolve(c(n)))}function A_(n,t){return g(c(n).catch(c(t)))}function D_(n,t){return g(c(n).then(c(t)))}function T_(n,t,e){return g(c(n).then(c(t),c(e)))}function C_(n){return g(c(n).buffer)}function M_(n,t,e){return g(new Int8Array(c(n),t>>>0,e>>>0))}function F_(n,t,e){return g(new Int16Array(c(n),t>>>0,e>>>0))}function E_(n,t,e){return g(new Int32Array(c(n),t>>>0,e>>>0))}function R_(n,t,e){return g(new Uint8Array(c(n),t>>>0,e>>>0))}function L_(n){return g(new Uint8Array(c(n)))}function O_(n,t,e){c(n).set(c(t),e>>>0)}function G_(n){return c(n).length}function V_(n,t,e){return g(new Uint16Array(c(n),t>>>0,e>>>0))}function W_(n,t,e){return g(new Uint32Array(c(n),t>>>0,e>>>0))}function q_(n,t,e){return g(new Float32Array(c(n),t>>>0,e>>>0))}function z_(n){return g(c(n).buffer)}function U_(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function K_(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;x()[n/4+1]=u,x()[n/4+0]=e}function Q_(n,t){throw new Error(b(n,t))}function X_(){return g(r.memory)}function N_(n,t,e){return g(k(n,t,9,v))}function Y_(n,t,e){return g(k(n,t,9,v))}function H_(n,t,e){return g(k(n,t,9,B))}function J_(n,t,e){return g(k(n,t,9,v))}function Z_(n,t,e){return g(k(n,t,9,P))}function $_(n,t,e){return g(k(n,t,9,v))}function nd(n,t,e){return g(k(n,t,9,v))}function td(n,t,e){return g(k(n,t,175,j))}function ed(n,t,e){return g(k(n,t,175,I))}function rd(n,t,e){return g(k(n,t,175,I))}function ud(n,t,e){return g(k(n,t,175,I))}function fd(n,t,e){return g(k(n,t,175,I))}function cd(n,t,e){return g(k(n,t,175,I))}function id(n,t,e){return g(k(n,t,175,A))}function od(n,t,e){return g(k(n,t,1408,D))}function _d(n,t,e){return g(k(n,t,1408,D))}function dd(n,t,e){return g(k(n,t,2631,T))}function ad(n,t,e){return g(k(n,t,2631,T))}function bd(n,t,e){return g(k(n,t,2631,T))}function gd(n,t,e){return g(k(n,t,2631,C))}function wd(n,t,e){return g(k(n,t,2631,T))}function sd(n,t,e){return g(k(n,t,2631,T))}function ld(n,t,e){return g(k(n,t,2631,T))}function md(n,t,e){return g(k(n,t,2707,M))}}).call(this,e(260)(n))},417:function(n,t,e){"use strict";e.r(t);var r=e(418),u=e(250);e.d(t,"__wbg_set_wasm",(function(){return u.ji})),e.d(t,"run",(function(){return u.Xk})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Tk})),e.d(t,"__wbindgen_cb_drop",(function(){return u.mk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Ok})),e.d(t,"__wbindgen_string_new",(function(){return u.Vk})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.Sk})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.sg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.vi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Od})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.df})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.Ue})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Rd})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.sf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.th})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Fb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.re})),e.d(t,"__wbindgen_number_new",(function(){return u.Rk})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.gf})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.cg})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.ff})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.ve})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.Tf})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.Uf})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.Vf})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.Sf})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Bf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Cf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Lf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Kf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Nf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Of})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.Qf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.Rf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.Pf})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.gg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.fg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.ag})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Df})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.Yf})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.Zf})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.If})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Ef})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Ff})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Gf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Hf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Jf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Md})),e.d(t,"__wbindgen_string_get",(function(){return u.Uk})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.Ve})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.fh})),e.d(t,"__wbindgen_is_object",(function(){return u.Nk})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.rh})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.ze})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Qd})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.tf})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.mc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Sb})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.bc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.hc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Xb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Vb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.qc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.lc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.ec})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Wb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.gc})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.ad})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.mi})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.Zg})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.Rg})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.yf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.Kj})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.uc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.cd})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.bd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.he})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ie})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Jb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Kb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Pb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Qb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.o})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Kd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.q})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Jd})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.pf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.Wd})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Td})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.hb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.gb})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.kk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.yh})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.Vd})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Ud})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.ik})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.Mj})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.ui})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.jk})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Lb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.Nh})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Ih})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.md})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.ld})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.Uh})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.Jh})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.Lh})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.Qh})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.Sh})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.ei})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.ci})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.xd})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.Kh})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.Mh})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.Ph})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.Rh})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.di})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.wd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.Oh})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.Yh})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.gi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.Zh})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Pd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Gi})),e.d(t,"__wbindgen_boolean_get",(function(){return u.lk})),e.d(t,"__wbindgen_number_get",(function(){return u.Qk})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Gg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Hg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.le})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.uh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Dh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.xh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Ig})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.Yg})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.bk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.Vg})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.vh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Ch})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ck})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.dh})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.eh})),e.d(t,"__wbindgen_is_function",(function(){return u.Mk})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.jf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.ib})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.jb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.tb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Ab})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Eb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Ib})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Ob})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.fc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.kc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.tc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Gc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Jc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Mc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Qc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.pd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.td})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.vd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Id})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Sd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ce})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.je})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.lf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.gh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.hh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.jh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.nh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Ah})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Bh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Hi})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ji})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Mi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Ni})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.Ri})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.Si})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Oi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.Qi})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.Wi})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.Vi})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Xi})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.Ui})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Yi})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.fj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.gj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.ij})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.kj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.lj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.oj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.pj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.sj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.vj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.wj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.xj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.zj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Aj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Bj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Dj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Ej})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Fj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Ij})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Jj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.Rj})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.Sj})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.rb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.lb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.pb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.xb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.ac})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.ic})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.oc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.pc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Zc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.qd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Hd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Fd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.be})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ee})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.vf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Mg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.Qg})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.ph})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Eh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.qi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.yi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Bi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.zi})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Di})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Ki})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.cj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.ej})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.qj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Nj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Tj})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Yj})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.kf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.nd})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.kg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.ed})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.zf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.wh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.sh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.qb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.bi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.ai})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Zj})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ge})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Yb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.ch})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.bh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Hh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.Wh})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.jg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Fi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Xd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Bb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.ih})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ii})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.Pi})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.hj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.jj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.mj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.nj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.tj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.uj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.yj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Cj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Hj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.sb})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.kb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.ob})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.wb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.jc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.nc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.rc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Yc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.rd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Zd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ae})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.fe})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.uf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Lg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Pg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.oh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Fh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.pi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.xi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ci})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Ai})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Ei})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Li})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.bj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.dj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.rj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.Oj})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Uj})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Xj})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.mh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.Xh})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.ek})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Wj})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Vj})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.dk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.sd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.ti})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.lg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.mf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Ng})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.Wg})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Og})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.ke})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.Xg})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.bg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Af})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.lh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.ri})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.eg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.hg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.ig})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Sc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Tc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Rc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.kh})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.hf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.gk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.ni})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.li})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.fk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.oi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.ki})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.pg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.jd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Dg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Eg})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Lj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.de})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Hb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.dd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.zc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Nd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Ld})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.xf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.ak})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.Sg})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.Tg})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.ng})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.ub})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.Ug})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.wi})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.si})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.dg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.wf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.qh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.of})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.vb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Kg})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.od})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.ud})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.Qj})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.og})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.kd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Cg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Gb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.sc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Pc})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Jg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Bg})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.rf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.mg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.tg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.rg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Gh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.hk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Fg})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.ah})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.if})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.nf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.Pj})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.zh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Zi})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.aj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.vg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.yg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.wg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Ag})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.qg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ii})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.qf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.zg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.xg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.hi})),e.d(t,"__wbindgen_debug_string",(function(){return u.Lk})),e.d(t,"__wbindgen_throw",(function(){return u.Wk})),e.d(t,"__wbindgen_memory",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper553",(function(){return u.pk})),e.d(t,"__wbindgen_closure_wrapper554",(function(){return u.qk})),e.d(t,"__wbindgen_closure_wrapper555",(function(){return u.rk})),e.d(t,"__wbindgen_closure_wrapper556",(function(){return u.sk})),e.d(t,"__wbindgen_closure_wrapper557",(function(){return u.tk})),e.d(t,"__wbindgen_closure_wrapper558",(function(){return u.uk})),e.d(t,"__wbindgen_closure_wrapper559",(function(){return u.vk})),e.d(t,"__wbindgen_closure_wrapper873",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper874",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper875",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper876",(function(){return u.Hk})),e.d(t,"__wbindgen_closure_wrapper877",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper878",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper879",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper3051",(function(){return u.nk})),e.d(t,"__wbindgen_closure_wrapper3053",(function(){return u.ok})),e.d(t,"__wbindgen_closure_wrapper6425",(function(){return u.wk})),e.d(t,"__wbindgen_closure_wrapper6426",(function(){return u.xk})),e.d(t,"__wbindgen_closure_wrapper6427",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper6428",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper6429",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper6430",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper6431",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper6569",(function(){return u.Dk})),Object(u.ji)(r),r.__wbindgen_start()},418:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(250);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/32.515f2c2e.js b/assets/js/32.515f2c2e.js deleted file mode 100644 index 39cf68699..000000000 --- a/assets/js/32.515f2c2e.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{251:function(n,t,e){"use strict";(function(n){e.d(t,"ji",(function(){return u})),e.d(t,"Xk",(function(){return F})),e.d(t,"Tk",(function(){return W})),e.d(t,"mk",(function(){return q})),e.d(t,"Ok",(function(){return z})),e.d(t,"Sk",(function(){return U})),e.d(t,"Vk",(function(){return K})),e.d(t,"sg",(function(){return Q})),e.d(t,"vi",(function(){return X})),e.d(t,"Od",(function(){return N})),e.d(t,"Gg",(function(){return Y})),e.d(t,"Hg",(function(){return H})),e.d(t,"le",(function(){return J})),e.d(t,"uh",(function(){return Z})),e.d(t,"Dh",(function(){return $})),e.d(t,"xh",(function(){return nn})),e.d(t,"Ig",(function(){return tn})),e.d(t,"Yg",(function(){return en})),e.d(t,"bk",(function(){return rn})),e.d(t,"b",(function(){return un})),e.d(t,"Vg",(function(){return fn})),e.d(t,"vh",(function(){return cn})),e.d(t,"Ch",(function(){return on})),e.d(t,"Rk",(function(){return _n})),e.d(t,"ck",(function(){return dn})),e.d(t,"Jg",(function(){return an})),e.d(t,"Bg",(function(){return bn})),e.d(t,"ef",(function(){return gn})),e.d(t,"df",(function(){return wn})),e.d(t,"Ue",(function(){return sn})),e.d(t,"Rd",(function(){return ln})),e.d(t,"sf",(function(){return mn})),e.d(t,"th",(function(){return pn})),e.d(t,"Fb",(function(){return hn})),e.d(t,"re",(function(){return xn})),e.d(t,"gf",(function(){return yn})),e.d(t,"cg",(function(){return Sn})),e.d(t,"ff",(function(){return kn})),e.d(t,"ve",(function(){return vn})),e.d(t,"Tf",(function(){return Bn})),e.d(t,"Uf",(function(){return Pn})),e.d(t,"Vf",(function(){return jn})),e.d(t,"Sf",(function(){return In})),e.d(t,"Bf",(function(){return An})),e.d(t,"Cf",(function(){return Dn})),e.d(t,"Lf",(function(){return Tn})),e.d(t,"Kf",(function(){return Cn})),e.d(t,"Nf",(function(){return Mn})),e.d(t,"Of",(function(){return Fn})),e.d(t,"Qf",(function(){return En})),e.d(t,"Rf",(function(){return Rn})),e.d(t,"Xf",(function(){return Ln})),e.d(t,"Wf",(function(){return On})),e.d(t,"Pf",(function(){return Gn})),e.d(t,"gg",(function(){return Vn})),e.d(t,"fg",(function(){return Wn})),e.d(t,"ag",(function(){return qn})),e.d(t,"Df",(function(){return zn})),e.d(t,"Yf",(function(){return Un})),e.d(t,"Zf",(function(){return Kn})),e.d(t,"Mf",(function(){return Qn})),e.d(t,"If",(function(){return Xn})),e.d(t,"Ef",(function(){return Nn})),e.d(t,"Ff",(function(){return Yn})),e.d(t,"Gf",(function(){return Hn})),e.d(t,"Hf",(function(){return Jn})),e.d(t,"Jf",(function(){return Zn})),e.d(t,"Md",(function(){return $n})),e.d(t,"Uk",(function(){return nt})),e.d(t,"Ve",(function(){return tt})),e.d(t,"fh",(function(){return et})),e.d(t,"Nk",(function(){return rt})),e.d(t,"a",(function(){return ut})),e.d(t,"c",(function(){return ft})),e.d(t,"rh",(function(){return ct})),e.d(t,"ze",(function(){return it})),e.d(t,"Qd",(function(){return ot})),e.d(t,"tf",(function(){return _t})),e.d(t,"mc",(function(){return dt})),e.d(t,"Rb",(function(){return at})),e.d(t,"Sb",(function(){return bt})),e.d(t,"bc",(function(){return gt})),e.d(t,"hc",(function(){return wt})),e.d(t,"Xb",(function(){return st})),e.d(t,"Vb",(function(){return lt})),e.d(t,"qc",(function(){return mt})),e.d(t,"lc",(function(){return pt})),e.d(t,"ec",(function(){return ht})),e.d(t,"Wb",(function(){return xt})),e.d(t,"gc",(function(){return yt})),e.d(t,"ad",(function(){return St})),e.d(t,"mi",(function(){return kt})),e.d(t,"Zg",(function(){return vt})),e.d(t,"Rg",(function(){return Bt})),e.d(t,"yf",(function(){return Pt})),e.d(t,"Kj",(function(){return jt})),e.d(t,"uc",(function(){return It})),e.d(t,"cd",(function(){return At})),e.d(t,"bd",(function(){return Dt})),e.d(t,"he",(function(){return Tt})),e.d(t,"ie",(function(){return Ct})),e.d(t,"Jb",(function(){return Mt})),e.d(t,"Kb",(function(){return Ft})),e.d(t,"Pb",(function(){return Et})),e.d(t,"Qb",(function(){return Rt})),e.d(t,"o",(function(){return Lt})),e.d(t,"Kd",(function(){return Ot})),e.d(t,"q",(function(){return Gt})),e.d(t,"Jd",(function(){return Vt})),e.d(t,"pf",(function(){return Wt})),e.d(t,"Wd",(function(){return qt})),e.d(t,"Td",(function(){return zt})),e.d(t,"hb",(function(){return Ut})),e.d(t,"gb",(function(){return Kt})),e.d(t,"kk",(function(){return Qt})),e.d(t,"yh",(function(){return Xt})),e.d(t,"Vd",(function(){return Nt})),e.d(t,"Ud",(function(){return Yt})),e.d(t,"ik",(function(){return Ht})),e.d(t,"Mj",(function(){return Jt})),e.d(t,"ui",(function(){return Zt})),e.d(t,"jk",(function(){return $t})),e.d(t,"Lb",(function(){return ne})),e.d(t,"Th",(function(){return te})),e.d(t,"Nh",(function(){return ee})),e.d(t,"Ih",(function(){return re})),e.d(t,"md",(function(){return ue})),e.d(t,"ld",(function(){return fe})),e.d(t,"Uh",(function(){return ce})),e.d(t,"Jh",(function(){return ie})),e.d(t,"Lh",(function(){return oe})),e.d(t,"Qh",(function(){return _e})),e.d(t,"Sh",(function(){return de})),e.d(t,"ei",(function(){return ae})),e.d(t,"ci",(function(){return be})),e.d(t,"Cd",(function(){return ge})),e.d(t,"zd",(function(){return we})),e.d(t,"Bd",(function(){return se})),e.d(t,"xd",(function(){return le})),e.d(t,"Vh",(function(){return me})),e.d(t,"Kh",(function(){return pe})),e.d(t,"Mh",(function(){return he})),e.d(t,"Ph",(function(){return xe})),e.d(t,"Rh",(function(){return ye})),e.d(t,"fi",(function(){return Se})),e.d(t,"di",(function(){return ke})),e.d(t,"Dd",(function(){return ve})),e.d(t,"yd",(function(){return Be})),e.d(t,"Ad",(function(){return Pe})),e.d(t,"wd",(function(){return je})),e.d(t,"Oh",(function(){return Ie})),e.d(t,"Yh",(function(){return Ae})),e.d(t,"gi",(function(){return De})),e.d(t,"Zh",(function(){return Te})),e.d(t,"Pd",(function(){return Ce})),e.d(t,"Gi",(function(){return Me})),e.d(t,"dh",(function(){return Fe})),e.d(t,"eh",(function(){return Ee})),e.d(t,"Mk",(function(){return Re})),e.d(t,"lk",(function(){return Le})),e.d(t,"Qk",(function(){return Oe})),e.d(t,"jf",(function(){return Ge})),e.d(t,"p",(function(){return Ve})),e.d(t,"t",(function(){return We})),e.d(t,"A",(function(){return qe})),e.d(t,"E",(function(){return ze})),e.d(t,"P",(function(){return Ue})),e.d(t,"S",(function(){return Ke})),e.d(t,"V",(function(){return Qe})),e.d(t,"W",(function(){return Xe})),e.d(t,"ib",(function(){return Ne})),e.d(t,"jb",(function(){return Ye})),e.d(t,"tb",(function(){return He})),e.d(t,"Cb",(function(){return Je})),e.d(t,"Ab",(function(){return Ze})),e.d(t,"Db",(function(){return $e})),e.d(t,"Eb",(function(){return nr})),e.d(t,"Ib",(function(){return tr})),e.d(t,"Ob",(function(){return er})),e.d(t,"fc",(function(){return rr})),e.d(t,"kc",(function(){return ur})),e.d(t,"tc",(function(){return fr})),e.d(t,"Gc",(function(){return cr})),e.d(t,"Jc",(function(){return ir})),e.d(t,"Mc",(function(){return or})),e.d(t,"Qc",(function(){return _r})),e.d(t,"pd",(function(){return dr})),e.d(t,"td",(function(){return ar})),e.d(t,"vd",(function(){return br})),e.d(t,"Id",(function(){return gr})),e.d(t,"Sd",(function(){return wr})),e.d(t,"ce",(function(){return sr})),e.d(t,"je",(function(){return lr})),e.d(t,"ue",(function(){return mr})),e.d(t,"Fe",(function(){return pr})),e.d(t,"Me",(function(){return hr})),e.d(t,"Ne",(function(){return xr})),e.d(t,"lf",(function(){return yr})),e.d(t,"gh",(function(){return Sr})),e.d(t,"hh",(function(){return kr})),e.d(t,"jh",(function(){return vr})),e.d(t,"nh",(function(){return Br})),e.d(t,"Ah",(function(){return Pr})),e.d(t,"Bh",(function(){return jr})),e.d(t,"Hi",(function(){return Ir})),e.d(t,"Ji",(function(){return Ar})),e.d(t,"Mi",(function(){return Dr})),e.d(t,"Ni",(function(){return Tr})),e.d(t,"Ri",(function(){return Cr})),e.d(t,"Si",(function(){return Mr})),e.d(t,"Oi",(function(){return Fr})),e.d(t,"Qi",(function(){return Er})),e.d(t,"Ti",(function(){return Rr})),e.d(t,"Wi",(function(){return Lr})),e.d(t,"Vi",(function(){return Or})),e.d(t,"Xi",(function(){return Gr})),e.d(t,"Ui",(function(){return Vr})),e.d(t,"Yi",(function(){return Wr})),e.d(t,"fj",(function(){return qr})),e.d(t,"gj",(function(){return zr})),e.d(t,"ij",(function(){return Ur})),e.d(t,"kj",(function(){return Kr})),e.d(t,"lj",(function(){return Qr})),e.d(t,"oj",(function(){return Xr})),e.d(t,"pj",(function(){return Nr})),e.d(t,"sj",(function(){return Yr})),e.d(t,"vj",(function(){return Hr})),e.d(t,"wj",(function(){return Jr})),e.d(t,"xj",(function(){return Zr})),e.d(t,"zj",(function(){return $r})),e.d(t,"Aj",(function(){return nu})),e.d(t,"Bj",(function(){return tu})),e.d(t,"Dj",(function(){return eu})),e.d(t,"Ej",(function(){return ru})),e.d(t,"Fj",(function(){return uu})),e.d(t,"Gj",(function(){return fu})),e.d(t,"Ij",(function(){return cu})),e.d(t,"Jj",(function(){return iu})),e.d(t,"Rj",(function(){return ou})),e.d(t,"Sj",(function(){return _u})),e.d(t,"g",(function(){return du})),e.d(t,"m",(function(){return au})),e.d(t,"s",(function(){return bu})),e.d(t,"v",(function(){return gu})),e.d(t,"w",(function(){return wu})),e.d(t,"y",(function(){return su})),e.d(t,"B",(function(){return lu})),e.d(t,"F",(function(){return mu})),e.d(t,"J",(function(){return pu})),e.d(t,"H",(function(){return hu})),e.d(t,"N",(function(){return xu})),e.d(t,"L",(function(){return yu})),e.d(t,"rb",(function(){return Su})),e.d(t,"lb",(function(){return ku})),e.d(t,"nb",(function(){return vu})),e.d(t,"pb",(function(){return Bu})),e.d(t,"xb",(function(){return Pu})),e.d(t,"zb",(function(){return ju})),e.d(t,"Nb",(function(){return Iu})),e.d(t,"Ub",(function(){return Au})),e.d(t,"ac",(function(){return Du})),e.d(t,"cc",(function(){return Tu})),e.d(t,"ic",(function(){return Cu})),e.d(t,"oc",(function(){return Mu})),e.d(t,"pc",(function(){return Fu})),e.d(t,"yc",(function(){return Eu})),e.d(t,"Bc",(function(){return Ru})),e.d(t,"Dc",(function(){return Lu})),e.d(t,"Fc",(function(){return Ou})),e.d(t,"Hc",(function(){return Gu})),e.d(t,"Kc",(function(){return Vu})),e.d(t,"Nc",(function(){return Wu})),e.d(t,"Vc",(function(){return qu})),e.d(t,"Wc",(function(){return zu})),e.d(t,"Zc",(function(){return Uu})),e.d(t,"id",(function(){return Ku})),e.d(t,"gd",(function(){return Qu})),e.d(t,"qd",(function(){return Xu})),e.d(t,"Hd",(function(){return Nu})),e.d(t,"Fd",(function(){return Yu})),e.d(t,"Yd",(function(){return Hu})),e.d(t,"be",(function(){return Ju})),e.d(t,"ee",(function(){return Zu})),e.d(t,"te",(function(){return $u})),e.d(t,"ye",(function(){return nf})),e.d(t,"Ae",(function(){return tf})),e.d(t,"De",(function(){return ef})),e.d(t,"He",(function(){return rf})),e.d(t,"Ie",(function(){return uf})),e.d(t,"Ke",(function(){return ff})),e.d(t,"Oe",(function(){return cf})),e.d(t,"vf",(function(){return of})),e.d(t,"Mg",(function(){return _f})),e.d(t,"Qg",(function(){return df})),e.d(t,"ph",(function(){return af})),e.d(t,"Eh",(function(){return bf})),e.d(t,"qi",(function(){return gf})),e.d(t,"yi",(function(){return wf})),e.d(t,"Bi",(function(){return sf})),e.d(t,"zi",(function(){return lf})),e.d(t,"Di",(function(){return mf})),e.d(t,"Ki",(function(){return pf})),e.d(t,"cj",(function(){return hf})),e.d(t,"ej",(function(){return xf})),e.d(t,"qj",(function(){return yf})),e.d(t,"Nj",(function(){return Sf})),e.d(t,"Tj",(function(){return kf})),e.d(t,"Yj",(function(){return vf})),e.d(t,"kf",(function(){return Bf})),e.d(t,"nd",(function(){return Pf})),e.d(t,"kg",(function(){return jf})),e.d(t,"ed",(function(){return If})),e.d(t,"eb",(function(){return Af})),e.d(t,"me",(function(){return Df})),e.d(t,"zf",(function(){return Tf})),e.d(t,"wh",(function(){return Cf})),e.d(t,"db",(function(){return Mf})),e.d(t,"sh",(function(){return Ff})),e.d(t,"qb",(function(){return Ef})),e.d(t,"bi",(function(){return Rf})),e.d(t,"ai",(function(){return Lf})),e.d(t,"R",(function(){return Of})),e.d(t,"Zj",(function(){return Gf})),e.d(t,"e",(function(){return Vf})),e.d(t,"ge",(function(){return Wf})),e.d(t,"Yb",(function(){return qf})),e.d(t,"se",(function(){return zf})),e.d(t,"ch",(function(){return Uf})),e.d(t,"bh",(function(){return Kf})),e.d(t,"Hh",(function(){return Qf})),e.d(t,"Wh",(function(){return Xf})),e.d(t,"jg",(function(){return Nf})),e.d(t,"Fi",(function(){return Yf})),e.d(t,"Xd",(function(){return Hf})),e.d(t,"U",(function(){return Jf})),e.d(t,"T",(function(){return Zf})),e.d(t,"X",(function(){return $f})),e.d(t,"Bb",(function(){return nc})),e.d(t,"ih",(function(){return tc})),e.d(t,"Ii",(function(){return ec})),e.d(t,"Pi",(function(){return rc})),e.d(t,"hj",(function(){return uc})),e.d(t,"jj",(function(){return fc})),e.d(t,"mj",(function(){return cc})),e.d(t,"nj",(function(){return ic})),e.d(t,"tj",(function(){return oc})),e.d(t,"uj",(function(){return _c})),e.d(t,"yj",(function(){return dc})),e.d(t,"Cj",(function(){return ac})),e.d(t,"Hj",(function(){return bc})),e.d(t,"f",(function(){return gc})),e.d(t,"n",(function(){return wc})),e.d(t,"r",(function(){return sc})),e.d(t,"u",(function(){return lc})),e.d(t,"x",(function(){return mc})),e.d(t,"z",(function(){return pc})),e.d(t,"C",(function(){return hc})),e.d(t,"G",(function(){return xc})),e.d(t,"K",(function(){return yc})),e.d(t,"I",(function(){return Sc})),e.d(t,"O",(function(){return kc})),e.d(t,"M",(function(){return vc})),e.d(t,"sb",(function(){return Bc})),e.d(t,"kb",(function(){return Pc})),e.d(t,"mb",(function(){return jc})),e.d(t,"ob",(function(){return Ic})),e.d(t,"wb",(function(){return Ac})),e.d(t,"yb",(function(){return Dc})),e.d(t,"Mb",(function(){return Tc})),e.d(t,"Tb",(function(){return Cc})),e.d(t,"Zb",(function(){return Mc})),e.d(t,"dc",(function(){return Fc})),e.d(t,"jc",(function(){return Ec})),e.d(t,"nc",(function(){return Rc})),e.d(t,"rc",(function(){return Lc})),e.d(t,"xc",(function(){return Oc})),e.d(t,"Ac",(function(){return Gc})),e.d(t,"Cc",(function(){return Vc})),e.d(t,"Ec",(function(){return Wc})),e.d(t,"Ic",(function(){return qc})),e.d(t,"Lc",(function(){return zc})),e.d(t,"Oc",(function(){return Uc})),e.d(t,"Uc",(function(){return Kc})),e.d(t,"Xc",(function(){return Qc})),e.d(t,"Yc",(function(){return Xc})),e.d(t,"hd",(function(){return Nc})),e.d(t,"fd",(function(){return Yc})),e.d(t,"rd",(function(){return Hc})),e.d(t,"Gd",(function(){return Jc})),e.d(t,"Ed",(function(){return Zc})),e.d(t,"Zd",(function(){return $c})),e.d(t,"ae",(function(){return ni})),e.d(t,"fe",(function(){return ti})),e.d(t,"xe",(function(){return ei})),e.d(t,"Be",(function(){return ri})),e.d(t,"Ce",(function(){return ui})),e.d(t,"Ge",(function(){return fi})),e.d(t,"Je",(function(){return ci})),e.d(t,"Pe",(function(){return ii})),e.d(t,"uf",(function(){return oi})),e.d(t,"Lg",(function(){return _i})),e.d(t,"Pg",(function(){return di})),e.d(t,"oh",(function(){return ai})),e.d(t,"Fh",(function(){return bi})),e.d(t,"pi",(function(){return gi})),e.d(t,"xi",(function(){return wi})),e.d(t,"Ci",(function(){return si})),e.d(t,"Ai",(function(){return li})),e.d(t,"Ei",(function(){return mi})),e.d(t,"Li",(function(){return pi})),e.d(t,"bj",(function(){return hi})),e.d(t,"dj",(function(){return xi})),e.d(t,"rj",(function(){return yi})),e.d(t,"Oj",(function(){return Si})),e.d(t,"Uj",(function(){return ki})),e.d(t,"Xj",(function(){return vi})),e.d(t,"Ee",(function(){return Bi})),e.d(t,"mh",(function(){return Pi})),e.d(t,"Xh",(function(){return ji})),e.d(t,"ek",(function(){return Ii})),e.d(t,"Xe",(function(){return Ai})),e.d(t,"Wj",(function(){return Di})),e.d(t,"Vj",(function(){return Ti})),e.d(t,"dk",(function(){return Ci})),e.d(t,"Ze",(function(){return Mi})),e.d(t,"sd",(function(){return Fi})),e.d(t,"ti",(function(){return Ei})),e.d(t,"lg",(function(){return Ri})),e.d(t,"d",(function(){return Li})),e.d(t,"mf",(function(){return Oi})),e.d(t,"Ng",(function(){return Gi})),e.d(t,"Wg",(function(){return Vi})),e.d(t,"Og",(function(){return Wi})),e.d(t,"ke",(function(){return qi})),e.d(t,"Xg",(function(){return zi})),e.d(t,"bg",(function(){return Ui})),e.d(t,"Af",(function(){return Ki})),e.d(t,"i",(function(){return Qi})),e.d(t,"lh",(function(){return Xi})),e.d(t,"vc",(function(){return Ni})),e.d(t,"ri",(function(){return Yi})),e.d(t,"j",(function(){return Hi})),e.d(t,"eg",(function(){return Ji})),e.d(t,"ab",(function(){return Zi})),e.d(t,"bb",(function(){return $i})),e.d(t,"hg",(function(){return no})),e.d(t,"ig",(function(){return to})),e.d(t,"Sc",(function(){return eo})),e.d(t,"Tc",(function(){return ro})),e.d(t,"Rc",(function(){return uo})),e.d(t,"h",(function(){return fo})),e.d(t,"kh",(function(){return co})),e.d(t,"hf",(function(){return io})),e.d(t,"gk",(function(){return oo})),e.d(t,"ni",(function(){return _o})),e.d(t,"Ye",(function(){return ao})),e.d(t,"li",(function(){return bo})),e.d(t,"pe",(function(){return go})),e.d(t,"qe",(function(){return wo})),e.d(t,"fk",(function(){return so})),e.d(t,"oi",(function(){return lo})),e.d(t,"We",(function(){return mo})),e.d(t,"ki",(function(){return po})),e.d(t,"ne",(function(){return ho})),e.d(t,"oe",(function(){return xo})),e.d(t,"pg",(function(){return yo})),e.d(t,"jd",(function(){return So})),e.d(t,"Dg",(function(){return ko})),e.d(t,"Eg",(function(){return vo})),e.d(t,"Lj",(function(){return Bo})),e.d(t,"Le",(function(){return Po})),e.d(t,"de",(function(){return jo})),e.d(t,"Hb",(function(){return Io})),e.d(t,"dd",(function(){return Ao})),e.d(t,"zc",(function(){return Do})),e.d(t,"Nd",(function(){return To})),e.d(t,"Ld",(function(){return Co})),e.d(t,"bf",(function(){return Mo})),e.d(t,"xf",(function(){return Fo})),e.d(t,"ak",(function(){return Eo})),e.d(t,"Sg",(function(){return Ro})),e.d(t,"Tg",(function(){return Lo})),e.d(t,"ng",(function(){return Oo})),e.d(t,"ub",(function(){return Go})),e.d(t,"Ug",(function(){return Vo})),e.d(t,"wi",(function(){return Wo})),e.d(t,"cf",(function(){return qo})),e.d(t,"Q",(function(){return zo})),e.d(t,"k",(function(){return Uo})),e.d(t,"wc",(function(){return Ko})),e.d(t,"si",(function(){return Qo})),e.d(t,"dg",(function(){return Xo})),e.d(t,"wf",(function(){return No})),e.d(t,"qh",(function(){return Yo})),e.d(t,"of",(function(){return Ho})),e.d(t,"vb",(function(){return Jo})),e.d(t,"Kg",(function(){return Zo})),e.d(t,"od",(function(){return $o})),e.d(t,"ud",(function(){return n_})),e.d(t,"Qj",(function(){return t_})),e.d(t,"og",(function(){return e_})),e.d(t,"kd",(function(){return r_})),e.d(t,"Cg",(function(){return u_})),e.d(t,"l",(function(){return f_})),e.d(t,"Gb",(function(){return c_})),e.d(t,"Qe",(function(){return i_})),e.d(t,"D",(function(){return o_})),e.d(t,"sc",(function(){return __})),e.d(t,"Pc",(function(){return d_})),e.d(t,"Re",(function(){return a_})),e.d(t,"rf",(function(){return b_})),e.d(t,"mg",(function(){return g_})),e.d(t,"tg",(function(){return w_})),e.d(t,"cb",(function(){return s_})),e.d(t,"rg",(function(){return l_})),e.d(t,"Gh",(function(){return m_})),e.d(t,"hk",(function(){return p_})),e.d(t,"Se",(function(){return h_})),e.d(t,"Te",(function(){return x_})),e.d(t,"af",(function(){return y_})),e.d(t,"Fg",(function(){return S_})),e.d(t,"ah",(function(){return k_})),e.d(t,"if",(function(){return v_})),e.d(t,"we",(function(){return B_})),e.d(t,"nf",(function(){return P_})),e.d(t,"Pj",(function(){return j_})),e.d(t,"zh",(function(){return I_})),e.d(t,"fb",(function(){return A_})),e.d(t,"Zi",(function(){return D_})),e.d(t,"aj",(function(){return T_})),e.d(t,"Y",(function(){return C_})),e.d(t,"vg",(function(){return M_})),e.d(t,"yg",(function(){return F_})),e.d(t,"wg",(function(){return E_})),e.d(t,"Ag",(function(){return R_})),e.d(t,"qg",(function(){return L_})),e.d(t,"ii",(function(){return O_})),e.d(t,"qf",(function(){return G_})),e.d(t,"zg",(function(){return V_})),e.d(t,"ug",(function(){return W_})),e.d(t,"xg",(function(){return q_})),e.d(t,"Z",(function(){return z_})),e.d(t,"hi",(function(){return U_})),e.d(t,"Lk",(function(){return K_})),e.d(t,"Wk",(function(){return Q_})),e.d(t,"Pk",(function(){return X_})),e.d(t,"xk",(function(){return N_})),e.d(t,"yk",(function(){return Y_})),e.d(t,"zk",(function(){return H_})),e.d(t,"Ak",(function(){return J_})),e.d(t,"Bk",(function(){return Z_})),e.d(t,"Ck",(function(){return $_})),e.d(t,"Dk",(function(){return nd})),e.d(t,"Ek",(function(){return td})),e.d(t,"Fk",(function(){return ed})),e.d(t,"Gk",(function(){return rd})),e.d(t,"Hk",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"nk",(function(){return od})),e.d(t,"ok",(function(){return _d})),e.d(t,"pk",(function(){return dd})),e.d(t,"qk",(function(){return ad})),e.d(t,"rk",(function(){return bd})),e.d(t,"sk",(function(){return gd})),e.d(t,"tk",(function(){return wd})),e.d(t,"uk",(function(){return sd})),e.d(t,"vk",(function(){return ld})),e.d(t,"wk",(function(){return md}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}function _(n){i===f.length&&f.push(f.length+1);const t=i;return i=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))}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,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0c90425b61ad1663(n,t,_(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h75408d0e9dfbd3cd(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h870ff4a888cf9986(n,t,_(e),_(u))}function j(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h9207625d8e242218(n,t,_(e),_(u))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd33943f2564c4d16(n,t)}function A(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3adb5b5127c7bca1(n,t,_(e))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,_(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,_(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n){return _(c(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function X(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function N(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){return c(n).offsetX}function H(n){return c(n).offsetY}function J(n){return _(c(n).getCoalescedEvents)}function Z(n){return _(c(n).requestFullscreen)}function $(n){return _(c(n).scheduler)}function nn(n){return _(c(n).requestIdleCallback)}function tn(n){return _(c(n).onpointerrawupdate)}function en(){return _(ResizeObserverEntry.prototype)}function rn(n){const t=c(n).webkitFullscreenElement;return p(t)?0:_(t)}function un(n){return _(c(n).Window)}function fn(n,t,e){return _(c(n).postTask(c(t),c(e)))}function cn(n){return _(c(n).requestFullscreen())}function on(n){return _(c(n).scheduler)}function _n(n){return _(n)}function dn(n){c(n).webkitRequestFullscreen()}function an(n){return _(c(n).performance)}function bn(n){return c(n).now()}function gn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function wn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function sn(n){return _(c(n).gpu)}function ln(n){return _(c(n).features)}function mn(n){return _(c(n).limits)}function pn(n,t){return _(c(n).requestDevice(c(t)))}function hn(n,t){c(n).configure(c(t))}function xn(n){return _(c(n).getCurrentTexture())}function yn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function Sn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function kn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function vn(n,t,e){return _(c(n).getMappedRange(t,e))}function Bn(n){return c(n).maxTextureDimension1D}function Pn(n){return c(n).maxTextureDimension2D}function jn(n){return c(n).maxTextureDimension3D}function In(n){return c(n).maxTextureArrayLayers}function An(n){return c(n).maxBindGroups}function Dn(n){return c(n).maxBindingsPerBindGroup}function Tn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Cn(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function Mn(n){return c(n).maxSampledTexturesPerShaderStage}function Fn(n){return c(n).maxSamplersPerShaderStage}function En(n){return c(n).maxStorageBuffersPerShaderStage}function Rn(n){return c(n).maxStorageTexturesPerShaderStage}function Ln(n){return c(n).maxUniformBuffersPerShaderStage}function On(n){return c(n).maxUniformBufferBindingSize}function Gn(n){return c(n).maxStorageBufferBindingSize}function Vn(n){return c(n).minUniformBufferOffsetAlignment}function Wn(n){return c(n).minStorageBufferOffsetAlignment}function qn(n){return c(n).maxVertexBuffers}function zn(n){return c(n).maxBufferSize}function Un(n){return c(n).maxVertexAttributes}function Kn(n){return c(n).maxVertexBufferArrayStride}function Qn(n){return c(n).maxInterStageShaderComponents}function Xn(n){return c(n).maxComputeWorkgroupStorageSize}function Nn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Yn(n){return c(n).maxComputeWorkgroupSizeX}function Hn(n){return c(n).maxComputeWorkgroupSizeY}function Jn(n){return c(n).maxComputeWorkgroupSizeZ}function Zn(n){return c(n).maxComputeWorkgroupsPerDimension}function $n(n){return _(c(n).error)}function nt(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function tt(n,t,e){return c(n).has(g(t,e))}function et(n){return _(c(n).queue)}function rt(n){const t=c(n);return"object"==typeof t&&null!==t}function ut(n){return _(c(n).Window)}function ft(n){return _(c(n).WorkerGlobalScope)}function ct(n,t){return _(c(n).requestAdapter(c(t)))}function it(n){return _(c(n).getPreferredCanvasFormat())}function ot(n){return _(c(n).features)}function _t(n){return _(c(n).limits)}function dt(n,t){return _(c(n).createShaderModule(c(t)))}function at(n,t){return _(c(n).createBindGroupLayout(c(t)))}function bt(n,t){return _(c(n).createBindGroup(c(t)))}function gt(n,t){return _(c(n).createPipelineLayout(c(t)))}function wt(n,t){return _(c(n).createRenderPipeline(c(t)))}function st(n,t){return _(c(n).createComputePipeline(c(t)))}function lt(n,t){return _(c(n).createBuffer(c(t)))}function mt(n,t){return _(c(n).createTexture(c(t)))}function pt(n,t){return _(c(n).createSampler(c(t)))}function ht(n,t){return _(c(n).createQuerySet(c(t)))}function xt(n,t){return _(c(n).createCommandEncoder(c(t)))}function yt(n,t){return _(c(n).createRenderBundleEncoder(c(t)))}function St(n){c(n).destroy()}function kt(n,t){c(n).onuncapturederror=c(t)}function vt(n,t){c(n).pushErrorScope(o(t))}function Bt(n){return _(c(n).popErrorScope())}function Pt(n,t,e,r){return _(c(n).mapAsync(t>>>0,e,r))}function jt(n){c(n).unmap()}function It(n,t){return _(c(n).createView(c(t)))}function At(n){c(n).destroy()}function Dt(n){c(n).destroy()}function Tt(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Ct(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Mt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Ft(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Et(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Lt(n,t){return _(c(n).beginComputePass(c(t)))}function Ot(n){c(n).end()}function Gt(n,t){return _(c(n).beginRenderPass(c(t)))}function Vt(n){c(n).end()}function Wt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function qt(n,t){return _(c(n).finish(c(t)))}function zt(n){return _(c(n).finish())}function Ut(n,t,e){c(n).clearBuffer(c(t),e)}function Kt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Qt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Xt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Nt(n){return _(c(n).finish())}function Yt(n,t){return _(c(n).finish(c(t)))}function Ht(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Jt(n){return c(n).usage}function Zt(n){return c(n).size}function $t(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function ne(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function te(n,t){c(n).setPipeline(c(t))}function ee(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function re(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ue(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function fe(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function ce(n,t){c(n).setPipeline(c(t))}function ie(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function oe(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function _e(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function de(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ae(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function be(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function ge(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function we(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function se(n,t,e){c(n).drawIndirect(c(t),e)}function le(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function me(n,t){c(n).setPipeline(c(t))}function pe(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function he(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function xe(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function ye(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Se(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ke(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function ve(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Be(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Pe(n,t,e){c(n).drawIndirect(c(t),e)}function je(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ie(n,t){c(n).setBlendConstant(c(t))}function Ae(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function De(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Te(n,t){c(n).setStencilReference(t>>>0)}function Ce(n,t){c(n).executeBundles(c(t))}function Me(n,t){c(n).submit(c(t))}function Fe(n){queueMicrotask(c(n))}function Ee(n){return _(c(n).queueMicrotask)}function Re(n){return"function"==typeof c(n)}function Le(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Oe(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Ge(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Ve(n,t,e){c(n).beginQuery(t>>>0,c(e))}function We(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function qe(n,t,e){c(n).bindSampler(t>>>0,c(e))}function ze(n,t){c(n).bindVertexArray(c(t))}function Ue(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function Ke(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Qe(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Xe(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Ne(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function Ye(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function He(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Je(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function Ze(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function $e(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function nr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function tr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function er(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function rr(n){const t=c(n).createQuery();return p(t)?0:_(t)}function ur(n){const t=c(n).createSampler();return p(t)?0:_(t)}function fr(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function cr(n,t){c(n).deleteQuery(c(t))}function ir(n,t){c(n).deleteSampler(c(t))}function or(n,t){c(n).deleteSync(c(t))}function _r(n,t){c(n).deleteVertexArray(c(t))}function dr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function ar(n,t){c(n).drawBuffers(c(t))}function br(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function gr(n,t){c(n).endQuery(t>>>0)}function wr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function sr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function lr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function mr(){return O((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function pr(n,t,e){return _(c(n).getQueryParameter(c(t),e>>>0))}function hr(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function xr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function yr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Sr(n,t){c(n).readBuffer(t>>>0)}function kr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function vr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Br(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Pr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function jr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Ir(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Ar(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Dr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Tr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Cr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Wr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function qr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function zr(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function Ur(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function Kr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Qr(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Xr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Nr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Yr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Hr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Jr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function Zr(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function $r(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function nu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function cu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function iu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function ou(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function _u(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function du(n,t){c(n).activeTexture(t>>>0)}function au(n,t,e){c(n).attachShader(c(t),c(e))}function bu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function gu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function wu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function su(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function lu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function mu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function pu(n,t){c(n).blendEquation(t>>>0)}function hu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function xu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function yu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Su(n,t){c(n).clear(t>>>0)}function ku(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function vu(n,t){c(n).clearDepth(t)}function Bu(n,t){c(n).clearStencil(t)}function Pu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ju(n,t){c(n).compileShader(c(t))}function Iu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Au(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Du(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Tu(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Cu(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Mu(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Fu(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Eu(n,t){c(n).cullFace(t>>>0)}function Ru(n,t){c(n).deleteBuffer(c(t))}function Lu(n,t){c(n).deleteFramebuffer(c(t))}function Ou(n,t){c(n).deleteProgram(c(t))}function Gu(n,t){c(n).deleteRenderbuffer(c(t))}function Vu(n,t){c(n).deleteShader(c(t))}function Wu(n,t){c(n).deleteTexture(c(t))}function qu(n,t){c(n).depthFunc(t>>>0)}function zu(n,t){c(n).depthMask(0!==t)}function Uu(n,t,e){c(n).depthRange(t,e)}function Ku(n,t){c(n).disable(t>>>0)}function Qu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Xu(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Nu(n,t){c(n).enable(t>>>0)}function Yu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Hu(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Ju(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Zu(n,t){c(n).frontFace(t>>>0)}function $u(){return O((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function nf(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function tf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ef(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function rf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function uf(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function ff(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function cf(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function of(n,t){c(n).linkProgram(c(t))}function _f(n,t,e){c(n).pixelStorei(t>>>0,e)}function df(n,t,e){c(n).polygonOffset(t,e)}function af(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function bf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function gf(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function wf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function sf(n,t){c(n).stencilMask(t>>>0)}function lf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function mf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function pf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function hf(n,t,e){c(n).uniform1f(c(t),e)}function xf(n,t,e){c(n).uniform1i(c(t),e)}function yf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Sf(n,t){c(n).useProgram(c(t))}function kf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function vf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Bf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Pf(n){const t=c(n).document;return p(t)?0:_(t)}function jf(n){return _(c(n).navigator)}function If(n){return c(n).devicePixelRatio}function Af(n,t){c(n).cancelIdleCallback(t>>>0)}function Df(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:_(e)}),arguments)}function Tf(){return O((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function Cf(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Mf(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ff(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Ef(n,t){c(n).clearTimeout(t)}function Rf(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Lf(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Of(n){const t=c(n).body;return p(t)?0:_(t)}function Gf(n){return _(c(n).visibilityState)}function Vf(n){const t=c(n).activeElement;return p(t)?0:_(t)}function Wf(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function qf(){return O((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function zf(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function Uf(){return O((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function Kf(){return O((function(n,t,e){return _(c(n).querySelectorAll(g(t,e)))}),arguments)}function Qf(){return O((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function Xf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Nf(n){return _(c(n).navigator)}function Yf(n){return _(c(n).style)}function Hf(){return O((function(n){c(n).focus()}),arguments)}function Jf(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Zf(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function $f(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function nc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function tc(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function ec(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function rc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function uc(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function fc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function cc(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function ic(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function oc(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function _c(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function dc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function ac(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function bc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function gc(n,t){c(n).activeTexture(t>>>0)}function wc(n,t,e){c(n).attachShader(c(t),c(e))}function sc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function lc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function mc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function pc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function hc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function xc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function yc(n,t){c(n).blendEquation(t>>>0)}function Sc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function kc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function vc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Bc(n,t){c(n).clear(t>>>0)}function Pc(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function jc(n,t){c(n).clearDepth(t)}function Ic(n,t){c(n).clearStencil(t)}function Ac(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Dc(n,t){c(n).compileShader(c(t))}function Tc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Cc(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Mc(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Fc(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Ec(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Rc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Lc(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Oc(n,t){c(n).cullFace(t>>>0)}function Gc(n,t){c(n).deleteBuffer(c(t))}function Vc(n,t){c(n).deleteFramebuffer(c(t))}function Wc(n,t){c(n).deleteProgram(c(t))}function qc(n,t){c(n).deleteRenderbuffer(c(t))}function zc(n,t){c(n).deleteShader(c(t))}function Uc(n,t){c(n).deleteTexture(c(t))}function Kc(n,t){c(n).depthFunc(t>>>0)}function Qc(n,t){c(n).depthMask(0!==t)}function Xc(n,t,e){c(n).depthRange(t,e)}function Nc(n,t){c(n).disable(t>>>0)}function Yc(n,t){c(n).disableVertexAttribArray(t>>>0)}function Hc(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Jc(n,t){c(n).enable(t>>>0)}function Zc(n,t){c(n).enableVertexAttribArray(t>>>0)}function $c(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ni(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function ti(n,t){c(n).frontFace(t>>>0)}function ei(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function ri(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ui(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function fi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ci(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function ii(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function oi(n,t){c(n).linkProgram(c(t))}function _i(n,t,e){c(n).pixelStorei(t>>>0,e)}function di(n,t,e){c(n).polygonOffset(t,e)}function ai(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function bi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function gi(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function wi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function si(n,t){c(n).stencilMask(t>>>0)}function li(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function mi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function pi(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function hi(n,t,e){c(n).uniform1f(c(t),e)}function xi(n,t,e){c(n).uniform1i(c(t),e)}function yi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Si(n,t){c(n).useProgram(c(t))}function ki(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function vi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Bi(){return O((function(n,t,e,u){const f=m(c(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Pi(){return O((function(n,t,e,u){const f=m(c(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function ji(){return O((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Ii(n){return c(n).width}function Ai(n){return c(n).height}function Di(n){return c(n).videoWidth}function Ti(n){return c(n).videoHeight}function Ci(n){return c(n).width}function Mi(n){return c(n).height}function Fi(n,t){c(n).drawBuffersWEBGL(c(t))}function Ei(n){return _(c(n).signal)}function Ri(){return O((function(){return _(new AbortController)}),arguments)}function Li(n){c(n).abort()}function Oi(n){return c(n).isIntersecting}function Gi(n){return c(n).pointerId}function Vi(n){return c(n).pressure}function Wi(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function qi(n){return _(c(n).getCoalescedEvents())}function zi(n){c(n).preventDefault()}function Ui(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ki(n){return c(n).matches}function Qi(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Xi(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Ni(n){return c(n).ctrlKey}function Yi(n){return c(n).shiftKey}function Hi(n){return c(n).altKey}function Ji(n){return c(n).metaKey}function Zi(n){return c(n).button}function $i(n){return c(n).buttons}function no(n){return c(n).movementX}function to(n){return c(n).movementY}function eo(n){return c(n).deltaX}function ro(n){return c(n).deltaY}function uo(n){return c(n).deltaMode}function fo(){return O((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function co(){return O((function(n,t,e,r){c(n).removeEventListener(g(t,e),c(r))}),arguments)}function io(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function oo(n){return c(n).width}function _o(n,t){c(n).width=t>>>0}function ao(n){return c(n).height}function bo(n,t){c(n).height=t>>>0}function go(){return O((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function wo(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function so(n){return c(n).width}function lo(n,t){c(n).width=t>>>0}function mo(n){return c(n).height}function po(n,t){c(n).height=t>>>0}function ho(){return O((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function xo(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function yo(){return O((function(n){return _(new ResizeObserver(c(n)))}),arguments)}function So(n){c(n).disconnect()}function ko(n,t){c(n).observe(c(t))}function vo(n,t,e){c(n).observe(c(t),c(e))}function Bo(n,t){c(n).unobserve(c(t))}function Po(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function jo(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Io(n){return _(c(n).contentRect)}function Ao(n){return _(c(n).devicePixelContentBoxSize)}function Do(n){console.debug(c(n))}function To(n){console.error(c(n))}function Co(n,t){console.error(c(n),c(t))}function Mo(n){console.info(c(n))}function Fo(n){console.log(c(n))}function Eo(n){console.warn(c(n))}function Ro(n){return _(c(n).port1)}function Lo(n){return _(c(n).port2)}function Oo(){return O((function(){return _(new MessageChannel)}),arguments)}function Go(n){c(n).close()}function Vo(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Wo(n){c(n).start()}function qo(n){return c(n).inlineSize}function zo(n){return c(n).blockSize}function Uo(n){return c(n).altKey}function Ko(n){return c(n).ctrlKey}function Qo(n){return c(n).shiftKey}function Xo(n){return c(n).metaKey}function No(n){return c(n).location}function Yo(n){return c(n).repeat}function Ho(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Jo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Zo(n){return c(n).persisted}function $o(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function n_(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function t_(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function e_(){return O((function(n){return _(new IntersectionObserver(c(n)))}),arguments)}function r_(n){c(n).disconnect()}function u_(n,t){c(n).observe(c(t))}function f_(){return O((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function c_(n,t){return c(n).contains(c(t))}function i_(n,t){const e=c(n)[t>>>0];return p(e)?0:_(e)}function o_(n,t){c(n).bindVertexArrayOES(c(t))}function __(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function d_(n,t){c(n).deleteVertexArrayOES(c(t))}function a_(n,t){return _(c(n)[t>>>0])}function b_(n){return c(n).length}function g_(){return _(new Array)}function w_(n,t){return _(new Function(g(n,t)))}function s_(){return O((function(n,t){return _(c(n).call(c(t)))}),arguments)}function l_(){return _(new Object)}function m_(){return O((function(){return _(self.self)}),arguments)}function p_(){return O((function(){return _(window.window)}),arguments)}function h_(){return O((function(){return _(globalThis.globalThis)}),arguments)}function x_(){return O((function(){return _(global.global)}),arguments)}function y_(n,t,e){return c(n).includes(c(t),e)}function S_(n){return _(Array.of(c(n)))}function k_(n,t){return c(n).push(c(t))}function v_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function B_(n,t){return _(Object.getOwnPropertyDescriptor(c(n),c(t)))}function P_(n,t){return Object.is(c(n),c(t))}function j_(n){return _(c(n).valueOf())}function I_(n){return _(Promise.resolve(c(n)))}function A_(n,t){return _(c(n).catch(c(t)))}function D_(n,t){return _(c(n).then(c(t)))}function T_(n,t,e){return _(c(n).then(c(t),c(e)))}function C_(n){return _(c(n).buffer)}function M_(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function F_(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function E_(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function R_(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function L_(n){return _(new Uint8Array(c(n)))}function O_(n,t,e){c(n).set(c(t),e>>>0)}function G_(n){return c(n).length}function V_(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function W_(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function q_(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function z_(n){return _(c(n).buffer)}function U_(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function K_(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;x()[n/4+1]=u,x()[n/4+0]=e}function Q_(n,t){throw new Error(g(n,t))}function X_(){return _(r.memory)}function N_(n,t,e){return _(k(n,t,9,v))}function Y_(n,t,e){return _(k(n,t,9,v))}function H_(n,t,e){return _(k(n,t,9,v))}function J_(n,t,e){return _(k(n,t,9,v))}function Z_(n,t,e){return _(k(n,t,9,B))}function $_(n,t,e){return _(k(n,t,9,v))}function nd(n,t,e){return _(k(n,t,9,P))}function td(n,t,e){return _(k(n,t,201,j))}function ed(n,t,e){return _(k(n,t,201,I))}function rd(n,t,e){return _(k(n,t,201,A))}function ud(n,t,e){return _(k(n,t,201,A))}function fd(n,t,e){return _(k(n,t,201,A))}function cd(n,t,e){return _(k(n,t,201,A))}function id(n,t,e){return _(k(n,t,201,A))}function od(n,t,e){return _(k(n,t,366,D))}function _d(n,t,e){return _(k(n,t,366,D))}function dd(n,t,e){return _(k(n,t,366,D))}function ad(n,t,e){return _(k(n,t,366,T))}function bd(n,t,e){return _(k(n,t,366,D))}function gd(n,t,e){return _(k(n,t,366,D))}function wd(n,t,e){return _(k(n,t,366,D))}function sd(n,t,e){return _(k(n,t,1509,C))}function ld(n,t,e){return _(k(n,t,1509,C))}function md(n,t,e){return _(k(n,t,1603,M))}}).call(this,e(260)(n))},419:function(n,t,e){"use strict";e.r(t);var r=e(420),u=e(251);e.d(t,"__wbg_set_wasm",(function(){return u.ji})),e.d(t,"run",(function(){return u.Xk})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Tk})),e.d(t,"__wbindgen_cb_drop",(function(){return u.mk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Ok})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.Sk})),e.d(t,"__wbindgen_string_new",(function(){return u.Vk})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.sg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.vi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Od})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Gg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Hg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.le})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.uh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Dh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.xh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Ig})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.Yg})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.bk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.Vg})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.vh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Ch})),e.d(t,"__wbindgen_number_new",(function(){return u.Rk})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ck})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Jg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Bg})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.df})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.Ue})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Rd})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.sf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.th})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Fb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.re})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.gf})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.cg})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.ff})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.ve})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.Tf})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.Uf})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.Vf})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.Sf})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Bf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Cf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Lf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Kf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Nf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Of})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.Qf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.Rf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.Pf})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.gg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.fg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.ag})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Df})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.Yf})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.Zf})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.If})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Ef})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Ff})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Gf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Hf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Jf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Md})),e.d(t,"__wbindgen_string_get",(function(){return u.Uk})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.Ve})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.fh})),e.d(t,"__wbindgen_is_object",(function(){return u.Nk})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.rh})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.ze})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Qd})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.tf})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.mc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Sb})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.bc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.hc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Xb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Vb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.qc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.lc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.ec})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Wb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.gc})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.ad})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.mi})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.Zg})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.Rg})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.yf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.Kj})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.uc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.cd})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.bd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.he})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ie})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Jb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Kb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Pb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Qb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.o})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Kd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.q})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Jd})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.pf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.Wd})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Td})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.hb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.gb})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.kk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.yh})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.Vd})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Ud})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.ik})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.Mj})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.ui})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.jk})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Lb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.Nh})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Ih})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.md})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.ld})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.Uh})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.Jh})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.Lh})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.Qh})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.Sh})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.ei})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.ci})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.xd})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.Kh})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.Mh})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.Ph})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.Rh})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.di})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.wd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.Oh})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.Yh})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.gi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.Zh})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Pd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Gi})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.dh})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.eh})),e.d(t,"__wbindgen_is_function",(function(){return u.Mk})),e.d(t,"__wbindgen_boolean_get",(function(){return u.lk})),e.d(t,"__wbindgen_number_get",(function(){return u.Qk})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.jf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.ib})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.jb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.tb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Ab})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Eb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Ib})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Ob})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.fc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.kc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.tc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Gc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Jc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Mc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Qc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.pd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.td})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.vd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Id})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Sd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ce})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.je})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.lf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.gh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.hh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.jh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.nh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Ah})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Bh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Hi})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ji})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Mi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Ni})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.Ri})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.Si})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Oi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.Qi})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.Wi})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.Vi})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Xi})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.Ui})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Yi})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.fj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.gj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.ij})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.kj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.lj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.oj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.pj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.sj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.vj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.wj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.xj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.zj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Aj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Bj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Dj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Ej})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Fj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Ij})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Jj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.Rj})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.Sj})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.rb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.lb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.pb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.xb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.ac})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.ic})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.oc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.pc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Zc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.qd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Hd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Fd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.be})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ee})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.vf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Mg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.Qg})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.ph})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Eh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.qi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.yi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Bi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.zi})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Di})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Ki})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.cj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.ej})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.qj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Nj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Tj})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Yj})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.kf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.nd})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.kg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.ed})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.zf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.wh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.sh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.qb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.bi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.ai})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Zj})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ge})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Yb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.ch})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.bh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Hh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.Wh})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.jg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Fi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Xd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Bb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.ih})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ii})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.Pi})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.hj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.jj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.mj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.nj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.tj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.uj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.yj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Cj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Hj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.sb})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.kb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.ob})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.wb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.jc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.nc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.rc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Yc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.rd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Zd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ae})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.fe})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.uf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Lg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Pg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.oh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Fh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.pi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.xi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ci})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Ai})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Ei})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Li})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.bj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.dj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.rj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.Oj})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Uj})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Xj})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.mh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.Xh})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.ek})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Wj})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Vj})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.dk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.sd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.ti})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.lg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.mf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Ng})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.Wg})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Og})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.ke})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.Xg})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.bg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Af})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.lh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.ri})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.eg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.hg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.ig})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Sc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Tc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Rc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.kh})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.hf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.gk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.ni})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.li})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.fk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.oi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.ki})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.pg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.jd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Dg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Eg})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Lj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.de})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Hb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.dd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.zc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Nd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Ld})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.xf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.ak})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.Sg})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.Tg})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.ng})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.ub})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.Ug})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.wi})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.si})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.dg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.wf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.qh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.of})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.vb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Kg})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.od})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.ud})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.Qj})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.og})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.kd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Cg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Gb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.sc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Pc})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.rf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.mg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.tg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.rg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Gh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.hk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Fg})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.ah})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.if})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.nf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.Pj})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.zh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Zi})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.aj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.vg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.yg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.wg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Ag})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.qg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ii})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.qf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.zg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.xg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.hi})),e.d(t,"__wbindgen_debug_string",(function(){return u.Lk})),e.d(t,"__wbindgen_throw",(function(){return u.Wk})),e.d(t,"__wbindgen_memory",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper553",(function(){return u.xk})),e.d(t,"__wbindgen_closure_wrapper554",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper555",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper556",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper557",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper558",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper559",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper961",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper962",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper963",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper964",(function(){return u.Hk})),e.d(t,"__wbindgen_closure_wrapper965",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper966",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper967",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper1317",(function(){return u.nk})),e.d(t,"__wbindgen_closure_wrapper1318",(function(){return u.ok})),e.d(t,"__wbindgen_closure_wrapper1319",(function(){return u.pk})),e.d(t,"__wbindgen_closure_wrapper1320",(function(){return u.qk})),e.d(t,"__wbindgen_closure_wrapper1321",(function(){return u.rk})),e.d(t,"__wbindgen_closure_wrapper1322",(function(){return u.sk})),e.d(t,"__wbindgen_closure_wrapper1323",(function(){return u.tk})),e.d(t,"__wbindgen_closure_wrapper3327",(function(){return u.uk})),e.d(t,"__wbindgen_closure_wrapper3329",(function(){return u.vk})),e.d(t,"__wbindgen_closure_wrapper4100",(function(){return u.wk})),Object(u.ji)(r),r.__wbindgen_start()},420:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(251);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/32.8d663613.js b/assets/js/32.8d663613.js new file mode 100644 index 000000000..7c3a99109 --- /dev/null +++ b/assets/js/32.8d663613.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{252:function(n,t,e){"use strict";(function(n){e.d(t,"ui",(function(){return u})),e.d(t,"il",(function(){return F})),e.d(t,"el",(function(){return W})),e.d(t,"xk",(function(){return q})),e.d(t,"Zk",(function(){return z})),e.d(t,"dl",(function(){return U})),e.d(t,"gl",(function(){return K})),e.d(t,"Bg",(function(){return Q})),e.d(t,"Gi",(function(){return N})),e.d(t,"Nd",(function(){return X})),e.d(t,"Pg",(function(){return Y})),e.d(t,"Qg",(function(){return H})),e.d(t,"b",(function(){return J})),e.d(t,"nk",(function(){return Z})),e.d(t,"ih",(function(){return $})),e.d(t,"Oh",(function(){return nn})),e.d(t,"ke",(function(){return tn})),e.d(t,"Fh",(function(){return en})),e.d(t,"Ih",(function(){return rn})),e.d(t,"Sg",(function(){return un})),e.d(t,"ok",(function(){return fn})),e.d(t,"Gh",(function(){return cn})),e.d(t,"Nh",(function(){return on})),e.d(t,"fh",(function(){return _n})),e.d(t,"cl",(function(){return dn})),e.d(t,"Tg",(function(){return an})),e.d(t,"Kg",(function(){return bn})),e.d(t,"ff",(function(){return gn})),e.d(t,"ef",(function(){return wn})),e.d(t,"hf",(function(){return sn})),e.d(t,"gf",(function(){return ln})),e.d(t,"Fi",(function(){return mn})),e.d(t,"Yj",(function(){return pn})),e.d(t,"Zc",(function(){return hn})),e.d(t,"ve",(function(){return xn})),e.d(t,"Cf",(function(){return yn})),e.d(t,"Wj",(function(){return Sn})),e.d(t,"ld",(function(){return kn})),e.d(t,"kd",(function(){return vn})),e.d(t,"Jd",(function(){return Bn})),e.d(t,"ei",(function(){return Pn})),e.d(t,"Vh",(function(){return In})),e.d(t,"Xh",(function(){return jn})),e.d(t,"fl",(function(){return An})),e.d(t,"he",(function(){return Dn})),e.d(t,"df",(function(){return Tn})),e.d(t,"Ue",(function(){return Cn})),e.d(t,"ze",(function(){return Mn})),e.d(t,"Ch",(function(){return Fn})),e.d(t,"ge",(function(){return En})),e.d(t,"kg",(function(){return Rn})),e.d(t,"Sd",(function(){return Ln})),e.d(t,"Vd",(function(){return On})),e.d(t,"Wh",(function(){return Gn})),e.d(t,"Uh",(function(){return Vn})),e.d(t,"Bd",(function(){return Wn})),e.d(t,"xd",(function(){return qn})),e.d(t,"vd",(function(){return zn})),e.d(t,"zd",(function(){return Un})),e.d(t,"bi",(function(){return Kn})),e.d(t,"ci",(function(){return Qn})),e.d(t,"gi",(function(){return Nn})),e.d(t,"oi",(function(){return Xn})),e.d(t,"ni",(function(){return Yn})),e.d(t,"Qd",(function(){return Hn})),e.d(t,"vf",(function(){return Jn})),e.d(t,"ph",(function(){return Zn})),e.d(t,"Bf",(function(){return $n})),e.d(t,"xi",(function(){return nt})),e.d(t,"Rb",(function(){return tt})),e.d(t,"Qb",(function(){return et})),e.d(t,"Ub",(function(){return rt})),e.d(t,"Vb",(function(){return ut})),e.d(t,"Wb",(function(){return ft})),e.d(t,"ac",(function(){return ct})),e.d(t,"dc",(function(){return it})),e.d(t,"fc",(function(){return ot})),e.d(t,"gc",(function(){return _t})),e.d(t,"kc",(function(){return dt})),e.d(t,"lc",(function(){return at})),e.d(t,"pc",(function(){return bt})),e.d(t,"ad",(function(){return gt})),e.d(t,"bh",(function(){return wt})),e.d(t,"jh",(function(){return st})),e.d(t,"tc",(function(){return lt})),e.d(t,"bd",(function(){return mt})),e.d(t,"mj",(function(){return pt})),e.d(t,"Rg",(function(){return ht})),e.d(t,"rf",(function(){return xt})),e.d(t,"wf",(function(){return yt})),e.d(t,"ig",(function(){return St})),e.d(t,"Eb",(function(){return kt})),e.d(t,"re",(function(){return vt})),e.d(t,"uh",(function(){return Bt})),e.d(t,"jg",(function(){return Pt})),e.d(t,"Id",(function(){return It})),e.d(t,"Od",(function(){return jt})),e.d(t,"Zh",(function(){return At})),e.d(t,"ji",(function(){return Dt})),e.d(t,"ki",(function(){return Tt})),e.d(t,"ri",(function(){return Ct})),e.d(t,"Th",(function(){return Mt})),e.d(t,"Yh",(function(){return Ft})),e.d(t,"Cd",(function(){return Et})),e.d(t,"yd",(function(){return Rt})),e.d(t,"wd",(function(){return Lt})),e.d(t,"Ad",(function(){return Ot})),e.d(t,"ai",(function(){return Gt})),e.d(t,"di",(function(){return Vt})),e.d(t,"fi",(function(){return Wt})),e.d(t,"qi",(function(){return qt})),e.d(t,"pi",(function(){return zt})),e.d(t,"le",(function(){return Ut})),e.d(t,"qf",(function(){return Kt})),e.d(t,"o",(function(){return Qt})),e.d(t,"q",(function(){return Nt})),e.d(t,"gb",(function(){return Xt})),e.d(t,"hb",(function(){return Yt})),e.d(t,"Ib",(function(){return Ht})),e.d(t,"Jb",(function(){return Jt})),e.d(t,"Ob",(function(){return Zt})),e.d(t,"Pb",(function(){return $t})),e.d(t,"Ud",(function(){return ne})),e.d(t,"Td",(function(){return te})),e.d(t,"Jh",(function(){return ee})),e.d(t,"Md",(function(){return re})),e.d(t,"Ve",(function(){return ue})),e.d(t,"Zf",(function(){return fe})),e.d(t,"ag",(function(){return ce})),e.d(t,"bg",(function(){return ie})),e.d(t,"Yf",(function(){return oe})),e.d(t,"Ff",(function(){return _e})),e.d(t,"Gf",(function(){return de})),e.d(t,"Rf",(function(){return ae})),e.d(t,"Qf",(function(){return be})),e.d(t,"Tf",(function(){return ge})),e.d(t,"Uf",(function(){return we})),e.d(t,"Wf",(function(){return se})),e.d(t,"Xf",(function(){return le})),e.d(t,"dg",(function(){return me})),e.d(t,"cg",(function(){return pe})),e.d(t,"Vf",(function(){return he})),e.d(t,"gg",(function(){return xe})),e.d(t,"Hf",(function(){return ye})),e.d(t,"eg",(function(){return Se})),e.d(t,"fg",(function(){return ke})),e.d(t,"pg",(function(){return ve})),e.d(t,"og",(function(){return Be})),e.d(t,"Sf",(function(){return Pe})),e.d(t,"Jf",(function(){return Ie})),e.d(t,"If",(function(){return je})),e.d(t,"Of",(function(){return Ae})),e.d(t,"Kf",(function(){return De})),e.d(t,"Lf",(function(){return Te})),e.d(t,"Mf",(function(){return Ce})),e.d(t,"Nf",(function(){return Me})),e.d(t,"Pf",(function(){return Fe})),e.d(t,"Yk",(function(){return Ee})),e.d(t,"a",(function(){return Re})),e.d(t,"c",(function(){return Le})),e.d(t,"Eh",(function(){return Oe})),e.d(t,"Pd",(function(){return Ge})),e.d(t,"uf",(function(){return Ve})),e.d(t,"lg",(function(){return We})),e.d(t,"uk",(function(){return qe})),e.d(t,"vk",(function(){return ze})),e.d(t,"Kb",(function(){return Ue})),e.d(t,"Ri",(function(){return Ke})),e.d(t,"oh",(function(){return Qe})),e.d(t,"nh",(function(){return Ne})),e.d(t,"Xk",(function(){return Xe})),e.d(t,"wk",(function(){return Ye})),e.d(t,"bl",(function(){return He})),e.d(t,"kf",(function(){return Je})),e.d(t,"p",(function(){return Ze})),e.d(t,"t",(function(){return $e})),e.d(t,"A",(function(){return nr})),e.d(t,"E",(function(){return tr})),e.d(t,"P",(function(){return er})),e.d(t,"S",(function(){return rr})),e.d(t,"V",(function(){return ur})),e.d(t,"W",(function(){return fr})),e.d(t,"ib",(function(){return cr})),e.d(t,"jb",(function(){return ir})),e.d(t,"kb",(function(){return or})),e.d(t,"sb",(function(){return _r})),e.d(t,"Bb",(function(){return dr})),e.d(t,"zb",(function(){return ar})),e.d(t,"Cb",(function(){return br})),e.d(t,"Db",(function(){return gr})),e.d(t,"Hb",(function(){return wr})),e.d(t,"Nb",(function(){return sr})),e.d(t,"ec",(function(){return lr})),e.d(t,"jc",(function(){return mr})),e.d(t,"sc",(function(){return pr})),e.d(t,"Fc",(function(){return hr})),e.d(t,"Ic",(function(){return xr})),e.d(t,"Lc",(function(){return yr})),e.d(t,"Pc",(function(){return Sr})),e.d(t,"od",(function(){return kr})),e.d(t,"sd",(function(){return vr})),e.d(t,"ud",(function(){return Br})),e.d(t,"Hd",(function(){return Pr})),e.d(t,"Rd",(function(){return Ir})),e.d(t,"be",(function(){return jr})),e.d(t,"ie",(function(){return Ar})),e.d(t,"ue",(function(){return Dr})),e.d(t,"Fe",(function(){return Tr})),e.d(t,"Me",(function(){return Cr})),e.d(t,"Ne",(function(){return Mr})),e.d(t,"mf",(function(){return Fr})),e.d(t,"qh",(function(){return Er})),e.d(t,"rh",(function(){return Rr})),e.d(t,"th",(function(){return Lr})),e.d(t,"yh",(function(){return Or})),e.d(t,"Lh",(function(){return Gr})),e.d(t,"Mh",(function(){return Vr})),e.d(t,"Si",(function(){return Wr})),e.d(t,"Ui",(function(){return qr})),e.d(t,"Xi",(function(){return zr})),e.d(t,"Yi",(function(){return Ur})),e.d(t,"cj",(function(){return Kr})),e.d(t,"dj",(function(){return Qr})),e.d(t,"Zi",(function(){return Nr})),e.d(t,"bj",(function(){return Xr})),e.d(t,"ej",(function(){return Yr})),e.d(t,"hj",(function(){return Hr})),e.d(t,"gj",(function(){return Jr})),e.d(t,"ij",(function(){return Zr})),e.d(t,"fj",(function(){return $r})),e.d(t,"jj",(function(){return nu})),e.d(t,"rj",(function(){return tu})),e.d(t,"sj",(function(){return eu})),e.d(t,"uj",(function(){return ru})),e.d(t,"wj",(function(){return uu})),e.d(t,"xj",(function(){return fu})),e.d(t,"Aj",(function(){return cu})),e.d(t,"Bj",(function(){return iu})),e.d(t,"Ej",(function(){return ou})),e.d(t,"Hj",(function(){return _u})),e.d(t,"Ij",(function(){return du})),e.d(t,"Jj",(function(){return au})),e.d(t,"Lj",(function(){return bu})),e.d(t,"Mj",(function(){return gu})),e.d(t,"Nj",(function(){return wu})),e.d(t,"Pj",(function(){return su})),e.d(t,"Qj",(function(){return lu})),e.d(t,"Rj",(function(){return mu})),e.d(t,"Sj",(function(){return pu})),e.d(t,"Uj",(function(){return hu})),e.d(t,"Vj",(function(){return xu})),e.d(t,"dk",(function(){return yu})),e.d(t,"ek",(function(){return Su})),e.d(t,"g",(function(){return ku})),e.d(t,"m",(function(){return vu})),e.d(t,"s",(function(){return Bu})),e.d(t,"v",(function(){return Pu})),e.d(t,"w",(function(){return Iu})),e.d(t,"y",(function(){return ju})),e.d(t,"B",(function(){return Au})),e.d(t,"F",(function(){return Du})),e.d(t,"J",(function(){return Tu})),e.d(t,"H",(function(){return Cu})),e.d(t,"N",(function(){return Mu})),e.d(t,"L",(function(){return Fu})),e.d(t,"qb",(function(){return Eu})),e.d(t,"mb",(function(){return Ru})),e.d(t,"ob",(function(){return Lu})),e.d(t,"wb",(function(){return Ou})),e.d(t,"yb",(function(){return Gu})),e.d(t,"Mb",(function(){return Vu})),e.d(t,"Tb",(function(){return Wu})),e.d(t,"Zb",(function(){return qu})),e.d(t,"bc",(function(){return zu})),e.d(t,"hc",(function(){return Uu})),e.d(t,"nc",(function(){return Ku})),e.d(t,"oc",(function(){return Qu})),e.d(t,"xc",(function(){return Nu})),e.d(t,"Ac",(function(){return Xu})),e.d(t,"Cc",(function(){return Yu})),e.d(t,"Ec",(function(){return Hu})),e.d(t,"Gc",(function(){return Ju})),e.d(t,"Jc",(function(){return Zu})),e.d(t,"Mc",(function(){return $u})),e.d(t,"Uc",(function(){return nf})),e.d(t,"Vc",(function(){return tf})),e.d(t,"Yc",(function(){return ef})),e.d(t,"hd",(function(){return rf})),e.d(t,"fd",(function(){return uf})),e.d(t,"pd",(function(){return ff})),e.d(t,"Gd",(function(){return cf})),e.d(t,"Ed",(function(){return of})),e.d(t,"Xd",(function(){return _f})),e.d(t,"ae",(function(){return df})),e.d(t,"de",(function(){return af})),e.d(t,"te",(function(){return bf})),e.d(t,"ye",(function(){return gf})),e.d(t,"Ae",(function(){return wf})),e.d(t,"De",(function(){return sf})),e.d(t,"He",(function(){return lf})),e.d(t,"Ie",(function(){return mf})),e.d(t,"Ke",(function(){return pf})),e.d(t,"Oe",(function(){return hf})),e.d(t,"yf",(function(){return xf})),e.d(t,"Wg",(function(){return yf})),e.d(t,"ah",(function(){return Sf})),e.d(t,"Ah",(function(){return kf})),e.d(t,"Ph",(function(){return vf})),e.d(t,"Bi",(function(){return Bf})),e.d(t,"Ji",(function(){return Pf})),e.d(t,"Mi",(function(){return If})),e.d(t,"Ki",(function(){return jf})),e.d(t,"Oi",(function(){return Af})),e.d(t,"Vi",(function(){return Df})),e.d(t,"oj",(function(){return Tf})),e.d(t,"qj",(function(){return Cf})),e.d(t,"Cj",(function(){return Mf})),e.d(t,"Zj",(function(){return Ff})),e.d(t,"fk",(function(){return Ef})),e.d(t,"kk",(function(){return Rf})),e.d(t,"lf",(function(){return Lf})),e.d(t,"md",(function(){return Of})),e.d(t,"tg",(function(){return Gf})),e.d(t,"dd",(function(){return Vf})),e.d(t,"eb",(function(){return Wf})),e.d(t,"me",(function(){return qf})),e.d(t,"Df",(function(){return zf})),e.d(t,"Hh",(function(){return Uf})),e.d(t,"db",(function(){return Kf})),e.d(t,"Dh",(function(){return Qf})),e.d(t,"pb",(function(){return Nf})),e.d(t,"mi",(function(){return Xf})),e.d(t,"li",(function(){return Yf})),e.d(t,"R",(function(){return Hf})),e.d(t,"lk",(function(){return Jf})),e.d(t,"e",(function(){return Zf})),e.d(t,"fe",(function(){return $f})),e.d(t,"Xb",(function(){return nc})),e.d(t,"se",(function(){return tc})),e.d(t,"mh",(function(){return ec})),e.d(t,"lh",(function(){return rc})),e.d(t,"Sh",(function(){return uc})),e.d(t,"hi",(function(){return fc})),e.d(t,"sg",(function(){return cc})),e.d(t,"Qi",(function(){return ic})),e.d(t,"Wd",(function(){return oc})),e.d(t,"U",(function(){return _c})),e.d(t,"T",(function(){return dc})),e.d(t,"X",(function(){return ac})),e.d(t,"Ab",(function(){return bc})),e.d(t,"sh",(function(){return gc})),e.d(t,"Ti",(function(){return wc})),e.d(t,"aj",(function(){return sc})),e.d(t,"tj",(function(){return lc})),e.d(t,"vj",(function(){return mc})),e.d(t,"yj",(function(){return pc})),e.d(t,"zj",(function(){return hc})),e.d(t,"Fj",(function(){return xc})),e.d(t,"Gj",(function(){return yc})),e.d(t,"Kj",(function(){return Sc})),e.d(t,"Oj",(function(){return kc})),e.d(t,"Tj",(function(){return vc})),e.d(t,"f",(function(){return Bc})),e.d(t,"n",(function(){return Pc})),e.d(t,"r",(function(){return Ic})),e.d(t,"u",(function(){return jc})),e.d(t,"x",(function(){return Ac})),e.d(t,"z",(function(){return Dc})),e.d(t,"C",(function(){return Tc})),e.d(t,"G",(function(){return Cc})),e.d(t,"K",(function(){return Mc})),e.d(t,"I",(function(){return Fc})),e.d(t,"O",(function(){return Ec})),e.d(t,"M",(function(){return Rc})),e.d(t,"rb",(function(){return Lc})),e.d(t,"lb",(function(){return Oc})),e.d(t,"nb",(function(){return Gc})),e.d(t,"vb",(function(){return Vc})),e.d(t,"xb",(function(){return Wc})),e.d(t,"Lb",(function(){return qc})),e.d(t,"Sb",(function(){return zc})),e.d(t,"Yb",(function(){return Uc})),e.d(t,"cc",(function(){return Kc})),e.d(t,"ic",(function(){return Qc})),e.d(t,"mc",(function(){return Nc})),e.d(t,"qc",(function(){return Xc})),e.d(t,"wc",(function(){return Yc})),e.d(t,"zc",(function(){return Hc})),e.d(t,"Bc",(function(){return Jc})),e.d(t,"Dc",(function(){return Zc})),e.d(t,"Hc",(function(){return $c})),e.d(t,"Kc",(function(){return ni})),e.d(t,"Nc",(function(){return ti})),e.d(t,"Tc",(function(){return ei})),e.d(t,"Wc",(function(){return ri})),e.d(t,"Xc",(function(){return ui})),e.d(t,"gd",(function(){return fi})),e.d(t,"ed",(function(){return ci})),e.d(t,"qd",(function(){return ii})),e.d(t,"Fd",(function(){return oi})),e.d(t,"Dd",(function(){return _i})),e.d(t,"Yd",(function(){return di})),e.d(t,"Zd",(function(){return ai})),e.d(t,"ee",(function(){return bi})),e.d(t,"xe",(function(){return gi})),e.d(t,"Be",(function(){return wi})),e.d(t,"Ce",(function(){return si})),e.d(t,"Ge",(function(){return li})),e.d(t,"Je",(function(){return mi})),e.d(t,"Pe",(function(){return pi})),e.d(t,"xf",(function(){return hi})),e.d(t,"Vg",(function(){return xi})),e.d(t,"Zg",(function(){return yi})),e.d(t,"zh",(function(){return Si})),e.d(t,"Qh",(function(){return ki})),e.d(t,"Ai",(function(){return vi})),e.d(t,"Ii",(function(){return Bi})),e.d(t,"Ni",(function(){return Pi})),e.d(t,"Li",(function(){return Ii})),e.d(t,"Pi",(function(){return ji})),e.d(t,"Wi",(function(){return Ai})),e.d(t,"nj",(function(){return Di})),e.d(t,"pj",(function(){return Ti})),e.d(t,"Dj",(function(){return Ci})),e.d(t,"ak",(function(){return Mi})),e.d(t,"gk",(function(){return Fi})),e.d(t,"jk",(function(){return Ei})),e.d(t,"nd",(function(){return Ri})),e.d(t,"td",(function(){return Li})),e.d(t,"ck",(function(){return Oi})),e.d(t,"Ee",(function(){return Gi})),e.d(t,"xh",(function(){return Vi})),e.d(t,"ii",(function(){return Wi})),e.d(t,"xg",(function(){return qi})),e.d(t,"jd",(function(){return zi})),e.d(t,"Lg",(function(){return Ui})),e.d(t,"l",(function(){return Ki})),e.d(t,"Fb",(function(){return Qi})),e.d(t,"Qe",(function(){return Ni})),e.d(t,"rd",(function(){return Xi})),e.d(t,"ik",(function(){return Yi})),e.d(t,"hk",(function(){return Hi})),e.d(t,"ch",(function(){return Ji})),e.d(t,"dh",(function(){return Zi})),e.d(t,"wg",(function(){return $i})),e.d(t,"ce",(function(){return no})),e.d(t,"nf",(function(){return to})),e.d(t,"Gb",(function(){return eo})),e.d(t,"cd",(function(){return ro})),e.d(t,"cf",(function(){return uo})),e.d(t,"Q",(function(){return fo})),e.d(t,"yc",(function(){return co})),e.d(t,"Ld",(function(){return io})),e.d(t,"Kd",(function(){return oo})),e.d(t,"bf",(function(){return _o})),e.d(t,"Af",(function(){return ao})),e.d(t,"mk",(function(){return bo})),e.d(t,"Ei",(function(){return go})),e.d(t,"ug",(function(){return wo})),e.d(t,"d",(function(){return so})),e.d(t,"tb",(function(){return lo})),e.d(t,"eh",(function(){return mo})),e.d(t,"Hi",(function(){return po})),e.d(t,"qk",(function(){return ho})),e.d(t,"Xe",(function(){return xo})),e.d(t,"if",(function(){return yo})),e.d(t,"sk",(function(){return So})),e.d(t,"yi",(function(){return ko})),e.d(t,"Ye",(function(){return vo})),e.d(t,"wi",(function(){return Bo})),e.d(t,"pe",(function(){return Po})),e.d(t,"qe",(function(){return Io})),e.d(t,"pk",(function(){return jo})),e.d(t,"Ze",(function(){return Ao})),e.d(t,"k",(function(){return Do})),e.d(t,"vc",(function(){return To})),e.d(t,"Di",(function(){return Co})),e.d(t,"mg",(function(){return Mo})),e.d(t,"zf",(function(){return Fo})),e.d(t,"Bh",(function(){return Eo})),e.d(t,"pf",(function(){return Ro})),e.d(t,"ub",(function(){return Lo})),e.d(t,"rk",(function(){return Oo})),e.d(t,"zi",(function(){return Go})),e.d(t,"We",(function(){return Vo})),e.d(t,"vi",(function(){return Wo})),e.d(t,"ne",(function(){return qo})),e.d(t,"oe",(function(){return zo})),e.d(t,"Ug",(function(){return Uo})),e.d(t,"h",(function(){return Ko})),e.d(t,"vh",(function(){return Qo})),e.d(t,"yg",(function(){return No})),e.d(t,"id",(function(){return Xo})),e.d(t,"Mg",(function(){return Yo})),e.d(t,"Ng",(function(){return Ho})),e.d(t,"Xj",(function(){return Jo})),e.d(t,"Rc",(function(){return Zo})),e.d(t,"Sc",(function(){return $o})),e.d(t,"Qc",(function(){return n_})),e.d(t,"D",(function(){return t_})),e.d(t,"rc",(function(){return e_})),e.d(t,"Oc",(function(){return r_})),e.d(t,"Le",(function(){return u_})),e.d(t,"hh",(function(){return f_})),e.d(t,"hg",(function(){return c_})),e.d(t,"Ef",(function(){return i_})),e.d(t,"i",(function(){return o_})),e.d(t,"wh",(function(){return __})),e.d(t,"uc",(function(){return d_})),e.d(t,"Ci",(function(){return a_})),e.d(t,"j",(function(){return b_})),e.d(t,"ng",(function(){return g_})),e.d(t,"ab",(function(){return w_})),e.d(t,"bb",(function(){return s_})),e.d(t,"qg",(function(){return l_})),e.d(t,"rg",(function(){return m_})),e.d(t,"Xg",(function(){return p_})),e.d(t,"gh",(function(){return h_})),e.d(t,"Yg",(function(){return x_})),e.d(t,"je",(function(){return y_})),e.d(t,"Re",(function(){return S_})),e.d(t,"tf",(function(){return k_})),e.d(t,"vg",(function(){return v_})),e.d(t,"Cg",(function(){return B_})),e.d(t,"cb",(function(){return P_})),e.d(t,"Ag",(function(){return I_})),e.d(t,"Rh",(function(){return j_})),e.d(t,"tk",(function(){return A_})),e.d(t,"Se",(function(){return D_})),e.d(t,"Te",(function(){return T_})),e.d(t,"af",(function(){return C_})),e.d(t,"Og",(function(){return M_})),e.d(t,"kh",(function(){return F_})),e.d(t,"jf",(function(){return E_})),e.d(t,"we",(function(){return R_})),e.d(t,"of",(function(){return L_})),e.d(t,"bk",(function(){return O_})),e.d(t,"Kh",(function(){return G_})),e.d(t,"fb",(function(){return V_})),e.d(t,"kj",(function(){return W_})),e.d(t,"lj",(function(){return q_})),e.d(t,"Y",(function(){return z_})),e.d(t,"Eg",(function(){return U_})),e.d(t,"Hg",(function(){return K_})),e.d(t,"Fg",(function(){return Q_})),e.d(t,"Jg",(function(){return N_})),e.d(t,"zg",(function(){return X_})),e.d(t,"ti",(function(){return Y_})),e.d(t,"sf",(function(){return H_})),e.d(t,"Ig",(function(){return J_})),e.d(t,"Dg",(function(){return Z_})),e.d(t,"Gg",(function(){return $_})),e.d(t,"Z",(function(){return nd})),e.d(t,"si",(function(){return td})),e.d(t,"Wk",(function(){return ed})),e.d(t,"hl",(function(){return rd})),e.d(t,"al",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"Lk",(function(){return od})),e.d(t,"Mk",(function(){return _d})),e.d(t,"Nk",(function(){return dd})),e.d(t,"Ok",(function(){return ad})),e.d(t,"Pk",(function(){return bd})),e.d(t,"Qk",(function(){return gd})),e.d(t,"Rk",(function(){return wd})),e.d(t,"Sk",(function(){return sd})),e.d(t,"Tk",(function(){return ld})),e.d(t,"Uk",(function(){return md})),e.d(t,"Vk",(function(){return pd})),e.d(t,"yk",(function(){return hd})),e.d(t,"zk",(function(){return xd})),e.d(t,"Ak",(function(){return yd})),e.d(t,"Bk",(function(){return Sd})),e.d(t,"Ck",(function(){return kd})),e.d(t,"Dk",(function(){return vd})),e.d(t,"Ek",(function(){return Bd})),e.d(t,"Fk",(function(){return Pd})),e.d(t,"Gk",(function(){return Id})),e.d(t,"Hk",(function(){return jd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}function _(n){i===f.length&&f.push(f.length+1);const t=i;return i=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))}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,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c278f284122fa60(n,t,_(e))}function B(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h4c5026b4e25b4e3f(n,t,_(e),_(u))}function P(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb6daf62037e6fc2b(n,t)}function I(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h104f681ea5127900(n,t,_(e))}function j(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__ha10aabe0c8e49f3c(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hbd6bcde23f4b3bd8(n,t,_(e),_(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,_(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,_(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n){return _(c(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function N(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function X(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){return c(n).offsetX}function H(n){return c(n).offsetY}function J(n){return _(c(n).Window)}function Z(n){const t=c(n).webkitFullscreenElement;return p(t)?0:_(t)}function $(){return _(ResizeObserverEntry.prototype)}function nn(n){return _(c(n).scheduler)}function tn(n){return _(c(n).getCoalescedEvents)}function en(n){return _(c(n).requestFullscreen)}function rn(n){return _(c(n).requestIdleCallback)}function un(n){return _(c(n).onpointerrawupdate)}function fn(n){c(n).webkitRequestFullscreen()}function cn(n){return _(c(n).requestFullscreen())}function on(n){return _(c(n).scheduler)}function _n(n,t,e){return _(c(n).postTask(c(t),c(e)))}function dn(n){return _(n)}function an(n){return _(c(n).performance)}function bn(n){return c(n).now()}function gn(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function wn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function sn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function mn(n){return c(n).size}function pn(n){return c(n).usage}function hn(n){c(n).destroy()}function xn(n,t,e){return _(c(n).getMappedRange(t,e))}function yn(n,t,e,r){return _(c(n).mapAsync(t>>>0,e,r))}function Sn(n){c(n).unmap()}function kn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function vn(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function Bn(n){c(n).end()}function Pn(n,t){c(n).setPipeline(c(t))}function In(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function jn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function An(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function Dn(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Tn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function Cn(n){return _(c(n).gpu)}function Mn(n){return _(c(n).getPreferredCanvasFormat())}function Fn(n,t){return _(c(n).requestAdapter(c(t)))}function En(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Rn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ln(n){return _(c(n).finish())}function On(n,t){return _(c(n).finish(c(t)))}function Gn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Vn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Wn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function qn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function zn(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Un(n,t,e){c(n).drawIndirect(c(t),e)}function Kn(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Qn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Nn(n,t){c(n).setPipeline(c(t))}function Xn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Yn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Hn(n){return _(c(n).features)}function Jn(n){return _(c(n).limits)}function Zn(n){return _(c(n).queue)}function $n(n){return _(c(n).lost)}function nt(n,t){c(n).onuncapturederror=c(t)}function tt(n,t){return _(c(n).createBindGroup(c(t)))}function et(n,t){return _(c(n).createBindGroupLayout(c(t)))}function rt(n,t){return _(c(n).createBuffer(c(t)))}function ut(n,t){return _(c(n).createCommandEncoder(c(t)))}function ft(n,t){return _(c(n).createComputePipeline(c(t)))}function ct(n,t){return _(c(n).createPipelineLayout(c(t)))}function it(n,t){return _(c(n).createQuerySet(c(t)))}function ot(n,t){return _(c(n).createRenderBundleEncoder(c(t)))}function _t(n,t){return _(c(n).createRenderPipeline(c(t)))}function dt(n,t){return _(c(n).createSampler(c(t)))}function at(n,t){return _(c(n).createShaderModule(c(t)))}function bt(n,t){return _(c(n).createTexture(c(t)))}function gt(n){c(n).destroy()}function wt(n){return _(c(n).popErrorScope())}function st(n,t){c(n).pushErrorScope(o(t))}function lt(n,t){return _(c(n).createView(c(t)))}function mt(n){c(n).destroy()}function pt(n){return _(c(n).type)}function ht(n){return c(n).offset}function xt(n){return c(n).length}function yt(n){return c(n).lineNum}function St(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function kt(n,t){c(n).configure(c(t))}function vt(n){return _(c(n).getCurrentTexture())}function Bt(n){return _(c(n).reason)}function Pt(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function It(n){c(n).end()}function jt(n,t){c(n).executeBundles(c(t))}function At(n,t){c(n).setBlendConstant(c(t))}function Dt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Tt(n,t){c(n).setStencilReference(t>>>0)}function Ct(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Mt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Ft(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Et(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Rt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Lt(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ot(n,t,e){c(n).drawIndirect(c(t),e)}function Gt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Vt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Wt(n,t){c(n).setPipeline(c(t))}function qt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function zt(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Ut(n){return _(c(n).getCompilationInfo())}function Kt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Qt(n,t){return _(c(n).beginComputePass(c(t)))}function Nt(n,t){return _(c(n).beginRenderPass(c(t)))}function Xt(n,t,e){c(n).clearBuffer(c(t),e)}function Yt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Ht(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Jt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Zt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function $t(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function ne(n){return _(c(n).finish())}function te(n,t){return _(c(n).finish(c(t)))}function ee(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function re(n){return _(c(n).error)}function ue(n,t,e){return c(n).has(g(t,e))}function fe(n){return c(n).maxTextureDimension1D}function ce(n){return c(n).maxTextureDimension2D}function ie(n){return c(n).maxTextureDimension3D}function oe(n){return c(n).maxTextureArrayLayers}function _e(n){return c(n).maxBindGroups}function de(n){return c(n).maxBindingsPerBindGroup}function ae(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function be(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function ge(n){return c(n).maxSampledTexturesPerShaderStage}function we(n){return c(n).maxSamplersPerShaderStage}function se(n){return c(n).maxStorageBuffersPerShaderStage}function le(n){return c(n).maxStorageTexturesPerShaderStage}function me(n){return c(n).maxUniformBuffersPerShaderStage}function pe(n){return c(n).maxUniformBufferBindingSize}function he(n){return c(n).maxStorageBufferBindingSize}function xe(n){return c(n).maxVertexBuffers}function ye(n){return c(n).maxBufferSize}function Se(n){return c(n).maxVertexAttributes}function ke(n){return c(n).maxVertexBufferArrayStride}function ve(n){return c(n).minUniformBufferOffsetAlignment}function Be(n){return c(n).minStorageBufferOffsetAlignment}function Pe(n){return c(n).maxInterStageShaderComponents}function Ie(n){return c(n).maxColorAttachments}function je(n){return c(n).maxColorAttachmentBytesPerSample}function Ae(n){return c(n).maxComputeWorkgroupStorageSize}function De(n){return c(n).maxComputeInvocationsPerWorkgroup}function Te(n){return c(n).maxComputeWorkgroupSizeX}function Ce(n){return c(n).maxComputeWorkgroupSizeY}function Me(n){return c(n).maxComputeWorkgroupSizeZ}function Fe(n){return c(n).maxComputeWorkgroupsPerDimension}function Ee(n){const t=c(n);return"object"==typeof t&&null!==t}function Re(n){return _(c(n).Window)}function Le(n){return _(c(n).WorkerGlobalScope)}function Oe(n,t){return _(c(n).requestDevice(c(t)))}function Ge(n){return _(c(n).features)}function Ve(n){return _(c(n).limits)}function We(n){return _(c(n).messages)}function qe(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function ze(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ue(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Ke(n,t){c(n).submit(c(t))}function Qe(n){queueMicrotask(c(n))}function Ne(n){return _(c(n).queueMicrotask)}function Xe(n){return"function"==typeof c(n)}function Ye(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function He(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Je(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Ze(n,t,e){c(n).beginQuery(t>>>0,c(e))}function $e(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function nr(n,t,e){c(n).bindSampler(t>>>0,c(e))}function tr(n,t){c(n).bindVertexArray(c(t))}function er(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function rr(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function ur(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function fr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function cr(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function ir(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function or(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function _r(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function dr(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function ar(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function br(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function gr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function wr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function sr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function lr(n){const t=c(n).createQuery();return p(t)?0:_(t)}function mr(n){const t=c(n).createSampler();return p(t)?0:_(t)}function pr(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function hr(n,t){c(n).deleteQuery(c(t))}function xr(n,t){c(n).deleteSampler(c(t))}function yr(n,t){c(n).deleteSync(c(t))}function Sr(n,t){c(n).deleteVertexArray(c(t))}function kr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function vr(n,t){c(n).drawBuffers(c(t))}function Br(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function Pr(n,t){c(n).endQuery(t>>>0)}function Ir(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function jr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Ar(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dr(){return V((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Tr(n,t,e){return _(c(n).getQueryParameter(c(t),e>>>0))}function Cr(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Mr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Fr(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Er(n,t){c(n).readBuffer(t>>>0)}function Rr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Lr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Or(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Gr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Vr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Wr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function qr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function zr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Ur(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Kr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function nu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function tu(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function eu(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function ru(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function uu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function fu(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function cu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function iu(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function ou(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function _u(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function du(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function au(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function bu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function gu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function hu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function xu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function yu(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function Su(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function ku(n,t){c(n).activeTexture(t>>>0)}function vu(n,t,e){c(n).attachShader(c(t),c(e))}function Bu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function Pu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Iu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function ju(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Au(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Du(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Tu(n,t){c(n).blendEquation(t>>>0)}function Cu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Mu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Fu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Eu(n,t){c(n).clear(t>>>0)}function Ru(n,t){c(n).clearDepth(t)}function Lu(n,t){c(n).clearStencil(t)}function Ou(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Gu(n,t){c(n).compileShader(c(t))}function Vu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Wu(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function qu(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function zu(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Uu(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Ku(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Qu(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Nu(n,t){c(n).cullFace(t>>>0)}function Xu(n,t){c(n).deleteBuffer(c(t))}function Yu(n,t){c(n).deleteFramebuffer(c(t))}function Hu(n,t){c(n).deleteProgram(c(t))}function Ju(n,t){c(n).deleteRenderbuffer(c(t))}function Zu(n,t){c(n).deleteShader(c(t))}function $u(n,t){c(n).deleteTexture(c(t))}function nf(n,t){c(n).depthFunc(t>>>0)}function tf(n,t){c(n).depthMask(0!==t)}function ef(n,t,e){c(n).depthRange(t,e)}function rf(n,t){c(n).disable(t>>>0)}function uf(n,t){c(n).disableVertexAttribArray(t>>>0)}function ff(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function cf(n,t){c(n).enable(t>>>0)}function of(n,t){c(n).enableVertexAttribArray(t>>>0)}function _f(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function df(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function af(n,t){c(n).frontFace(t>>>0)}function bf(){return V((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function gf(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function wf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function sf(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function lf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function mf(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function pf(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function hf(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function xf(n,t){c(n).linkProgram(c(t))}function yf(n,t,e){c(n).pixelStorei(t>>>0,e)}function Sf(n,t,e){c(n).polygonOffset(t,e)}function kf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function vf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Bf(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Pf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function If(n,t){c(n).stencilMask(t>>>0)}function jf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Af(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Df(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Tf(n,t,e){c(n).uniform1f(c(t),e)}function Cf(n,t,e){c(n).uniform1i(c(t),e)}function Mf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ff(n,t){c(n).useProgram(c(t))}function Ef(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Rf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Lf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Of(n){const t=c(n).document;return p(t)?0:_(t)}function Gf(n){return _(c(n).navigator)}function Vf(n){return c(n).devicePixelRatio}function Wf(n,t){c(n).cancelIdleCallback(t>>>0)}function qf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:_(e)}),arguments)}function zf(){return V((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function Uf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Kf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Qf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Nf(n,t){c(n).clearTimeout(t)}function Xf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Yf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Hf(n){const t=c(n).body;return p(t)?0:_(t)}function Jf(n){return _(c(n).visibilityState)}function Zf(n){const t=c(n).activeElement;return p(t)?0:_(t)}function $f(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function nc(){return V((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function tc(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function ec(){return V((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function rc(){return V((function(n,t,e){return _(c(n).querySelectorAll(g(t,e)))}),arguments)}function uc(){return V((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function fc(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function cc(n){return _(c(n).navigator)}function ic(n){return _(c(n).style)}function oc(){return V((function(n){c(n).focus()}),arguments)}function _c(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function dc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function ac(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function bc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function gc(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function wc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function sc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function lc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function mc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function pc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function hc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function xc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function yc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function Sc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function kc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function vc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function Bc(n,t){c(n).activeTexture(t>>>0)}function Pc(n,t,e){c(n).attachShader(c(t),c(e))}function Ic(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function jc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Ac(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Dc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Tc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Cc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Mc(n,t){c(n).blendEquation(t>>>0)}function Fc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Ec(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Rc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Lc(n,t){c(n).clear(t>>>0)}function Oc(n,t){c(n).clearDepth(t)}function Gc(n,t){c(n).clearStencil(t)}function Vc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Wc(n,t){c(n).compileShader(c(t))}function qc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function zc(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Uc(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Kc(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Qc(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Nc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Xc(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Yc(n,t){c(n).cullFace(t>>>0)}function Hc(n,t){c(n).deleteBuffer(c(t))}function Jc(n,t){c(n).deleteFramebuffer(c(t))}function Zc(n,t){c(n).deleteProgram(c(t))}function $c(n,t){c(n).deleteRenderbuffer(c(t))}function ni(n,t){c(n).deleteShader(c(t))}function ti(n,t){c(n).deleteTexture(c(t))}function ei(n,t){c(n).depthFunc(t>>>0)}function ri(n,t){c(n).depthMask(0!==t)}function ui(n,t,e){c(n).depthRange(t,e)}function fi(n,t){c(n).disable(t>>>0)}function ci(n,t){c(n).disableVertexAttribArray(t>>>0)}function ii(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function oi(n,t){c(n).enable(t>>>0)}function _i(n,t){c(n).enableVertexAttribArray(t>>>0)}function di(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ai(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function bi(n,t){c(n).frontFace(t>>>0)}function gi(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function wi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function si(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function li(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function mi(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function pi(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function hi(n,t){c(n).linkProgram(c(t))}function xi(n,t,e){c(n).pixelStorei(t>>>0,e)}function yi(n,t,e){c(n).polygonOffset(t,e)}function Si(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function ki(n,t,e,r,u){c(n).scissor(t,e,r,u)}function vi(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Bi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Pi(n,t){c(n).stencilMask(t>>>0)}function Ii(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function ji(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ai(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Di(n,t,e){c(n).uniform1f(c(t),e)}function Ti(n,t,e){c(n).uniform1i(c(t),e)}function Ci(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Mi(n,t){c(n).useProgram(c(t))}function Fi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Ei(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ri(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Li(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Oi(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function Gi(){return V((function(n,t,e,u){const f=m(c(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Vi(){return V((function(n,t,e,u){const f=m(c(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Wi(){return V((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function qi(){return V((function(n){return _(new IntersectionObserver(c(n)))}),arguments)}function zi(n){c(n).disconnect()}function Ui(n,t){c(n).observe(c(t))}function Ki(){return V((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Qi(n,t){return c(n).contains(c(t))}function Ni(n,t){const e=c(n)[t>>>0];return p(e)?0:_(e)}function Xi(n,t){c(n).drawBuffersWEBGL(c(t))}function Yi(n){return c(n).videoWidth}function Hi(n){return c(n).videoHeight}function Ji(n){return _(c(n).port1)}function Zi(n){return _(c(n).port2)}function $i(){return V((function(){return _(new MessageChannel)}),arguments)}function no(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function to(n){return c(n).isIntersecting}function eo(n){return _(c(n).contentRect)}function ro(n){return _(c(n).devicePixelContentBoxSize)}function uo(n){return c(n).inlineSize}function fo(n){return c(n).blockSize}function co(n){console.debug(c(n))}function io(n){console.error(c(n))}function oo(n,t){console.error(c(n),c(t))}function _o(n){console.info(c(n))}function ao(n){console.log(c(n))}function bo(n){console.warn(c(n))}function go(n){return _(c(n).signal)}function wo(){return V((function(){return _(new AbortController)}),arguments)}function so(n){c(n).abort()}function lo(n){c(n).close()}function mo(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function po(n){c(n).start()}function ho(n){return c(n).width}function xo(n){return c(n).height}function yo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function So(n){return c(n).width}function ko(n,t){c(n).width=t>>>0}function vo(n){return c(n).height}function Bo(n,t){c(n).height=t>>>0}function Po(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function Io(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function jo(n){return c(n).width}function Ao(n){return c(n).height}function Do(n){return c(n).altKey}function To(n){return c(n).ctrlKey}function Co(n){return c(n).shiftKey}function Mo(n){return c(n).metaKey}function Fo(n){return c(n).location}function Eo(n){return c(n).repeat}function Ro(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Lo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Oo(n){return c(n).width}function Go(n,t){c(n).width=t>>>0}function Vo(n){return c(n).height}function Wo(n,t){c(n).height=t>>>0}function qo(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function zo(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function Uo(n){return c(n).persisted}function Ko(){return V((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function Qo(){return V((function(n,t,e,r){c(n).removeEventListener(g(t,e),c(r))}),arguments)}function No(){return V((function(n){return _(new ResizeObserver(c(n)))}),arguments)}function Xo(n){c(n).disconnect()}function Yo(n,t){c(n).observe(c(t))}function Ho(n,t,e){c(n).observe(c(t),c(e))}function Jo(n,t){c(n).unobserve(c(t))}function Zo(n){return c(n).deltaX}function $o(n){return c(n).deltaY}function n_(n){return c(n).deltaMode}function t_(n,t){c(n).bindVertexArrayOES(c(t))}function e_(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function r_(n,t){c(n).deleteVertexArrayOES(c(t))}function u_(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function f_(n){c(n).preventDefault()}function c_(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function i_(n){return c(n).matches}function o_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function __(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function d_(n){return c(n).ctrlKey}function a_(n){return c(n).shiftKey}function b_(n){return c(n).altKey}function g_(n){return c(n).metaKey}function w_(n){return c(n).button}function s_(n){return c(n).buttons}function l_(n){return c(n).movementX}function m_(n){return c(n).movementY}function p_(n){return c(n).pointerId}function h_(n){return c(n).pressure}function x_(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function y_(n){return _(c(n).getCoalescedEvents())}function S_(n,t){return _(c(n)[t>>>0])}function k_(n){return c(n).length}function v_(){return _(new Array)}function B_(n,t){return _(new Function(g(n,t)))}function P_(){return V((function(n,t){return _(c(n).call(c(t)))}),arguments)}function I_(){return _(new Object)}function j_(){return V((function(){return _(self.self)}),arguments)}function A_(){return V((function(){return _(window.window)}),arguments)}function D_(){return V((function(){return _(globalThis.globalThis)}),arguments)}function T_(){return V((function(){return _(global.global)}),arguments)}function C_(n,t,e){return c(n).includes(c(t),e)}function M_(n){return _(Array.of(c(n)))}function F_(n,t){return c(n).push(c(t))}function E_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function R_(n,t){return _(Object.getOwnPropertyDescriptor(c(n),c(t)))}function L_(n,t){return Object.is(c(n),c(t))}function O_(n){return _(c(n).valueOf())}function G_(n){return _(Promise.resolve(c(n)))}function V_(n,t){return _(c(n).catch(c(t)))}function W_(n,t){return _(c(n).then(c(t)))}function q_(n,t,e){return _(c(n).then(c(t),c(e)))}function z_(n){return _(c(n).buffer)}function U_(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function K_(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Q_(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function N_(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function X_(n){return _(new Uint8Array(c(n)))}function Y_(n,t,e){c(n).set(c(t),e>>>0)}function H_(n){return c(n).length}function J_(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function Z_(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function $_(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function nd(n){return _(c(n).buffer)}function td(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ed(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;x()[n/4+1]=u,x()[n/4+0]=e}function rd(n,t){throw new Error(g(n,t))}function ud(){return _(r.memory)}function fd(n,t,e){return _(k(n,t,9,v))}function cd(n,t,e){return _(k(n,t,9,v))}function id(n,t,e){return _(k(n,t,9,v))}function od(n,t,e){return _(k(n,t,9,B))}function _d(n,t,e){return _(k(n,t,9,v))}function dd(n,t,e){return _(k(n,t,9,v))}function ad(n,t,e){return _(k(n,t,9,P))}function bd(n,t,e){return _(k(n,t,179,I))}function gd(n,t,e){return _(k(n,t,179,I))}function wd(n,t,e){return _(k(n,t,179,j))}function sd(n,t,e){return _(k(n,t,179,A))}function ld(n,t,e){return _(k(n,t,179,I))}function md(n,t,e){return _(k(n,t,179,I))}function pd(n,t,e){return _(k(n,t,179,I))}function hd(n,t,e){return _(k(n,t,632,D))}function xd(n,t,e){return _(k(n,t,632,D))}function yd(n,t,e){return _(k(n,t,632,T))}function Sd(n,t,e){return _(k(n,t,632,D))}function kd(n,t,e){return _(k(n,t,632,D))}function vd(n,t,e){return _(k(n,t,632,D))}function Bd(n,t,e){return _(k(n,t,632,D))}function Pd(n,t,e){return _(k(n,t,1772,C))}function Id(n,t,e){return _(k(n,t,1772,C))}function jd(n,t,e){return _(k(n,t,1950,M))}}).call(this,e(260)(n))},418:function(n,t,e){"use strict";e.r(t);var r=e(419),u=e(252);e.d(t,"__wbg_set_wasm",(function(){return u.ui})),e.d(t,"run",(function(){return u.il})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.el})),e.d(t,"__wbindgen_cb_drop",(function(){return u.xk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Zk})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.dl})),e.d(t,"__wbindgen_string_new",(function(){return u.gl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Bg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Gi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Nd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Pg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Qg})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.nk})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.ih})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Oh})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.ke})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Fh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Ih})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Sg})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ok})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Gh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Nh})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.fh})),e.d(t,"__wbindgen_number_new",(function(){return u.cl})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Tg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Kg})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.ff})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.hf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.gf})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Fi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.Yj})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.Zc})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.ve})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Cf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.Wj})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.ld})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.kd})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Jd})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.ei})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.Xh})),e.d(t,"__wbindgen_string_get",(function(){return u.fl})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.he})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.df})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.Ue})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.ze})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Ch})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.ge})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.kg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Sd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.Vd})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.Wh})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.Uh})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.xd})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.vd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.zd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.bi})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.ci})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.gi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.oi})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.ni})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Qd})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.vf})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.ph})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Bf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.xi})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Qb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Ub})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Vb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Wb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.ac})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.dc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.fc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.gc})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.kc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.lc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.pc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.ad})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.bh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.jh})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.tc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.bd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.mj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.Rg})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.rf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.wf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.ig})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Eb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.re})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.uh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.jg})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Id})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Od})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.Zh})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.ji})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.ki})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.ri})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.Yh})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.yd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.wd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Ad})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.ai})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.di})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.qi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.pi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.le})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.qf})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.o})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.q})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.gb})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.hb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Ib})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Jb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Ob})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Pb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Ud})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Td})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.Jh})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Md})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.Ve})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.Zf})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.ag})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.bg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.Yf})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Ff})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Gf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.Qf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.Tf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.Uf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.dg})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.cg})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.Vf})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.gg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Hf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.eg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.fg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.pg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.og})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.Sf})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Jf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.If})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Of})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Kf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Lf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Nf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.Pf})),e.d(t,"__wbindgen_is_object",(function(){return u.Yk})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Eh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Pd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.uf})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.lg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.uk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.vk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Kb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.Ri})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.oh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.nh})),e.d(t,"__wbindgen_is_function",(function(){return u.Xk})),e.d(t,"__wbindgen_boolean_get",(function(){return u.wk})),e.d(t,"__wbindgen_number_get",(function(){return u.bl})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.kf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.ib})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.jb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.kb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.sb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.zb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Db})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Hb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Nb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.ec})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.jc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.sc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Fc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Ic})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Lc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Pc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.od})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.sd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.ud})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Hd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Rd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.be})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ie})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.mf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.qh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.rh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.th})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.yh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Lh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Mh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Si})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ui})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Xi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Yi})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.cj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.dj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Zi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.bj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.ej})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.hj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.gj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.ij})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.fj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.jj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.rj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.sj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.uj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.wj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.xj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Aj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Bj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Ej})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Hj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Ij})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Jj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Lj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Mj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Nj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Pj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Qj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Vj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.dk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.ek})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.qb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.ob})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.wb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.bc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.hc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.nc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.oc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Gc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Jc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Mc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Vc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Yc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.pd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Xd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ae})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.de})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.yf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Wg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.ah})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Ah})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Ph})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Bi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Ji})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Mi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Ki})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Oi})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Vi})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.oj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.qj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Cj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Zj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.fk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.kk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.lf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.md})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.tg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.dd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Df})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Hh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Dh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.pb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.mi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.li})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.lk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.fe})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Xb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.mh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.lh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Sh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.hi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.sg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Qi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Wd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Ab})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.sh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.aj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.tj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.vj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.yj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.zj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Fj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Kj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Oj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Tj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.rb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.lb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.nb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.vb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.xb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Lb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Sb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Yb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.ic})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.mc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.qc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.wc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.zc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Bc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Dc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Tc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Xc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.gd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.ed})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.qd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Fd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Dd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.Zd})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ee})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.xf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Vg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Zg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.zh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Qh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Ai})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Ii})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ni})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Li})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Pi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Wi})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.nj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.pj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Dj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.ak})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.gk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.jk})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.nd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.td})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.ck})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.xh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.ii})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.xg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.jd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Lg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Fb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.rd})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.ik})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.hk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.ch})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.dh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.wg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ce})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.nf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Gb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.cd})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.yc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Ld})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Kd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Af})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.mk})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ei})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.ug})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.tb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.eh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Hi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.qk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.if})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.sk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.yi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.wi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.pk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Di})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.mg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.zf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Bh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.pf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.ub})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.rk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.zi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.vi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Ug})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.vh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.yg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.id})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Mg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Ng})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Xj})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Rc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Sc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Qc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.rc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Oc})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.hh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.hg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Ef})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.wh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.uc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ci})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.ng})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.qg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.rg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Xg})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.gh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Yg})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.je})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.tf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.vg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Cg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Ag})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Rh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.tk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Og})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.kh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.jf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.of})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.bk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Kh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.kj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.lj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Eg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Fg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Jg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.zg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ti})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.sf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Dg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Gg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.si})),e.d(t,"__wbindgen_debug_string",(function(){return u.Wk})),e.d(t,"__wbindgen_throw",(function(){return u.hl})),e.d(t,"__wbindgen_memory",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper564",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper565",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper566",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper567",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper568",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper569",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper570",(function(){return u.Ok})),e.d(t,"__wbindgen_closure_wrapper887",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper888",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper889",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper890",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper891",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper892",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper893",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper1829",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper1830",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper1831",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper1832",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper1833",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper1834",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper1835",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper3907",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper3909",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper4642",(function(){return u.Hk})),Object(u.ui)(r),r.__wbindgen_start()},419:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(252);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/33.578c9715.js b/assets/js/33.578c9715.js new file mode 100644 index 000000000..540b00e55 --- /dev/null +++ b/assets/js/33.578c9715.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{253:function(n,t,e){"use strict";(function(n){e.d(t,"ui",(function(){return u})),e.d(t,"il",(function(){return F})),e.d(t,"el",(function(){return W})),e.d(t,"xk",(function(){return q})),e.d(t,"Zk",(function(){return z})),e.d(t,"dl",(function(){return U})),e.d(t,"gl",(function(){return K})),e.d(t,"Bg",(function(){return Q})),e.d(t,"Gi",(function(){return N})),e.d(t,"Nd",(function(){return X})),e.d(t,"Pg",(function(){return Y})),e.d(t,"Qg",(function(){return H})),e.d(t,"b",(function(){return J})),e.d(t,"nk",(function(){return Z})),e.d(t,"ih",(function(){return $})),e.d(t,"Oh",(function(){return nn})),e.d(t,"ke",(function(){return tn})),e.d(t,"Fh",(function(){return en})),e.d(t,"Ih",(function(){return rn})),e.d(t,"Sg",(function(){return un})),e.d(t,"ok",(function(){return fn})),e.d(t,"Gh",(function(){return cn})),e.d(t,"Nh",(function(){return on})),e.d(t,"fh",(function(){return _n})),e.d(t,"cl",(function(){return dn})),e.d(t,"Tg",(function(){return an})),e.d(t,"Kg",(function(){return bn})),e.d(t,"ff",(function(){return gn})),e.d(t,"ef",(function(){return wn})),e.d(t,"hf",(function(){return sn})),e.d(t,"gf",(function(){return ln})),e.d(t,"Fi",(function(){return mn})),e.d(t,"Yj",(function(){return pn})),e.d(t,"Zc",(function(){return hn})),e.d(t,"ve",(function(){return xn})),e.d(t,"Cf",(function(){return yn})),e.d(t,"Wj",(function(){return Sn})),e.d(t,"ld",(function(){return kn})),e.d(t,"kd",(function(){return vn})),e.d(t,"Jd",(function(){return Bn})),e.d(t,"ei",(function(){return Pn})),e.d(t,"Vh",(function(){return In})),e.d(t,"Xh",(function(){return jn})),e.d(t,"fl",(function(){return An})),e.d(t,"he",(function(){return Dn})),e.d(t,"df",(function(){return Tn})),e.d(t,"Ue",(function(){return Cn})),e.d(t,"ze",(function(){return Mn})),e.d(t,"Ch",(function(){return Fn})),e.d(t,"ge",(function(){return En})),e.d(t,"kg",(function(){return Rn})),e.d(t,"Sd",(function(){return Ln})),e.d(t,"Vd",(function(){return On})),e.d(t,"Wh",(function(){return Gn})),e.d(t,"Uh",(function(){return Vn})),e.d(t,"Bd",(function(){return Wn})),e.d(t,"xd",(function(){return qn})),e.d(t,"vd",(function(){return zn})),e.d(t,"zd",(function(){return Un})),e.d(t,"bi",(function(){return Kn})),e.d(t,"ci",(function(){return Qn})),e.d(t,"gi",(function(){return Nn})),e.d(t,"oi",(function(){return Xn})),e.d(t,"ni",(function(){return Yn})),e.d(t,"Qd",(function(){return Hn})),e.d(t,"vf",(function(){return Jn})),e.d(t,"ph",(function(){return Zn})),e.d(t,"Bf",(function(){return $n})),e.d(t,"xi",(function(){return nt})),e.d(t,"Rb",(function(){return tt})),e.d(t,"Qb",(function(){return et})),e.d(t,"Ub",(function(){return rt})),e.d(t,"Vb",(function(){return ut})),e.d(t,"Wb",(function(){return ft})),e.d(t,"ac",(function(){return ct})),e.d(t,"dc",(function(){return it})),e.d(t,"fc",(function(){return ot})),e.d(t,"gc",(function(){return _t})),e.d(t,"kc",(function(){return dt})),e.d(t,"lc",(function(){return at})),e.d(t,"pc",(function(){return bt})),e.d(t,"ad",(function(){return gt})),e.d(t,"bh",(function(){return wt})),e.d(t,"jh",(function(){return st})),e.d(t,"tc",(function(){return lt})),e.d(t,"bd",(function(){return mt})),e.d(t,"mj",(function(){return pt})),e.d(t,"Rg",(function(){return ht})),e.d(t,"rf",(function(){return xt})),e.d(t,"wf",(function(){return yt})),e.d(t,"ig",(function(){return St})),e.d(t,"Eb",(function(){return kt})),e.d(t,"re",(function(){return vt})),e.d(t,"uh",(function(){return Bt})),e.d(t,"jg",(function(){return Pt})),e.d(t,"Id",(function(){return It})),e.d(t,"Od",(function(){return jt})),e.d(t,"Zh",(function(){return At})),e.d(t,"ji",(function(){return Dt})),e.d(t,"ki",(function(){return Tt})),e.d(t,"ri",(function(){return Ct})),e.d(t,"Th",(function(){return Mt})),e.d(t,"Yh",(function(){return Ft})),e.d(t,"Cd",(function(){return Et})),e.d(t,"yd",(function(){return Rt})),e.d(t,"wd",(function(){return Lt})),e.d(t,"Ad",(function(){return Ot})),e.d(t,"ai",(function(){return Gt})),e.d(t,"di",(function(){return Vt})),e.d(t,"fi",(function(){return Wt})),e.d(t,"qi",(function(){return qt})),e.d(t,"pi",(function(){return zt})),e.d(t,"le",(function(){return Ut})),e.d(t,"qf",(function(){return Kt})),e.d(t,"o",(function(){return Qt})),e.d(t,"q",(function(){return Nt})),e.d(t,"gb",(function(){return Xt})),e.d(t,"hb",(function(){return Yt})),e.d(t,"Ib",(function(){return Ht})),e.d(t,"Jb",(function(){return Jt})),e.d(t,"Ob",(function(){return Zt})),e.d(t,"Pb",(function(){return $t})),e.d(t,"Ud",(function(){return ne})),e.d(t,"Td",(function(){return te})),e.d(t,"Jh",(function(){return ee})),e.d(t,"Md",(function(){return re})),e.d(t,"Ve",(function(){return ue})),e.d(t,"Zf",(function(){return fe})),e.d(t,"ag",(function(){return ce})),e.d(t,"bg",(function(){return ie})),e.d(t,"Yf",(function(){return oe})),e.d(t,"Ff",(function(){return _e})),e.d(t,"Gf",(function(){return de})),e.d(t,"Rf",(function(){return ae})),e.d(t,"Qf",(function(){return be})),e.d(t,"Tf",(function(){return ge})),e.d(t,"Uf",(function(){return we})),e.d(t,"Wf",(function(){return se})),e.d(t,"Xf",(function(){return le})),e.d(t,"dg",(function(){return me})),e.d(t,"cg",(function(){return pe})),e.d(t,"Vf",(function(){return he})),e.d(t,"gg",(function(){return xe})),e.d(t,"Hf",(function(){return ye})),e.d(t,"eg",(function(){return Se})),e.d(t,"fg",(function(){return ke})),e.d(t,"pg",(function(){return ve})),e.d(t,"og",(function(){return Be})),e.d(t,"Sf",(function(){return Pe})),e.d(t,"Jf",(function(){return Ie})),e.d(t,"If",(function(){return je})),e.d(t,"Of",(function(){return Ae})),e.d(t,"Kf",(function(){return De})),e.d(t,"Lf",(function(){return Te})),e.d(t,"Mf",(function(){return Ce})),e.d(t,"Nf",(function(){return Me})),e.d(t,"Pf",(function(){return Fe})),e.d(t,"Yk",(function(){return Ee})),e.d(t,"a",(function(){return Re})),e.d(t,"c",(function(){return Le})),e.d(t,"Eh",(function(){return Oe})),e.d(t,"Pd",(function(){return Ge})),e.d(t,"uf",(function(){return Ve})),e.d(t,"lg",(function(){return We})),e.d(t,"uk",(function(){return qe})),e.d(t,"vk",(function(){return ze})),e.d(t,"Kb",(function(){return Ue})),e.d(t,"Ri",(function(){return Ke})),e.d(t,"oh",(function(){return Qe})),e.d(t,"nh",(function(){return Ne})),e.d(t,"Xk",(function(){return Xe})),e.d(t,"wk",(function(){return Ye})),e.d(t,"bl",(function(){return He})),e.d(t,"kf",(function(){return Je})),e.d(t,"p",(function(){return Ze})),e.d(t,"t",(function(){return $e})),e.d(t,"A",(function(){return nr})),e.d(t,"E",(function(){return tr})),e.d(t,"P",(function(){return er})),e.d(t,"S",(function(){return rr})),e.d(t,"V",(function(){return ur})),e.d(t,"W",(function(){return fr})),e.d(t,"ib",(function(){return cr})),e.d(t,"jb",(function(){return ir})),e.d(t,"kb",(function(){return or})),e.d(t,"sb",(function(){return _r})),e.d(t,"Bb",(function(){return dr})),e.d(t,"zb",(function(){return ar})),e.d(t,"Cb",(function(){return br})),e.d(t,"Db",(function(){return gr})),e.d(t,"Hb",(function(){return wr})),e.d(t,"Nb",(function(){return sr})),e.d(t,"ec",(function(){return lr})),e.d(t,"jc",(function(){return mr})),e.d(t,"sc",(function(){return pr})),e.d(t,"Fc",(function(){return hr})),e.d(t,"Ic",(function(){return xr})),e.d(t,"Lc",(function(){return yr})),e.d(t,"Pc",(function(){return Sr})),e.d(t,"od",(function(){return kr})),e.d(t,"sd",(function(){return vr})),e.d(t,"ud",(function(){return Br})),e.d(t,"Hd",(function(){return Pr})),e.d(t,"Rd",(function(){return Ir})),e.d(t,"be",(function(){return jr})),e.d(t,"ie",(function(){return Ar})),e.d(t,"ue",(function(){return Dr})),e.d(t,"Fe",(function(){return Tr})),e.d(t,"Me",(function(){return Cr})),e.d(t,"Ne",(function(){return Mr})),e.d(t,"mf",(function(){return Fr})),e.d(t,"qh",(function(){return Er})),e.d(t,"rh",(function(){return Rr})),e.d(t,"th",(function(){return Lr})),e.d(t,"yh",(function(){return Or})),e.d(t,"Lh",(function(){return Gr})),e.d(t,"Mh",(function(){return Vr})),e.d(t,"Si",(function(){return Wr})),e.d(t,"Ui",(function(){return qr})),e.d(t,"Xi",(function(){return zr})),e.d(t,"Yi",(function(){return Ur})),e.d(t,"cj",(function(){return Kr})),e.d(t,"dj",(function(){return Qr})),e.d(t,"Zi",(function(){return Nr})),e.d(t,"bj",(function(){return Xr})),e.d(t,"ej",(function(){return Yr})),e.d(t,"hj",(function(){return Hr})),e.d(t,"gj",(function(){return Jr})),e.d(t,"ij",(function(){return Zr})),e.d(t,"fj",(function(){return $r})),e.d(t,"jj",(function(){return nu})),e.d(t,"rj",(function(){return tu})),e.d(t,"sj",(function(){return eu})),e.d(t,"uj",(function(){return ru})),e.d(t,"wj",(function(){return uu})),e.d(t,"xj",(function(){return fu})),e.d(t,"Aj",(function(){return cu})),e.d(t,"Bj",(function(){return iu})),e.d(t,"Ej",(function(){return ou})),e.d(t,"Hj",(function(){return _u})),e.d(t,"Ij",(function(){return du})),e.d(t,"Jj",(function(){return au})),e.d(t,"Lj",(function(){return bu})),e.d(t,"Mj",(function(){return gu})),e.d(t,"Nj",(function(){return wu})),e.d(t,"Pj",(function(){return su})),e.d(t,"Qj",(function(){return lu})),e.d(t,"Rj",(function(){return mu})),e.d(t,"Sj",(function(){return pu})),e.d(t,"Uj",(function(){return hu})),e.d(t,"Vj",(function(){return xu})),e.d(t,"dk",(function(){return yu})),e.d(t,"ek",(function(){return Su})),e.d(t,"g",(function(){return ku})),e.d(t,"m",(function(){return vu})),e.d(t,"s",(function(){return Bu})),e.d(t,"v",(function(){return Pu})),e.d(t,"w",(function(){return Iu})),e.d(t,"y",(function(){return ju})),e.d(t,"B",(function(){return Au})),e.d(t,"F",(function(){return Du})),e.d(t,"J",(function(){return Tu})),e.d(t,"H",(function(){return Cu})),e.d(t,"N",(function(){return Mu})),e.d(t,"L",(function(){return Fu})),e.d(t,"qb",(function(){return Eu})),e.d(t,"mb",(function(){return Ru})),e.d(t,"ob",(function(){return Lu})),e.d(t,"wb",(function(){return Ou})),e.d(t,"yb",(function(){return Gu})),e.d(t,"Mb",(function(){return Vu})),e.d(t,"Tb",(function(){return Wu})),e.d(t,"Zb",(function(){return qu})),e.d(t,"bc",(function(){return zu})),e.d(t,"hc",(function(){return Uu})),e.d(t,"nc",(function(){return Ku})),e.d(t,"oc",(function(){return Qu})),e.d(t,"xc",(function(){return Nu})),e.d(t,"Ac",(function(){return Xu})),e.d(t,"Cc",(function(){return Yu})),e.d(t,"Ec",(function(){return Hu})),e.d(t,"Gc",(function(){return Ju})),e.d(t,"Jc",(function(){return Zu})),e.d(t,"Mc",(function(){return $u})),e.d(t,"Uc",(function(){return nf})),e.d(t,"Vc",(function(){return tf})),e.d(t,"Yc",(function(){return ef})),e.d(t,"hd",(function(){return rf})),e.d(t,"fd",(function(){return uf})),e.d(t,"pd",(function(){return ff})),e.d(t,"Gd",(function(){return cf})),e.d(t,"Ed",(function(){return of})),e.d(t,"Xd",(function(){return _f})),e.d(t,"ae",(function(){return df})),e.d(t,"de",(function(){return af})),e.d(t,"te",(function(){return bf})),e.d(t,"ye",(function(){return gf})),e.d(t,"Ae",(function(){return wf})),e.d(t,"De",(function(){return sf})),e.d(t,"He",(function(){return lf})),e.d(t,"Ie",(function(){return mf})),e.d(t,"Ke",(function(){return pf})),e.d(t,"Oe",(function(){return hf})),e.d(t,"yf",(function(){return xf})),e.d(t,"Wg",(function(){return yf})),e.d(t,"ah",(function(){return Sf})),e.d(t,"Ah",(function(){return kf})),e.d(t,"Ph",(function(){return vf})),e.d(t,"Bi",(function(){return Bf})),e.d(t,"Ji",(function(){return Pf})),e.d(t,"Mi",(function(){return If})),e.d(t,"Ki",(function(){return jf})),e.d(t,"Oi",(function(){return Af})),e.d(t,"Vi",(function(){return Df})),e.d(t,"oj",(function(){return Tf})),e.d(t,"qj",(function(){return Cf})),e.d(t,"Cj",(function(){return Mf})),e.d(t,"Zj",(function(){return Ff})),e.d(t,"fk",(function(){return Ef})),e.d(t,"kk",(function(){return Rf})),e.d(t,"lf",(function(){return Lf})),e.d(t,"md",(function(){return Of})),e.d(t,"tg",(function(){return Gf})),e.d(t,"dd",(function(){return Vf})),e.d(t,"eb",(function(){return Wf})),e.d(t,"me",(function(){return qf})),e.d(t,"Df",(function(){return zf})),e.d(t,"Hh",(function(){return Uf})),e.d(t,"db",(function(){return Kf})),e.d(t,"Dh",(function(){return Qf})),e.d(t,"pb",(function(){return Nf})),e.d(t,"mi",(function(){return Xf})),e.d(t,"li",(function(){return Yf})),e.d(t,"R",(function(){return Hf})),e.d(t,"lk",(function(){return Jf})),e.d(t,"e",(function(){return Zf})),e.d(t,"fe",(function(){return $f})),e.d(t,"Xb",(function(){return nc})),e.d(t,"se",(function(){return tc})),e.d(t,"mh",(function(){return ec})),e.d(t,"lh",(function(){return rc})),e.d(t,"Sh",(function(){return uc})),e.d(t,"hi",(function(){return fc})),e.d(t,"sg",(function(){return cc})),e.d(t,"Qi",(function(){return ic})),e.d(t,"Wd",(function(){return oc})),e.d(t,"U",(function(){return _c})),e.d(t,"T",(function(){return dc})),e.d(t,"X",(function(){return ac})),e.d(t,"Ab",(function(){return bc})),e.d(t,"sh",(function(){return gc})),e.d(t,"Ti",(function(){return wc})),e.d(t,"aj",(function(){return sc})),e.d(t,"tj",(function(){return lc})),e.d(t,"vj",(function(){return mc})),e.d(t,"yj",(function(){return pc})),e.d(t,"zj",(function(){return hc})),e.d(t,"Fj",(function(){return xc})),e.d(t,"Gj",(function(){return yc})),e.d(t,"Kj",(function(){return Sc})),e.d(t,"Oj",(function(){return kc})),e.d(t,"Tj",(function(){return vc})),e.d(t,"f",(function(){return Bc})),e.d(t,"n",(function(){return Pc})),e.d(t,"r",(function(){return Ic})),e.d(t,"u",(function(){return jc})),e.d(t,"x",(function(){return Ac})),e.d(t,"z",(function(){return Dc})),e.d(t,"C",(function(){return Tc})),e.d(t,"G",(function(){return Cc})),e.d(t,"K",(function(){return Mc})),e.d(t,"I",(function(){return Fc})),e.d(t,"O",(function(){return Ec})),e.d(t,"M",(function(){return Rc})),e.d(t,"rb",(function(){return Lc})),e.d(t,"lb",(function(){return Oc})),e.d(t,"nb",(function(){return Gc})),e.d(t,"vb",(function(){return Vc})),e.d(t,"xb",(function(){return Wc})),e.d(t,"Lb",(function(){return qc})),e.d(t,"Sb",(function(){return zc})),e.d(t,"Yb",(function(){return Uc})),e.d(t,"cc",(function(){return Kc})),e.d(t,"ic",(function(){return Qc})),e.d(t,"mc",(function(){return Nc})),e.d(t,"qc",(function(){return Xc})),e.d(t,"wc",(function(){return Yc})),e.d(t,"zc",(function(){return Hc})),e.d(t,"Bc",(function(){return Jc})),e.d(t,"Dc",(function(){return Zc})),e.d(t,"Hc",(function(){return $c})),e.d(t,"Kc",(function(){return ni})),e.d(t,"Nc",(function(){return ti})),e.d(t,"Tc",(function(){return ei})),e.d(t,"Wc",(function(){return ri})),e.d(t,"Xc",(function(){return ui})),e.d(t,"gd",(function(){return fi})),e.d(t,"ed",(function(){return ci})),e.d(t,"qd",(function(){return ii})),e.d(t,"Fd",(function(){return oi})),e.d(t,"Dd",(function(){return _i})),e.d(t,"Yd",(function(){return di})),e.d(t,"Zd",(function(){return ai})),e.d(t,"ee",(function(){return bi})),e.d(t,"xe",(function(){return gi})),e.d(t,"Be",(function(){return wi})),e.d(t,"Ce",(function(){return si})),e.d(t,"Ge",(function(){return li})),e.d(t,"Je",(function(){return mi})),e.d(t,"Pe",(function(){return pi})),e.d(t,"xf",(function(){return hi})),e.d(t,"Vg",(function(){return xi})),e.d(t,"Zg",(function(){return yi})),e.d(t,"zh",(function(){return Si})),e.d(t,"Qh",(function(){return ki})),e.d(t,"Ai",(function(){return vi})),e.d(t,"Ii",(function(){return Bi})),e.d(t,"Ni",(function(){return Pi})),e.d(t,"Li",(function(){return Ii})),e.d(t,"Pi",(function(){return ji})),e.d(t,"Wi",(function(){return Ai})),e.d(t,"nj",(function(){return Di})),e.d(t,"pj",(function(){return Ti})),e.d(t,"Dj",(function(){return Ci})),e.d(t,"ak",(function(){return Mi})),e.d(t,"gk",(function(){return Fi})),e.d(t,"jk",(function(){return Ei})),e.d(t,"nd",(function(){return Ri})),e.d(t,"td",(function(){return Li})),e.d(t,"ck",(function(){return Oi})),e.d(t,"Ee",(function(){return Gi})),e.d(t,"xh",(function(){return Vi})),e.d(t,"ii",(function(){return Wi})),e.d(t,"xg",(function(){return qi})),e.d(t,"jd",(function(){return zi})),e.d(t,"Lg",(function(){return Ui})),e.d(t,"l",(function(){return Ki})),e.d(t,"Fb",(function(){return Qi})),e.d(t,"Qe",(function(){return Ni})),e.d(t,"rd",(function(){return Xi})),e.d(t,"ik",(function(){return Yi})),e.d(t,"hk",(function(){return Hi})),e.d(t,"ch",(function(){return Ji})),e.d(t,"dh",(function(){return Zi})),e.d(t,"wg",(function(){return $i})),e.d(t,"ce",(function(){return no})),e.d(t,"nf",(function(){return to})),e.d(t,"Gb",(function(){return eo})),e.d(t,"cd",(function(){return ro})),e.d(t,"cf",(function(){return uo})),e.d(t,"Q",(function(){return fo})),e.d(t,"yc",(function(){return co})),e.d(t,"Ld",(function(){return io})),e.d(t,"Kd",(function(){return oo})),e.d(t,"bf",(function(){return _o})),e.d(t,"Af",(function(){return ao})),e.d(t,"mk",(function(){return bo})),e.d(t,"Ei",(function(){return go})),e.d(t,"ug",(function(){return wo})),e.d(t,"d",(function(){return so})),e.d(t,"tb",(function(){return lo})),e.d(t,"eh",(function(){return mo})),e.d(t,"Hi",(function(){return po})),e.d(t,"qk",(function(){return ho})),e.d(t,"Xe",(function(){return xo})),e.d(t,"if",(function(){return yo})),e.d(t,"sk",(function(){return So})),e.d(t,"yi",(function(){return ko})),e.d(t,"Ye",(function(){return vo})),e.d(t,"wi",(function(){return Bo})),e.d(t,"pe",(function(){return Po})),e.d(t,"qe",(function(){return Io})),e.d(t,"pk",(function(){return jo})),e.d(t,"Ze",(function(){return Ao})),e.d(t,"k",(function(){return Do})),e.d(t,"vc",(function(){return To})),e.d(t,"Di",(function(){return Co})),e.d(t,"mg",(function(){return Mo})),e.d(t,"zf",(function(){return Fo})),e.d(t,"Bh",(function(){return Eo})),e.d(t,"pf",(function(){return Ro})),e.d(t,"ub",(function(){return Lo})),e.d(t,"rk",(function(){return Oo})),e.d(t,"zi",(function(){return Go})),e.d(t,"We",(function(){return Vo})),e.d(t,"vi",(function(){return Wo})),e.d(t,"ne",(function(){return qo})),e.d(t,"oe",(function(){return zo})),e.d(t,"Ug",(function(){return Uo})),e.d(t,"h",(function(){return Ko})),e.d(t,"vh",(function(){return Qo})),e.d(t,"yg",(function(){return No})),e.d(t,"id",(function(){return Xo})),e.d(t,"Mg",(function(){return Yo})),e.d(t,"Ng",(function(){return Ho})),e.d(t,"Xj",(function(){return Jo})),e.d(t,"Rc",(function(){return Zo})),e.d(t,"Sc",(function(){return $o})),e.d(t,"Qc",(function(){return n_})),e.d(t,"D",(function(){return t_})),e.d(t,"rc",(function(){return e_})),e.d(t,"Oc",(function(){return r_})),e.d(t,"Le",(function(){return u_})),e.d(t,"hh",(function(){return f_})),e.d(t,"hg",(function(){return c_})),e.d(t,"Ef",(function(){return i_})),e.d(t,"i",(function(){return o_})),e.d(t,"wh",(function(){return __})),e.d(t,"uc",(function(){return d_})),e.d(t,"Ci",(function(){return a_})),e.d(t,"j",(function(){return b_})),e.d(t,"ng",(function(){return g_})),e.d(t,"ab",(function(){return w_})),e.d(t,"bb",(function(){return s_})),e.d(t,"qg",(function(){return l_})),e.d(t,"rg",(function(){return m_})),e.d(t,"Xg",(function(){return p_})),e.d(t,"gh",(function(){return h_})),e.d(t,"Yg",(function(){return x_})),e.d(t,"je",(function(){return y_})),e.d(t,"Re",(function(){return S_})),e.d(t,"tf",(function(){return k_})),e.d(t,"vg",(function(){return v_})),e.d(t,"Cg",(function(){return B_})),e.d(t,"cb",(function(){return P_})),e.d(t,"Ag",(function(){return I_})),e.d(t,"Rh",(function(){return j_})),e.d(t,"tk",(function(){return A_})),e.d(t,"Se",(function(){return D_})),e.d(t,"Te",(function(){return T_})),e.d(t,"af",(function(){return C_})),e.d(t,"Og",(function(){return M_})),e.d(t,"kh",(function(){return F_})),e.d(t,"jf",(function(){return E_})),e.d(t,"we",(function(){return R_})),e.d(t,"of",(function(){return L_})),e.d(t,"bk",(function(){return O_})),e.d(t,"Kh",(function(){return G_})),e.d(t,"fb",(function(){return V_})),e.d(t,"kj",(function(){return W_})),e.d(t,"lj",(function(){return q_})),e.d(t,"Y",(function(){return z_})),e.d(t,"Eg",(function(){return U_})),e.d(t,"Hg",(function(){return K_})),e.d(t,"Fg",(function(){return Q_})),e.d(t,"Jg",(function(){return N_})),e.d(t,"zg",(function(){return X_})),e.d(t,"ti",(function(){return Y_})),e.d(t,"sf",(function(){return H_})),e.d(t,"Ig",(function(){return J_})),e.d(t,"Dg",(function(){return Z_})),e.d(t,"Gg",(function(){return $_})),e.d(t,"Z",(function(){return nd})),e.d(t,"si",(function(){return td})),e.d(t,"Wk",(function(){return ed})),e.d(t,"hl",(function(){return rd})),e.d(t,"al",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"Lk",(function(){return od})),e.d(t,"Mk",(function(){return _d})),e.d(t,"Nk",(function(){return dd})),e.d(t,"Ok",(function(){return ad})),e.d(t,"Pk",(function(){return bd})),e.d(t,"Qk",(function(){return gd})),e.d(t,"Rk",(function(){return wd})),e.d(t,"Sk",(function(){return sd})),e.d(t,"Tk",(function(){return ld})),e.d(t,"Uk",(function(){return md})),e.d(t,"Vk",(function(){return pd})),e.d(t,"yk",(function(){return hd})),e.d(t,"zk",(function(){return xd})),e.d(t,"Ak",(function(){return yd})),e.d(t,"Bk",(function(){return Sd})),e.d(t,"Ck",(function(){return kd})),e.d(t,"Dk",(function(){return vd})),e.d(t,"Ek",(function(){return Bd})),e.d(t,"Fk",(function(){return Pd})),e.d(t,"Gk",(function(){return Id})),e.d(t,"Hk",(function(){return jd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}function _(n){i===f.length&&f.push(f.length+1);const t=i;return i=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))}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,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h00714c8fb65fc950(n,t,_(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1e31ec968fed4c44(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h503fd07089e3769d(n,t,_(e),_(u))}function I(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h7daaa35b0811f779(n,t,_(e))}function j(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__ha4a809bad3c4f3d3(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h955c8f19bba643cf(n,t,_(e),_(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,_(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,_(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n){return _(c(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function N(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function X(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){return c(n).offsetX}function H(n){return c(n).offsetY}function J(n){return _(c(n).Window)}function Z(n){const t=c(n).webkitFullscreenElement;return p(t)?0:_(t)}function $(){return _(ResizeObserverEntry.prototype)}function nn(n){return _(c(n).scheduler)}function tn(n){return _(c(n).getCoalescedEvents)}function en(n){return _(c(n).requestFullscreen)}function rn(n){return _(c(n).requestIdleCallback)}function un(n){return _(c(n).onpointerrawupdate)}function fn(n){c(n).webkitRequestFullscreen()}function cn(n){return _(c(n).requestFullscreen())}function on(n){return _(c(n).scheduler)}function _n(n,t,e){return _(c(n).postTask(c(t),c(e)))}function dn(n){return _(n)}function an(n){return _(c(n).performance)}function bn(n){return c(n).now()}function gn(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function wn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function sn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function mn(n){return c(n).size}function pn(n){return c(n).usage}function hn(n){c(n).destroy()}function xn(n,t,e){return _(c(n).getMappedRange(t,e))}function yn(n,t,e,r){return _(c(n).mapAsync(t>>>0,e,r))}function Sn(n){c(n).unmap()}function kn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function vn(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function Bn(n){c(n).end()}function Pn(n,t){c(n).setPipeline(c(t))}function In(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function jn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function An(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function Dn(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Tn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function Cn(n){return _(c(n).gpu)}function Mn(n){return _(c(n).getPreferredCanvasFormat())}function Fn(n,t){return _(c(n).requestAdapter(c(t)))}function En(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Rn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ln(n){return _(c(n).finish())}function On(n,t){return _(c(n).finish(c(t)))}function Gn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Vn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Wn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function qn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function zn(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Un(n,t,e){c(n).drawIndirect(c(t),e)}function Kn(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Qn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Nn(n,t){c(n).setPipeline(c(t))}function Xn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Yn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Hn(n){return _(c(n).features)}function Jn(n){return _(c(n).limits)}function Zn(n){return _(c(n).queue)}function $n(n){return _(c(n).lost)}function nt(n,t){c(n).onuncapturederror=c(t)}function tt(n,t){return _(c(n).createBindGroup(c(t)))}function et(n,t){return _(c(n).createBindGroupLayout(c(t)))}function rt(n,t){return _(c(n).createBuffer(c(t)))}function ut(n,t){return _(c(n).createCommandEncoder(c(t)))}function ft(n,t){return _(c(n).createComputePipeline(c(t)))}function ct(n,t){return _(c(n).createPipelineLayout(c(t)))}function it(n,t){return _(c(n).createQuerySet(c(t)))}function ot(n,t){return _(c(n).createRenderBundleEncoder(c(t)))}function _t(n,t){return _(c(n).createRenderPipeline(c(t)))}function dt(n,t){return _(c(n).createSampler(c(t)))}function at(n,t){return _(c(n).createShaderModule(c(t)))}function bt(n,t){return _(c(n).createTexture(c(t)))}function gt(n){c(n).destroy()}function wt(n){return _(c(n).popErrorScope())}function st(n,t){c(n).pushErrorScope(o(t))}function lt(n,t){return _(c(n).createView(c(t)))}function mt(n){c(n).destroy()}function pt(n){return _(c(n).type)}function ht(n){return c(n).offset}function xt(n){return c(n).length}function yt(n){return c(n).lineNum}function St(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function kt(n,t){c(n).configure(c(t))}function vt(n){return _(c(n).getCurrentTexture())}function Bt(n){return _(c(n).reason)}function Pt(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function It(n){c(n).end()}function jt(n,t){c(n).executeBundles(c(t))}function At(n,t){c(n).setBlendConstant(c(t))}function Dt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Tt(n,t){c(n).setStencilReference(t>>>0)}function Ct(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Mt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Ft(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Et(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Rt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Lt(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ot(n,t,e){c(n).drawIndirect(c(t),e)}function Gt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Vt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Wt(n,t){c(n).setPipeline(c(t))}function qt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function zt(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Ut(n){return _(c(n).getCompilationInfo())}function Kt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Qt(n,t){return _(c(n).beginComputePass(c(t)))}function Nt(n,t){return _(c(n).beginRenderPass(c(t)))}function Xt(n,t,e){c(n).clearBuffer(c(t),e)}function Yt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Ht(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Jt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Zt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function $t(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function ne(n){return _(c(n).finish())}function te(n,t){return _(c(n).finish(c(t)))}function ee(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function re(n){return _(c(n).error)}function ue(n,t,e){return c(n).has(g(t,e))}function fe(n){return c(n).maxTextureDimension1D}function ce(n){return c(n).maxTextureDimension2D}function ie(n){return c(n).maxTextureDimension3D}function oe(n){return c(n).maxTextureArrayLayers}function _e(n){return c(n).maxBindGroups}function de(n){return c(n).maxBindingsPerBindGroup}function ae(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function be(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function ge(n){return c(n).maxSampledTexturesPerShaderStage}function we(n){return c(n).maxSamplersPerShaderStage}function se(n){return c(n).maxStorageBuffersPerShaderStage}function le(n){return c(n).maxStorageTexturesPerShaderStage}function me(n){return c(n).maxUniformBuffersPerShaderStage}function pe(n){return c(n).maxUniformBufferBindingSize}function he(n){return c(n).maxStorageBufferBindingSize}function xe(n){return c(n).maxVertexBuffers}function ye(n){return c(n).maxBufferSize}function Se(n){return c(n).maxVertexAttributes}function ke(n){return c(n).maxVertexBufferArrayStride}function ve(n){return c(n).minUniformBufferOffsetAlignment}function Be(n){return c(n).minStorageBufferOffsetAlignment}function Pe(n){return c(n).maxInterStageShaderComponents}function Ie(n){return c(n).maxColorAttachments}function je(n){return c(n).maxColorAttachmentBytesPerSample}function Ae(n){return c(n).maxComputeWorkgroupStorageSize}function De(n){return c(n).maxComputeInvocationsPerWorkgroup}function Te(n){return c(n).maxComputeWorkgroupSizeX}function Ce(n){return c(n).maxComputeWorkgroupSizeY}function Me(n){return c(n).maxComputeWorkgroupSizeZ}function Fe(n){return c(n).maxComputeWorkgroupsPerDimension}function Ee(n){const t=c(n);return"object"==typeof t&&null!==t}function Re(n){return _(c(n).Window)}function Le(n){return _(c(n).WorkerGlobalScope)}function Oe(n,t){return _(c(n).requestDevice(c(t)))}function Ge(n){return _(c(n).features)}function Ve(n){return _(c(n).limits)}function We(n){return _(c(n).messages)}function qe(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function ze(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ue(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Ke(n,t){c(n).submit(c(t))}function Qe(n){queueMicrotask(c(n))}function Ne(n){return _(c(n).queueMicrotask)}function Xe(n){return"function"==typeof c(n)}function Ye(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function He(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Je(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Ze(n,t,e){c(n).beginQuery(t>>>0,c(e))}function $e(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function nr(n,t,e){c(n).bindSampler(t>>>0,c(e))}function tr(n,t){c(n).bindVertexArray(c(t))}function er(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function rr(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function ur(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function fr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function cr(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function ir(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function or(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function _r(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function dr(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function ar(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function br(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function gr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function wr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function sr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function lr(n){const t=c(n).createQuery();return p(t)?0:_(t)}function mr(n){const t=c(n).createSampler();return p(t)?0:_(t)}function pr(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function hr(n,t){c(n).deleteQuery(c(t))}function xr(n,t){c(n).deleteSampler(c(t))}function yr(n,t){c(n).deleteSync(c(t))}function Sr(n,t){c(n).deleteVertexArray(c(t))}function kr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function vr(n,t){c(n).drawBuffers(c(t))}function Br(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function Pr(n,t){c(n).endQuery(t>>>0)}function Ir(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function jr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Ar(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dr(){return V((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Tr(n,t,e){return _(c(n).getQueryParameter(c(t),e>>>0))}function Cr(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Mr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Fr(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Er(n,t){c(n).readBuffer(t>>>0)}function Rr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Lr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Or(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Gr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Vr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Wr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function qr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function zr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Ur(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Kr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function nu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function tu(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function eu(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function ru(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function uu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function fu(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function cu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function iu(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function ou(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function _u(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function du(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function au(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function bu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function gu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function hu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function xu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function yu(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function Su(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function ku(n,t){c(n).activeTexture(t>>>0)}function vu(n,t,e){c(n).attachShader(c(t),c(e))}function Bu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function Pu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Iu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function ju(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Au(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Du(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Tu(n,t){c(n).blendEquation(t>>>0)}function Cu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Mu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Fu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Eu(n,t){c(n).clear(t>>>0)}function Ru(n,t){c(n).clearDepth(t)}function Lu(n,t){c(n).clearStencil(t)}function Ou(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Gu(n,t){c(n).compileShader(c(t))}function Vu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Wu(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function qu(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function zu(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Uu(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Ku(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Qu(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Nu(n,t){c(n).cullFace(t>>>0)}function Xu(n,t){c(n).deleteBuffer(c(t))}function Yu(n,t){c(n).deleteFramebuffer(c(t))}function Hu(n,t){c(n).deleteProgram(c(t))}function Ju(n,t){c(n).deleteRenderbuffer(c(t))}function Zu(n,t){c(n).deleteShader(c(t))}function $u(n,t){c(n).deleteTexture(c(t))}function nf(n,t){c(n).depthFunc(t>>>0)}function tf(n,t){c(n).depthMask(0!==t)}function ef(n,t,e){c(n).depthRange(t,e)}function rf(n,t){c(n).disable(t>>>0)}function uf(n,t){c(n).disableVertexAttribArray(t>>>0)}function ff(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function cf(n,t){c(n).enable(t>>>0)}function of(n,t){c(n).enableVertexAttribArray(t>>>0)}function _f(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function df(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function af(n,t){c(n).frontFace(t>>>0)}function bf(){return V((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function gf(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function wf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function sf(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function lf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function mf(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function pf(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function hf(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function xf(n,t){c(n).linkProgram(c(t))}function yf(n,t,e){c(n).pixelStorei(t>>>0,e)}function Sf(n,t,e){c(n).polygonOffset(t,e)}function kf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function vf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Bf(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Pf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function If(n,t){c(n).stencilMask(t>>>0)}function jf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Af(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Df(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Tf(n,t,e){c(n).uniform1f(c(t),e)}function Cf(n,t,e){c(n).uniform1i(c(t),e)}function Mf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ff(n,t){c(n).useProgram(c(t))}function Ef(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Rf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Lf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Of(n){const t=c(n).document;return p(t)?0:_(t)}function Gf(n){return _(c(n).navigator)}function Vf(n){return c(n).devicePixelRatio}function Wf(n,t){c(n).cancelIdleCallback(t>>>0)}function qf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:_(e)}),arguments)}function zf(){return V((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function Uf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Kf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Qf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Nf(n,t){c(n).clearTimeout(t)}function Xf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Yf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Hf(n){const t=c(n).body;return p(t)?0:_(t)}function Jf(n){return _(c(n).visibilityState)}function Zf(n){const t=c(n).activeElement;return p(t)?0:_(t)}function $f(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function nc(){return V((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function tc(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function ec(){return V((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function rc(){return V((function(n,t,e){return _(c(n).querySelectorAll(g(t,e)))}),arguments)}function uc(){return V((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function fc(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function cc(n){return _(c(n).navigator)}function ic(n){return _(c(n).style)}function oc(){return V((function(n){c(n).focus()}),arguments)}function _c(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function dc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function ac(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function bc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function gc(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function wc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function sc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function lc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function mc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function pc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function hc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function xc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function yc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function Sc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function kc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function vc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function Bc(n,t){c(n).activeTexture(t>>>0)}function Pc(n,t,e){c(n).attachShader(c(t),c(e))}function Ic(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function jc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Ac(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Dc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Tc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Cc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Mc(n,t){c(n).blendEquation(t>>>0)}function Fc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Ec(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Rc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Lc(n,t){c(n).clear(t>>>0)}function Oc(n,t){c(n).clearDepth(t)}function Gc(n,t){c(n).clearStencil(t)}function Vc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Wc(n,t){c(n).compileShader(c(t))}function qc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function zc(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Uc(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Kc(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Qc(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Nc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Xc(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Yc(n,t){c(n).cullFace(t>>>0)}function Hc(n,t){c(n).deleteBuffer(c(t))}function Jc(n,t){c(n).deleteFramebuffer(c(t))}function Zc(n,t){c(n).deleteProgram(c(t))}function $c(n,t){c(n).deleteRenderbuffer(c(t))}function ni(n,t){c(n).deleteShader(c(t))}function ti(n,t){c(n).deleteTexture(c(t))}function ei(n,t){c(n).depthFunc(t>>>0)}function ri(n,t){c(n).depthMask(0!==t)}function ui(n,t,e){c(n).depthRange(t,e)}function fi(n,t){c(n).disable(t>>>0)}function ci(n,t){c(n).disableVertexAttribArray(t>>>0)}function ii(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function oi(n,t){c(n).enable(t>>>0)}function _i(n,t){c(n).enableVertexAttribArray(t>>>0)}function di(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ai(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function bi(n,t){c(n).frontFace(t>>>0)}function gi(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function wi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function si(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function li(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function mi(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function pi(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function hi(n,t){c(n).linkProgram(c(t))}function xi(n,t,e){c(n).pixelStorei(t>>>0,e)}function yi(n,t,e){c(n).polygonOffset(t,e)}function Si(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function ki(n,t,e,r,u){c(n).scissor(t,e,r,u)}function vi(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Bi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Pi(n,t){c(n).stencilMask(t>>>0)}function Ii(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function ji(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ai(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Di(n,t,e){c(n).uniform1f(c(t),e)}function Ti(n,t,e){c(n).uniform1i(c(t),e)}function Ci(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Mi(n,t){c(n).useProgram(c(t))}function Fi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Ei(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ri(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Li(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Oi(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function Gi(){return V((function(n,t,e,u){const f=m(c(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Vi(){return V((function(n,t,e,u){const f=m(c(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Wi(){return V((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function qi(){return V((function(n){return _(new IntersectionObserver(c(n)))}),arguments)}function zi(n){c(n).disconnect()}function Ui(n,t){c(n).observe(c(t))}function Ki(){return V((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Qi(n,t){return c(n).contains(c(t))}function Ni(n,t){const e=c(n)[t>>>0];return p(e)?0:_(e)}function Xi(n,t){c(n).drawBuffersWEBGL(c(t))}function Yi(n){return c(n).videoWidth}function Hi(n){return c(n).videoHeight}function Ji(n){return _(c(n).port1)}function Zi(n){return _(c(n).port2)}function $i(){return V((function(){return _(new MessageChannel)}),arguments)}function no(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function to(n){return c(n).isIntersecting}function eo(n){return _(c(n).contentRect)}function ro(n){return _(c(n).devicePixelContentBoxSize)}function uo(n){return c(n).inlineSize}function fo(n){return c(n).blockSize}function co(n){console.debug(c(n))}function io(n){console.error(c(n))}function oo(n,t){console.error(c(n),c(t))}function _o(n){console.info(c(n))}function ao(n){console.log(c(n))}function bo(n){console.warn(c(n))}function go(n){return _(c(n).signal)}function wo(){return V((function(){return _(new AbortController)}),arguments)}function so(n){c(n).abort()}function lo(n){c(n).close()}function mo(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function po(n){c(n).start()}function ho(n){return c(n).width}function xo(n){return c(n).height}function yo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function So(n){return c(n).width}function ko(n,t){c(n).width=t>>>0}function vo(n){return c(n).height}function Bo(n,t){c(n).height=t>>>0}function Po(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function Io(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function jo(n){return c(n).width}function Ao(n){return c(n).height}function Do(n){return c(n).altKey}function To(n){return c(n).ctrlKey}function Co(n){return c(n).shiftKey}function Mo(n){return c(n).metaKey}function Fo(n){return c(n).location}function Eo(n){return c(n).repeat}function Ro(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Lo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Oo(n){return c(n).width}function Go(n,t){c(n).width=t>>>0}function Vo(n){return c(n).height}function Wo(n,t){c(n).height=t>>>0}function qo(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function zo(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function Uo(n){return c(n).persisted}function Ko(){return V((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function Qo(){return V((function(n,t,e,r){c(n).removeEventListener(g(t,e),c(r))}),arguments)}function No(){return V((function(n){return _(new ResizeObserver(c(n)))}),arguments)}function Xo(n){c(n).disconnect()}function Yo(n,t){c(n).observe(c(t))}function Ho(n,t,e){c(n).observe(c(t),c(e))}function Jo(n,t){c(n).unobserve(c(t))}function Zo(n){return c(n).deltaX}function $o(n){return c(n).deltaY}function n_(n){return c(n).deltaMode}function t_(n,t){c(n).bindVertexArrayOES(c(t))}function e_(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function r_(n,t){c(n).deleteVertexArrayOES(c(t))}function u_(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function f_(n){c(n).preventDefault()}function c_(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function i_(n){return c(n).matches}function o_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function __(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function d_(n){return c(n).ctrlKey}function a_(n){return c(n).shiftKey}function b_(n){return c(n).altKey}function g_(n){return c(n).metaKey}function w_(n){return c(n).button}function s_(n){return c(n).buttons}function l_(n){return c(n).movementX}function m_(n){return c(n).movementY}function p_(n){return c(n).pointerId}function h_(n){return c(n).pressure}function x_(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function y_(n){return _(c(n).getCoalescedEvents())}function S_(n,t){return _(c(n)[t>>>0])}function k_(n){return c(n).length}function v_(){return _(new Array)}function B_(n,t){return _(new Function(g(n,t)))}function P_(){return V((function(n,t){return _(c(n).call(c(t)))}),arguments)}function I_(){return _(new Object)}function j_(){return V((function(){return _(self.self)}),arguments)}function A_(){return V((function(){return _(window.window)}),arguments)}function D_(){return V((function(){return _(globalThis.globalThis)}),arguments)}function T_(){return V((function(){return _(global.global)}),arguments)}function C_(n,t,e){return c(n).includes(c(t),e)}function M_(n){return _(Array.of(c(n)))}function F_(n,t){return c(n).push(c(t))}function E_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function R_(n,t){return _(Object.getOwnPropertyDescriptor(c(n),c(t)))}function L_(n,t){return Object.is(c(n),c(t))}function O_(n){return _(c(n).valueOf())}function G_(n){return _(Promise.resolve(c(n)))}function V_(n,t){return _(c(n).catch(c(t)))}function W_(n,t){return _(c(n).then(c(t)))}function q_(n,t,e){return _(c(n).then(c(t),c(e)))}function z_(n){return _(c(n).buffer)}function U_(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function K_(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Q_(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function N_(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function X_(n){return _(new Uint8Array(c(n)))}function Y_(n,t,e){c(n).set(c(t),e>>>0)}function H_(n){return c(n).length}function J_(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function Z_(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function $_(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function nd(n){return _(c(n).buffer)}function td(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ed(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;x()[n/4+1]=u,x()[n/4+0]=e}function rd(n,t){throw new Error(g(n,t))}function ud(){return _(r.memory)}function fd(n,t,e){return _(k(n,t,9,v))}function cd(n,t,e){return _(k(n,t,9,B))}function id(n,t,e){return _(k(n,t,9,v))}function od(n,t,e){return _(k(n,t,9,v))}function _d(n,t,e){return _(k(n,t,9,v))}function dd(n,t,e){return _(k(n,t,9,P))}function ad(n,t,e){return _(k(n,t,9,v))}function bd(n,t,e){return _(k(n,t,195,I))}function gd(n,t,e){return _(k(n,t,195,j))}function wd(n,t,e){return _(k(n,t,195,A))}function sd(n,t,e){return _(k(n,t,195,I))}function ld(n,t,e){return _(k(n,t,195,I))}function md(n,t,e){return _(k(n,t,195,I))}function pd(n,t,e){return _(k(n,t,195,I))}function hd(n,t,e){return _(k(n,t,637,D))}function xd(n,t,e){return _(k(n,t,637,D))}function yd(n,t,e){return _(k(n,t,637,T))}function Sd(n,t,e){return _(k(n,t,637,D))}function kd(n,t,e){return _(k(n,t,637,D))}function vd(n,t,e){return _(k(n,t,637,D))}function Bd(n,t,e){return _(k(n,t,637,D))}function Pd(n,t,e){return _(k(n,t,1776,C))}function Id(n,t,e){return _(k(n,t,1776,C))}function jd(n,t,e){return _(k(n,t,1954,M))}}).call(this,e(260)(n))},420:function(n,t,e){"use strict";e.r(t);var r=e(421),u=e(253);e.d(t,"__wbg_set_wasm",(function(){return u.ui})),e.d(t,"run",(function(){return u.il})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.el})),e.d(t,"__wbindgen_cb_drop",(function(){return u.xk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Zk})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.dl})),e.d(t,"__wbindgen_string_new",(function(){return u.gl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Bg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Gi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Nd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Pg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Qg})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.nk})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.ih})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Oh})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.ke})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Fh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Ih})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Sg})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ok})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Gh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Nh})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.fh})),e.d(t,"__wbindgen_number_new",(function(){return u.cl})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Tg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Kg})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.ff})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.hf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.gf})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Fi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.Yj})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.Zc})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.ve})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Cf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.Wj})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.ld})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.kd})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Jd})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.ei})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.Xh})),e.d(t,"__wbindgen_string_get",(function(){return u.fl})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.he})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.df})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.Ue})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.ze})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Ch})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.ge})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.kg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Sd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.Vd})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.Wh})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.Uh})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.xd})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.vd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.zd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.bi})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.ci})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.gi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.oi})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.ni})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Qd})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.vf})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.ph})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Bf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.xi})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Qb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Ub})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Vb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Wb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.ac})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.dc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.fc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.gc})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.kc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.lc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.pc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.ad})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.bh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.jh})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.tc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.bd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.mj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.Rg})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.rf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.wf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.ig})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Eb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.re})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.uh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.jg})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Id})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Od})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.Zh})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.ji})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.ki})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.ri})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.Yh})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.yd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.wd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Ad})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.ai})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.di})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.qi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.pi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.le})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.qf})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.o})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.q})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.gb})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.hb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Ib})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Jb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Ob})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Pb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Ud})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Td})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.Jh})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Md})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.Ve})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.Zf})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.ag})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.bg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.Yf})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Ff})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Gf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.Qf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.Tf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.Uf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.dg})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.cg})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.Vf})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.gg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Hf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.eg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.fg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.pg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.og})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.Sf})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Jf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.If})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Of})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Kf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Lf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Nf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.Pf})),e.d(t,"__wbindgen_is_object",(function(){return u.Yk})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Eh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Pd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.uf})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.lg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.uk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.vk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Kb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.Ri})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.oh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.nh})),e.d(t,"__wbindgen_is_function",(function(){return u.Xk})),e.d(t,"__wbindgen_boolean_get",(function(){return u.wk})),e.d(t,"__wbindgen_number_get",(function(){return u.bl})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.kf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.ib})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.jb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.kb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.sb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.zb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Db})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Hb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Nb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.ec})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.jc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.sc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Fc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Ic})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Lc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Pc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.od})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.sd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.ud})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Hd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Rd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.be})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ie})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.mf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.qh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.rh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.th})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.yh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Lh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Mh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Si})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ui})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Xi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Yi})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.cj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.dj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Zi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.bj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.ej})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.hj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.gj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.ij})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.fj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.jj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.rj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.sj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.uj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.wj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.xj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Aj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Bj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Ej})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Hj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Ij})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Jj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Lj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Mj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Nj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Pj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Qj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Vj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.dk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.ek})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.qb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.ob})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.wb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.bc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.hc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.nc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.oc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Gc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Jc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Mc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Vc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Yc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.pd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Xd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ae})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.de})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.yf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Wg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.ah})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Ah})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Ph})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Bi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Ji})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Mi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Ki})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Oi})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Vi})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.oj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.qj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Cj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Zj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.fk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.kk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.lf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.md})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.tg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.dd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Df})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Hh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Dh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.pb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.mi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.li})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.lk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.fe})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Xb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.mh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.lh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Sh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.hi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.sg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Qi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Wd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Ab})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.sh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.aj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.tj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.vj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.yj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.zj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Fj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Kj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Oj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Tj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.rb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.lb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.nb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.vb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.xb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Lb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Sb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Yb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.ic})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.mc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.qc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.wc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.zc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Bc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Dc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Tc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Xc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.gd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.ed})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.qd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Fd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Dd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.Zd})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ee})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.xf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Vg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Zg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.zh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Qh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Ai})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Ii})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ni})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Li})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Pi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Wi})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.nj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.pj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Dj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.ak})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.gk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.jk})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.nd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.td})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.ck})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.xh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.ii})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.xg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.jd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Lg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Fb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.rd})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.ik})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.hk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.ch})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.dh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.wg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ce})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.nf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Gb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.cd})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.yc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Ld})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Kd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Af})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.mk})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ei})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.ug})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.tb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.eh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Hi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.qk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.if})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.sk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.yi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.wi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.pk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Di})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.mg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.zf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Bh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.pf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.ub})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.rk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.zi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.vi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Ug})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.vh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.yg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.id})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Mg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Ng})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Xj})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Rc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Sc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Qc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.rc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Oc})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.hh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.hg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Ef})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.wh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.uc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ci})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.ng})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.qg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.rg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Xg})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.gh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Yg})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.je})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.tf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.vg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Cg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Ag})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Rh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.tk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Og})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.kh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.jf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.of})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.bk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Kh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.kj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.lj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Eg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Fg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Jg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.zg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ti})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.sf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Dg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Gg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.si})),e.d(t,"__wbindgen_debug_string",(function(){return u.Wk})),e.d(t,"__wbindgen_throw",(function(){return u.hl})),e.d(t,"__wbindgen_memory",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper564",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper565",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper566",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper567",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper568",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper569",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper570",(function(){return u.Ok})),e.d(t,"__wbindgen_closure_wrapper938",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper939",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper940",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper941",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper942",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper943",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper944",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper1845",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper1846",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper1847",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper1848",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper1849",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper1850",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper1851",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper3924",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper3926",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper4659",(function(){return u.Hk})),Object(u.ui)(r),r.__wbindgen_start()},421:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(253);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/33.7e40e52c.js b/assets/js/33.7e40e52c.js deleted file mode 100644 index 857dfce46..000000000 --- a/assets/js/33.7e40e52c.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{252:function(n,t,e){"use strict";(function(n){e.d(t,"ji",(function(){return u})),e.d(t,"Xk",(function(){return F})),e.d(t,"Tk",(function(){return W})),e.d(t,"mk",(function(){return q})),e.d(t,"Ok",(function(){return z})),e.d(t,"Sk",(function(){return U})),e.d(t,"Vk",(function(){return K})),e.d(t,"sg",(function(){return Q})),e.d(t,"vi",(function(){return X})),e.d(t,"Od",(function(){return N})),e.d(t,"Gg",(function(){return Y})),e.d(t,"Hg",(function(){return H})),e.d(t,"le",(function(){return J})),e.d(t,"uh",(function(){return Z})),e.d(t,"Dh",(function(){return $})),e.d(t,"xh",(function(){return nn})),e.d(t,"Ig",(function(){return tn})),e.d(t,"Yg",(function(){return en})),e.d(t,"bk",(function(){return rn})),e.d(t,"b",(function(){return un})),e.d(t,"Vg",(function(){return fn})),e.d(t,"vh",(function(){return cn})),e.d(t,"Ch",(function(){return on})),e.d(t,"Rk",(function(){return _n})),e.d(t,"ck",(function(){return dn})),e.d(t,"Jg",(function(){return an})),e.d(t,"Bg",(function(){return bn})),e.d(t,"ef",(function(){return gn})),e.d(t,"df",(function(){return wn})),e.d(t,"Ue",(function(){return sn})),e.d(t,"Rd",(function(){return ln})),e.d(t,"sf",(function(){return mn})),e.d(t,"th",(function(){return pn})),e.d(t,"Fb",(function(){return hn})),e.d(t,"re",(function(){return xn})),e.d(t,"gf",(function(){return yn})),e.d(t,"cg",(function(){return Sn})),e.d(t,"ff",(function(){return kn})),e.d(t,"ve",(function(){return vn})),e.d(t,"Tf",(function(){return Bn})),e.d(t,"Uf",(function(){return Pn})),e.d(t,"Vf",(function(){return jn})),e.d(t,"Sf",(function(){return In})),e.d(t,"Bf",(function(){return An})),e.d(t,"Cf",(function(){return Dn})),e.d(t,"Lf",(function(){return Tn})),e.d(t,"Kf",(function(){return Cn})),e.d(t,"Nf",(function(){return Mn})),e.d(t,"Of",(function(){return Fn})),e.d(t,"Qf",(function(){return En})),e.d(t,"Rf",(function(){return Rn})),e.d(t,"Xf",(function(){return Ln})),e.d(t,"Wf",(function(){return On})),e.d(t,"Pf",(function(){return Gn})),e.d(t,"gg",(function(){return Vn})),e.d(t,"fg",(function(){return Wn})),e.d(t,"ag",(function(){return qn})),e.d(t,"Df",(function(){return zn})),e.d(t,"Yf",(function(){return Un})),e.d(t,"Zf",(function(){return Kn})),e.d(t,"Mf",(function(){return Qn})),e.d(t,"If",(function(){return Xn})),e.d(t,"Ef",(function(){return Nn})),e.d(t,"Ff",(function(){return Yn})),e.d(t,"Gf",(function(){return Hn})),e.d(t,"Hf",(function(){return Jn})),e.d(t,"Jf",(function(){return Zn})),e.d(t,"Md",(function(){return $n})),e.d(t,"Uk",(function(){return nt})),e.d(t,"Ve",(function(){return tt})),e.d(t,"fh",(function(){return et})),e.d(t,"Nk",(function(){return rt})),e.d(t,"a",(function(){return ut})),e.d(t,"c",(function(){return ft})),e.d(t,"rh",(function(){return ct})),e.d(t,"ze",(function(){return it})),e.d(t,"Qd",(function(){return ot})),e.d(t,"tf",(function(){return _t})),e.d(t,"mc",(function(){return dt})),e.d(t,"Rb",(function(){return at})),e.d(t,"Sb",(function(){return bt})),e.d(t,"bc",(function(){return gt})),e.d(t,"hc",(function(){return wt})),e.d(t,"Xb",(function(){return st})),e.d(t,"Vb",(function(){return lt})),e.d(t,"qc",(function(){return mt})),e.d(t,"lc",(function(){return pt})),e.d(t,"ec",(function(){return ht})),e.d(t,"Wb",(function(){return xt})),e.d(t,"gc",(function(){return yt})),e.d(t,"ad",(function(){return St})),e.d(t,"mi",(function(){return kt})),e.d(t,"Zg",(function(){return vt})),e.d(t,"Rg",(function(){return Bt})),e.d(t,"yf",(function(){return Pt})),e.d(t,"Kj",(function(){return jt})),e.d(t,"uc",(function(){return It})),e.d(t,"cd",(function(){return At})),e.d(t,"bd",(function(){return Dt})),e.d(t,"he",(function(){return Tt})),e.d(t,"ie",(function(){return Ct})),e.d(t,"Jb",(function(){return Mt})),e.d(t,"Kb",(function(){return Ft})),e.d(t,"Pb",(function(){return Et})),e.d(t,"Qb",(function(){return Rt})),e.d(t,"o",(function(){return Lt})),e.d(t,"Kd",(function(){return Ot})),e.d(t,"q",(function(){return Gt})),e.d(t,"Jd",(function(){return Vt})),e.d(t,"pf",(function(){return Wt})),e.d(t,"Wd",(function(){return qt})),e.d(t,"Td",(function(){return zt})),e.d(t,"hb",(function(){return Ut})),e.d(t,"gb",(function(){return Kt})),e.d(t,"kk",(function(){return Qt})),e.d(t,"yh",(function(){return Xt})),e.d(t,"Vd",(function(){return Nt})),e.d(t,"Ud",(function(){return Yt})),e.d(t,"ik",(function(){return Ht})),e.d(t,"Mj",(function(){return Jt})),e.d(t,"ui",(function(){return Zt})),e.d(t,"jk",(function(){return $t})),e.d(t,"Lb",(function(){return ne})),e.d(t,"Th",(function(){return te})),e.d(t,"Nh",(function(){return ee})),e.d(t,"Ih",(function(){return re})),e.d(t,"md",(function(){return ue})),e.d(t,"ld",(function(){return fe})),e.d(t,"Uh",(function(){return ce})),e.d(t,"Jh",(function(){return ie})),e.d(t,"Lh",(function(){return oe})),e.d(t,"Qh",(function(){return _e})),e.d(t,"Sh",(function(){return de})),e.d(t,"ei",(function(){return ae})),e.d(t,"ci",(function(){return be})),e.d(t,"Cd",(function(){return ge})),e.d(t,"zd",(function(){return we})),e.d(t,"Bd",(function(){return se})),e.d(t,"xd",(function(){return le})),e.d(t,"Vh",(function(){return me})),e.d(t,"Kh",(function(){return pe})),e.d(t,"Mh",(function(){return he})),e.d(t,"Ph",(function(){return xe})),e.d(t,"Rh",(function(){return ye})),e.d(t,"fi",(function(){return Se})),e.d(t,"di",(function(){return ke})),e.d(t,"Dd",(function(){return ve})),e.d(t,"yd",(function(){return Be})),e.d(t,"Ad",(function(){return Pe})),e.d(t,"wd",(function(){return je})),e.d(t,"Oh",(function(){return Ie})),e.d(t,"Yh",(function(){return Ae})),e.d(t,"gi",(function(){return De})),e.d(t,"Zh",(function(){return Te})),e.d(t,"Pd",(function(){return Ce})),e.d(t,"Gi",(function(){return Me})),e.d(t,"dh",(function(){return Fe})),e.d(t,"eh",(function(){return Ee})),e.d(t,"Mk",(function(){return Re})),e.d(t,"lk",(function(){return Le})),e.d(t,"Qk",(function(){return Oe})),e.d(t,"jf",(function(){return Ge})),e.d(t,"p",(function(){return Ve})),e.d(t,"t",(function(){return We})),e.d(t,"A",(function(){return qe})),e.d(t,"E",(function(){return ze})),e.d(t,"P",(function(){return Ue})),e.d(t,"S",(function(){return Ke})),e.d(t,"V",(function(){return Qe})),e.d(t,"W",(function(){return Xe})),e.d(t,"ib",(function(){return Ne})),e.d(t,"jb",(function(){return Ye})),e.d(t,"tb",(function(){return He})),e.d(t,"Cb",(function(){return Je})),e.d(t,"Ab",(function(){return Ze})),e.d(t,"Db",(function(){return $e})),e.d(t,"Eb",(function(){return nr})),e.d(t,"Ib",(function(){return tr})),e.d(t,"Ob",(function(){return er})),e.d(t,"fc",(function(){return rr})),e.d(t,"kc",(function(){return ur})),e.d(t,"tc",(function(){return fr})),e.d(t,"Gc",(function(){return cr})),e.d(t,"Jc",(function(){return ir})),e.d(t,"Mc",(function(){return or})),e.d(t,"Qc",(function(){return _r})),e.d(t,"pd",(function(){return dr})),e.d(t,"td",(function(){return ar})),e.d(t,"vd",(function(){return br})),e.d(t,"Id",(function(){return gr})),e.d(t,"Sd",(function(){return wr})),e.d(t,"ce",(function(){return sr})),e.d(t,"je",(function(){return lr})),e.d(t,"ue",(function(){return mr})),e.d(t,"Fe",(function(){return pr})),e.d(t,"Me",(function(){return hr})),e.d(t,"Ne",(function(){return xr})),e.d(t,"lf",(function(){return yr})),e.d(t,"gh",(function(){return Sr})),e.d(t,"hh",(function(){return kr})),e.d(t,"jh",(function(){return vr})),e.d(t,"nh",(function(){return Br})),e.d(t,"Ah",(function(){return Pr})),e.d(t,"Bh",(function(){return jr})),e.d(t,"Hi",(function(){return Ir})),e.d(t,"Ji",(function(){return Ar})),e.d(t,"Mi",(function(){return Dr})),e.d(t,"Ni",(function(){return Tr})),e.d(t,"Ri",(function(){return Cr})),e.d(t,"Si",(function(){return Mr})),e.d(t,"Oi",(function(){return Fr})),e.d(t,"Qi",(function(){return Er})),e.d(t,"Ti",(function(){return Rr})),e.d(t,"Wi",(function(){return Lr})),e.d(t,"Vi",(function(){return Or})),e.d(t,"Xi",(function(){return Gr})),e.d(t,"Ui",(function(){return Vr})),e.d(t,"Yi",(function(){return Wr})),e.d(t,"fj",(function(){return qr})),e.d(t,"gj",(function(){return zr})),e.d(t,"ij",(function(){return Ur})),e.d(t,"kj",(function(){return Kr})),e.d(t,"lj",(function(){return Qr})),e.d(t,"oj",(function(){return Xr})),e.d(t,"pj",(function(){return Nr})),e.d(t,"sj",(function(){return Yr})),e.d(t,"vj",(function(){return Hr})),e.d(t,"wj",(function(){return Jr})),e.d(t,"xj",(function(){return Zr})),e.d(t,"zj",(function(){return $r})),e.d(t,"Aj",(function(){return nu})),e.d(t,"Bj",(function(){return tu})),e.d(t,"Dj",(function(){return eu})),e.d(t,"Ej",(function(){return ru})),e.d(t,"Fj",(function(){return uu})),e.d(t,"Gj",(function(){return fu})),e.d(t,"Ij",(function(){return cu})),e.d(t,"Jj",(function(){return iu})),e.d(t,"Rj",(function(){return ou})),e.d(t,"Sj",(function(){return _u})),e.d(t,"g",(function(){return du})),e.d(t,"m",(function(){return au})),e.d(t,"s",(function(){return bu})),e.d(t,"v",(function(){return gu})),e.d(t,"w",(function(){return wu})),e.d(t,"y",(function(){return su})),e.d(t,"B",(function(){return lu})),e.d(t,"F",(function(){return mu})),e.d(t,"J",(function(){return pu})),e.d(t,"H",(function(){return hu})),e.d(t,"N",(function(){return xu})),e.d(t,"L",(function(){return yu})),e.d(t,"rb",(function(){return Su})),e.d(t,"lb",(function(){return ku})),e.d(t,"nb",(function(){return vu})),e.d(t,"pb",(function(){return Bu})),e.d(t,"xb",(function(){return Pu})),e.d(t,"zb",(function(){return ju})),e.d(t,"Nb",(function(){return Iu})),e.d(t,"Ub",(function(){return Au})),e.d(t,"ac",(function(){return Du})),e.d(t,"cc",(function(){return Tu})),e.d(t,"ic",(function(){return Cu})),e.d(t,"oc",(function(){return Mu})),e.d(t,"pc",(function(){return Fu})),e.d(t,"yc",(function(){return Eu})),e.d(t,"Bc",(function(){return Ru})),e.d(t,"Dc",(function(){return Lu})),e.d(t,"Fc",(function(){return Ou})),e.d(t,"Hc",(function(){return Gu})),e.d(t,"Kc",(function(){return Vu})),e.d(t,"Nc",(function(){return Wu})),e.d(t,"Vc",(function(){return qu})),e.d(t,"Wc",(function(){return zu})),e.d(t,"Zc",(function(){return Uu})),e.d(t,"id",(function(){return Ku})),e.d(t,"gd",(function(){return Qu})),e.d(t,"qd",(function(){return Xu})),e.d(t,"Hd",(function(){return Nu})),e.d(t,"Fd",(function(){return Yu})),e.d(t,"Yd",(function(){return Hu})),e.d(t,"be",(function(){return Ju})),e.d(t,"ee",(function(){return Zu})),e.d(t,"te",(function(){return $u})),e.d(t,"ye",(function(){return nf})),e.d(t,"Ae",(function(){return tf})),e.d(t,"De",(function(){return ef})),e.d(t,"He",(function(){return rf})),e.d(t,"Ie",(function(){return uf})),e.d(t,"Ke",(function(){return ff})),e.d(t,"Oe",(function(){return cf})),e.d(t,"vf",(function(){return of})),e.d(t,"Mg",(function(){return _f})),e.d(t,"Qg",(function(){return df})),e.d(t,"ph",(function(){return af})),e.d(t,"Eh",(function(){return bf})),e.d(t,"qi",(function(){return gf})),e.d(t,"yi",(function(){return wf})),e.d(t,"Bi",(function(){return sf})),e.d(t,"zi",(function(){return lf})),e.d(t,"Di",(function(){return mf})),e.d(t,"Ki",(function(){return pf})),e.d(t,"cj",(function(){return hf})),e.d(t,"ej",(function(){return xf})),e.d(t,"qj",(function(){return yf})),e.d(t,"Nj",(function(){return Sf})),e.d(t,"Tj",(function(){return kf})),e.d(t,"Yj",(function(){return vf})),e.d(t,"kf",(function(){return Bf})),e.d(t,"nd",(function(){return Pf})),e.d(t,"kg",(function(){return jf})),e.d(t,"ed",(function(){return If})),e.d(t,"eb",(function(){return Af})),e.d(t,"me",(function(){return Df})),e.d(t,"zf",(function(){return Tf})),e.d(t,"wh",(function(){return Cf})),e.d(t,"db",(function(){return Mf})),e.d(t,"sh",(function(){return Ff})),e.d(t,"qb",(function(){return Ef})),e.d(t,"bi",(function(){return Rf})),e.d(t,"ai",(function(){return Lf})),e.d(t,"R",(function(){return Of})),e.d(t,"Zj",(function(){return Gf})),e.d(t,"e",(function(){return Vf})),e.d(t,"ge",(function(){return Wf})),e.d(t,"Yb",(function(){return qf})),e.d(t,"se",(function(){return zf})),e.d(t,"ch",(function(){return Uf})),e.d(t,"bh",(function(){return Kf})),e.d(t,"Hh",(function(){return Qf})),e.d(t,"Wh",(function(){return Xf})),e.d(t,"jg",(function(){return Nf})),e.d(t,"Fi",(function(){return Yf})),e.d(t,"Xd",(function(){return Hf})),e.d(t,"U",(function(){return Jf})),e.d(t,"T",(function(){return Zf})),e.d(t,"X",(function(){return $f})),e.d(t,"Bb",(function(){return nc})),e.d(t,"ih",(function(){return tc})),e.d(t,"Ii",(function(){return ec})),e.d(t,"Pi",(function(){return rc})),e.d(t,"hj",(function(){return uc})),e.d(t,"jj",(function(){return fc})),e.d(t,"mj",(function(){return cc})),e.d(t,"nj",(function(){return ic})),e.d(t,"tj",(function(){return oc})),e.d(t,"uj",(function(){return _c})),e.d(t,"yj",(function(){return dc})),e.d(t,"Cj",(function(){return ac})),e.d(t,"Hj",(function(){return bc})),e.d(t,"f",(function(){return gc})),e.d(t,"n",(function(){return wc})),e.d(t,"r",(function(){return sc})),e.d(t,"u",(function(){return lc})),e.d(t,"x",(function(){return mc})),e.d(t,"z",(function(){return pc})),e.d(t,"C",(function(){return hc})),e.d(t,"G",(function(){return xc})),e.d(t,"K",(function(){return yc})),e.d(t,"I",(function(){return Sc})),e.d(t,"O",(function(){return kc})),e.d(t,"M",(function(){return vc})),e.d(t,"sb",(function(){return Bc})),e.d(t,"kb",(function(){return Pc})),e.d(t,"mb",(function(){return jc})),e.d(t,"ob",(function(){return Ic})),e.d(t,"wb",(function(){return Ac})),e.d(t,"yb",(function(){return Dc})),e.d(t,"Mb",(function(){return Tc})),e.d(t,"Tb",(function(){return Cc})),e.d(t,"Zb",(function(){return Mc})),e.d(t,"dc",(function(){return Fc})),e.d(t,"jc",(function(){return Ec})),e.d(t,"nc",(function(){return Rc})),e.d(t,"rc",(function(){return Lc})),e.d(t,"xc",(function(){return Oc})),e.d(t,"Ac",(function(){return Gc})),e.d(t,"Cc",(function(){return Vc})),e.d(t,"Ec",(function(){return Wc})),e.d(t,"Ic",(function(){return qc})),e.d(t,"Lc",(function(){return zc})),e.d(t,"Oc",(function(){return Uc})),e.d(t,"Uc",(function(){return Kc})),e.d(t,"Xc",(function(){return Qc})),e.d(t,"Yc",(function(){return Xc})),e.d(t,"hd",(function(){return Nc})),e.d(t,"fd",(function(){return Yc})),e.d(t,"rd",(function(){return Hc})),e.d(t,"Gd",(function(){return Jc})),e.d(t,"Ed",(function(){return Zc})),e.d(t,"Zd",(function(){return $c})),e.d(t,"ae",(function(){return ni})),e.d(t,"fe",(function(){return ti})),e.d(t,"xe",(function(){return ei})),e.d(t,"Be",(function(){return ri})),e.d(t,"Ce",(function(){return ui})),e.d(t,"Ge",(function(){return fi})),e.d(t,"Je",(function(){return ci})),e.d(t,"Pe",(function(){return ii})),e.d(t,"uf",(function(){return oi})),e.d(t,"Lg",(function(){return _i})),e.d(t,"Pg",(function(){return di})),e.d(t,"oh",(function(){return ai})),e.d(t,"Fh",(function(){return bi})),e.d(t,"pi",(function(){return gi})),e.d(t,"xi",(function(){return wi})),e.d(t,"Ci",(function(){return si})),e.d(t,"Ai",(function(){return li})),e.d(t,"Ei",(function(){return mi})),e.d(t,"Li",(function(){return pi})),e.d(t,"bj",(function(){return hi})),e.d(t,"dj",(function(){return xi})),e.d(t,"rj",(function(){return yi})),e.d(t,"Oj",(function(){return Si})),e.d(t,"Uj",(function(){return ki})),e.d(t,"Xj",(function(){return vi})),e.d(t,"Ee",(function(){return Bi})),e.d(t,"mh",(function(){return Pi})),e.d(t,"Xh",(function(){return ji})),e.d(t,"ek",(function(){return Ii})),e.d(t,"Xe",(function(){return Ai})),e.d(t,"Wj",(function(){return Di})),e.d(t,"Vj",(function(){return Ti})),e.d(t,"dk",(function(){return Ci})),e.d(t,"Ze",(function(){return Mi})),e.d(t,"sd",(function(){return Fi})),e.d(t,"ti",(function(){return Ei})),e.d(t,"lg",(function(){return Ri})),e.d(t,"d",(function(){return Li})),e.d(t,"mf",(function(){return Oi})),e.d(t,"Ng",(function(){return Gi})),e.d(t,"Wg",(function(){return Vi})),e.d(t,"Og",(function(){return Wi})),e.d(t,"ke",(function(){return qi})),e.d(t,"Xg",(function(){return zi})),e.d(t,"bg",(function(){return Ui})),e.d(t,"Af",(function(){return Ki})),e.d(t,"i",(function(){return Qi})),e.d(t,"lh",(function(){return Xi})),e.d(t,"vc",(function(){return Ni})),e.d(t,"ri",(function(){return Yi})),e.d(t,"j",(function(){return Hi})),e.d(t,"eg",(function(){return Ji})),e.d(t,"ab",(function(){return Zi})),e.d(t,"bb",(function(){return $i})),e.d(t,"hg",(function(){return no})),e.d(t,"ig",(function(){return to})),e.d(t,"Sc",(function(){return eo})),e.d(t,"Tc",(function(){return ro})),e.d(t,"Rc",(function(){return uo})),e.d(t,"h",(function(){return fo})),e.d(t,"kh",(function(){return co})),e.d(t,"hf",(function(){return io})),e.d(t,"gk",(function(){return oo})),e.d(t,"ni",(function(){return _o})),e.d(t,"Ye",(function(){return ao})),e.d(t,"li",(function(){return bo})),e.d(t,"pe",(function(){return go})),e.d(t,"qe",(function(){return wo})),e.d(t,"fk",(function(){return so})),e.d(t,"oi",(function(){return lo})),e.d(t,"We",(function(){return mo})),e.d(t,"ki",(function(){return po})),e.d(t,"ne",(function(){return ho})),e.d(t,"oe",(function(){return xo})),e.d(t,"pg",(function(){return yo})),e.d(t,"jd",(function(){return So})),e.d(t,"Dg",(function(){return ko})),e.d(t,"Eg",(function(){return vo})),e.d(t,"Lj",(function(){return Bo})),e.d(t,"Le",(function(){return Po})),e.d(t,"de",(function(){return jo})),e.d(t,"Hb",(function(){return Io})),e.d(t,"dd",(function(){return Ao})),e.d(t,"zc",(function(){return Do})),e.d(t,"Nd",(function(){return To})),e.d(t,"Ld",(function(){return Co})),e.d(t,"bf",(function(){return Mo})),e.d(t,"xf",(function(){return Fo})),e.d(t,"ak",(function(){return Eo})),e.d(t,"Sg",(function(){return Ro})),e.d(t,"Tg",(function(){return Lo})),e.d(t,"ng",(function(){return Oo})),e.d(t,"ub",(function(){return Go})),e.d(t,"Ug",(function(){return Vo})),e.d(t,"wi",(function(){return Wo})),e.d(t,"cf",(function(){return qo})),e.d(t,"Q",(function(){return zo})),e.d(t,"k",(function(){return Uo})),e.d(t,"wc",(function(){return Ko})),e.d(t,"si",(function(){return Qo})),e.d(t,"dg",(function(){return Xo})),e.d(t,"wf",(function(){return No})),e.d(t,"qh",(function(){return Yo})),e.d(t,"of",(function(){return Ho})),e.d(t,"vb",(function(){return Jo})),e.d(t,"Kg",(function(){return Zo})),e.d(t,"od",(function(){return $o})),e.d(t,"ud",(function(){return n_})),e.d(t,"Qj",(function(){return t_})),e.d(t,"og",(function(){return e_})),e.d(t,"kd",(function(){return r_})),e.d(t,"Cg",(function(){return u_})),e.d(t,"l",(function(){return f_})),e.d(t,"Gb",(function(){return c_})),e.d(t,"Qe",(function(){return i_})),e.d(t,"D",(function(){return o_})),e.d(t,"sc",(function(){return __})),e.d(t,"Pc",(function(){return d_})),e.d(t,"Re",(function(){return a_})),e.d(t,"rf",(function(){return b_})),e.d(t,"mg",(function(){return g_})),e.d(t,"tg",(function(){return w_})),e.d(t,"cb",(function(){return s_})),e.d(t,"rg",(function(){return l_})),e.d(t,"Gh",(function(){return m_})),e.d(t,"hk",(function(){return p_})),e.d(t,"Se",(function(){return h_})),e.d(t,"Te",(function(){return x_})),e.d(t,"af",(function(){return y_})),e.d(t,"Fg",(function(){return S_})),e.d(t,"ah",(function(){return k_})),e.d(t,"if",(function(){return v_})),e.d(t,"we",(function(){return B_})),e.d(t,"nf",(function(){return P_})),e.d(t,"Pj",(function(){return j_})),e.d(t,"zh",(function(){return I_})),e.d(t,"fb",(function(){return A_})),e.d(t,"Zi",(function(){return D_})),e.d(t,"aj",(function(){return T_})),e.d(t,"Y",(function(){return C_})),e.d(t,"vg",(function(){return M_})),e.d(t,"yg",(function(){return F_})),e.d(t,"wg",(function(){return E_})),e.d(t,"Ag",(function(){return R_})),e.d(t,"qg",(function(){return L_})),e.d(t,"ii",(function(){return O_})),e.d(t,"qf",(function(){return G_})),e.d(t,"zg",(function(){return V_})),e.d(t,"ug",(function(){return W_})),e.d(t,"xg",(function(){return q_})),e.d(t,"Z",(function(){return z_})),e.d(t,"hi",(function(){return U_})),e.d(t,"Lk",(function(){return K_})),e.d(t,"Wk",(function(){return Q_})),e.d(t,"Pk",(function(){return X_})),e.d(t,"xk",(function(){return N_})),e.d(t,"yk",(function(){return Y_})),e.d(t,"zk",(function(){return H_})),e.d(t,"Ak",(function(){return J_})),e.d(t,"Bk",(function(){return Z_})),e.d(t,"Ck",(function(){return $_})),e.d(t,"Dk",(function(){return nd})),e.d(t,"Ek",(function(){return td})),e.d(t,"Fk",(function(){return ed})),e.d(t,"Gk",(function(){return rd})),e.d(t,"Hk",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"nk",(function(){return od})),e.d(t,"ok",(function(){return _d})),e.d(t,"pk",(function(){return dd})),e.d(t,"qk",(function(){return ad})),e.d(t,"rk",(function(){return bd})),e.d(t,"sk",(function(){return gd})),e.d(t,"tk",(function(){return wd})),e.d(t,"uk",(function(){return sd})),e.d(t,"vk",(function(){return ld})),e.d(t,"wk",(function(){return md}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}function _(n){i===f.length&&f.push(f.length+1);const t=i;return i=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))}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,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h09573a98f77bdf99(n,t,_(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h9171d9b5cff45cfc(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hfa78ae43adb4c511(n,t,_(e),_(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h9ef24c46c26cc6eb(n,t,_(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h534a0af60acb873b(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h9a9886a2438dd56f(n,t,_(e),_(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,_(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,_(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n){return _(c(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function X(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function N(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){return c(n).offsetX}function H(n){return c(n).offsetY}function J(n){return _(c(n).getCoalescedEvents)}function Z(n){return _(c(n).requestFullscreen)}function $(n){return _(c(n).scheduler)}function nn(n){return _(c(n).requestIdleCallback)}function tn(n){return _(c(n).onpointerrawupdate)}function en(){return _(ResizeObserverEntry.prototype)}function rn(n){const t=c(n).webkitFullscreenElement;return p(t)?0:_(t)}function un(n){return _(c(n).Window)}function fn(n,t,e){return _(c(n).postTask(c(t),c(e)))}function cn(n){return _(c(n).requestFullscreen())}function on(n){return _(c(n).scheduler)}function _n(n){return _(n)}function dn(n){c(n).webkitRequestFullscreen()}function an(n){return _(c(n).performance)}function bn(n){return c(n).now()}function gn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function wn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function sn(n){return _(c(n).gpu)}function ln(n){return _(c(n).features)}function mn(n){return _(c(n).limits)}function pn(n,t){return _(c(n).requestDevice(c(t)))}function hn(n,t){c(n).configure(c(t))}function xn(n){return _(c(n).getCurrentTexture())}function yn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function Sn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function kn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function vn(n,t,e){return _(c(n).getMappedRange(t,e))}function Bn(n){return c(n).maxTextureDimension1D}function Pn(n){return c(n).maxTextureDimension2D}function jn(n){return c(n).maxTextureDimension3D}function In(n){return c(n).maxTextureArrayLayers}function An(n){return c(n).maxBindGroups}function Dn(n){return c(n).maxBindingsPerBindGroup}function Tn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Cn(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function Mn(n){return c(n).maxSampledTexturesPerShaderStage}function Fn(n){return c(n).maxSamplersPerShaderStage}function En(n){return c(n).maxStorageBuffersPerShaderStage}function Rn(n){return c(n).maxStorageTexturesPerShaderStage}function Ln(n){return c(n).maxUniformBuffersPerShaderStage}function On(n){return c(n).maxUniformBufferBindingSize}function Gn(n){return c(n).maxStorageBufferBindingSize}function Vn(n){return c(n).minUniformBufferOffsetAlignment}function Wn(n){return c(n).minStorageBufferOffsetAlignment}function qn(n){return c(n).maxVertexBuffers}function zn(n){return c(n).maxBufferSize}function Un(n){return c(n).maxVertexAttributes}function Kn(n){return c(n).maxVertexBufferArrayStride}function Qn(n){return c(n).maxInterStageShaderComponents}function Xn(n){return c(n).maxComputeWorkgroupStorageSize}function Nn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Yn(n){return c(n).maxComputeWorkgroupSizeX}function Hn(n){return c(n).maxComputeWorkgroupSizeY}function Jn(n){return c(n).maxComputeWorkgroupSizeZ}function Zn(n){return c(n).maxComputeWorkgroupsPerDimension}function $n(n){return _(c(n).error)}function nt(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function tt(n,t,e){return c(n).has(g(t,e))}function et(n){return _(c(n).queue)}function rt(n){const t=c(n);return"object"==typeof t&&null!==t}function ut(n){return _(c(n).Window)}function ft(n){return _(c(n).WorkerGlobalScope)}function ct(n,t){return _(c(n).requestAdapter(c(t)))}function it(n){return _(c(n).getPreferredCanvasFormat())}function ot(n){return _(c(n).features)}function _t(n){return _(c(n).limits)}function dt(n,t){return _(c(n).createShaderModule(c(t)))}function at(n,t){return _(c(n).createBindGroupLayout(c(t)))}function bt(n,t){return _(c(n).createBindGroup(c(t)))}function gt(n,t){return _(c(n).createPipelineLayout(c(t)))}function wt(n,t){return _(c(n).createRenderPipeline(c(t)))}function st(n,t){return _(c(n).createComputePipeline(c(t)))}function lt(n,t){return _(c(n).createBuffer(c(t)))}function mt(n,t){return _(c(n).createTexture(c(t)))}function pt(n,t){return _(c(n).createSampler(c(t)))}function ht(n,t){return _(c(n).createQuerySet(c(t)))}function xt(n,t){return _(c(n).createCommandEncoder(c(t)))}function yt(n,t){return _(c(n).createRenderBundleEncoder(c(t)))}function St(n){c(n).destroy()}function kt(n,t){c(n).onuncapturederror=c(t)}function vt(n,t){c(n).pushErrorScope(o(t))}function Bt(n){return _(c(n).popErrorScope())}function Pt(n,t,e,r){return _(c(n).mapAsync(t>>>0,e,r))}function jt(n){c(n).unmap()}function It(n,t){return _(c(n).createView(c(t)))}function At(n){c(n).destroy()}function Dt(n){c(n).destroy()}function Tt(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Ct(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Mt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Ft(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Et(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Lt(n,t){return _(c(n).beginComputePass(c(t)))}function Ot(n){c(n).end()}function Gt(n,t){return _(c(n).beginRenderPass(c(t)))}function Vt(n){c(n).end()}function Wt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function qt(n,t){return _(c(n).finish(c(t)))}function zt(n){return _(c(n).finish())}function Ut(n,t,e){c(n).clearBuffer(c(t),e)}function Kt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Qt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Xt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Nt(n){return _(c(n).finish())}function Yt(n,t){return _(c(n).finish(c(t)))}function Ht(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Jt(n){return c(n).usage}function Zt(n){return c(n).size}function $t(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function ne(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function te(n,t){c(n).setPipeline(c(t))}function ee(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function re(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ue(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function fe(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function ce(n,t){c(n).setPipeline(c(t))}function ie(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function oe(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function _e(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function de(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ae(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function be(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function ge(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function we(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function se(n,t,e){c(n).drawIndirect(c(t),e)}function le(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function me(n,t){c(n).setPipeline(c(t))}function pe(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function he(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function xe(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function ye(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Se(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ke(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function ve(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Be(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Pe(n,t,e){c(n).drawIndirect(c(t),e)}function je(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ie(n,t){c(n).setBlendConstant(c(t))}function Ae(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function De(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Te(n,t){c(n).setStencilReference(t>>>0)}function Ce(n,t){c(n).executeBundles(c(t))}function Me(n,t){c(n).submit(c(t))}function Fe(n){queueMicrotask(c(n))}function Ee(n){return _(c(n).queueMicrotask)}function Re(n){return"function"==typeof c(n)}function Le(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Oe(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Ge(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Ve(n,t,e){c(n).beginQuery(t>>>0,c(e))}function We(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function qe(n,t,e){c(n).bindSampler(t>>>0,c(e))}function ze(n,t){c(n).bindVertexArray(c(t))}function Ue(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function Ke(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Qe(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Xe(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Ne(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function Ye(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function He(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Je(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function Ze(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function $e(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function nr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function tr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function er(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function rr(n){const t=c(n).createQuery();return p(t)?0:_(t)}function ur(n){const t=c(n).createSampler();return p(t)?0:_(t)}function fr(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function cr(n,t){c(n).deleteQuery(c(t))}function ir(n,t){c(n).deleteSampler(c(t))}function or(n,t){c(n).deleteSync(c(t))}function _r(n,t){c(n).deleteVertexArray(c(t))}function dr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function ar(n,t){c(n).drawBuffers(c(t))}function br(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function gr(n,t){c(n).endQuery(t>>>0)}function wr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function sr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function lr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function mr(){return O((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function pr(n,t,e){return _(c(n).getQueryParameter(c(t),e>>>0))}function hr(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function xr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function yr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Sr(n,t){c(n).readBuffer(t>>>0)}function kr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function vr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Br(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Pr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function jr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Ir(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Ar(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Dr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Tr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Cr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Wr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function qr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function zr(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function Ur(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function Kr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Qr(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Xr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Nr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Yr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Hr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Jr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function Zr(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function $r(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function nu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function cu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function iu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function ou(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function _u(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function du(n,t){c(n).activeTexture(t>>>0)}function au(n,t,e){c(n).attachShader(c(t),c(e))}function bu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function gu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function wu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function su(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function lu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function mu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function pu(n,t){c(n).blendEquation(t>>>0)}function hu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function xu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function yu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Su(n,t){c(n).clear(t>>>0)}function ku(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function vu(n,t){c(n).clearDepth(t)}function Bu(n,t){c(n).clearStencil(t)}function Pu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ju(n,t){c(n).compileShader(c(t))}function Iu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Au(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Du(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Tu(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Cu(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Mu(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Fu(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Eu(n,t){c(n).cullFace(t>>>0)}function Ru(n,t){c(n).deleteBuffer(c(t))}function Lu(n,t){c(n).deleteFramebuffer(c(t))}function Ou(n,t){c(n).deleteProgram(c(t))}function Gu(n,t){c(n).deleteRenderbuffer(c(t))}function Vu(n,t){c(n).deleteShader(c(t))}function Wu(n,t){c(n).deleteTexture(c(t))}function qu(n,t){c(n).depthFunc(t>>>0)}function zu(n,t){c(n).depthMask(0!==t)}function Uu(n,t,e){c(n).depthRange(t,e)}function Ku(n,t){c(n).disable(t>>>0)}function Qu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Xu(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Nu(n,t){c(n).enable(t>>>0)}function Yu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Hu(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Ju(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Zu(n,t){c(n).frontFace(t>>>0)}function $u(){return O((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function nf(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function tf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ef(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function rf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function uf(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function ff(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function cf(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function of(n,t){c(n).linkProgram(c(t))}function _f(n,t,e){c(n).pixelStorei(t>>>0,e)}function df(n,t,e){c(n).polygonOffset(t,e)}function af(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function bf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function gf(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function wf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function sf(n,t){c(n).stencilMask(t>>>0)}function lf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function mf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function pf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function hf(n,t,e){c(n).uniform1f(c(t),e)}function xf(n,t,e){c(n).uniform1i(c(t),e)}function yf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Sf(n,t){c(n).useProgram(c(t))}function kf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function vf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Bf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Pf(n){const t=c(n).document;return p(t)?0:_(t)}function jf(n){return _(c(n).navigator)}function If(n){return c(n).devicePixelRatio}function Af(n,t){c(n).cancelIdleCallback(t>>>0)}function Df(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:_(e)}),arguments)}function Tf(){return O((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function Cf(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Mf(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ff(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Ef(n,t){c(n).clearTimeout(t)}function Rf(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Lf(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Of(n){const t=c(n).body;return p(t)?0:_(t)}function Gf(n){return _(c(n).visibilityState)}function Vf(n){const t=c(n).activeElement;return p(t)?0:_(t)}function Wf(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function qf(){return O((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function zf(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function Uf(){return O((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function Kf(){return O((function(n,t,e){return _(c(n).querySelectorAll(g(t,e)))}),arguments)}function Qf(){return O((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function Xf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Nf(n){return _(c(n).navigator)}function Yf(n){return _(c(n).style)}function Hf(){return O((function(n){c(n).focus()}),arguments)}function Jf(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Zf(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function $f(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function nc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function tc(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function ec(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function rc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function uc(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function fc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function cc(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function ic(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function oc(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function _c(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function dc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function ac(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function bc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function gc(n,t){c(n).activeTexture(t>>>0)}function wc(n,t,e){c(n).attachShader(c(t),c(e))}function sc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function lc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function mc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function pc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function hc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function xc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function yc(n,t){c(n).blendEquation(t>>>0)}function Sc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function kc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function vc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Bc(n,t){c(n).clear(t>>>0)}function Pc(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function jc(n,t){c(n).clearDepth(t)}function Ic(n,t){c(n).clearStencil(t)}function Ac(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Dc(n,t){c(n).compileShader(c(t))}function Tc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Cc(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Mc(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Fc(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Ec(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Rc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Lc(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Oc(n,t){c(n).cullFace(t>>>0)}function Gc(n,t){c(n).deleteBuffer(c(t))}function Vc(n,t){c(n).deleteFramebuffer(c(t))}function Wc(n,t){c(n).deleteProgram(c(t))}function qc(n,t){c(n).deleteRenderbuffer(c(t))}function zc(n,t){c(n).deleteShader(c(t))}function Uc(n,t){c(n).deleteTexture(c(t))}function Kc(n,t){c(n).depthFunc(t>>>0)}function Qc(n,t){c(n).depthMask(0!==t)}function Xc(n,t,e){c(n).depthRange(t,e)}function Nc(n,t){c(n).disable(t>>>0)}function Yc(n,t){c(n).disableVertexAttribArray(t>>>0)}function Hc(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Jc(n,t){c(n).enable(t>>>0)}function Zc(n,t){c(n).enableVertexAttribArray(t>>>0)}function $c(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ni(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function ti(n,t){c(n).frontFace(t>>>0)}function ei(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function ri(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ui(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function fi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ci(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function ii(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function oi(n,t){c(n).linkProgram(c(t))}function _i(n,t,e){c(n).pixelStorei(t>>>0,e)}function di(n,t,e){c(n).polygonOffset(t,e)}function ai(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function bi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function gi(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function wi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function si(n,t){c(n).stencilMask(t>>>0)}function li(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function mi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function pi(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function hi(n,t,e){c(n).uniform1f(c(t),e)}function xi(n,t,e){c(n).uniform1i(c(t),e)}function yi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Si(n,t){c(n).useProgram(c(t))}function ki(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function vi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Bi(){return O((function(n,t,e,u){const f=m(c(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Pi(){return O((function(n,t,e,u){const f=m(c(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function ji(){return O((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Ii(n){return c(n).width}function Ai(n){return c(n).height}function Di(n){return c(n).videoWidth}function Ti(n){return c(n).videoHeight}function Ci(n){return c(n).width}function Mi(n){return c(n).height}function Fi(n,t){c(n).drawBuffersWEBGL(c(t))}function Ei(n){return _(c(n).signal)}function Ri(){return O((function(){return _(new AbortController)}),arguments)}function Li(n){c(n).abort()}function Oi(n){return c(n).isIntersecting}function Gi(n){return c(n).pointerId}function Vi(n){return c(n).pressure}function Wi(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function qi(n){return _(c(n).getCoalescedEvents())}function zi(n){c(n).preventDefault()}function Ui(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ki(n){return c(n).matches}function Qi(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Xi(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Ni(n){return c(n).ctrlKey}function Yi(n){return c(n).shiftKey}function Hi(n){return c(n).altKey}function Ji(n){return c(n).metaKey}function Zi(n){return c(n).button}function $i(n){return c(n).buttons}function no(n){return c(n).movementX}function to(n){return c(n).movementY}function eo(n){return c(n).deltaX}function ro(n){return c(n).deltaY}function uo(n){return c(n).deltaMode}function fo(){return O((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function co(){return O((function(n,t,e,r){c(n).removeEventListener(g(t,e),c(r))}),arguments)}function io(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function oo(n){return c(n).width}function _o(n,t){c(n).width=t>>>0}function ao(n){return c(n).height}function bo(n,t){c(n).height=t>>>0}function go(){return O((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function wo(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function so(n){return c(n).width}function lo(n,t){c(n).width=t>>>0}function mo(n){return c(n).height}function po(n,t){c(n).height=t>>>0}function ho(){return O((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function xo(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function yo(){return O((function(n){return _(new ResizeObserver(c(n)))}),arguments)}function So(n){c(n).disconnect()}function ko(n,t){c(n).observe(c(t))}function vo(n,t,e){c(n).observe(c(t),c(e))}function Bo(n,t){c(n).unobserve(c(t))}function Po(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function jo(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Io(n){return _(c(n).contentRect)}function Ao(n){return _(c(n).devicePixelContentBoxSize)}function Do(n){console.debug(c(n))}function To(n){console.error(c(n))}function Co(n,t){console.error(c(n),c(t))}function Mo(n){console.info(c(n))}function Fo(n){console.log(c(n))}function Eo(n){console.warn(c(n))}function Ro(n){return _(c(n).port1)}function Lo(n){return _(c(n).port2)}function Oo(){return O((function(){return _(new MessageChannel)}),arguments)}function Go(n){c(n).close()}function Vo(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Wo(n){c(n).start()}function qo(n){return c(n).inlineSize}function zo(n){return c(n).blockSize}function Uo(n){return c(n).altKey}function Ko(n){return c(n).ctrlKey}function Qo(n){return c(n).shiftKey}function Xo(n){return c(n).metaKey}function No(n){return c(n).location}function Yo(n){return c(n).repeat}function Ho(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Jo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Zo(n){return c(n).persisted}function $o(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function n_(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function t_(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function e_(){return O((function(n){return _(new IntersectionObserver(c(n)))}),arguments)}function r_(n){c(n).disconnect()}function u_(n,t){c(n).observe(c(t))}function f_(){return O((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function c_(n,t){return c(n).contains(c(t))}function i_(n,t){const e=c(n)[t>>>0];return p(e)?0:_(e)}function o_(n,t){c(n).bindVertexArrayOES(c(t))}function __(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function d_(n,t){c(n).deleteVertexArrayOES(c(t))}function a_(n,t){return _(c(n)[t>>>0])}function b_(n){return c(n).length}function g_(){return _(new Array)}function w_(n,t){return _(new Function(g(n,t)))}function s_(){return O((function(n,t){return _(c(n).call(c(t)))}),arguments)}function l_(){return _(new Object)}function m_(){return O((function(){return _(self.self)}),arguments)}function p_(){return O((function(){return _(window.window)}),arguments)}function h_(){return O((function(){return _(globalThis.globalThis)}),arguments)}function x_(){return O((function(){return _(global.global)}),arguments)}function y_(n,t,e){return c(n).includes(c(t),e)}function S_(n){return _(Array.of(c(n)))}function k_(n,t){return c(n).push(c(t))}function v_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function B_(n,t){return _(Object.getOwnPropertyDescriptor(c(n),c(t)))}function P_(n,t){return Object.is(c(n),c(t))}function j_(n){return _(c(n).valueOf())}function I_(n){return _(Promise.resolve(c(n)))}function A_(n,t){return _(c(n).catch(c(t)))}function D_(n,t){return _(c(n).then(c(t)))}function T_(n,t,e){return _(c(n).then(c(t),c(e)))}function C_(n){return _(c(n).buffer)}function M_(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function F_(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function E_(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function R_(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function L_(n){return _(new Uint8Array(c(n)))}function O_(n,t,e){c(n).set(c(t),e>>>0)}function G_(n){return c(n).length}function V_(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function W_(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function q_(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function z_(n){return _(c(n).buffer)}function U_(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function K_(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;x()[n/4+1]=u,x()[n/4+0]=e}function Q_(n,t){throw new Error(g(n,t))}function X_(){return _(r.memory)}function N_(n,t,e){return _(k(n,t,9,v))}function Y_(n,t,e){return _(k(n,t,9,B))}function H_(n,t,e){return _(k(n,t,9,P))}function J_(n,t,e){return _(k(n,t,9,v))}function Z_(n,t,e){return _(k(n,t,9,v))}function $_(n,t,e){return _(k(n,t,9,v))}function nd(n,t,e){return _(k(n,t,9,v))}function td(n,t,e){return _(k(n,t,188,j))}function ed(n,t,e){return _(k(n,t,188,I))}function rd(n,t,e){return _(k(n,t,188,j))}function ud(n,t,e){return _(k(n,t,188,A))}function fd(n,t,e){return _(k(n,t,188,j))}function cd(n,t,e){return _(k(n,t,188,j))}function id(n,t,e){return _(k(n,t,188,j))}function od(n,t,e){return _(k(n,t,630,D))}function _d(n,t,e){return _(k(n,t,630,D))}function dd(n,t,e){return _(k(n,t,630,D))}function ad(n,t,e){return _(k(n,t,630,T))}function bd(n,t,e){return _(k(n,t,630,D))}function gd(n,t,e){return _(k(n,t,630,D))}function wd(n,t,e){return _(k(n,t,630,D))}function sd(n,t,e){return _(k(n,t,1772,C))}function ld(n,t,e){return _(k(n,t,1772,C))}function md(n,t,e){return _(k(n,t,1866,M))}}).call(this,e(260)(n))},421:function(n,t,e){"use strict";e.r(t);var r=e(422),u=e(252);e.d(t,"__wbg_set_wasm",(function(){return u.ji})),e.d(t,"run",(function(){return u.Xk})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Tk})),e.d(t,"__wbindgen_cb_drop",(function(){return u.mk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Ok})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.Sk})),e.d(t,"__wbindgen_string_new",(function(){return u.Vk})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.sg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.vi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Od})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Gg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Hg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.le})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.uh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Dh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.xh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Ig})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.Yg})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.bk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.Vg})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.vh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Ch})),e.d(t,"__wbindgen_number_new",(function(){return u.Rk})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ck})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Jg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Bg})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.df})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.Ue})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Rd})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.sf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.th})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Fb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.re})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.gf})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.cg})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.ff})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.ve})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.Tf})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.Uf})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.Vf})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.Sf})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Bf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Cf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Lf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Kf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Nf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Of})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.Qf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.Rf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.Pf})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.gg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.fg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.ag})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Df})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.Yf})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.Zf})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.If})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Ef})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Ff})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Gf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Hf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Jf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Md})),e.d(t,"__wbindgen_string_get",(function(){return u.Uk})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.Ve})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.fh})),e.d(t,"__wbindgen_is_object",(function(){return u.Nk})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.rh})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.ze})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Qd})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.tf})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.mc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Sb})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.bc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.hc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Xb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Vb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.qc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.lc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.ec})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Wb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.gc})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.ad})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.mi})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.Zg})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.Rg})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.yf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.Kj})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.uc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.cd})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.bd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.he})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ie})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Jb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Kb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Pb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Qb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.o})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Kd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.q})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Jd})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.pf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.Wd})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Td})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.hb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.gb})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.kk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.yh})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.Vd})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Ud})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.ik})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.Mj})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.ui})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.jk})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Lb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.Nh})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Ih})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.md})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.ld})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.Uh})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.Jh})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.Lh})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.Qh})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.Sh})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.ei})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.ci})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.xd})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.Kh})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.Mh})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.Ph})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.Rh})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.di})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.wd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.Oh})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.Yh})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.gi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.Zh})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Pd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Gi})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.dh})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.eh})),e.d(t,"__wbindgen_is_function",(function(){return u.Mk})),e.d(t,"__wbindgen_boolean_get",(function(){return u.lk})),e.d(t,"__wbindgen_number_get",(function(){return u.Qk})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.jf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.ib})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.jb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.tb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Ab})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Eb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Ib})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Ob})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.fc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.kc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.tc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Gc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Jc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Mc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Qc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.pd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.td})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.vd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Id})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Sd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ce})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.je})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.lf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.gh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.hh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.jh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.nh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Ah})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Bh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Hi})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ji})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Mi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Ni})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.Ri})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.Si})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Oi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.Qi})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.Wi})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.Vi})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Xi})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.Ui})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Yi})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.fj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.gj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.ij})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.kj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.lj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.oj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.pj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.sj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.vj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.wj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.xj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.zj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Aj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Bj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Dj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Ej})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Fj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Ij})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Jj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.Rj})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.Sj})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.rb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.lb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.pb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.xb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.ac})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.ic})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.oc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.pc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Zc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.qd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Hd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Fd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.be})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ee})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.vf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Mg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.Qg})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.ph})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Eh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.qi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.yi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Bi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.zi})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Di})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Ki})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.cj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.ej})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.qj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Nj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Tj})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Yj})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.kf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.nd})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.kg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.ed})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.zf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.wh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.sh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.qb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.bi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.ai})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Zj})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ge})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Yb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.ch})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.bh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Hh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.Wh})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.jg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Fi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Xd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Bb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.ih})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ii})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.Pi})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.hj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.jj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.mj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.nj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.tj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.uj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.yj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Cj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Hj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.sb})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.kb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.ob})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.wb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.jc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.nc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.rc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Yc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.rd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Zd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ae})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.fe})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.uf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Lg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Pg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.oh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Fh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.pi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.xi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ci})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Ai})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Ei})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Li})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.bj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.dj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.rj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.Oj})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Uj})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Xj})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.mh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.Xh})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.ek})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Wj})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Vj})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.dk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.sd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.ti})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.lg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.mf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Ng})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.Wg})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Og})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.ke})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.Xg})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.bg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Af})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.lh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.ri})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.eg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.hg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.ig})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Sc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Tc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Rc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.kh})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.hf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.gk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.ni})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.li})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.fk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.oi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.ki})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.pg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.jd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Dg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Eg})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Lj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.de})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Hb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.dd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.zc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Nd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Ld})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.xf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.ak})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.Sg})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.Tg})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.ng})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.ub})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.Ug})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.wi})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.si})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.dg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.wf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.qh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.of})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.vb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Kg})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.od})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.ud})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.Qj})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.og})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.kd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Cg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Gb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.sc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Pc})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.rf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.mg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.tg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.rg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Gh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.hk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Fg})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.ah})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.if})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.nf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.Pj})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.zh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Zi})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.aj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.vg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.yg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.wg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Ag})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.qg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ii})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.qf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.zg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.xg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.hi})),e.d(t,"__wbindgen_debug_string",(function(){return u.Lk})),e.d(t,"__wbindgen_throw",(function(){return u.Wk})),e.d(t,"__wbindgen_memory",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper553",(function(){return u.xk})),e.d(t,"__wbindgen_closure_wrapper554",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper555",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper556",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper557",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper558",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper559",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper924",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper925",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper926",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper927",(function(){return u.Hk})),e.d(t,"__wbindgen_closure_wrapper928",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper929",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper930",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper1854",(function(){return u.nk})),e.d(t,"__wbindgen_closure_wrapper1855",(function(){return u.ok})),e.d(t,"__wbindgen_closure_wrapper1856",(function(){return u.pk})),e.d(t,"__wbindgen_closure_wrapper1857",(function(){return u.qk})),e.d(t,"__wbindgen_closure_wrapper1858",(function(){return u.rk})),e.d(t,"__wbindgen_closure_wrapper1859",(function(){return u.sk})),e.d(t,"__wbindgen_closure_wrapper1860",(function(){return u.tk})),e.d(t,"__wbindgen_closure_wrapper3871",(function(){return u.uk})),e.d(t,"__wbindgen_closure_wrapper3873",(function(){return u.vk})),e.d(t,"__wbindgen_closure_wrapper4644",(function(){return u.wk})),Object(u.ji)(r),r.__wbindgen_start()},422:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(252);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/34.75dcbe84.js b/assets/js/34.75dcbe84.js deleted file mode 100644 index b627239d2..000000000 --- a/assets/js/34.75dcbe84.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{253:function(n,t,e){"use strict";(function(n){e.d(t,"ji",(function(){return u})),e.d(t,"Xk",(function(){return F})),e.d(t,"Tk",(function(){return W})),e.d(t,"mk",(function(){return q})),e.d(t,"Ok",(function(){return z})),e.d(t,"Sk",(function(){return U})),e.d(t,"Vk",(function(){return K})),e.d(t,"sg",(function(){return Q})),e.d(t,"vi",(function(){return X})),e.d(t,"Od",(function(){return N})),e.d(t,"Gg",(function(){return Y})),e.d(t,"Hg",(function(){return H})),e.d(t,"le",(function(){return J})),e.d(t,"uh",(function(){return Z})),e.d(t,"Dh",(function(){return $})),e.d(t,"xh",(function(){return nn})),e.d(t,"Ig",(function(){return tn})),e.d(t,"Yg",(function(){return en})),e.d(t,"bk",(function(){return rn})),e.d(t,"b",(function(){return un})),e.d(t,"Vg",(function(){return fn})),e.d(t,"vh",(function(){return cn})),e.d(t,"Ch",(function(){return on})),e.d(t,"Rk",(function(){return _n})),e.d(t,"ck",(function(){return dn})),e.d(t,"Jg",(function(){return an})),e.d(t,"Bg",(function(){return bn})),e.d(t,"ef",(function(){return gn})),e.d(t,"df",(function(){return wn})),e.d(t,"Ue",(function(){return sn})),e.d(t,"Rd",(function(){return ln})),e.d(t,"sf",(function(){return mn})),e.d(t,"th",(function(){return pn})),e.d(t,"Fb",(function(){return hn})),e.d(t,"re",(function(){return xn})),e.d(t,"gf",(function(){return yn})),e.d(t,"cg",(function(){return Sn})),e.d(t,"ff",(function(){return kn})),e.d(t,"ve",(function(){return vn})),e.d(t,"Tf",(function(){return Bn})),e.d(t,"Uf",(function(){return Pn})),e.d(t,"Vf",(function(){return jn})),e.d(t,"Sf",(function(){return In})),e.d(t,"Bf",(function(){return An})),e.d(t,"Cf",(function(){return Dn})),e.d(t,"Lf",(function(){return Tn})),e.d(t,"Kf",(function(){return Cn})),e.d(t,"Nf",(function(){return Mn})),e.d(t,"Of",(function(){return Fn})),e.d(t,"Qf",(function(){return En})),e.d(t,"Rf",(function(){return Rn})),e.d(t,"Xf",(function(){return Ln})),e.d(t,"Wf",(function(){return On})),e.d(t,"Pf",(function(){return Gn})),e.d(t,"gg",(function(){return Vn})),e.d(t,"fg",(function(){return Wn})),e.d(t,"ag",(function(){return qn})),e.d(t,"Df",(function(){return zn})),e.d(t,"Yf",(function(){return Un})),e.d(t,"Zf",(function(){return Kn})),e.d(t,"Mf",(function(){return Qn})),e.d(t,"If",(function(){return Xn})),e.d(t,"Ef",(function(){return Nn})),e.d(t,"Ff",(function(){return Yn})),e.d(t,"Gf",(function(){return Hn})),e.d(t,"Hf",(function(){return Jn})),e.d(t,"Jf",(function(){return Zn})),e.d(t,"Md",(function(){return $n})),e.d(t,"Uk",(function(){return nt})),e.d(t,"Ve",(function(){return tt})),e.d(t,"fh",(function(){return et})),e.d(t,"Nk",(function(){return rt})),e.d(t,"a",(function(){return ut})),e.d(t,"c",(function(){return ft})),e.d(t,"rh",(function(){return ct})),e.d(t,"ze",(function(){return it})),e.d(t,"Qd",(function(){return ot})),e.d(t,"tf",(function(){return _t})),e.d(t,"mc",(function(){return dt})),e.d(t,"Rb",(function(){return at})),e.d(t,"Sb",(function(){return bt})),e.d(t,"bc",(function(){return gt})),e.d(t,"hc",(function(){return wt})),e.d(t,"Xb",(function(){return st})),e.d(t,"Vb",(function(){return lt})),e.d(t,"qc",(function(){return mt})),e.d(t,"lc",(function(){return pt})),e.d(t,"ec",(function(){return ht})),e.d(t,"Wb",(function(){return xt})),e.d(t,"gc",(function(){return yt})),e.d(t,"ad",(function(){return St})),e.d(t,"mi",(function(){return kt})),e.d(t,"Zg",(function(){return vt})),e.d(t,"Rg",(function(){return Bt})),e.d(t,"yf",(function(){return Pt})),e.d(t,"Kj",(function(){return jt})),e.d(t,"uc",(function(){return It})),e.d(t,"cd",(function(){return At})),e.d(t,"bd",(function(){return Dt})),e.d(t,"he",(function(){return Tt})),e.d(t,"ie",(function(){return Ct})),e.d(t,"Jb",(function(){return Mt})),e.d(t,"Kb",(function(){return Ft})),e.d(t,"Pb",(function(){return Et})),e.d(t,"Qb",(function(){return Rt})),e.d(t,"o",(function(){return Lt})),e.d(t,"Kd",(function(){return Ot})),e.d(t,"q",(function(){return Gt})),e.d(t,"Jd",(function(){return Vt})),e.d(t,"pf",(function(){return Wt})),e.d(t,"Wd",(function(){return qt})),e.d(t,"Td",(function(){return zt})),e.d(t,"hb",(function(){return Ut})),e.d(t,"gb",(function(){return Kt})),e.d(t,"kk",(function(){return Qt})),e.d(t,"yh",(function(){return Xt})),e.d(t,"Vd",(function(){return Nt})),e.d(t,"Ud",(function(){return Yt})),e.d(t,"ik",(function(){return Ht})),e.d(t,"Mj",(function(){return Jt})),e.d(t,"ui",(function(){return Zt})),e.d(t,"jk",(function(){return $t})),e.d(t,"Lb",(function(){return ne})),e.d(t,"Th",(function(){return te})),e.d(t,"Nh",(function(){return ee})),e.d(t,"Ih",(function(){return re})),e.d(t,"md",(function(){return ue})),e.d(t,"ld",(function(){return fe})),e.d(t,"Uh",(function(){return ce})),e.d(t,"Jh",(function(){return ie})),e.d(t,"Lh",(function(){return oe})),e.d(t,"Qh",(function(){return _e})),e.d(t,"Sh",(function(){return de})),e.d(t,"ei",(function(){return ae})),e.d(t,"ci",(function(){return be})),e.d(t,"Cd",(function(){return ge})),e.d(t,"zd",(function(){return we})),e.d(t,"Bd",(function(){return se})),e.d(t,"xd",(function(){return le})),e.d(t,"Vh",(function(){return me})),e.d(t,"Kh",(function(){return pe})),e.d(t,"Mh",(function(){return he})),e.d(t,"Ph",(function(){return xe})),e.d(t,"Rh",(function(){return ye})),e.d(t,"fi",(function(){return Se})),e.d(t,"di",(function(){return ke})),e.d(t,"Dd",(function(){return ve})),e.d(t,"yd",(function(){return Be})),e.d(t,"Ad",(function(){return Pe})),e.d(t,"wd",(function(){return je})),e.d(t,"Oh",(function(){return Ie})),e.d(t,"Yh",(function(){return Ae})),e.d(t,"gi",(function(){return De})),e.d(t,"Zh",(function(){return Te})),e.d(t,"Pd",(function(){return Ce})),e.d(t,"Gi",(function(){return Me})),e.d(t,"dh",(function(){return Fe})),e.d(t,"eh",(function(){return Ee})),e.d(t,"Mk",(function(){return Re})),e.d(t,"lk",(function(){return Le})),e.d(t,"Qk",(function(){return Oe})),e.d(t,"jf",(function(){return Ge})),e.d(t,"p",(function(){return Ve})),e.d(t,"t",(function(){return We})),e.d(t,"A",(function(){return qe})),e.d(t,"E",(function(){return ze})),e.d(t,"P",(function(){return Ue})),e.d(t,"S",(function(){return Ke})),e.d(t,"V",(function(){return Qe})),e.d(t,"W",(function(){return Xe})),e.d(t,"ib",(function(){return Ne})),e.d(t,"jb",(function(){return Ye})),e.d(t,"tb",(function(){return He})),e.d(t,"Cb",(function(){return Je})),e.d(t,"Ab",(function(){return Ze})),e.d(t,"Db",(function(){return $e})),e.d(t,"Eb",(function(){return nr})),e.d(t,"Ib",(function(){return tr})),e.d(t,"Ob",(function(){return er})),e.d(t,"fc",(function(){return rr})),e.d(t,"kc",(function(){return ur})),e.d(t,"tc",(function(){return fr})),e.d(t,"Gc",(function(){return cr})),e.d(t,"Jc",(function(){return ir})),e.d(t,"Mc",(function(){return or})),e.d(t,"Qc",(function(){return _r})),e.d(t,"pd",(function(){return dr})),e.d(t,"td",(function(){return ar})),e.d(t,"vd",(function(){return br})),e.d(t,"Id",(function(){return gr})),e.d(t,"Sd",(function(){return wr})),e.d(t,"ce",(function(){return sr})),e.d(t,"je",(function(){return lr})),e.d(t,"ue",(function(){return mr})),e.d(t,"Fe",(function(){return pr})),e.d(t,"Me",(function(){return hr})),e.d(t,"Ne",(function(){return xr})),e.d(t,"lf",(function(){return yr})),e.d(t,"gh",(function(){return Sr})),e.d(t,"hh",(function(){return kr})),e.d(t,"jh",(function(){return vr})),e.d(t,"nh",(function(){return Br})),e.d(t,"Ah",(function(){return Pr})),e.d(t,"Bh",(function(){return jr})),e.d(t,"Hi",(function(){return Ir})),e.d(t,"Ji",(function(){return Ar})),e.d(t,"Mi",(function(){return Dr})),e.d(t,"Ni",(function(){return Tr})),e.d(t,"Ri",(function(){return Cr})),e.d(t,"Si",(function(){return Mr})),e.d(t,"Oi",(function(){return Fr})),e.d(t,"Qi",(function(){return Er})),e.d(t,"Ti",(function(){return Rr})),e.d(t,"Wi",(function(){return Lr})),e.d(t,"Vi",(function(){return Or})),e.d(t,"Xi",(function(){return Gr})),e.d(t,"Ui",(function(){return Vr})),e.d(t,"Yi",(function(){return Wr})),e.d(t,"fj",(function(){return qr})),e.d(t,"gj",(function(){return zr})),e.d(t,"ij",(function(){return Ur})),e.d(t,"kj",(function(){return Kr})),e.d(t,"lj",(function(){return Qr})),e.d(t,"oj",(function(){return Xr})),e.d(t,"pj",(function(){return Nr})),e.d(t,"sj",(function(){return Yr})),e.d(t,"vj",(function(){return Hr})),e.d(t,"wj",(function(){return Jr})),e.d(t,"xj",(function(){return Zr})),e.d(t,"zj",(function(){return $r})),e.d(t,"Aj",(function(){return nu})),e.d(t,"Bj",(function(){return tu})),e.d(t,"Dj",(function(){return eu})),e.d(t,"Ej",(function(){return ru})),e.d(t,"Fj",(function(){return uu})),e.d(t,"Gj",(function(){return fu})),e.d(t,"Ij",(function(){return cu})),e.d(t,"Jj",(function(){return iu})),e.d(t,"Rj",(function(){return ou})),e.d(t,"Sj",(function(){return _u})),e.d(t,"g",(function(){return du})),e.d(t,"m",(function(){return au})),e.d(t,"s",(function(){return bu})),e.d(t,"v",(function(){return gu})),e.d(t,"w",(function(){return wu})),e.d(t,"y",(function(){return su})),e.d(t,"B",(function(){return lu})),e.d(t,"F",(function(){return mu})),e.d(t,"J",(function(){return pu})),e.d(t,"H",(function(){return hu})),e.d(t,"N",(function(){return xu})),e.d(t,"L",(function(){return yu})),e.d(t,"rb",(function(){return Su})),e.d(t,"lb",(function(){return ku})),e.d(t,"nb",(function(){return vu})),e.d(t,"pb",(function(){return Bu})),e.d(t,"xb",(function(){return Pu})),e.d(t,"zb",(function(){return ju})),e.d(t,"Nb",(function(){return Iu})),e.d(t,"Ub",(function(){return Au})),e.d(t,"ac",(function(){return Du})),e.d(t,"cc",(function(){return Tu})),e.d(t,"ic",(function(){return Cu})),e.d(t,"oc",(function(){return Mu})),e.d(t,"pc",(function(){return Fu})),e.d(t,"yc",(function(){return Eu})),e.d(t,"Bc",(function(){return Ru})),e.d(t,"Dc",(function(){return Lu})),e.d(t,"Fc",(function(){return Ou})),e.d(t,"Hc",(function(){return Gu})),e.d(t,"Kc",(function(){return Vu})),e.d(t,"Nc",(function(){return Wu})),e.d(t,"Vc",(function(){return qu})),e.d(t,"Wc",(function(){return zu})),e.d(t,"Zc",(function(){return Uu})),e.d(t,"id",(function(){return Ku})),e.d(t,"gd",(function(){return Qu})),e.d(t,"qd",(function(){return Xu})),e.d(t,"Hd",(function(){return Nu})),e.d(t,"Fd",(function(){return Yu})),e.d(t,"Yd",(function(){return Hu})),e.d(t,"be",(function(){return Ju})),e.d(t,"ee",(function(){return Zu})),e.d(t,"te",(function(){return $u})),e.d(t,"ye",(function(){return nf})),e.d(t,"Ae",(function(){return tf})),e.d(t,"De",(function(){return ef})),e.d(t,"He",(function(){return rf})),e.d(t,"Ie",(function(){return uf})),e.d(t,"Ke",(function(){return ff})),e.d(t,"Oe",(function(){return cf})),e.d(t,"vf",(function(){return of})),e.d(t,"Mg",(function(){return _f})),e.d(t,"Qg",(function(){return df})),e.d(t,"ph",(function(){return af})),e.d(t,"Eh",(function(){return bf})),e.d(t,"qi",(function(){return gf})),e.d(t,"yi",(function(){return wf})),e.d(t,"Bi",(function(){return sf})),e.d(t,"zi",(function(){return lf})),e.d(t,"Di",(function(){return mf})),e.d(t,"Ki",(function(){return pf})),e.d(t,"cj",(function(){return hf})),e.d(t,"ej",(function(){return xf})),e.d(t,"qj",(function(){return yf})),e.d(t,"Nj",(function(){return Sf})),e.d(t,"Tj",(function(){return kf})),e.d(t,"Yj",(function(){return vf})),e.d(t,"kf",(function(){return Bf})),e.d(t,"nd",(function(){return Pf})),e.d(t,"kg",(function(){return jf})),e.d(t,"ed",(function(){return If})),e.d(t,"eb",(function(){return Af})),e.d(t,"me",(function(){return Df})),e.d(t,"zf",(function(){return Tf})),e.d(t,"wh",(function(){return Cf})),e.d(t,"db",(function(){return Mf})),e.d(t,"sh",(function(){return Ff})),e.d(t,"qb",(function(){return Ef})),e.d(t,"bi",(function(){return Rf})),e.d(t,"ai",(function(){return Lf})),e.d(t,"R",(function(){return Of})),e.d(t,"Zj",(function(){return Gf})),e.d(t,"e",(function(){return Vf})),e.d(t,"ge",(function(){return Wf})),e.d(t,"Yb",(function(){return qf})),e.d(t,"se",(function(){return zf})),e.d(t,"ch",(function(){return Uf})),e.d(t,"bh",(function(){return Kf})),e.d(t,"Hh",(function(){return Qf})),e.d(t,"Wh",(function(){return Xf})),e.d(t,"jg",(function(){return Nf})),e.d(t,"Fi",(function(){return Yf})),e.d(t,"Xd",(function(){return Hf})),e.d(t,"U",(function(){return Jf})),e.d(t,"T",(function(){return Zf})),e.d(t,"X",(function(){return $f})),e.d(t,"Bb",(function(){return nc})),e.d(t,"ih",(function(){return tc})),e.d(t,"Ii",(function(){return ec})),e.d(t,"Pi",(function(){return rc})),e.d(t,"hj",(function(){return uc})),e.d(t,"jj",(function(){return fc})),e.d(t,"mj",(function(){return cc})),e.d(t,"nj",(function(){return ic})),e.d(t,"tj",(function(){return oc})),e.d(t,"uj",(function(){return _c})),e.d(t,"yj",(function(){return dc})),e.d(t,"Cj",(function(){return ac})),e.d(t,"Hj",(function(){return bc})),e.d(t,"f",(function(){return gc})),e.d(t,"n",(function(){return wc})),e.d(t,"r",(function(){return sc})),e.d(t,"u",(function(){return lc})),e.d(t,"x",(function(){return mc})),e.d(t,"z",(function(){return pc})),e.d(t,"C",(function(){return hc})),e.d(t,"G",(function(){return xc})),e.d(t,"K",(function(){return yc})),e.d(t,"I",(function(){return Sc})),e.d(t,"O",(function(){return kc})),e.d(t,"M",(function(){return vc})),e.d(t,"sb",(function(){return Bc})),e.d(t,"kb",(function(){return Pc})),e.d(t,"mb",(function(){return jc})),e.d(t,"ob",(function(){return Ic})),e.d(t,"wb",(function(){return Ac})),e.d(t,"yb",(function(){return Dc})),e.d(t,"Mb",(function(){return Tc})),e.d(t,"Tb",(function(){return Cc})),e.d(t,"Zb",(function(){return Mc})),e.d(t,"dc",(function(){return Fc})),e.d(t,"jc",(function(){return Ec})),e.d(t,"nc",(function(){return Rc})),e.d(t,"rc",(function(){return Lc})),e.d(t,"xc",(function(){return Oc})),e.d(t,"Ac",(function(){return Gc})),e.d(t,"Cc",(function(){return Vc})),e.d(t,"Ec",(function(){return Wc})),e.d(t,"Ic",(function(){return qc})),e.d(t,"Lc",(function(){return zc})),e.d(t,"Oc",(function(){return Uc})),e.d(t,"Uc",(function(){return Kc})),e.d(t,"Xc",(function(){return Qc})),e.d(t,"Yc",(function(){return Xc})),e.d(t,"hd",(function(){return Nc})),e.d(t,"fd",(function(){return Yc})),e.d(t,"rd",(function(){return Hc})),e.d(t,"Gd",(function(){return Jc})),e.d(t,"Ed",(function(){return Zc})),e.d(t,"Zd",(function(){return $c})),e.d(t,"ae",(function(){return ni})),e.d(t,"fe",(function(){return ti})),e.d(t,"xe",(function(){return ei})),e.d(t,"Be",(function(){return ri})),e.d(t,"Ce",(function(){return ui})),e.d(t,"Ge",(function(){return fi})),e.d(t,"Je",(function(){return ci})),e.d(t,"Pe",(function(){return ii})),e.d(t,"uf",(function(){return oi})),e.d(t,"Lg",(function(){return _i})),e.d(t,"Pg",(function(){return di})),e.d(t,"oh",(function(){return ai})),e.d(t,"Fh",(function(){return bi})),e.d(t,"pi",(function(){return gi})),e.d(t,"xi",(function(){return wi})),e.d(t,"Ci",(function(){return si})),e.d(t,"Ai",(function(){return li})),e.d(t,"Ei",(function(){return mi})),e.d(t,"Li",(function(){return pi})),e.d(t,"bj",(function(){return hi})),e.d(t,"dj",(function(){return xi})),e.d(t,"rj",(function(){return yi})),e.d(t,"Oj",(function(){return Si})),e.d(t,"Uj",(function(){return ki})),e.d(t,"Xj",(function(){return vi})),e.d(t,"Ee",(function(){return Bi})),e.d(t,"mh",(function(){return Pi})),e.d(t,"Xh",(function(){return ji})),e.d(t,"ek",(function(){return Ii})),e.d(t,"Xe",(function(){return Ai})),e.d(t,"Wj",(function(){return Di})),e.d(t,"Vj",(function(){return Ti})),e.d(t,"dk",(function(){return Ci})),e.d(t,"Ze",(function(){return Mi})),e.d(t,"sd",(function(){return Fi})),e.d(t,"ti",(function(){return Ei})),e.d(t,"lg",(function(){return Ri})),e.d(t,"d",(function(){return Li})),e.d(t,"mf",(function(){return Oi})),e.d(t,"Ng",(function(){return Gi})),e.d(t,"Wg",(function(){return Vi})),e.d(t,"Og",(function(){return Wi})),e.d(t,"ke",(function(){return qi})),e.d(t,"Xg",(function(){return zi})),e.d(t,"bg",(function(){return Ui})),e.d(t,"Af",(function(){return Ki})),e.d(t,"i",(function(){return Qi})),e.d(t,"lh",(function(){return Xi})),e.d(t,"vc",(function(){return Ni})),e.d(t,"ri",(function(){return Yi})),e.d(t,"j",(function(){return Hi})),e.d(t,"eg",(function(){return Ji})),e.d(t,"ab",(function(){return Zi})),e.d(t,"bb",(function(){return $i})),e.d(t,"hg",(function(){return no})),e.d(t,"ig",(function(){return to})),e.d(t,"Sc",(function(){return eo})),e.d(t,"Tc",(function(){return ro})),e.d(t,"Rc",(function(){return uo})),e.d(t,"h",(function(){return fo})),e.d(t,"kh",(function(){return co})),e.d(t,"hf",(function(){return io})),e.d(t,"gk",(function(){return oo})),e.d(t,"ni",(function(){return _o})),e.d(t,"Ye",(function(){return ao})),e.d(t,"li",(function(){return bo})),e.d(t,"pe",(function(){return go})),e.d(t,"qe",(function(){return wo})),e.d(t,"fk",(function(){return so})),e.d(t,"oi",(function(){return lo})),e.d(t,"We",(function(){return mo})),e.d(t,"ki",(function(){return po})),e.d(t,"ne",(function(){return ho})),e.d(t,"oe",(function(){return xo})),e.d(t,"pg",(function(){return yo})),e.d(t,"jd",(function(){return So})),e.d(t,"Dg",(function(){return ko})),e.d(t,"Eg",(function(){return vo})),e.d(t,"Lj",(function(){return Bo})),e.d(t,"Le",(function(){return Po})),e.d(t,"de",(function(){return jo})),e.d(t,"Hb",(function(){return Io})),e.d(t,"dd",(function(){return Ao})),e.d(t,"zc",(function(){return Do})),e.d(t,"Nd",(function(){return To})),e.d(t,"Ld",(function(){return Co})),e.d(t,"bf",(function(){return Mo})),e.d(t,"xf",(function(){return Fo})),e.d(t,"ak",(function(){return Eo})),e.d(t,"Sg",(function(){return Ro})),e.d(t,"Tg",(function(){return Lo})),e.d(t,"ng",(function(){return Oo})),e.d(t,"ub",(function(){return Go})),e.d(t,"Ug",(function(){return Vo})),e.d(t,"wi",(function(){return Wo})),e.d(t,"cf",(function(){return qo})),e.d(t,"Q",(function(){return zo})),e.d(t,"k",(function(){return Uo})),e.d(t,"wc",(function(){return Ko})),e.d(t,"si",(function(){return Qo})),e.d(t,"dg",(function(){return Xo})),e.d(t,"wf",(function(){return No})),e.d(t,"qh",(function(){return Yo})),e.d(t,"of",(function(){return Ho})),e.d(t,"vb",(function(){return Jo})),e.d(t,"Kg",(function(){return Zo})),e.d(t,"od",(function(){return $o})),e.d(t,"ud",(function(){return n_})),e.d(t,"Qj",(function(){return t_})),e.d(t,"og",(function(){return e_})),e.d(t,"kd",(function(){return r_})),e.d(t,"Cg",(function(){return u_})),e.d(t,"l",(function(){return f_})),e.d(t,"Gb",(function(){return c_})),e.d(t,"Qe",(function(){return i_})),e.d(t,"D",(function(){return o_})),e.d(t,"sc",(function(){return __})),e.d(t,"Pc",(function(){return d_})),e.d(t,"Re",(function(){return a_})),e.d(t,"rf",(function(){return b_})),e.d(t,"mg",(function(){return g_})),e.d(t,"tg",(function(){return w_})),e.d(t,"cb",(function(){return s_})),e.d(t,"rg",(function(){return l_})),e.d(t,"Gh",(function(){return m_})),e.d(t,"hk",(function(){return p_})),e.d(t,"Se",(function(){return h_})),e.d(t,"Te",(function(){return x_})),e.d(t,"af",(function(){return y_})),e.d(t,"Fg",(function(){return S_})),e.d(t,"ah",(function(){return k_})),e.d(t,"if",(function(){return v_})),e.d(t,"we",(function(){return B_})),e.d(t,"nf",(function(){return P_})),e.d(t,"Pj",(function(){return j_})),e.d(t,"zh",(function(){return I_})),e.d(t,"fb",(function(){return A_})),e.d(t,"Zi",(function(){return D_})),e.d(t,"aj",(function(){return T_})),e.d(t,"Y",(function(){return C_})),e.d(t,"vg",(function(){return M_})),e.d(t,"yg",(function(){return F_})),e.d(t,"wg",(function(){return E_})),e.d(t,"Ag",(function(){return R_})),e.d(t,"qg",(function(){return L_})),e.d(t,"ii",(function(){return O_})),e.d(t,"qf",(function(){return G_})),e.d(t,"zg",(function(){return V_})),e.d(t,"ug",(function(){return W_})),e.d(t,"xg",(function(){return q_})),e.d(t,"Z",(function(){return z_})),e.d(t,"hi",(function(){return U_})),e.d(t,"Lk",(function(){return K_})),e.d(t,"Wk",(function(){return Q_})),e.d(t,"Pk",(function(){return X_})),e.d(t,"xk",(function(){return N_})),e.d(t,"yk",(function(){return Y_})),e.d(t,"zk",(function(){return H_})),e.d(t,"Ak",(function(){return J_})),e.d(t,"Bk",(function(){return Z_})),e.d(t,"Ck",(function(){return $_})),e.d(t,"Dk",(function(){return nd})),e.d(t,"Ek",(function(){return td})),e.d(t,"Fk",(function(){return ed})),e.d(t,"Gk",(function(){return rd})),e.d(t,"Hk",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"nk",(function(){return od})),e.d(t,"ok",(function(){return _d})),e.d(t,"pk",(function(){return dd})),e.d(t,"qk",(function(){return ad})),e.d(t,"rk",(function(){return bd})),e.d(t,"sk",(function(){return gd})),e.d(t,"tk",(function(){return wd})),e.d(t,"uk",(function(){return sd})),e.d(t,"vk",(function(){return ld})),e.d(t,"wk",(function(){return md}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}function _(n){i===f.length&&f.push(f.length+1);const t=i;return i=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))}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,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0e238986910fc833(n,t,_(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hcb94168bbd5297a3(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h85f0c079d5c8e85b(n,t,_(e),_(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h03f4cb84aa57cbda(n,t,_(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h033fdf55565ad2c0(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3cb24b36dbb30ba3(n,t,_(e),_(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,_(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,_(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n){return _(c(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function X(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function N(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){return c(n).offsetX}function H(n){return c(n).offsetY}function J(n){return _(c(n).getCoalescedEvents)}function Z(n){return _(c(n).requestFullscreen)}function $(n){return _(c(n).scheduler)}function nn(n){return _(c(n).requestIdleCallback)}function tn(n){return _(c(n).onpointerrawupdate)}function en(){return _(ResizeObserverEntry.prototype)}function rn(n){const t=c(n).webkitFullscreenElement;return p(t)?0:_(t)}function un(n){return _(c(n).Window)}function fn(n,t,e){return _(c(n).postTask(c(t),c(e)))}function cn(n){return _(c(n).requestFullscreen())}function on(n){return _(c(n).scheduler)}function _n(n){return _(n)}function dn(n){c(n).webkitRequestFullscreen()}function an(n){return _(c(n).performance)}function bn(n){return c(n).now()}function gn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function wn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function sn(n){return _(c(n).gpu)}function ln(n){return _(c(n).features)}function mn(n){return _(c(n).limits)}function pn(n,t){return _(c(n).requestDevice(c(t)))}function hn(n,t){c(n).configure(c(t))}function xn(n){return _(c(n).getCurrentTexture())}function yn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function Sn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function kn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function vn(n,t,e){return _(c(n).getMappedRange(t,e))}function Bn(n){return c(n).maxTextureDimension1D}function Pn(n){return c(n).maxTextureDimension2D}function jn(n){return c(n).maxTextureDimension3D}function In(n){return c(n).maxTextureArrayLayers}function An(n){return c(n).maxBindGroups}function Dn(n){return c(n).maxBindingsPerBindGroup}function Tn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Cn(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function Mn(n){return c(n).maxSampledTexturesPerShaderStage}function Fn(n){return c(n).maxSamplersPerShaderStage}function En(n){return c(n).maxStorageBuffersPerShaderStage}function Rn(n){return c(n).maxStorageTexturesPerShaderStage}function Ln(n){return c(n).maxUniformBuffersPerShaderStage}function On(n){return c(n).maxUniformBufferBindingSize}function Gn(n){return c(n).maxStorageBufferBindingSize}function Vn(n){return c(n).minUniformBufferOffsetAlignment}function Wn(n){return c(n).minStorageBufferOffsetAlignment}function qn(n){return c(n).maxVertexBuffers}function zn(n){return c(n).maxBufferSize}function Un(n){return c(n).maxVertexAttributes}function Kn(n){return c(n).maxVertexBufferArrayStride}function Qn(n){return c(n).maxInterStageShaderComponents}function Xn(n){return c(n).maxComputeWorkgroupStorageSize}function Nn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Yn(n){return c(n).maxComputeWorkgroupSizeX}function Hn(n){return c(n).maxComputeWorkgroupSizeY}function Jn(n){return c(n).maxComputeWorkgroupSizeZ}function Zn(n){return c(n).maxComputeWorkgroupsPerDimension}function $n(n){return _(c(n).error)}function nt(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function tt(n,t,e){return c(n).has(g(t,e))}function et(n){return _(c(n).queue)}function rt(n){const t=c(n);return"object"==typeof t&&null!==t}function ut(n){return _(c(n).Window)}function ft(n){return _(c(n).WorkerGlobalScope)}function ct(n,t){return _(c(n).requestAdapter(c(t)))}function it(n){return _(c(n).getPreferredCanvasFormat())}function ot(n){return _(c(n).features)}function _t(n){return _(c(n).limits)}function dt(n,t){return _(c(n).createShaderModule(c(t)))}function at(n,t){return _(c(n).createBindGroupLayout(c(t)))}function bt(n,t){return _(c(n).createBindGroup(c(t)))}function gt(n,t){return _(c(n).createPipelineLayout(c(t)))}function wt(n,t){return _(c(n).createRenderPipeline(c(t)))}function st(n,t){return _(c(n).createComputePipeline(c(t)))}function lt(n,t){return _(c(n).createBuffer(c(t)))}function mt(n,t){return _(c(n).createTexture(c(t)))}function pt(n,t){return _(c(n).createSampler(c(t)))}function ht(n,t){return _(c(n).createQuerySet(c(t)))}function xt(n,t){return _(c(n).createCommandEncoder(c(t)))}function yt(n,t){return _(c(n).createRenderBundleEncoder(c(t)))}function St(n){c(n).destroy()}function kt(n,t){c(n).onuncapturederror=c(t)}function vt(n,t){c(n).pushErrorScope(o(t))}function Bt(n){return _(c(n).popErrorScope())}function Pt(n,t,e,r){return _(c(n).mapAsync(t>>>0,e,r))}function jt(n){c(n).unmap()}function It(n,t){return _(c(n).createView(c(t)))}function At(n){c(n).destroy()}function Dt(n){c(n).destroy()}function Tt(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Ct(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Mt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Ft(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Et(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Lt(n,t){return _(c(n).beginComputePass(c(t)))}function Ot(n){c(n).end()}function Gt(n,t){return _(c(n).beginRenderPass(c(t)))}function Vt(n){c(n).end()}function Wt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function qt(n,t){return _(c(n).finish(c(t)))}function zt(n){return _(c(n).finish())}function Ut(n,t,e){c(n).clearBuffer(c(t),e)}function Kt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Qt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Xt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Nt(n){return _(c(n).finish())}function Yt(n,t){return _(c(n).finish(c(t)))}function Ht(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Jt(n){return c(n).usage}function Zt(n){return c(n).size}function $t(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function ne(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function te(n,t){c(n).setPipeline(c(t))}function ee(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function re(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ue(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function fe(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function ce(n,t){c(n).setPipeline(c(t))}function ie(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function oe(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function _e(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function de(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ae(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function be(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function ge(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function we(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function se(n,t,e){c(n).drawIndirect(c(t),e)}function le(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function me(n,t){c(n).setPipeline(c(t))}function pe(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function he(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function xe(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function ye(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Se(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ke(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function ve(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Be(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Pe(n,t,e){c(n).drawIndirect(c(t),e)}function je(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ie(n,t){c(n).setBlendConstant(c(t))}function Ae(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function De(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Te(n,t){c(n).setStencilReference(t>>>0)}function Ce(n,t){c(n).executeBundles(c(t))}function Me(n,t){c(n).submit(c(t))}function Fe(n){queueMicrotask(c(n))}function Ee(n){return _(c(n).queueMicrotask)}function Re(n){return"function"==typeof c(n)}function Le(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Oe(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Ge(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Ve(n,t,e){c(n).beginQuery(t>>>0,c(e))}function We(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function qe(n,t,e){c(n).bindSampler(t>>>0,c(e))}function ze(n,t){c(n).bindVertexArray(c(t))}function Ue(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function Ke(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Qe(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Xe(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Ne(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function Ye(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function He(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Je(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function Ze(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function $e(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function nr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function tr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function er(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function rr(n){const t=c(n).createQuery();return p(t)?0:_(t)}function ur(n){const t=c(n).createSampler();return p(t)?0:_(t)}function fr(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function cr(n,t){c(n).deleteQuery(c(t))}function ir(n,t){c(n).deleteSampler(c(t))}function or(n,t){c(n).deleteSync(c(t))}function _r(n,t){c(n).deleteVertexArray(c(t))}function dr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function ar(n,t){c(n).drawBuffers(c(t))}function br(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function gr(n,t){c(n).endQuery(t>>>0)}function wr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function sr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function lr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function mr(){return O((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function pr(n,t,e){return _(c(n).getQueryParameter(c(t),e>>>0))}function hr(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function xr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function yr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Sr(n,t){c(n).readBuffer(t>>>0)}function kr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function vr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Br(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Pr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function jr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Ir(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Ar(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Dr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Tr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Cr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Wr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function qr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function zr(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function Ur(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function Kr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Qr(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Xr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Nr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Yr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Hr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Jr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function Zr(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function $r(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function nu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function cu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function iu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function ou(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function _u(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function du(n,t){c(n).activeTexture(t>>>0)}function au(n,t,e){c(n).attachShader(c(t),c(e))}function bu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function gu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function wu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function su(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function lu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function mu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function pu(n,t){c(n).blendEquation(t>>>0)}function hu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function xu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function yu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Su(n,t){c(n).clear(t>>>0)}function ku(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function vu(n,t){c(n).clearDepth(t)}function Bu(n,t){c(n).clearStencil(t)}function Pu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ju(n,t){c(n).compileShader(c(t))}function Iu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Au(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Du(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Tu(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Cu(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Mu(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Fu(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Eu(n,t){c(n).cullFace(t>>>0)}function Ru(n,t){c(n).deleteBuffer(c(t))}function Lu(n,t){c(n).deleteFramebuffer(c(t))}function Ou(n,t){c(n).deleteProgram(c(t))}function Gu(n,t){c(n).deleteRenderbuffer(c(t))}function Vu(n,t){c(n).deleteShader(c(t))}function Wu(n,t){c(n).deleteTexture(c(t))}function qu(n,t){c(n).depthFunc(t>>>0)}function zu(n,t){c(n).depthMask(0!==t)}function Uu(n,t,e){c(n).depthRange(t,e)}function Ku(n,t){c(n).disable(t>>>0)}function Qu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Xu(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Nu(n,t){c(n).enable(t>>>0)}function Yu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Hu(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Ju(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Zu(n,t){c(n).frontFace(t>>>0)}function $u(){return O((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function nf(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function tf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ef(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function rf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function uf(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function ff(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function cf(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function of(n,t){c(n).linkProgram(c(t))}function _f(n,t,e){c(n).pixelStorei(t>>>0,e)}function df(n,t,e){c(n).polygonOffset(t,e)}function af(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function bf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function gf(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function wf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function sf(n,t){c(n).stencilMask(t>>>0)}function lf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function mf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function pf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function hf(n,t,e){c(n).uniform1f(c(t),e)}function xf(n,t,e){c(n).uniform1i(c(t),e)}function yf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Sf(n,t){c(n).useProgram(c(t))}function kf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function vf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Bf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Pf(n){const t=c(n).document;return p(t)?0:_(t)}function jf(n){return _(c(n).navigator)}function If(n){return c(n).devicePixelRatio}function Af(n,t){c(n).cancelIdleCallback(t>>>0)}function Df(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:_(e)}),arguments)}function Tf(){return O((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function Cf(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Mf(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ff(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Ef(n,t){c(n).clearTimeout(t)}function Rf(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Lf(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Of(n){const t=c(n).body;return p(t)?0:_(t)}function Gf(n){return _(c(n).visibilityState)}function Vf(n){const t=c(n).activeElement;return p(t)?0:_(t)}function Wf(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function qf(){return O((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function zf(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function Uf(){return O((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function Kf(){return O((function(n,t,e){return _(c(n).querySelectorAll(g(t,e)))}),arguments)}function Qf(){return O((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function Xf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Nf(n){return _(c(n).navigator)}function Yf(n){return _(c(n).style)}function Hf(){return O((function(n){c(n).focus()}),arguments)}function Jf(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Zf(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function $f(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function nc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function tc(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function ec(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function rc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function uc(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function fc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function cc(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function ic(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function oc(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function _c(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function dc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function ac(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function bc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function gc(n,t){c(n).activeTexture(t>>>0)}function wc(n,t,e){c(n).attachShader(c(t),c(e))}function sc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function lc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function mc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function pc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function hc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function xc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function yc(n,t){c(n).blendEquation(t>>>0)}function Sc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function kc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function vc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Bc(n,t){c(n).clear(t>>>0)}function Pc(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function jc(n,t){c(n).clearDepth(t)}function Ic(n,t){c(n).clearStencil(t)}function Ac(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Dc(n,t){c(n).compileShader(c(t))}function Tc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Cc(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Mc(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Fc(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Ec(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Rc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Lc(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Oc(n,t){c(n).cullFace(t>>>0)}function Gc(n,t){c(n).deleteBuffer(c(t))}function Vc(n,t){c(n).deleteFramebuffer(c(t))}function Wc(n,t){c(n).deleteProgram(c(t))}function qc(n,t){c(n).deleteRenderbuffer(c(t))}function zc(n,t){c(n).deleteShader(c(t))}function Uc(n,t){c(n).deleteTexture(c(t))}function Kc(n,t){c(n).depthFunc(t>>>0)}function Qc(n,t){c(n).depthMask(0!==t)}function Xc(n,t,e){c(n).depthRange(t,e)}function Nc(n,t){c(n).disable(t>>>0)}function Yc(n,t){c(n).disableVertexAttribArray(t>>>0)}function Hc(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Jc(n,t){c(n).enable(t>>>0)}function Zc(n,t){c(n).enableVertexAttribArray(t>>>0)}function $c(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ni(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function ti(n,t){c(n).frontFace(t>>>0)}function ei(){return O((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function ri(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ui(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function fi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ci(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function ii(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function oi(n,t){c(n).linkProgram(c(t))}function _i(n,t,e){c(n).pixelStorei(t>>>0,e)}function di(n,t,e){c(n).polygonOffset(t,e)}function ai(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function bi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function gi(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function wi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function si(n,t){c(n).stencilMask(t>>>0)}function li(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function mi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function pi(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function hi(n,t,e){c(n).uniform1f(c(t),e)}function xi(n,t,e){c(n).uniform1i(c(t),e)}function yi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Si(n,t){c(n).useProgram(c(t))}function ki(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function vi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Bi(){return O((function(n,t,e,u){const f=m(c(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Pi(){return O((function(n,t,e,u){const f=m(c(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function ji(){return O((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function Ii(n){return c(n).width}function Ai(n){return c(n).height}function Di(n){return c(n).videoWidth}function Ti(n){return c(n).videoHeight}function Ci(n){return c(n).width}function Mi(n){return c(n).height}function Fi(n,t){c(n).drawBuffersWEBGL(c(t))}function Ei(n){return _(c(n).signal)}function Ri(){return O((function(){return _(new AbortController)}),arguments)}function Li(n){c(n).abort()}function Oi(n){return c(n).isIntersecting}function Gi(n){return c(n).pointerId}function Vi(n){return c(n).pressure}function Wi(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function qi(n){return _(c(n).getCoalescedEvents())}function zi(n){c(n).preventDefault()}function Ui(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ki(n){return c(n).matches}function Qi(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Xi(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Ni(n){return c(n).ctrlKey}function Yi(n){return c(n).shiftKey}function Hi(n){return c(n).altKey}function Ji(n){return c(n).metaKey}function Zi(n){return c(n).button}function $i(n){return c(n).buttons}function no(n){return c(n).movementX}function to(n){return c(n).movementY}function eo(n){return c(n).deltaX}function ro(n){return c(n).deltaY}function uo(n){return c(n).deltaMode}function fo(){return O((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function co(){return O((function(n,t,e,r){c(n).removeEventListener(g(t,e),c(r))}),arguments)}function io(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function oo(n){return c(n).width}function _o(n,t){c(n).width=t>>>0}function ao(n){return c(n).height}function bo(n,t){c(n).height=t>>>0}function go(){return O((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function wo(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function so(n){return c(n).width}function lo(n,t){c(n).width=t>>>0}function mo(n){return c(n).height}function po(n,t){c(n).height=t>>>0}function ho(){return O((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function xo(){return O((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function yo(){return O((function(n){return _(new ResizeObserver(c(n)))}),arguments)}function So(n){c(n).disconnect()}function ko(n,t){c(n).observe(c(t))}function vo(n,t,e){c(n).observe(c(t),c(e))}function Bo(n,t){c(n).unobserve(c(t))}function Po(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function jo(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Io(n){return _(c(n).contentRect)}function Ao(n){return _(c(n).devicePixelContentBoxSize)}function Do(n){console.debug(c(n))}function To(n){console.error(c(n))}function Co(n,t){console.error(c(n),c(t))}function Mo(n){console.info(c(n))}function Fo(n){console.log(c(n))}function Eo(n){console.warn(c(n))}function Ro(n){return _(c(n).port1)}function Lo(n){return _(c(n).port2)}function Oo(){return O((function(){return _(new MessageChannel)}),arguments)}function Go(n){c(n).close()}function Vo(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Wo(n){c(n).start()}function qo(n){return c(n).inlineSize}function zo(n){return c(n).blockSize}function Uo(n){return c(n).altKey}function Ko(n){return c(n).ctrlKey}function Qo(n){return c(n).shiftKey}function Xo(n){return c(n).metaKey}function No(n){return c(n).location}function Yo(n){return c(n).repeat}function Ho(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Jo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Zo(n){return c(n).persisted}function $o(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function n_(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function t_(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function e_(){return O((function(n){return _(new IntersectionObserver(c(n)))}),arguments)}function r_(n){c(n).disconnect()}function u_(n,t){c(n).observe(c(t))}function f_(){return O((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function c_(n,t){return c(n).contains(c(t))}function i_(n,t){const e=c(n)[t>>>0];return p(e)?0:_(e)}function o_(n,t){c(n).bindVertexArrayOES(c(t))}function __(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function d_(n,t){c(n).deleteVertexArrayOES(c(t))}function a_(n,t){return _(c(n)[t>>>0])}function b_(n){return c(n).length}function g_(){return _(new Array)}function w_(n,t){return _(new Function(g(n,t)))}function s_(){return O((function(n,t){return _(c(n).call(c(t)))}),arguments)}function l_(){return _(new Object)}function m_(){return O((function(){return _(self.self)}),arguments)}function p_(){return O((function(){return _(window.window)}),arguments)}function h_(){return O((function(){return _(globalThis.globalThis)}),arguments)}function x_(){return O((function(){return _(global.global)}),arguments)}function y_(n,t,e){return c(n).includes(c(t),e)}function S_(n){return _(Array.of(c(n)))}function k_(n,t){return c(n).push(c(t))}function v_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function B_(n,t){return _(Object.getOwnPropertyDescriptor(c(n),c(t)))}function P_(n,t){return Object.is(c(n),c(t))}function j_(n){return _(c(n).valueOf())}function I_(n){return _(Promise.resolve(c(n)))}function A_(n,t){return _(c(n).catch(c(t)))}function D_(n,t){return _(c(n).then(c(t)))}function T_(n,t,e){return _(c(n).then(c(t),c(e)))}function C_(n){return _(c(n).buffer)}function M_(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function F_(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function E_(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function R_(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function L_(n){return _(new Uint8Array(c(n)))}function O_(n,t,e){c(n).set(c(t),e>>>0)}function G_(n){return c(n).length}function V_(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function W_(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function q_(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function z_(n){return _(c(n).buffer)}function U_(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function K_(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;x()[n/4+1]=u,x()[n/4+0]=e}function Q_(n,t){throw new Error(g(n,t))}function X_(){return _(r.memory)}function N_(n,t,e){return _(k(n,t,9,v))}function Y_(n,t,e){return _(k(n,t,9,v))}function H_(n,t,e){return _(k(n,t,9,v))}function J_(n,t,e){return _(k(n,t,9,v))}function Z_(n,t,e){return _(k(n,t,9,B))}function $_(n,t,e){return _(k(n,t,9,P))}function nd(n,t,e){return _(k(n,t,9,v))}function td(n,t,e){return _(k(n,t,177,j))}function ed(n,t,e){return _(k(n,t,177,j))}function rd(n,t,e){return _(k(n,t,177,j))}function ud(n,t,e){return _(k(n,t,177,I))}function fd(n,t,e){return _(k(n,t,177,j))}function cd(n,t,e){return _(k(n,t,177,j))}function id(n,t,e){return _(k(n,t,177,A))}function od(n,t,e){return _(k(n,t,636,D))}function _d(n,t,e){return _(k(n,t,636,D))}function dd(n,t,e){return _(k(n,t,636,D))}function ad(n,t,e){return _(k(n,t,636,T))}function bd(n,t,e){return _(k(n,t,636,D))}function gd(n,t,e){return _(k(n,t,636,D))}function wd(n,t,e){return _(k(n,t,636,D))}function sd(n,t,e){return _(k(n,t,1777,C))}function ld(n,t,e){return _(k(n,t,1777,C))}function md(n,t,e){return _(k(n,t,1871,M))}}).call(this,e(260)(n))},423:function(n,t,e){"use strict";e.r(t);var r=e(424),u=e(253);e.d(t,"__wbg_set_wasm",(function(){return u.ji})),e.d(t,"run",(function(){return u.Xk})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Tk})),e.d(t,"__wbindgen_cb_drop",(function(){return u.mk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Ok})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.Sk})),e.d(t,"__wbindgen_string_new",(function(){return u.Vk})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.sg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.vi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Od})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Gg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Hg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.le})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.uh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Dh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.xh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Ig})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.Yg})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.bk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.Vg})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.vh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Ch})),e.d(t,"__wbindgen_number_new",(function(){return u.Rk})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ck})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Jg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Bg})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.df})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.Ue})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Rd})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.sf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.th})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Fb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.re})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.gf})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.cg})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.ff})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.ve})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.Tf})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.Uf})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.Vf})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.Sf})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Bf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Cf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Lf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Kf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Nf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Of})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.Qf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.Rf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.Pf})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.gg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.fg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.ag})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Df})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.Yf})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.Zf})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.If})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Ef})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Ff})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Gf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Hf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Jf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Md})),e.d(t,"__wbindgen_string_get",(function(){return u.Uk})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.Ve})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.fh})),e.d(t,"__wbindgen_is_object",(function(){return u.Nk})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.rh})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.ze})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Qd})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.tf})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.mc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Sb})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.bc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.hc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Xb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Vb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.qc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.lc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.ec})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Wb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.gc})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.ad})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.mi})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.Zg})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.Rg})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.yf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.Kj})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.uc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.cd})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.bd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.he})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ie})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Jb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Kb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Pb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Qb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.o})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Kd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.q})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Jd})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.pf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.Wd})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Td})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.hb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.gb})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.kk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.yh})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.Vd})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Ud})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.ik})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.Mj})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.ui})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.jk})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Lb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.Nh})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Ih})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.md})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.ld})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.Uh})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.Jh})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.Lh})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.Qh})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.Sh})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.ei})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.ci})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.xd})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.Kh})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.Mh})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.Ph})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.Rh})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.di})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.wd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.Oh})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.Yh})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.gi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.Zh})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Pd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Gi})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.dh})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.eh})),e.d(t,"__wbindgen_is_function",(function(){return u.Mk})),e.d(t,"__wbindgen_boolean_get",(function(){return u.lk})),e.d(t,"__wbindgen_number_get",(function(){return u.Qk})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.jf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.ib})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.jb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.tb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Ab})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Eb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Ib})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Ob})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.fc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.kc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.tc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Gc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Jc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Mc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Qc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.pd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.td})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.vd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Id})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Sd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ce})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.je})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.lf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.gh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.hh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.jh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.nh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Ah})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Bh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Hi})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ji})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Mi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Ni})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.Ri})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.Si})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Oi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.Qi})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.Wi})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.Vi})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Xi})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.Ui})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Yi})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.fj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.gj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.ij})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.kj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.lj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.oj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.pj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.sj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.vj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.wj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.xj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.zj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Aj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Bj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Dj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Ej})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Fj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Ij})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Jj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.Rj})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.Sj})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.rb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.lb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.pb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.xb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.ac})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.ic})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.oc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.pc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Zc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.qd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Hd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Fd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.be})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ee})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.vf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Mg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.Qg})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.ph})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Eh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.qi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.yi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Bi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.zi})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Di})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Ki})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.cj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.ej})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.qj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Nj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Tj})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Yj})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.kf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.nd})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.kg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.ed})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.zf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.wh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.sh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.qb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.bi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.ai})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Zj})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ge})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Yb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.ch})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.bh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Hh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.Wh})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.jg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Fi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Xd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Bb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.ih})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ii})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.Pi})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.hj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.jj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.mj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.nj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.tj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.uj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.yj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Cj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Hj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.sb})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.kb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.ob})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.wb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.jc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.nc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.rc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Yc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.rd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Zd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ae})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.fe})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.uf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Lg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Pg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.oh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Fh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.pi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.xi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ci})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Ai})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Ei})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Li})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.bj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.dj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.rj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.Oj})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Uj})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Xj})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.mh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.Xh})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.ek})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Wj})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Vj})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.dk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.sd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.ti})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.lg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.mf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Ng})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.Wg})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Og})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.ke})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.Xg})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.bg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Af})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.lh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.ri})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.eg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.hg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.ig})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Sc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Tc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Rc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.kh})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.hf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.gk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.ni})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.li})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.fk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.oi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.ki})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.pg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.jd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Dg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Eg})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Lj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.de})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Hb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.dd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.zc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Nd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Ld})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.xf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.ak})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.Sg})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.Tg})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.ng})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.ub})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.Ug})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.wi})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.si})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.dg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.wf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.qh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.of})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.vb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Kg})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.od})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.ud})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.Qj})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.og})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.kd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Cg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Gb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.sc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Pc})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.rf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.mg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.tg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.rg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Gh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.hk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Fg})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.ah})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.if})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.nf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.Pj})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.zh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Zi})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.aj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.vg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.yg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.wg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Ag})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.qg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ii})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.qf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.zg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.xg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.hi})),e.d(t,"__wbindgen_debug_string",(function(){return u.Lk})),e.d(t,"__wbindgen_throw",(function(){return u.Wk})),e.d(t,"__wbindgen_memory",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper553",(function(){return u.xk})),e.d(t,"__wbindgen_closure_wrapper554",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper555",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper556",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper557",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper558",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper559",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper884",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper885",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper886",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper887",(function(){return u.Hk})),e.d(t,"__wbindgen_closure_wrapper888",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper889",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper890",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper1866",(function(){return u.nk})),e.d(t,"__wbindgen_closure_wrapper1867",(function(){return u.ok})),e.d(t,"__wbindgen_closure_wrapper1868",(function(){return u.pk})),e.d(t,"__wbindgen_closure_wrapper1869",(function(){return u.qk})),e.d(t,"__wbindgen_closure_wrapper1870",(function(){return u.rk})),e.d(t,"__wbindgen_closure_wrapper1871",(function(){return u.sk})),e.d(t,"__wbindgen_closure_wrapper1872",(function(){return u.tk})),e.d(t,"__wbindgen_closure_wrapper3884",(function(){return u.uk})),e.d(t,"__wbindgen_closure_wrapper3886",(function(){return u.vk})),e.d(t,"__wbindgen_closure_wrapper4657",(function(){return u.wk})),Object(u.ji)(r),r.__wbindgen_start()},424:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(253);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/34.9d97193d.js b/assets/js/34.9d97193d.js new file mode 100644 index 000000000..0582ac068 --- /dev/null +++ b/assets/js/34.9d97193d.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{254:function(n,t,e){"use strict";(function(n){e.d(t,"ui",(function(){return u})),e.d(t,"il",(function(){return F})),e.d(t,"el",(function(){return W})),e.d(t,"xk",(function(){return q})),e.d(t,"Zk",(function(){return z})),e.d(t,"dl",(function(){return U})),e.d(t,"gl",(function(){return K})),e.d(t,"Bg",(function(){return Q})),e.d(t,"Gi",(function(){return N})),e.d(t,"Nd",(function(){return X})),e.d(t,"Pg",(function(){return Y})),e.d(t,"Qg",(function(){return H})),e.d(t,"b",(function(){return J})),e.d(t,"nk",(function(){return Z})),e.d(t,"ih",(function(){return $})),e.d(t,"Oh",(function(){return nn})),e.d(t,"ke",(function(){return tn})),e.d(t,"Fh",(function(){return en})),e.d(t,"Ih",(function(){return rn})),e.d(t,"Sg",(function(){return un})),e.d(t,"ok",(function(){return fn})),e.d(t,"Gh",(function(){return cn})),e.d(t,"Nh",(function(){return on})),e.d(t,"fh",(function(){return _n})),e.d(t,"cl",(function(){return dn})),e.d(t,"Tg",(function(){return an})),e.d(t,"Kg",(function(){return bn})),e.d(t,"ff",(function(){return gn})),e.d(t,"ef",(function(){return wn})),e.d(t,"hf",(function(){return sn})),e.d(t,"gf",(function(){return ln})),e.d(t,"Fi",(function(){return mn})),e.d(t,"Yj",(function(){return pn})),e.d(t,"Zc",(function(){return hn})),e.d(t,"ve",(function(){return xn})),e.d(t,"Cf",(function(){return yn})),e.d(t,"Wj",(function(){return Sn})),e.d(t,"ld",(function(){return kn})),e.d(t,"kd",(function(){return vn})),e.d(t,"Jd",(function(){return Bn})),e.d(t,"ei",(function(){return Pn})),e.d(t,"Vh",(function(){return In})),e.d(t,"Xh",(function(){return jn})),e.d(t,"fl",(function(){return An})),e.d(t,"he",(function(){return Dn})),e.d(t,"df",(function(){return Tn})),e.d(t,"Ue",(function(){return Cn})),e.d(t,"ze",(function(){return Mn})),e.d(t,"Ch",(function(){return Fn})),e.d(t,"ge",(function(){return En})),e.d(t,"kg",(function(){return Rn})),e.d(t,"Sd",(function(){return Ln})),e.d(t,"Vd",(function(){return On})),e.d(t,"Wh",(function(){return Gn})),e.d(t,"Uh",(function(){return Vn})),e.d(t,"Bd",(function(){return Wn})),e.d(t,"xd",(function(){return qn})),e.d(t,"vd",(function(){return zn})),e.d(t,"zd",(function(){return Un})),e.d(t,"bi",(function(){return Kn})),e.d(t,"ci",(function(){return Qn})),e.d(t,"gi",(function(){return Nn})),e.d(t,"oi",(function(){return Xn})),e.d(t,"ni",(function(){return Yn})),e.d(t,"Qd",(function(){return Hn})),e.d(t,"vf",(function(){return Jn})),e.d(t,"ph",(function(){return Zn})),e.d(t,"Bf",(function(){return $n})),e.d(t,"xi",(function(){return nt})),e.d(t,"Rb",(function(){return tt})),e.d(t,"Qb",(function(){return et})),e.d(t,"Ub",(function(){return rt})),e.d(t,"Vb",(function(){return ut})),e.d(t,"Wb",(function(){return ft})),e.d(t,"ac",(function(){return ct})),e.d(t,"dc",(function(){return it})),e.d(t,"fc",(function(){return ot})),e.d(t,"gc",(function(){return _t})),e.d(t,"kc",(function(){return dt})),e.d(t,"lc",(function(){return at})),e.d(t,"pc",(function(){return bt})),e.d(t,"ad",(function(){return gt})),e.d(t,"bh",(function(){return wt})),e.d(t,"jh",(function(){return st})),e.d(t,"tc",(function(){return lt})),e.d(t,"bd",(function(){return mt})),e.d(t,"mj",(function(){return pt})),e.d(t,"Rg",(function(){return ht})),e.d(t,"rf",(function(){return xt})),e.d(t,"wf",(function(){return yt})),e.d(t,"ig",(function(){return St})),e.d(t,"Eb",(function(){return kt})),e.d(t,"re",(function(){return vt})),e.d(t,"uh",(function(){return Bt})),e.d(t,"jg",(function(){return Pt})),e.d(t,"Id",(function(){return It})),e.d(t,"Od",(function(){return jt})),e.d(t,"Zh",(function(){return At})),e.d(t,"ji",(function(){return Dt})),e.d(t,"ki",(function(){return Tt})),e.d(t,"ri",(function(){return Ct})),e.d(t,"Th",(function(){return Mt})),e.d(t,"Yh",(function(){return Ft})),e.d(t,"Cd",(function(){return Et})),e.d(t,"yd",(function(){return Rt})),e.d(t,"wd",(function(){return Lt})),e.d(t,"Ad",(function(){return Ot})),e.d(t,"ai",(function(){return Gt})),e.d(t,"di",(function(){return Vt})),e.d(t,"fi",(function(){return Wt})),e.d(t,"qi",(function(){return qt})),e.d(t,"pi",(function(){return zt})),e.d(t,"le",(function(){return Ut})),e.d(t,"qf",(function(){return Kt})),e.d(t,"o",(function(){return Qt})),e.d(t,"q",(function(){return Nt})),e.d(t,"gb",(function(){return Xt})),e.d(t,"hb",(function(){return Yt})),e.d(t,"Ib",(function(){return Ht})),e.d(t,"Jb",(function(){return Jt})),e.d(t,"Ob",(function(){return Zt})),e.d(t,"Pb",(function(){return $t})),e.d(t,"Ud",(function(){return ne})),e.d(t,"Td",(function(){return te})),e.d(t,"Jh",(function(){return ee})),e.d(t,"Md",(function(){return re})),e.d(t,"Ve",(function(){return ue})),e.d(t,"Zf",(function(){return fe})),e.d(t,"ag",(function(){return ce})),e.d(t,"bg",(function(){return ie})),e.d(t,"Yf",(function(){return oe})),e.d(t,"Ff",(function(){return _e})),e.d(t,"Gf",(function(){return de})),e.d(t,"Rf",(function(){return ae})),e.d(t,"Qf",(function(){return be})),e.d(t,"Tf",(function(){return ge})),e.d(t,"Uf",(function(){return we})),e.d(t,"Wf",(function(){return se})),e.d(t,"Xf",(function(){return le})),e.d(t,"dg",(function(){return me})),e.d(t,"cg",(function(){return pe})),e.d(t,"Vf",(function(){return he})),e.d(t,"gg",(function(){return xe})),e.d(t,"Hf",(function(){return ye})),e.d(t,"eg",(function(){return Se})),e.d(t,"fg",(function(){return ke})),e.d(t,"pg",(function(){return ve})),e.d(t,"og",(function(){return Be})),e.d(t,"Sf",(function(){return Pe})),e.d(t,"Jf",(function(){return Ie})),e.d(t,"If",(function(){return je})),e.d(t,"Of",(function(){return Ae})),e.d(t,"Kf",(function(){return De})),e.d(t,"Lf",(function(){return Te})),e.d(t,"Mf",(function(){return Ce})),e.d(t,"Nf",(function(){return Me})),e.d(t,"Pf",(function(){return Fe})),e.d(t,"Yk",(function(){return Ee})),e.d(t,"a",(function(){return Re})),e.d(t,"c",(function(){return Le})),e.d(t,"Eh",(function(){return Oe})),e.d(t,"Pd",(function(){return Ge})),e.d(t,"uf",(function(){return Ve})),e.d(t,"lg",(function(){return We})),e.d(t,"uk",(function(){return qe})),e.d(t,"vk",(function(){return ze})),e.d(t,"Kb",(function(){return Ue})),e.d(t,"Ri",(function(){return Ke})),e.d(t,"oh",(function(){return Qe})),e.d(t,"nh",(function(){return Ne})),e.d(t,"Xk",(function(){return Xe})),e.d(t,"wk",(function(){return Ye})),e.d(t,"bl",(function(){return He})),e.d(t,"kf",(function(){return Je})),e.d(t,"p",(function(){return Ze})),e.d(t,"t",(function(){return $e})),e.d(t,"A",(function(){return nr})),e.d(t,"E",(function(){return tr})),e.d(t,"P",(function(){return er})),e.d(t,"S",(function(){return rr})),e.d(t,"V",(function(){return ur})),e.d(t,"W",(function(){return fr})),e.d(t,"ib",(function(){return cr})),e.d(t,"jb",(function(){return ir})),e.d(t,"kb",(function(){return or})),e.d(t,"sb",(function(){return _r})),e.d(t,"Bb",(function(){return dr})),e.d(t,"zb",(function(){return ar})),e.d(t,"Cb",(function(){return br})),e.d(t,"Db",(function(){return gr})),e.d(t,"Hb",(function(){return wr})),e.d(t,"Nb",(function(){return sr})),e.d(t,"ec",(function(){return lr})),e.d(t,"jc",(function(){return mr})),e.d(t,"sc",(function(){return pr})),e.d(t,"Fc",(function(){return hr})),e.d(t,"Ic",(function(){return xr})),e.d(t,"Lc",(function(){return yr})),e.d(t,"Pc",(function(){return Sr})),e.d(t,"od",(function(){return kr})),e.d(t,"sd",(function(){return vr})),e.d(t,"ud",(function(){return Br})),e.d(t,"Hd",(function(){return Pr})),e.d(t,"Rd",(function(){return Ir})),e.d(t,"be",(function(){return jr})),e.d(t,"ie",(function(){return Ar})),e.d(t,"ue",(function(){return Dr})),e.d(t,"Fe",(function(){return Tr})),e.d(t,"Me",(function(){return Cr})),e.d(t,"Ne",(function(){return Mr})),e.d(t,"mf",(function(){return Fr})),e.d(t,"qh",(function(){return Er})),e.d(t,"rh",(function(){return Rr})),e.d(t,"th",(function(){return Lr})),e.d(t,"yh",(function(){return Or})),e.d(t,"Lh",(function(){return Gr})),e.d(t,"Mh",(function(){return Vr})),e.d(t,"Si",(function(){return Wr})),e.d(t,"Ui",(function(){return qr})),e.d(t,"Xi",(function(){return zr})),e.d(t,"Yi",(function(){return Ur})),e.d(t,"cj",(function(){return Kr})),e.d(t,"dj",(function(){return Qr})),e.d(t,"Zi",(function(){return Nr})),e.d(t,"bj",(function(){return Xr})),e.d(t,"ej",(function(){return Yr})),e.d(t,"hj",(function(){return Hr})),e.d(t,"gj",(function(){return Jr})),e.d(t,"ij",(function(){return Zr})),e.d(t,"fj",(function(){return $r})),e.d(t,"jj",(function(){return nu})),e.d(t,"rj",(function(){return tu})),e.d(t,"sj",(function(){return eu})),e.d(t,"uj",(function(){return ru})),e.d(t,"wj",(function(){return uu})),e.d(t,"xj",(function(){return fu})),e.d(t,"Aj",(function(){return cu})),e.d(t,"Bj",(function(){return iu})),e.d(t,"Ej",(function(){return ou})),e.d(t,"Hj",(function(){return _u})),e.d(t,"Ij",(function(){return du})),e.d(t,"Jj",(function(){return au})),e.d(t,"Lj",(function(){return bu})),e.d(t,"Mj",(function(){return gu})),e.d(t,"Nj",(function(){return wu})),e.d(t,"Pj",(function(){return su})),e.d(t,"Qj",(function(){return lu})),e.d(t,"Rj",(function(){return mu})),e.d(t,"Sj",(function(){return pu})),e.d(t,"Uj",(function(){return hu})),e.d(t,"Vj",(function(){return xu})),e.d(t,"dk",(function(){return yu})),e.d(t,"ek",(function(){return Su})),e.d(t,"g",(function(){return ku})),e.d(t,"m",(function(){return vu})),e.d(t,"s",(function(){return Bu})),e.d(t,"v",(function(){return Pu})),e.d(t,"w",(function(){return Iu})),e.d(t,"y",(function(){return ju})),e.d(t,"B",(function(){return Au})),e.d(t,"F",(function(){return Du})),e.d(t,"J",(function(){return Tu})),e.d(t,"H",(function(){return Cu})),e.d(t,"N",(function(){return Mu})),e.d(t,"L",(function(){return Fu})),e.d(t,"qb",(function(){return Eu})),e.d(t,"mb",(function(){return Ru})),e.d(t,"ob",(function(){return Lu})),e.d(t,"wb",(function(){return Ou})),e.d(t,"yb",(function(){return Gu})),e.d(t,"Mb",(function(){return Vu})),e.d(t,"Tb",(function(){return Wu})),e.d(t,"Zb",(function(){return qu})),e.d(t,"bc",(function(){return zu})),e.d(t,"hc",(function(){return Uu})),e.d(t,"nc",(function(){return Ku})),e.d(t,"oc",(function(){return Qu})),e.d(t,"xc",(function(){return Nu})),e.d(t,"Ac",(function(){return Xu})),e.d(t,"Cc",(function(){return Yu})),e.d(t,"Ec",(function(){return Hu})),e.d(t,"Gc",(function(){return Ju})),e.d(t,"Jc",(function(){return Zu})),e.d(t,"Mc",(function(){return $u})),e.d(t,"Uc",(function(){return nf})),e.d(t,"Vc",(function(){return tf})),e.d(t,"Yc",(function(){return ef})),e.d(t,"hd",(function(){return rf})),e.d(t,"fd",(function(){return uf})),e.d(t,"pd",(function(){return ff})),e.d(t,"Gd",(function(){return cf})),e.d(t,"Ed",(function(){return of})),e.d(t,"Xd",(function(){return _f})),e.d(t,"ae",(function(){return df})),e.d(t,"de",(function(){return af})),e.d(t,"te",(function(){return bf})),e.d(t,"ye",(function(){return gf})),e.d(t,"Ae",(function(){return wf})),e.d(t,"De",(function(){return sf})),e.d(t,"He",(function(){return lf})),e.d(t,"Ie",(function(){return mf})),e.d(t,"Ke",(function(){return pf})),e.d(t,"Oe",(function(){return hf})),e.d(t,"yf",(function(){return xf})),e.d(t,"Wg",(function(){return yf})),e.d(t,"ah",(function(){return Sf})),e.d(t,"Ah",(function(){return kf})),e.d(t,"Ph",(function(){return vf})),e.d(t,"Bi",(function(){return Bf})),e.d(t,"Ji",(function(){return Pf})),e.d(t,"Mi",(function(){return If})),e.d(t,"Ki",(function(){return jf})),e.d(t,"Oi",(function(){return Af})),e.d(t,"Vi",(function(){return Df})),e.d(t,"oj",(function(){return Tf})),e.d(t,"qj",(function(){return Cf})),e.d(t,"Cj",(function(){return Mf})),e.d(t,"Zj",(function(){return Ff})),e.d(t,"fk",(function(){return Ef})),e.d(t,"kk",(function(){return Rf})),e.d(t,"lf",(function(){return Lf})),e.d(t,"md",(function(){return Of})),e.d(t,"tg",(function(){return Gf})),e.d(t,"dd",(function(){return Vf})),e.d(t,"eb",(function(){return Wf})),e.d(t,"me",(function(){return qf})),e.d(t,"Df",(function(){return zf})),e.d(t,"Hh",(function(){return Uf})),e.d(t,"db",(function(){return Kf})),e.d(t,"Dh",(function(){return Qf})),e.d(t,"pb",(function(){return Nf})),e.d(t,"mi",(function(){return Xf})),e.d(t,"li",(function(){return Yf})),e.d(t,"R",(function(){return Hf})),e.d(t,"lk",(function(){return Jf})),e.d(t,"e",(function(){return Zf})),e.d(t,"fe",(function(){return $f})),e.d(t,"Xb",(function(){return nc})),e.d(t,"se",(function(){return tc})),e.d(t,"mh",(function(){return ec})),e.d(t,"lh",(function(){return rc})),e.d(t,"Sh",(function(){return uc})),e.d(t,"hi",(function(){return fc})),e.d(t,"sg",(function(){return cc})),e.d(t,"Qi",(function(){return ic})),e.d(t,"Wd",(function(){return oc})),e.d(t,"U",(function(){return _c})),e.d(t,"T",(function(){return dc})),e.d(t,"X",(function(){return ac})),e.d(t,"Ab",(function(){return bc})),e.d(t,"sh",(function(){return gc})),e.d(t,"Ti",(function(){return wc})),e.d(t,"aj",(function(){return sc})),e.d(t,"tj",(function(){return lc})),e.d(t,"vj",(function(){return mc})),e.d(t,"yj",(function(){return pc})),e.d(t,"zj",(function(){return hc})),e.d(t,"Fj",(function(){return xc})),e.d(t,"Gj",(function(){return yc})),e.d(t,"Kj",(function(){return Sc})),e.d(t,"Oj",(function(){return kc})),e.d(t,"Tj",(function(){return vc})),e.d(t,"f",(function(){return Bc})),e.d(t,"n",(function(){return Pc})),e.d(t,"r",(function(){return Ic})),e.d(t,"u",(function(){return jc})),e.d(t,"x",(function(){return Ac})),e.d(t,"z",(function(){return Dc})),e.d(t,"C",(function(){return Tc})),e.d(t,"G",(function(){return Cc})),e.d(t,"K",(function(){return Mc})),e.d(t,"I",(function(){return Fc})),e.d(t,"O",(function(){return Ec})),e.d(t,"M",(function(){return Rc})),e.d(t,"rb",(function(){return Lc})),e.d(t,"lb",(function(){return Oc})),e.d(t,"nb",(function(){return Gc})),e.d(t,"vb",(function(){return Vc})),e.d(t,"xb",(function(){return Wc})),e.d(t,"Lb",(function(){return qc})),e.d(t,"Sb",(function(){return zc})),e.d(t,"Yb",(function(){return Uc})),e.d(t,"cc",(function(){return Kc})),e.d(t,"ic",(function(){return Qc})),e.d(t,"mc",(function(){return Nc})),e.d(t,"qc",(function(){return Xc})),e.d(t,"wc",(function(){return Yc})),e.d(t,"zc",(function(){return Hc})),e.d(t,"Bc",(function(){return Jc})),e.d(t,"Dc",(function(){return Zc})),e.d(t,"Hc",(function(){return $c})),e.d(t,"Kc",(function(){return ni})),e.d(t,"Nc",(function(){return ti})),e.d(t,"Tc",(function(){return ei})),e.d(t,"Wc",(function(){return ri})),e.d(t,"Xc",(function(){return ui})),e.d(t,"gd",(function(){return fi})),e.d(t,"ed",(function(){return ci})),e.d(t,"qd",(function(){return ii})),e.d(t,"Fd",(function(){return oi})),e.d(t,"Dd",(function(){return _i})),e.d(t,"Yd",(function(){return di})),e.d(t,"Zd",(function(){return ai})),e.d(t,"ee",(function(){return bi})),e.d(t,"xe",(function(){return gi})),e.d(t,"Be",(function(){return wi})),e.d(t,"Ce",(function(){return si})),e.d(t,"Ge",(function(){return li})),e.d(t,"Je",(function(){return mi})),e.d(t,"Pe",(function(){return pi})),e.d(t,"xf",(function(){return hi})),e.d(t,"Vg",(function(){return xi})),e.d(t,"Zg",(function(){return yi})),e.d(t,"zh",(function(){return Si})),e.d(t,"Qh",(function(){return ki})),e.d(t,"Ai",(function(){return vi})),e.d(t,"Ii",(function(){return Bi})),e.d(t,"Ni",(function(){return Pi})),e.d(t,"Li",(function(){return Ii})),e.d(t,"Pi",(function(){return ji})),e.d(t,"Wi",(function(){return Ai})),e.d(t,"nj",(function(){return Di})),e.d(t,"pj",(function(){return Ti})),e.d(t,"Dj",(function(){return Ci})),e.d(t,"ak",(function(){return Mi})),e.d(t,"gk",(function(){return Fi})),e.d(t,"jk",(function(){return Ei})),e.d(t,"nd",(function(){return Ri})),e.d(t,"td",(function(){return Li})),e.d(t,"ck",(function(){return Oi})),e.d(t,"Ee",(function(){return Gi})),e.d(t,"xh",(function(){return Vi})),e.d(t,"ii",(function(){return Wi})),e.d(t,"xg",(function(){return qi})),e.d(t,"jd",(function(){return zi})),e.d(t,"Lg",(function(){return Ui})),e.d(t,"l",(function(){return Ki})),e.d(t,"Fb",(function(){return Qi})),e.d(t,"Qe",(function(){return Ni})),e.d(t,"rd",(function(){return Xi})),e.d(t,"ik",(function(){return Yi})),e.d(t,"hk",(function(){return Hi})),e.d(t,"ch",(function(){return Ji})),e.d(t,"dh",(function(){return Zi})),e.d(t,"wg",(function(){return $i})),e.d(t,"ce",(function(){return no})),e.d(t,"nf",(function(){return to})),e.d(t,"Gb",(function(){return eo})),e.d(t,"cd",(function(){return ro})),e.d(t,"cf",(function(){return uo})),e.d(t,"Q",(function(){return fo})),e.d(t,"yc",(function(){return co})),e.d(t,"Ld",(function(){return io})),e.d(t,"Kd",(function(){return oo})),e.d(t,"bf",(function(){return _o})),e.d(t,"Af",(function(){return ao})),e.d(t,"mk",(function(){return bo})),e.d(t,"Ei",(function(){return go})),e.d(t,"ug",(function(){return wo})),e.d(t,"d",(function(){return so})),e.d(t,"tb",(function(){return lo})),e.d(t,"eh",(function(){return mo})),e.d(t,"Hi",(function(){return po})),e.d(t,"qk",(function(){return ho})),e.d(t,"Xe",(function(){return xo})),e.d(t,"if",(function(){return yo})),e.d(t,"sk",(function(){return So})),e.d(t,"yi",(function(){return ko})),e.d(t,"Ye",(function(){return vo})),e.d(t,"wi",(function(){return Bo})),e.d(t,"pe",(function(){return Po})),e.d(t,"qe",(function(){return Io})),e.d(t,"pk",(function(){return jo})),e.d(t,"Ze",(function(){return Ao})),e.d(t,"k",(function(){return Do})),e.d(t,"vc",(function(){return To})),e.d(t,"Di",(function(){return Co})),e.d(t,"mg",(function(){return Mo})),e.d(t,"zf",(function(){return Fo})),e.d(t,"Bh",(function(){return Eo})),e.d(t,"pf",(function(){return Ro})),e.d(t,"ub",(function(){return Lo})),e.d(t,"rk",(function(){return Oo})),e.d(t,"zi",(function(){return Go})),e.d(t,"We",(function(){return Vo})),e.d(t,"vi",(function(){return Wo})),e.d(t,"ne",(function(){return qo})),e.d(t,"oe",(function(){return zo})),e.d(t,"Ug",(function(){return Uo})),e.d(t,"h",(function(){return Ko})),e.d(t,"vh",(function(){return Qo})),e.d(t,"yg",(function(){return No})),e.d(t,"id",(function(){return Xo})),e.d(t,"Mg",(function(){return Yo})),e.d(t,"Ng",(function(){return Ho})),e.d(t,"Xj",(function(){return Jo})),e.d(t,"Rc",(function(){return Zo})),e.d(t,"Sc",(function(){return $o})),e.d(t,"Qc",(function(){return n_})),e.d(t,"D",(function(){return t_})),e.d(t,"rc",(function(){return e_})),e.d(t,"Oc",(function(){return r_})),e.d(t,"Le",(function(){return u_})),e.d(t,"hh",(function(){return f_})),e.d(t,"hg",(function(){return c_})),e.d(t,"Ef",(function(){return i_})),e.d(t,"i",(function(){return o_})),e.d(t,"wh",(function(){return __})),e.d(t,"uc",(function(){return d_})),e.d(t,"Ci",(function(){return a_})),e.d(t,"j",(function(){return b_})),e.d(t,"ng",(function(){return g_})),e.d(t,"ab",(function(){return w_})),e.d(t,"bb",(function(){return s_})),e.d(t,"qg",(function(){return l_})),e.d(t,"rg",(function(){return m_})),e.d(t,"Xg",(function(){return p_})),e.d(t,"gh",(function(){return h_})),e.d(t,"Yg",(function(){return x_})),e.d(t,"je",(function(){return y_})),e.d(t,"Re",(function(){return S_})),e.d(t,"tf",(function(){return k_})),e.d(t,"vg",(function(){return v_})),e.d(t,"Cg",(function(){return B_})),e.d(t,"cb",(function(){return P_})),e.d(t,"Ag",(function(){return I_})),e.d(t,"Rh",(function(){return j_})),e.d(t,"tk",(function(){return A_})),e.d(t,"Se",(function(){return D_})),e.d(t,"Te",(function(){return T_})),e.d(t,"af",(function(){return C_})),e.d(t,"Og",(function(){return M_})),e.d(t,"kh",(function(){return F_})),e.d(t,"jf",(function(){return E_})),e.d(t,"we",(function(){return R_})),e.d(t,"of",(function(){return L_})),e.d(t,"bk",(function(){return O_})),e.d(t,"Kh",(function(){return G_})),e.d(t,"fb",(function(){return V_})),e.d(t,"kj",(function(){return W_})),e.d(t,"lj",(function(){return q_})),e.d(t,"Y",(function(){return z_})),e.d(t,"Eg",(function(){return U_})),e.d(t,"Hg",(function(){return K_})),e.d(t,"Fg",(function(){return Q_})),e.d(t,"Jg",(function(){return N_})),e.d(t,"zg",(function(){return X_})),e.d(t,"ti",(function(){return Y_})),e.d(t,"sf",(function(){return H_})),e.d(t,"Ig",(function(){return J_})),e.d(t,"Dg",(function(){return Z_})),e.d(t,"Gg",(function(){return $_})),e.d(t,"Z",(function(){return nd})),e.d(t,"si",(function(){return td})),e.d(t,"Wk",(function(){return ed})),e.d(t,"hl",(function(){return rd})),e.d(t,"al",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"Lk",(function(){return od})),e.d(t,"Mk",(function(){return _d})),e.d(t,"Nk",(function(){return dd})),e.d(t,"Ok",(function(){return ad})),e.d(t,"Pk",(function(){return bd})),e.d(t,"Qk",(function(){return gd})),e.d(t,"Rk",(function(){return wd})),e.d(t,"Sk",(function(){return sd})),e.d(t,"Tk",(function(){return ld})),e.d(t,"Uk",(function(){return md})),e.d(t,"Vk",(function(){return pd})),e.d(t,"yk",(function(){return hd})),e.d(t,"zk",(function(){return xd})),e.d(t,"Ak",(function(){return yd})),e.d(t,"Bk",(function(){return Sd})),e.d(t,"Ck",(function(){return kd})),e.d(t,"Dk",(function(){return vd})),e.d(t,"Ek",(function(){return Bd})),e.d(t,"Fk",(function(){return Pd})),e.d(t,"Gk",(function(){return Id})),e.d(t,"Hk",(function(){return jd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}function _(n){i===f.length&&f.push(f.length+1);const t=i;return i=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))}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,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h271c33a696d076d1(n,t,_(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb699af2bbdf70254(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h79b3e7679eb5f498(n,t,_(e),_(u))}function I(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0c0c2f44b43fa2b4(n,t,_(e))}function j(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd12aec09f1d2371b(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h4db134463572f1aa(n,t,_(e),_(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,_(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,_(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n){return _(c(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function N(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function X(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){return c(n).offsetX}function H(n){return c(n).offsetY}function J(n){return _(c(n).Window)}function Z(n){const t=c(n).webkitFullscreenElement;return p(t)?0:_(t)}function $(){return _(ResizeObserverEntry.prototype)}function nn(n){return _(c(n).scheduler)}function tn(n){return _(c(n).getCoalescedEvents)}function en(n){return _(c(n).requestFullscreen)}function rn(n){return _(c(n).requestIdleCallback)}function un(n){return _(c(n).onpointerrawupdate)}function fn(n){c(n).webkitRequestFullscreen()}function cn(n){return _(c(n).requestFullscreen())}function on(n){return _(c(n).scheduler)}function _n(n,t,e){return _(c(n).postTask(c(t),c(e)))}function dn(n){return _(n)}function an(n){return _(c(n).performance)}function bn(n){return c(n).now()}function gn(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function wn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function sn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function mn(n){return c(n).size}function pn(n){return c(n).usage}function hn(n){c(n).destroy()}function xn(n,t,e){return _(c(n).getMappedRange(t,e))}function yn(n,t,e,r){return _(c(n).mapAsync(t>>>0,e,r))}function Sn(n){c(n).unmap()}function kn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function vn(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function Bn(n){c(n).end()}function Pn(n,t){c(n).setPipeline(c(t))}function In(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function jn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function An(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function Dn(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Tn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function Cn(n){return _(c(n).gpu)}function Mn(n){return _(c(n).getPreferredCanvasFormat())}function Fn(n,t){return _(c(n).requestAdapter(c(t)))}function En(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Rn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ln(n){return _(c(n).finish())}function On(n,t){return _(c(n).finish(c(t)))}function Gn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Vn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Wn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function qn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function zn(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Un(n,t,e){c(n).drawIndirect(c(t),e)}function Kn(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Qn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Nn(n,t){c(n).setPipeline(c(t))}function Xn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Yn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Hn(n){return _(c(n).features)}function Jn(n){return _(c(n).limits)}function Zn(n){return _(c(n).queue)}function $n(n){return _(c(n).lost)}function nt(n,t){c(n).onuncapturederror=c(t)}function tt(n,t){return _(c(n).createBindGroup(c(t)))}function et(n,t){return _(c(n).createBindGroupLayout(c(t)))}function rt(n,t){return _(c(n).createBuffer(c(t)))}function ut(n,t){return _(c(n).createCommandEncoder(c(t)))}function ft(n,t){return _(c(n).createComputePipeline(c(t)))}function ct(n,t){return _(c(n).createPipelineLayout(c(t)))}function it(n,t){return _(c(n).createQuerySet(c(t)))}function ot(n,t){return _(c(n).createRenderBundleEncoder(c(t)))}function _t(n,t){return _(c(n).createRenderPipeline(c(t)))}function dt(n,t){return _(c(n).createSampler(c(t)))}function at(n,t){return _(c(n).createShaderModule(c(t)))}function bt(n,t){return _(c(n).createTexture(c(t)))}function gt(n){c(n).destroy()}function wt(n){return _(c(n).popErrorScope())}function st(n,t){c(n).pushErrorScope(o(t))}function lt(n,t){return _(c(n).createView(c(t)))}function mt(n){c(n).destroy()}function pt(n){return _(c(n).type)}function ht(n){return c(n).offset}function xt(n){return c(n).length}function yt(n){return c(n).lineNum}function St(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function kt(n,t){c(n).configure(c(t))}function vt(n){return _(c(n).getCurrentTexture())}function Bt(n){return _(c(n).reason)}function Pt(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function It(n){c(n).end()}function jt(n,t){c(n).executeBundles(c(t))}function At(n,t){c(n).setBlendConstant(c(t))}function Dt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Tt(n,t){c(n).setStencilReference(t>>>0)}function Ct(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Mt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Ft(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Et(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Rt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Lt(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ot(n,t,e){c(n).drawIndirect(c(t),e)}function Gt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Vt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Wt(n,t){c(n).setPipeline(c(t))}function qt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function zt(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Ut(n){return _(c(n).getCompilationInfo())}function Kt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Qt(n,t){return _(c(n).beginComputePass(c(t)))}function Nt(n,t){return _(c(n).beginRenderPass(c(t)))}function Xt(n,t,e){c(n).clearBuffer(c(t),e)}function Yt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Ht(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Jt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Zt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function $t(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function ne(n){return _(c(n).finish())}function te(n,t){return _(c(n).finish(c(t)))}function ee(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function re(n){return _(c(n).error)}function ue(n,t,e){return c(n).has(g(t,e))}function fe(n){return c(n).maxTextureDimension1D}function ce(n){return c(n).maxTextureDimension2D}function ie(n){return c(n).maxTextureDimension3D}function oe(n){return c(n).maxTextureArrayLayers}function _e(n){return c(n).maxBindGroups}function de(n){return c(n).maxBindingsPerBindGroup}function ae(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function be(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function ge(n){return c(n).maxSampledTexturesPerShaderStage}function we(n){return c(n).maxSamplersPerShaderStage}function se(n){return c(n).maxStorageBuffersPerShaderStage}function le(n){return c(n).maxStorageTexturesPerShaderStage}function me(n){return c(n).maxUniformBuffersPerShaderStage}function pe(n){return c(n).maxUniformBufferBindingSize}function he(n){return c(n).maxStorageBufferBindingSize}function xe(n){return c(n).maxVertexBuffers}function ye(n){return c(n).maxBufferSize}function Se(n){return c(n).maxVertexAttributes}function ke(n){return c(n).maxVertexBufferArrayStride}function ve(n){return c(n).minUniformBufferOffsetAlignment}function Be(n){return c(n).minStorageBufferOffsetAlignment}function Pe(n){return c(n).maxInterStageShaderComponents}function Ie(n){return c(n).maxColorAttachments}function je(n){return c(n).maxColorAttachmentBytesPerSample}function Ae(n){return c(n).maxComputeWorkgroupStorageSize}function De(n){return c(n).maxComputeInvocationsPerWorkgroup}function Te(n){return c(n).maxComputeWorkgroupSizeX}function Ce(n){return c(n).maxComputeWorkgroupSizeY}function Me(n){return c(n).maxComputeWorkgroupSizeZ}function Fe(n){return c(n).maxComputeWorkgroupsPerDimension}function Ee(n){const t=c(n);return"object"==typeof t&&null!==t}function Re(n){return _(c(n).Window)}function Le(n){return _(c(n).WorkerGlobalScope)}function Oe(n,t){return _(c(n).requestDevice(c(t)))}function Ge(n){return _(c(n).features)}function Ve(n){return _(c(n).limits)}function We(n){return _(c(n).messages)}function qe(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function ze(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ue(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Ke(n,t){c(n).submit(c(t))}function Qe(n){queueMicrotask(c(n))}function Ne(n){return _(c(n).queueMicrotask)}function Xe(n){return"function"==typeof c(n)}function Ye(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function He(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Je(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Ze(n,t,e){c(n).beginQuery(t>>>0,c(e))}function $e(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function nr(n,t,e){c(n).bindSampler(t>>>0,c(e))}function tr(n,t){c(n).bindVertexArray(c(t))}function er(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function rr(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function ur(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function fr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function cr(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function ir(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function or(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function _r(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function dr(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function ar(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function br(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function gr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function wr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function sr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function lr(n){const t=c(n).createQuery();return p(t)?0:_(t)}function mr(n){const t=c(n).createSampler();return p(t)?0:_(t)}function pr(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function hr(n,t){c(n).deleteQuery(c(t))}function xr(n,t){c(n).deleteSampler(c(t))}function yr(n,t){c(n).deleteSync(c(t))}function Sr(n,t){c(n).deleteVertexArray(c(t))}function kr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function vr(n,t){c(n).drawBuffers(c(t))}function Br(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function Pr(n,t){c(n).endQuery(t>>>0)}function Ir(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function jr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Ar(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dr(){return V((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Tr(n,t,e){return _(c(n).getQueryParameter(c(t),e>>>0))}function Cr(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Mr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Fr(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Er(n,t){c(n).readBuffer(t>>>0)}function Rr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Lr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Or(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Gr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Vr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Wr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function qr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function zr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Ur(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Kr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function nu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function tu(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function eu(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function ru(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function uu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function fu(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function cu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function iu(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function ou(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function _u(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function du(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function au(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function bu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function gu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function hu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function xu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function yu(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function Su(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function ku(n,t){c(n).activeTexture(t>>>0)}function vu(n,t,e){c(n).attachShader(c(t),c(e))}function Bu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function Pu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Iu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function ju(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Au(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Du(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Tu(n,t){c(n).blendEquation(t>>>0)}function Cu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Mu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Fu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Eu(n,t){c(n).clear(t>>>0)}function Ru(n,t){c(n).clearDepth(t)}function Lu(n,t){c(n).clearStencil(t)}function Ou(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Gu(n,t){c(n).compileShader(c(t))}function Vu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Wu(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function qu(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function zu(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Uu(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Ku(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Qu(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Nu(n,t){c(n).cullFace(t>>>0)}function Xu(n,t){c(n).deleteBuffer(c(t))}function Yu(n,t){c(n).deleteFramebuffer(c(t))}function Hu(n,t){c(n).deleteProgram(c(t))}function Ju(n,t){c(n).deleteRenderbuffer(c(t))}function Zu(n,t){c(n).deleteShader(c(t))}function $u(n,t){c(n).deleteTexture(c(t))}function nf(n,t){c(n).depthFunc(t>>>0)}function tf(n,t){c(n).depthMask(0!==t)}function ef(n,t,e){c(n).depthRange(t,e)}function rf(n,t){c(n).disable(t>>>0)}function uf(n,t){c(n).disableVertexAttribArray(t>>>0)}function ff(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function cf(n,t){c(n).enable(t>>>0)}function of(n,t){c(n).enableVertexAttribArray(t>>>0)}function _f(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function df(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function af(n,t){c(n).frontFace(t>>>0)}function bf(){return V((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function gf(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function wf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function sf(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function lf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function mf(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function pf(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function hf(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function xf(n,t){c(n).linkProgram(c(t))}function yf(n,t,e){c(n).pixelStorei(t>>>0,e)}function Sf(n,t,e){c(n).polygonOffset(t,e)}function kf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function vf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Bf(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Pf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function If(n,t){c(n).stencilMask(t>>>0)}function jf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Af(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Df(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Tf(n,t,e){c(n).uniform1f(c(t),e)}function Cf(n,t,e){c(n).uniform1i(c(t),e)}function Mf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ff(n,t){c(n).useProgram(c(t))}function Ef(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Rf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Lf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Of(n){const t=c(n).document;return p(t)?0:_(t)}function Gf(n){return _(c(n).navigator)}function Vf(n){return c(n).devicePixelRatio}function Wf(n,t){c(n).cancelIdleCallback(t>>>0)}function qf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:_(e)}),arguments)}function zf(){return V((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function Uf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Kf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Qf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Nf(n,t){c(n).clearTimeout(t)}function Xf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Yf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Hf(n){const t=c(n).body;return p(t)?0:_(t)}function Jf(n){return _(c(n).visibilityState)}function Zf(n){const t=c(n).activeElement;return p(t)?0:_(t)}function $f(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function nc(){return V((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function tc(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function ec(){return V((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function rc(){return V((function(n,t,e){return _(c(n).querySelectorAll(g(t,e)))}),arguments)}function uc(){return V((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function fc(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function cc(n){return _(c(n).navigator)}function ic(n){return _(c(n).style)}function oc(){return V((function(n){c(n).focus()}),arguments)}function _c(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function dc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function ac(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function bc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function gc(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function wc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function sc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function lc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function mc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function pc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function hc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function xc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function yc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function Sc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function kc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function vc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function Bc(n,t){c(n).activeTexture(t>>>0)}function Pc(n,t,e){c(n).attachShader(c(t),c(e))}function Ic(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function jc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Ac(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Dc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Tc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Cc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Mc(n,t){c(n).blendEquation(t>>>0)}function Fc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Ec(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Rc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Lc(n,t){c(n).clear(t>>>0)}function Oc(n,t){c(n).clearDepth(t)}function Gc(n,t){c(n).clearStencil(t)}function Vc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Wc(n,t){c(n).compileShader(c(t))}function qc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function zc(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Uc(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Kc(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Qc(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Nc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Xc(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Yc(n,t){c(n).cullFace(t>>>0)}function Hc(n,t){c(n).deleteBuffer(c(t))}function Jc(n,t){c(n).deleteFramebuffer(c(t))}function Zc(n,t){c(n).deleteProgram(c(t))}function $c(n,t){c(n).deleteRenderbuffer(c(t))}function ni(n,t){c(n).deleteShader(c(t))}function ti(n,t){c(n).deleteTexture(c(t))}function ei(n,t){c(n).depthFunc(t>>>0)}function ri(n,t){c(n).depthMask(0!==t)}function ui(n,t,e){c(n).depthRange(t,e)}function fi(n,t){c(n).disable(t>>>0)}function ci(n,t){c(n).disableVertexAttribArray(t>>>0)}function ii(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function oi(n,t){c(n).enable(t>>>0)}function _i(n,t){c(n).enableVertexAttribArray(t>>>0)}function di(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ai(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function bi(n,t){c(n).frontFace(t>>>0)}function gi(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function wi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function si(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function li(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function mi(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function pi(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function hi(n,t){c(n).linkProgram(c(t))}function xi(n,t,e){c(n).pixelStorei(t>>>0,e)}function yi(n,t,e){c(n).polygonOffset(t,e)}function Si(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function ki(n,t,e,r,u){c(n).scissor(t,e,r,u)}function vi(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Bi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Pi(n,t){c(n).stencilMask(t>>>0)}function Ii(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function ji(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ai(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Di(n,t,e){c(n).uniform1f(c(t),e)}function Ti(n,t,e){c(n).uniform1i(c(t),e)}function Ci(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Mi(n,t){c(n).useProgram(c(t))}function Fi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Ei(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ri(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Li(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Oi(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function Gi(){return V((function(n,t,e,u){const f=m(c(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Vi(){return V((function(n,t,e,u){const f=m(c(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Wi(){return V((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function qi(){return V((function(n){return _(new IntersectionObserver(c(n)))}),arguments)}function zi(n){c(n).disconnect()}function Ui(n,t){c(n).observe(c(t))}function Ki(){return V((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Qi(n,t){return c(n).contains(c(t))}function Ni(n,t){const e=c(n)[t>>>0];return p(e)?0:_(e)}function Xi(n,t){c(n).drawBuffersWEBGL(c(t))}function Yi(n){return c(n).videoWidth}function Hi(n){return c(n).videoHeight}function Ji(n){return _(c(n).port1)}function Zi(n){return _(c(n).port2)}function $i(){return V((function(){return _(new MessageChannel)}),arguments)}function no(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function to(n){return c(n).isIntersecting}function eo(n){return _(c(n).contentRect)}function ro(n){return _(c(n).devicePixelContentBoxSize)}function uo(n){return c(n).inlineSize}function fo(n){return c(n).blockSize}function co(n){console.debug(c(n))}function io(n){console.error(c(n))}function oo(n,t){console.error(c(n),c(t))}function _o(n){console.info(c(n))}function ao(n){console.log(c(n))}function bo(n){console.warn(c(n))}function go(n){return _(c(n).signal)}function wo(){return V((function(){return _(new AbortController)}),arguments)}function so(n){c(n).abort()}function lo(n){c(n).close()}function mo(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function po(n){c(n).start()}function ho(n){return c(n).width}function xo(n){return c(n).height}function yo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function So(n){return c(n).width}function ko(n,t){c(n).width=t>>>0}function vo(n){return c(n).height}function Bo(n,t){c(n).height=t>>>0}function Po(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function Io(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function jo(n){return c(n).width}function Ao(n){return c(n).height}function Do(n){return c(n).altKey}function To(n){return c(n).ctrlKey}function Co(n){return c(n).shiftKey}function Mo(n){return c(n).metaKey}function Fo(n){return c(n).location}function Eo(n){return c(n).repeat}function Ro(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Lo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Oo(n){return c(n).width}function Go(n,t){c(n).width=t>>>0}function Vo(n){return c(n).height}function Wo(n,t){c(n).height=t>>>0}function qo(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function zo(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function Uo(n){return c(n).persisted}function Ko(){return V((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function Qo(){return V((function(n,t,e,r){c(n).removeEventListener(g(t,e),c(r))}),arguments)}function No(){return V((function(n){return _(new ResizeObserver(c(n)))}),arguments)}function Xo(n){c(n).disconnect()}function Yo(n,t){c(n).observe(c(t))}function Ho(n,t,e){c(n).observe(c(t),c(e))}function Jo(n,t){c(n).unobserve(c(t))}function Zo(n){return c(n).deltaX}function $o(n){return c(n).deltaY}function n_(n){return c(n).deltaMode}function t_(n,t){c(n).bindVertexArrayOES(c(t))}function e_(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function r_(n,t){c(n).deleteVertexArrayOES(c(t))}function u_(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function f_(n){c(n).preventDefault()}function c_(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function i_(n){return c(n).matches}function o_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function __(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function d_(n){return c(n).ctrlKey}function a_(n){return c(n).shiftKey}function b_(n){return c(n).altKey}function g_(n){return c(n).metaKey}function w_(n){return c(n).button}function s_(n){return c(n).buttons}function l_(n){return c(n).movementX}function m_(n){return c(n).movementY}function p_(n){return c(n).pointerId}function h_(n){return c(n).pressure}function x_(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function y_(n){return _(c(n).getCoalescedEvents())}function S_(n,t){return _(c(n)[t>>>0])}function k_(n){return c(n).length}function v_(){return _(new Array)}function B_(n,t){return _(new Function(g(n,t)))}function P_(){return V((function(n,t){return _(c(n).call(c(t)))}),arguments)}function I_(){return _(new Object)}function j_(){return V((function(){return _(self.self)}),arguments)}function A_(){return V((function(){return _(window.window)}),arguments)}function D_(){return V((function(){return _(globalThis.globalThis)}),arguments)}function T_(){return V((function(){return _(global.global)}),arguments)}function C_(n,t,e){return c(n).includes(c(t),e)}function M_(n){return _(Array.of(c(n)))}function F_(n,t){return c(n).push(c(t))}function E_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function R_(n,t){return _(Object.getOwnPropertyDescriptor(c(n),c(t)))}function L_(n,t){return Object.is(c(n),c(t))}function O_(n){return _(c(n).valueOf())}function G_(n){return _(Promise.resolve(c(n)))}function V_(n,t){return _(c(n).catch(c(t)))}function W_(n,t){return _(c(n).then(c(t)))}function q_(n,t,e){return _(c(n).then(c(t),c(e)))}function z_(n){return _(c(n).buffer)}function U_(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function K_(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Q_(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function N_(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function X_(n){return _(new Uint8Array(c(n)))}function Y_(n,t,e){c(n).set(c(t),e>>>0)}function H_(n){return c(n).length}function J_(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function Z_(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function $_(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function nd(n){return _(c(n).buffer)}function td(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ed(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;x()[n/4+1]=u,x()[n/4+0]=e}function rd(n,t){throw new Error(g(n,t))}function ud(){return _(r.memory)}function fd(n,t,e){return _(k(n,t,9,v))}function cd(n,t,e){return _(k(n,t,9,B))}function id(n,t,e){return _(k(n,t,9,v))}function od(n,t,e){return _(k(n,t,9,v))}function _d(n,t,e){return _(k(n,t,9,v))}function dd(n,t,e){return _(k(n,t,9,v))}function ad(n,t,e){return _(k(n,t,9,P))}function bd(n,t,e){return _(k(n,t,209,I))}function gd(n,t,e){return _(k(n,t,209,I))}function wd(n,t,e){return _(k(n,t,209,I))}function sd(n,t,e){return _(k(n,t,209,I))}function ld(n,t,e){return _(k(n,t,209,j))}function md(n,t,e){return _(k(n,t,209,I))}function pd(n,t,e){return _(k(n,t,209,A))}function hd(n,t,e){return _(k(n,t,635,D))}function xd(n,t,e){return _(k(n,t,635,D))}function yd(n,t,e){return _(k(n,t,635,T))}function Sd(n,t,e){return _(k(n,t,635,D))}function kd(n,t,e){return _(k(n,t,635,D))}function vd(n,t,e){return _(k(n,t,635,D))}function Bd(n,t,e){return _(k(n,t,635,D))}function Pd(n,t,e){return _(k(n,t,1774,C))}function Id(n,t,e){return _(k(n,t,1774,C))}function jd(n,t,e){return _(k(n,t,1952,M))}}).call(this,e(260)(n))},422:function(n,t,e){"use strict";e.r(t);var r=e(423),u=e(254);e.d(t,"__wbg_set_wasm",(function(){return u.ui})),e.d(t,"run",(function(){return u.il})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.el})),e.d(t,"__wbindgen_cb_drop",(function(){return u.xk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Zk})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.dl})),e.d(t,"__wbindgen_string_new",(function(){return u.gl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Bg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Gi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Nd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Pg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Qg})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.nk})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.ih})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Oh})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.ke})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Fh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Ih})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Sg})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ok})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Gh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Nh})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.fh})),e.d(t,"__wbindgen_number_new",(function(){return u.cl})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Tg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Kg})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.ff})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.hf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.gf})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Fi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.Yj})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.Zc})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.ve})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Cf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.Wj})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.ld})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.kd})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Jd})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.ei})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.Xh})),e.d(t,"__wbindgen_string_get",(function(){return u.fl})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.he})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.df})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.Ue})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.ze})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Ch})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.ge})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.kg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Sd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.Vd})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.Wh})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.Uh})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.xd})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.vd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.zd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.bi})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.ci})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.gi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.oi})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.ni})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Qd})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.vf})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.ph})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Bf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.xi})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Qb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Ub})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Vb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Wb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.ac})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.dc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.fc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.gc})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.kc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.lc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.pc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.ad})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.bh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.jh})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.tc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.bd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.mj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.Rg})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.rf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.wf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.ig})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Eb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.re})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.uh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.jg})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Id})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Od})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.Zh})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.ji})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.ki})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.ri})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.Yh})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.yd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.wd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Ad})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.ai})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.di})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.qi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.pi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.le})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.qf})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.o})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.q})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.gb})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.hb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Ib})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Jb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Ob})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Pb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Ud})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Td})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.Jh})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Md})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.Ve})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.Zf})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.ag})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.bg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.Yf})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Ff})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Gf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.Qf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.Tf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.Uf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.dg})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.cg})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.Vf})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.gg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Hf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.eg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.fg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.pg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.og})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.Sf})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Jf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.If})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Of})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Kf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Lf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Nf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.Pf})),e.d(t,"__wbindgen_is_object",(function(){return u.Yk})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Eh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Pd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.uf})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.lg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.uk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.vk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Kb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.Ri})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.oh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.nh})),e.d(t,"__wbindgen_is_function",(function(){return u.Xk})),e.d(t,"__wbindgen_boolean_get",(function(){return u.wk})),e.d(t,"__wbindgen_number_get",(function(){return u.bl})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.kf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.ib})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.jb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.kb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.sb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.zb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Db})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Hb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Nb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.ec})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.jc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.sc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Fc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Ic})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Lc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Pc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.od})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.sd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.ud})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Hd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Rd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.be})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ie})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.mf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.qh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.rh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.th})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.yh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Lh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Mh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Si})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ui})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Xi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Yi})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.cj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.dj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Zi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.bj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.ej})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.hj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.gj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.ij})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.fj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.jj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.rj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.sj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.uj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.wj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.xj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Aj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Bj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Ej})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Hj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Ij})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Jj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Lj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Mj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Nj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Pj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Qj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Vj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.dk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.ek})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.qb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.ob})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.wb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.bc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.hc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.nc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.oc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Gc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Jc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Mc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Vc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Yc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.pd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Xd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ae})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.de})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.yf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Wg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.ah})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Ah})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Ph})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Bi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Ji})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Mi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Ki})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Oi})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Vi})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.oj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.qj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Cj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Zj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.fk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.kk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.lf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.md})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.tg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.dd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Df})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Hh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Dh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.pb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.mi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.li})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.lk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.fe})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Xb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.mh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.lh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Sh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.hi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.sg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Qi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Wd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Ab})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.sh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.aj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.tj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.vj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.yj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.zj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Fj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Kj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Oj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Tj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.rb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.lb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.nb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.vb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.xb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Lb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Sb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Yb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.ic})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.mc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.qc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.wc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.zc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Bc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Dc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Tc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Xc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.gd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.ed})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.qd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Fd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Dd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.Zd})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ee})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.xf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Vg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Zg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.zh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Qh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Ai})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Ii})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ni})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Li})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Pi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Wi})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.nj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.pj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Dj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.ak})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.gk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.jk})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.nd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.td})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.ck})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.xh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.ii})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.xg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.jd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Lg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Fb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.rd})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.ik})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.hk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.ch})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.dh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.wg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ce})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.nf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Gb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.cd})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.yc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Ld})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Kd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Af})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.mk})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ei})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.ug})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.tb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.eh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Hi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.qk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.if})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.sk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.yi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.wi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.pk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Di})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.mg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.zf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Bh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.pf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.ub})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.rk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.zi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.vi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Ug})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.vh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.yg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.id})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Mg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Ng})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Xj})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Rc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Sc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Qc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.rc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Oc})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.hh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.hg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Ef})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.wh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.uc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ci})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.ng})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.qg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.rg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Xg})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.gh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Yg})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.je})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.tf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.vg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Cg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Ag})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Rh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.tk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Og})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.kh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.jf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.of})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.bk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Kh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.kj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.lj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Eg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Fg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Jg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.zg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ti})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.sf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Dg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Gg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.si})),e.d(t,"__wbindgen_debug_string",(function(){return u.Wk})),e.d(t,"__wbindgen_throw",(function(){return u.hl})),e.d(t,"__wbindgen_memory",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper564",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper565",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper566",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper567",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper568",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper569",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper570",(function(){return u.Ok})),e.d(t,"__wbindgen_closure_wrapper939",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper940",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper941",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper942",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper943",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper944",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper945",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper1844",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper1845",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper1846",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper1847",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper1848",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper1849",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper1850",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper3923",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper3925",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper4658",(function(){return u.Hk})),Object(u.ui)(r),r.__wbindgen_start()},423:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(254);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/35.281b5db1.js b/assets/js/35.281b5db1.js deleted file mode 100644 index 78df67124..000000000 --- a/assets/js/35.281b5db1.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{254:function(n,t,e){"use strict";(function(n){e.d(t,"ji",(function(){return u})),e.d(t,"Xk",(function(){return F})),e.d(t,"Tk",(function(){return W})),e.d(t,"mk",(function(){return q})),e.d(t,"Ok",(function(){return z})),e.d(t,"Vk",(function(){return U})),e.d(t,"Sk",(function(){return K})),e.d(t,"sg",(function(){return Q})),e.d(t,"vi",(function(){return X})),e.d(t,"Od",(function(){return N})),e.d(t,"Gg",(function(){return Y})),e.d(t,"Hg",(function(){return H})),e.d(t,"le",(function(){return J})),e.d(t,"uh",(function(){return Z})),e.d(t,"Dh",(function(){return $})),e.d(t,"xh",(function(){return nn})),e.d(t,"Ig",(function(){return tn})),e.d(t,"Yg",(function(){return en})),e.d(t,"bk",(function(){return rn})),e.d(t,"b",(function(){return un})),e.d(t,"Vg",(function(){return fn})),e.d(t,"vh",(function(){return cn})),e.d(t,"Ch",(function(){return on})),e.d(t,"Rk",(function(){return _n})),e.d(t,"ck",(function(){return dn})),e.d(t,"Jg",(function(){return an})),e.d(t,"Bg",(function(){return bn})),e.d(t,"ef",(function(){return gn})),e.d(t,"df",(function(){return wn})),e.d(t,"Ue",(function(){return sn})),e.d(t,"Rd",(function(){return ln})),e.d(t,"sf",(function(){return mn})),e.d(t,"th",(function(){return pn})),e.d(t,"Fb",(function(){return hn})),e.d(t,"re",(function(){return xn})),e.d(t,"gf",(function(){return yn})),e.d(t,"cg",(function(){return Sn})),e.d(t,"ff",(function(){return kn})),e.d(t,"ve",(function(){return vn})),e.d(t,"Tf",(function(){return Bn})),e.d(t,"Uf",(function(){return Pn})),e.d(t,"Vf",(function(){return jn})),e.d(t,"Sf",(function(){return In})),e.d(t,"Bf",(function(){return An})),e.d(t,"Cf",(function(){return Dn})),e.d(t,"Lf",(function(){return Tn})),e.d(t,"Kf",(function(){return Cn})),e.d(t,"Nf",(function(){return Mn})),e.d(t,"Of",(function(){return Fn})),e.d(t,"Qf",(function(){return En})),e.d(t,"Rf",(function(){return Rn})),e.d(t,"Xf",(function(){return Ln})),e.d(t,"Wf",(function(){return On})),e.d(t,"Pf",(function(){return Gn})),e.d(t,"gg",(function(){return Vn})),e.d(t,"fg",(function(){return Wn})),e.d(t,"ag",(function(){return qn})),e.d(t,"Df",(function(){return zn})),e.d(t,"Yf",(function(){return Un})),e.d(t,"Zf",(function(){return Kn})),e.d(t,"Mf",(function(){return Qn})),e.d(t,"If",(function(){return Xn})),e.d(t,"Ef",(function(){return Nn})),e.d(t,"Ff",(function(){return Yn})),e.d(t,"Gf",(function(){return Hn})),e.d(t,"Hf",(function(){return Jn})),e.d(t,"Jf",(function(){return Zn})),e.d(t,"Md",(function(){return $n})),e.d(t,"Uk",(function(){return nt})),e.d(t,"Ve",(function(){return tt})),e.d(t,"fh",(function(){return et})),e.d(t,"Nk",(function(){return rt})),e.d(t,"a",(function(){return ut})),e.d(t,"c",(function(){return ft})),e.d(t,"rh",(function(){return ct})),e.d(t,"ze",(function(){return it})),e.d(t,"Qd",(function(){return ot})),e.d(t,"tf",(function(){return _t})),e.d(t,"mc",(function(){return dt})),e.d(t,"Rb",(function(){return at})),e.d(t,"Sb",(function(){return bt})),e.d(t,"bc",(function(){return gt})),e.d(t,"hc",(function(){return wt})),e.d(t,"Xb",(function(){return st})),e.d(t,"Vb",(function(){return lt})),e.d(t,"qc",(function(){return mt})),e.d(t,"lc",(function(){return pt})),e.d(t,"ec",(function(){return ht})),e.d(t,"Wb",(function(){return xt})),e.d(t,"gc",(function(){return yt})),e.d(t,"ad",(function(){return St})),e.d(t,"mi",(function(){return kt})),e.d(t,"Zg",(function(){return vt})),e.d(t,"Rg",(function(){return Bt})),e.d(t,"yf",(function(){return Pt})),e.d(t,"Kj",(function(){return jt})),e.d(t,"uc",(function(){return It})),e.d(t,"cd",(function(){return At})),e.d(t,"bd",(function(){return Dt})),e.d(t,"he",(function(){return Tt})),e.d(t,"ie",(function(){return Ct})),e.d(t,"Jb",(function(){return Mt})),e.d(t,"Kb",(function(){return Ft})),e.d(t,"Pb",(function(){return Et})),e.d(t,"Qb",(function(){return Rt})),e.d(t,"o",(function(){return Lt})),e.d(t,"Kd",(function(){return Ot})),e.d(t,"q",(function(){return Gt})),e.d(t,"Jd",(function(){return Vt})),e.d(t,"pf",(function(){return Wt})),e.d(t,"Wd",(function(){return qt})),e.d(t,"Td",(function(){return zt})),e.d(t,"hb",(function(){return Ut})),e.d(t,"gb",(function(){return Kt})),e.d(t,"kk",(function(){return Qt})),e.d(t,"yh",(function(){return Xt})),e.d(t,"Vd",(function(){return Nt})),e.d(t,"Ud",(function(){return Yt})),e.d(t,"ik",(function(){return Ht})),e.d(t,"Mj",(function(){return Jt})),e.d(t,"ui",(function(){return Zt})),e.d(t,"jk",(function(){return $t})),e.d(t,"Lb",(function(){return ne})),e.d(t,"Th",(function(){return te})),e.d(t,"Nh",(function(){return ee})),e.d(t,"Ih",(function(){return re})),e.d(t,"md",(function(){return ue})),e.d(t,"ld",(function(){return fe})),e.d(t,"Uh",(function(){return ce})),e.d(t,"Jh",(function(){return ie})),e.d(t,"Lh",(function(){return oe})),e.d(t,"Qh",(function(){return _e})),e.d(t,"Sh",(function(){return de})),e.d(t,"ei",(function(){return ae})),e.d(t,"ci",(function(){return be})),e.d(t,"Cd",(function(){return ge})),e.d(t,"zd",(function(){return we})),e.d(t,"Bd",(function(){return se})),e.d(t,"xd",(function(){return le})),e.d(t,"Vh",(function(){return me})),e.d(t,"Kh",(function(){return pe})),e.d(t,"Mh",(function(){return he})),e.d(t,"Ph",(function(){return xe})),e.d(t,"Rh",(function(){return ye})),e.d(t,"fi",(function(){return Se})),e.d(t,"di",(function(){return ke})),e.d(t,"Dd",(function(){return ve})),e.d(t,"yd",(function(){return Be})),e.d(t,"Ad",(function(){return Pe})),e.d(t,"wd",(function(){return je})),e.d(t,"Oh",(function(){return Ie})),e.d(t,"Yh",(function(){return Ae})),e.d(t,"gi",(function(){return De})),e.d(t,"Zh",(function(){return Te})),e.d(t,"Pd",(function(){return Ce})),e.d(t,"Gi",(function(){return Me})),e.d(t,"dh",(function(){return Fe})),e.d(t,"eh",(function(){return Ee})),e.d(t,"Mk",(function(){return Re})),e.d(t,"lk",(function(){return Le})),e.d(t,"Qk",(function(){return Oe})),e.d(t,"jf",(function(){return Ge})),e.d(t,"p",(function(){return Ve})),e.d(t,"t",(function(){return We})),e.d(t,"A",(function(){return qe})),e.d(t,"E",(function(){return ze})),e.d(t,"P",(function(){return Ue})),e.d(t,"S",(function(){return Ke})),e.d(t,"V",(function(){return Qe})),e.d(t,"W",(function(){return Xe})),e.d(t,"ib",(function(){return Ne})),e.d(t,"jb",(function(){return Ye})),e.d(t,"tb",(function(){return He})),e.d(t,"Cb",(function(){return Je})),e.d(t,"Ab",(function(){return Ze})),e.d(t,"Db",(function(){return $e})),e.d(t,"Eb",(function(){return nr})),e.d(t,"Ib",(function(){return tr})),e.d(t,"Ob",(function(){return er})),e.d(t,"fc",(function(){return rr})),e.d(t,"kc",(function(){return ur})),e.d(t,"tc",(function(){return fr})),e.d(t,"Gc",(function(){return cr})),e.d(t,"Jc",(function(){return ir})),e.d(t,"Mc",(function(){return or})),e.d(t,"Qc",(function(){return _r})),e.d(t,"pd",(function(){return dr})),e.d(t,"td",(function(){return ar})),e.d(t,"vd",(function(){return br})),e.d(t,"Id",(function(){return gr})),e.d(t,"Sd",(function(){return wr})),e.d(t,"ce",(function(){return sr})),e.d(t,"je",(function(){return lr})),e.d(t,"ue",(function(){return mr})),e.d(t,"Fe",(function(){return pr})),e.d(t,"Me",(function(){return hr})),e.d(t,"Ne",(function(){return xr})),e.d(t,"lf",(function(){return yr})),e.d(t,"gh",(function(){return Sr})),e.d(t,"hh",(function(){return kr})),e.d(t,"jh",(function(){return vr})),e.d(t,"nh",(function(){return Br})),e.d(t,"Ah",(function(){return Pr})),e.d(t,"Bh",(function(){return jr})),e.d(t,"Hi",(function(){return Ir})),e.d(t,"Ji",(function(){return Ar})),e.d(t,"Mi",(function(){return Dr})),e.d(t,"Ni",(function(){return Tr})),e.d(t,"Ri",(function(){return Cr})),e.d(t,"Si",(function(){return Mr})),e.d(t,"Oi",(function(){return Fr})),e.d(t,"Qi",(function(){return Er})),e.d(t,"Ti",(function(){return Rr})),e.d(t,"Wi",(function(){return Lr})),e.d(t,"Vi",(function(){return Or})),e.d(t,"Xi",(function(){return Gr})),e.d(t,"Ui",(function(){return Vr})),e.d(t,"Yi",(function(){return Wr})),e.d(t,"fj",(function(){return qr})),e.d(t,"gj",(function(){return zr})),e.d(t,"ij",(function(){return Ur})),e.d(t,"kj",(function(){return Kr})),e.d(t,"lj",(function(){return Qr})),e.d(t,"oj",(function(){return Xr})),e.d(t,"pj",(function(){return Nr})),e.d(t,"sj",(function(){return Yr})),e.d(t,"vj",(function(){return Hr})),e.d(t,"wj",(function(){return Jr})),e.d(t,"xj",(function(){return Zr})),e.d(t,"zj",(function(){return $r})),e.d(t,"Aj",(function(){return nu})),e.d(t,"Bj",(function(){return tu})),e.d(t,"Dj",(function(){return eu})),e.d(t,"Ej",(function(){return ru})),e.d(t,"Fj",(function(){return uu})),e.d(t,"Gj",(function(){return fu})),e.d(t,"Ij",(function(){return cu})),e.d(t,"Jj",(function(){return iu})),e.d(t,"Rj",(function(){return ou})),e.d(t,"Sj",(function(){return _u})),e.d(t,"g",(function(){return du})),e.d(t,"m",(function(){return au})),e.d(t,"s",(function(){return bu})),e.d(t,"v",(function(){return gu})),e.d(t,"w",(function(){return wu})),e.d(t,"y",(function(){return su})),e.d(t,"B",(function(){return lu})),e.d(t,"F",(function(){return mu})),e.d(t,"J",(function(){return pu})),e.d(t,"H",(function(){return hu})),e.d(t,"N",(function(){return xu})),e.d(t,"L",(function(){return yu})),e.d(t,"rb",(function(){return Su})),e.d(t,"lb",(function(){return ku})),e.d(t,"nb",(function(){return vu})),e.d(t,"pb",(function(){return Bu})),e.d(t,"xb",(function(){return Pu})),e.d(t,"zb",(function(){return ju})),e.d(t,"Nb",(function(){return Iu})),e.d(t,"Ub",(function(){return Au})),e.d(t,"ac",(function(){return Du})),e.d(t,"cc",(function(){return Tu})),e.d(t,"ic",(function(){return Cu})),e.d(t,"oc",(function(){return Mu})),e.d(t,"pc",(function(){return Fu})),e.d(t,"yc",(function(){return Eu})),e.d(t,"Bc",(function(){return Ru})),e.d(t,"Dc",(function(){return Lu})),e.d(t,"Fc",(function(){return Ou})),e.d(t,"Hc",(function(){return Gu})),e.d(t,"Kc",(function(){return Vu})),e.d(t,"Nc",(function(){return Wu})),e.d(t,"Vc",(function(){return qu})),e.d(t,"Wc",(function(){return zu})),e.d(t,"Zc",(function(){return Uu})),e.d(t,"id",(function(){return Ku})),e.d(t,"gd",(function(){return Qu})),e.d(t,"qd",(function(){return Xu})),e.d(t,"Hd",(function(){return Nu})),e.d(t,"Fd",(function(){return Yu})),e.d(t,"Yd",(function(){return Hu})),e.d(t,"be",(function(){return Ju})),e.d(t,"ee",(function(){return Zu})),e.d(t,"te",(function(){return $u})),e.d(t,"ye",(function(){return nf})),e.d(t,"Ae",(function(){return tf})),e.d(t,"De",(function(){return ef})),e.d(t,"He",(function(){return rf})),e.d(t,"Ie",(function(){return uf})),e.d(t,"Ke",(function(){return ff})),e.d(t,"Oe",(function(){return cf})),e.d(t,"vf",(function(){return of})),e.d(t,"Mg",(function(){return _f})),e.d(t,"Qg",(function(){return df})),e.d(t,"ph",(function(){return af})),e.d(t,"Eh",(function(){return bf})),e.d(t,"qi",(function(){return gf})),e.d(t,"yi",(function(){return wf})),e.d(t,"Bi",(function(){return sf})),e.d(t,"zi",(function(){return lf})),e.d(t,"Di",(function(){return mf})),e.d(t,"Ki",(function(){return pf})),e.d(t,"cj",(function(){return hf})),e.d(t,"ej",(function(){return xf})),e.d(t,"qj",(function(){return yf})),e.d(t,"Nj",(function(){return Sf})),e.d(t,"Tj",(function(){return kf})),e.d(t,"Yj",(function(){return vf})),e.d(t,"kf",(function(){return Bf})),e.d(t,"nd",(function(){return Pf})),e.d(t,"kg",(function(){return jf})),e.d(t,"ed",(function(){return If})),e.d(t,"eb",(function(){return Af})),e.d(t,"me",(function(){return Df})),e.d(t,"zf",(function(){return Tf})),e.d(t,"wh",(function(){return Cf})),e.d(t,"db",(function(){return Mf})),e.d(t,"sh",(function(){return Ff})),e.d(t,"qb",(function(){return Ef})),e.d(t,"bi",(function(){return Rf})),e.d(t,"ai",(function(){return Lf})),e.d(t,"R",(function(){return Of})),e.d(t,"Zj",(function(){return Gf})),e.d(t,"e",(function(){return Vf})),e.d(t,"ge",(function(){return Wf})),e.d(t,"Yb",(function(){return qf})),e.d(t,"se",(function(){return zf})),e.d(t,"ch",(function(){return Uf})),e.d(t,"bh",(function(){return Kf})),e.d(t,"Hh",(function(){return Qf})),e.d(t,"Wh",(function(){return Xf})),e.d(t,"jg",(function(){return Nf})),e.d(t,"Fi",(function(){return Yf})),e.d(t,"Xd",(function(){return Hf})),e.d(t,"U",(function(){return Jf})),e.d(t,"T",(function(){return Zf})),e.d(t,"X",(function(){return $f})),e.d(t,"Bb",(function(){return nc})),e.d(t,"ih",(function(){return tc})),e.d(t,"Ii",(function(){return ec})),e.d(t,"Pi",(function(){return rc})),e.d(t,"hj",(function(){return uc})),e.d(t,"jj",(function(){return fc})),e.d(t,"mj",(function(){return cc})),e.d(t,"nj",(function(){return ic})),e.d(t,"tj",(function(){return oc})),e.d(t,"uj",(function(){return _c})),e.d(t,"yj",(function(){return dc})),e.d(t,"Cj",(function(){return ac})),e.d(t,"Hj",(function(){return bc})),e.d(t,"f",(function(){return gc})),e.d(t,"n",(function(){return wc})),e.d(t,"r",(function(){return sc})),e.d(t,"u",(function(){return lc})),e.d(t,"x",(function(){return mc})),e.d(t,"z",(function(){return pc})),e.d(t,"C",(function(){return hc})),e.d(t,"G",(function(){return xc})),e.d(t,"K",(function(){return yc})),e.d(t,"I",(function(){return Sc})),e.d(t,"O",(function(){return kc})),e.d(t,"M",(function(){return vc})),e.d(t,"sb",(function(){return Bc})),e.d(t,"kb",(function(){return Pc})),e.d(t,"mb",(function(){return jc})),e.d(t,"ob",(function(){return Ic})),e.d(t,"wb",(function(){return Ac})),e.d(t,"yb",(function(){return Dc})),e.d(t,"Mb",(function(){return Tc})),e.d(t,"Tb",(function(){return Cc})),e.d(t,"Zb",(function(){return Mc})),e.d(t,"dc",(function(){return Fc})),e.d(t,"jc",(function(){return Ec})),e.d(t,"nc",(function(){return Rc})),e.d(t,"rc",(function(){return Lc})),e.d(t,"xc",(function(){return Oc})),e.d(t,"Ac",(function(){return Gc})),e.d(t,"Cc",(function(){return Vc})),e.d(t,"Ec",(function(){return Wc})),e.d(t,"Ic",(function(){return qc})),e.d(t,"Lc",(function(){return zc})),e.d(t,"Oc",(function(){return Uc})),e.d(t,"Uc",(function(){return Kc})),e.d(t,"Xc",(function(){return Qc})),e.d(t,"Yc",(function(){return Xc})),e.d(t,"hd",(function(){return Nc})),e.d(t,"fd",(function(){return Yc})),e.d(t,"rd",(function(){return Hc})),e.d(t,"Gd",(function(){return Jc})),e.d(t,"Ed",(function(){return Zc})),e.d(t,"Zd",(function(){return $c})),e.d(t,"ae",(function(){return ni})),e.d(t,"fe",(function(){return ti})),e.d(t,"xe",(function(){return ei})),e.d(t,"Be",(function(){return ri})),e.d(t,"Ce",(function(){return ui})),e.d(t,"Ge",(function(){return fi})),e.d(t,"Je",(function(){return ci})),e.d(t,"Pe",(function(){return ii})),e.d(t,"uf",(function(){return oi})),e.d(t,"Lg",(function(){return _i})),e.d(t,"Pg",(function(){return di})),e.d(t,"oh",(function(){return ai})),e.d(t,"Fh",(function(){return bi})),e.d(t,"pi",(function(){return gi})),e.d(t,"xi",(function(){return wi})),e.d(t,"Ci",(function(){return si})),e.d(t,"Ai",(function(){return li})),e.d(t,"Ei",(function(){return mi})),e.d(t,"Li",(function(){return pi})),e.d(t,"bj",(function(){return hi})),e.d(t,"dj",(function(){return xi})),e.d(t,"rj",(function(){return yi})),e.d(t,"Oj",(function(){return Si})),e.d(t,"Uj",(function(){return ki})),e.d(t,"Xj",(function(){return vi})),e.d(t,"Ee",(function(){return Bi})),e.d(t,"mh",(function(){return Pi})),e.d(t,"Xh",(function(){return ji})),e.d(t,"ek",(function(){return Ii})),e.d(t,"Xe",(function(){return Ai})),e.d(t,"Wj",(function(){return Di})),e.d(t,"Vj",(function(){return Ti})),e.d(t,"dk",(function(){return Ci})),e.d(t,"Ze",(function(){return Mi})),e.d(t,"sd",(function(){return Fi})),e.d(t,"ti",(function(){return Ei})),e.d(t,"lg",(function(){return Ri})),e.d(t,"d",(function(){return Li})),e.d(t,"mf",(function(){return Oi})),e.d(t,"Ng",(function(){return Gi})),e.d(t,"Wg",(function(){return Vi})),e.d(t,"Og",(function(){return Wi})),e.d(t,"ke",(function(){return qi})),e.d(t,"Xg",(function(){return zi})),e.d(t,"bg",(function(){return Ui})),e.d(t,"Af",(function(){return Ki})),e.d(t,"i",(function(){return Qi})),e.d(t,"lh",(function(){return Xi})),e.d(t,"vc",(function(){return Ni})),e.d(t,"ri",(function(){return Yi})),e.d(t,"j",(function(){return Hi})),e.d(t,"eg",(function(){return Ji})),e.d(t,"ab",(function(){return Zi})),e.d(t,"bb",(function(){return $i})),e.d(t,"hg",(function(){return no})),e.d(t,"ig",(function(){return to})),e.d(t,"Sc",(function(){return eo})),e.d(t,"Tc",(function(){return ro})),e.d(t,"Rc",(function(){return uo})),e.d(t,"h",(function(){return fo})),e.d(t,"kh",(function(){return co})),e.d(t,"hf",(function(){return io})),e.d(t,"gk",(function(){return oo})),e.d(t,"ni",(function(){return _o})),e.d(t,"Ye",(function(){return ao})),e.d(t,"li",(function(){return bo})),e.d(t,"pe",(function(){return go})),e.d(t,"qe",(function(){return wo})),e.d(t,"fk",(function(){return so})),e.d(t,"oi",(function(){return lo})),e.d(t,"We",(function(){return mo})),e.d(t,"ki",(function(){return po})),e.d(t,"ne",(function(){return ho})),e.d(t,"oe",(function(){return xo})),e.d(t,"pg",(function(){return yo})),e.d(t,"jd",(function(){return So})),e.d(t,"Dg",(function(){return ko})),e.d(t,"Eg",(function(){return vo})),e.d(t,"Lj",(function(){return Bo})),e.d(t,"Le",(function(){return Po})),e.d(t,"de",(function(){return jo})),e.d(t,"Hb",(function(){return Io})),e.d(t,"dd",(function(){return Ao})),e.d(t,"zc",(function(){return Do})),e.d(t,"Nd",(function(){return To})),e.d(t,"Ld",(function(){return Co})),e.d(t,"bf",(function(){return Mo})),e.d(t,"xf",(function(){return Fo})),e.d(t,"ak",(function(){return Eo})),e.d(t,"Sg",(function(){return Ro})),e.d(t,"Tg",(function(){return Lo})),e.d(t,"ng",(function(){return Oo})),e.d(t,"ub",(function(){return Go})),e.d(t,"Ug",(function(){return Vo})),e.d(t,"wi",(function(){return Wo})),e.d(t,"cf",(function(){return qo})),e.d(t,"Q",(function(){return zo})),e.d(t,"k",(function(){return Uo})),e.d(t,"wc",(function(){return Ko})),e.d(t,"si",(function(){return Qo})),e.d(t,"dg",(function(){return Xo})),e.d(t,"wf",(function(){return No})),e.d(t,"qh",(function(){return Yo})),e.d(t,"of",(function(){return Ho})),e.d(t,"vb",(function(){return Jo})),e.d(t,"Kg",(function(){return Zo})),e.d(t,"od",(function(){return $o})),e.d(t,"ud",(function(){return n_})),e.d(t,"Qj",(function(){return t_})),e.d(t,"og",(function(){return e_})),e.d(t,"kd",(function(){return r_})),e.d(t,"Cg",(function(){return u_})),e.d(t,"l",(function(){return f_})),e.d(t,"Gb",(function(){return c_})),e.d(t,"Qe",(function(){return i_})),e.d(t,"D",(function(){return o_})),e.d(t,"sc",(function(){return __})),e.d(t,"Pc",(function(){return d_})),e.d(t,"Re",(function(){return a_})),e.d(t,"rf",(function(){return b_})),e.d(t,"mg",(function(){return g_})),e.d(t,"tg",(function(){return w_})),e.d(t,"cb",(function(){return s_})),e.d(t,"rg",(function(){return l_})),e.d(t,"Gh",(function(){return m_})),e.d(t,"hk",(function(){return p_})),e.d(t,"Se",(function(){return h_})),e.d(t,"Te",(function(){return x_})),e.d(t,"af",(function(){return y_})),e.d(t,"Fg",(function(){return S_})),e.d(t,"ah",(function(){return k_})),e.d(t,"if",(function(){return v_})),e.d(t,"we",(function(){return B_})),e.d(t,"nf",(function(){return P_})),e.d(t,"Pj",(function(){return j_})),e.d(t,"zh",(function(){return I_})),e.d(t,"fb",(function(){return A_})),e.d(t,"Zi",(function(){return D_})),e.d(t,"aj",(function(){return T_})),e.d(t,"Y",(function(){return C_})),e.d(t,"vg",(function(){return M_})),e.d(t,"yg",(function(){return F_})),e.d(t,"wg",(function(){return E_})),e.d(t,"Ag",(function(){return R_})),e.d(t,"qg",(function(){return L_})),e.d(t,"ii",(function(){return O_})),e.d(t,"qf",(function(){return G_})),e.d(t,"zg",(function(){return V_})),e.d(t,"ug",(function(){return W_})),e.d(t,"xg",(function(){return q_})),e.d(t,"Z",(function(){return z_})),e.d(t,"hi",(function(){return U_})),e.d(t,"Lk",(function(){return K_})),e.d(t,"Wk",(function(){return Q_})),e.d(t,"Pk",(function(){return X_})),e.d(t,"xk",(function(){return N_})),e.d(t,"yk",(function(){return Y_})),e.d(t,"zk",(function(){return H_})),e.d(t,"Ak",(function(){return J_})),e.d(t,"Bk",(function(){return Z_})),e.d(t,"Ck",(function(){return $_})),e.d(t,"Dk",(function(){return nd})),e.d(t,"Ek",(function(){return td})),e.d(t,"Fk",(function(){return ed})),e.d(t,"Gk",(function(){return rd})),e.d(t,"Hk",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"nk",(function(){return od})),e.d(t,"ok",(function(){return _d})),e.d(t,"pk",(function(){return dd})),e.d(t,"qk",(function(){return ad})),e.d(t,"rk",(function(){return bd})),e.d(t,"sk",(function(){return gd})),e.d(t,"tk",(function(){return wd})),e.d(t,"uk",(function(){return sd})),e.d(t,"vk",(function(){return ld})),e.d(t,"wk",(function(){return md}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});_.decode();let d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}function b(n,t){return n>>>=0,_.decode(a().subarray(n,n+t))}function g(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=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 a().subarray(r,r+e.length).set(e),w=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=l(n,t).written,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h81d07352c20d4041(n,t)}function B(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h101b4d34c81c7605(n,t,g(e))}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h6388009ce6914206(n,t,g(e),g(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0d7ff73f44ff5186(n,t,g(e))}function I(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdd44496afa682991(n,t,g(e),g(u))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__heb7a6d5f6f08c0a3(n,t)}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,g(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,g(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,g(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(g(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n,t){return g(b(n,t))}function K(n){return g(c(n))}function Q(){return g(new Error)}function X(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function N(n,t){let e,u;try{e=n,u=t,console.error(b(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){return c(n).offsetX}function H(n){return c(n).offsetY}function J(n){return g(c(n).getCoalescedEvents)}function Z(n){return g(c(n).requestFullscreen)}function $(n){return g(c(n).scheduler)}function nn(n){return g(c(n).requestIdleCallback)}function tn(n){return g(c(n).onpointerrawupdate)}function en(){return g(ResizeObserverEntry.prototype)}function rn(n){const t=c(n).webkitFullscreenElement;return p(t)?0:g(t)}function un(n){return g(c(n).Window)}function fn(n,t,e){return g(c(n).postTask(c(t),c(e)))}function cn(n){return g(c(n).requestFullscreen())}function on(n){return g(c(n).scheduler)}function _n(n){return g(n)}function dn(n){c(n).webkitRequestFullscreen()}function an(n){return g(c(n).performance)}function bn(n){return c(n).now()}function gn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function wn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function sn(n){return g(c(n).gpu)}function ln(n){return g(c(n).features)}function mn(n){return g(c(n).limits)}function pn(n,t){return g(c(n).requestDevice(c(t)))}function hn(n,t){c(n).configure(c(t))}function xn(n){return g(c(n).getCurrentTexture())}function yn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function Sn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function kn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function vn(n,t,e){return g(c(n).getMappedRange(t,e))}function Bn(n){return c(n).maxTextureDimension1D}function Pn(n){return c(n).maxTextureDimension2D}function jn(n){return c(n).maxTextureDimension3D}function In(n){return c(n).maxTextureArrayLayers}function An(n){return c(n).maxBindGroups}function Dn(n){return c(n).maxBindingsPerBindGroup}function Tn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Cn(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function Mn(n){return c(n).maxSampledTexturesPerShaderStage}function Fn(n){return c(n).maxSamplersPerShaderStage}function En(n){return c(n).maxStorageBuffersPerShaderStage}function Rn(n){return c(n).maxStorageTexturesPerShaderStage}function Ln(n){return c(n).maxUniformBuffersPerShaderStage}function On(n){return c(n).maxUniformBufferBindingSize}function Gn(n){return c(n).maxStorageBufferBindingSize}function Vn(n){return c(n).minUniformBufferOffsetAlignment}function Wn(n){return c(n).minStorageBufferOffsetAlignment}function qn(n){return c(n).maxVertexBuffers}function zn(n){return c(n).maxBufferSize}function Un(n){return c(n).maxVertexAttributes}function Kn(n){return c(n).maxVertexBufferArrayStride}function Qn(n){return c(n).maxInterStageShaderComponents}function Xn(n){return c(n).maxComputeWorkgroupStorageSize}function Nn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Yn(n){return c(n).maxComputeWorkgroupSizeX}function Hn(n){return c(n).maxComputeWorkgroupSizeY}function Jn(n){return c(n).maxComputeWorkgroupSizeZ}function Zn(n){return c(n).maxComputeWorkgroupsPerDimension}function $n(n){return g(c(n).error)}function nt(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function tt(n,t,e){return c(n).has(b(t,e))}function et(n){return g(c(n).queue)}function rt(n){const t=c(n);return"object"==typeof t&&null!==t}function ut(n){return g(c(n).Window)}function ft(n){return g(c(n).WorkerGlobalScope)}function ct(n,t){return g(c(n).requestAdapter(c(t)))}function it(n){return g(c(n).getPreferredCanvasFormat())}function ot(n){return g(c(n).features)}function _t(n){return g(c(n).limits)}function dt(n,t){return g(c(n).createShaderModule(c(t)))}function at(n,t){return g(c(n).createBindGroupLayout(c(t)))}function bt(n,t){return g(c(n).createBindGroup(c(t)))}function gt(n,t){return g(c(n).createPipelineLayout(c(t)))}function wt(n,t){return g(c(n).createRenderPipeline(c(t)))}function st(n,t){return g(c(n).createComputePipeline(c(t)))}function lt(n,t){return g(c(n).createBuffer(c(t)))}function mt(n,t){return g(c(n).createTexture(c(t)))}function pt(n,t){return g(c(n).createSampler(c(t)))}function ht(n,t){return g(c(n).createQuerySet(c(t)))}function xt(n,t){return g(c(n).createCommandEncoder(c(t)))}function yt(n,t){return g(c(n).createRenderBundleEncoder(c(t)))}function St(n){c(n).destroy()}function kt(n,t){c(n).onuncapturederror=c(t)}function vt(n,t){c(n).pushErrorScope(o(t))}function Bt(n){return g(c(n).popErrorScope())}function Pt(n,t,e,r){return g(c(n).mapAsync(t>>>0,e,r))}function jt(n){c(n).unmap()}function It(n,t){return g(c(n).createView(c(t)))}function At(n){c(n).destroy()}function Dt(n){c(n).destroy()}function Tt(n,t){return g(c(n).getBindGroupLayout(t>>>0))}function Ct(n,t){return g(c(n).getBindGroupLayout(t>>>0))}function Mt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Ft(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Et(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Lt(n,t){return g(c(n).beginComputePass(c(t)))}function Ot(n){c(n).end()}function Gt(n,t){return g(c(n).beginRenderPass(c(t)))}function Vt(n){c(n).end()}function Wt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function qt(n,t){return g(c(n).finish(c(t)))}function zt(n){return g(c(n).finish())}function Ut(n,t,e){c(n).clearBuffer(c(t),e)}function Kt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Qt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Xt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Nt(n){return g(c(n).finish())}function Yt(n,t){return g(c(n).finish(c(t)))}function Ht(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Jt(n){return c(n).usage}function Zt(n){return c(n).size}function $t(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function ne(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function te(n,t){c(n).setPipeline(c(t))}function ee(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function re(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ue(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function fe(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function ce(n,t){c(n).setPipeline(c(t))}function ie(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function oe(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function _e(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function de(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ae(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function be(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function ge(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function we(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function se(n,t,e){c(n).drawIndirect(c(t),e)}function le(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function me(n,t){c(n).setPipeline(c(t))}function pe(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function he(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function xe(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function ye(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Se(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ke(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function ve(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Be(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Pe(n,t,e){c(n).drawIndirect(c(t),e)}function je(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ie(n,t){c(n).setBlendConstant(c(t))}function Ae(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function De(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Te(n,t){c(n).setStencilReference(t>>>0)}function Ce(n,t){c(n).executeBundles(c(t))}function Me(n,t){c(n).submit(c(t))}function Fe(n){queueMicrotask(c(n))}function Ee(n){return g(c(n).queueMicrotask)}function Re(n){return"function"==typeof c(n)}function Le(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Oe(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Ge(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Ve(n,t,e){c(n).beginQuery(t>>>0,c(e))}function We(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function qe(n,t,e){c(n).bindSampler(t>>>0,c(e))}function ze(n,t){c(n).bindVertexArray(c(t))}function Ue(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function Ke(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Qe(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Xe(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Ne(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function Ye(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function He(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Je(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function Ze(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function $e(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function nr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function tr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function er(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function rr(n){const t=c(n).createQuery();return p(t)?0:g(t)}function ur(n){const t=c(n).createSampler();return p(t)?0:g(t)}function fr(n){const t=c(n).createVertexArray();return p(t)?0:g(t)}function cr(n,t){c(n).deleteQuery(c(t))}function ir(n,t){c(n).deleteSampler(c(t))}function or(n,t){c(n).deleteSync(c(t))}function _r(n,t){c(n).deleteVertexArray(c(t))}function dr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function ar(n,t){c(n).drawBuffers(c(t))}function br(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function gr(n,t){c(n).endQuery(t>>>0)}function wr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:g(r)}function sr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function lr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function mr(){return O((function(n,t,e){return g(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function pr(n,t,e){return g(c(n).getQueryParameter(c(t),e>>>0))}function hr(n,t,e){return g(c(n).getSyncParameter(c(t),e>>>0))}function xr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),b(e,r))}function yr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Sr(n,t){c(n).readBuffer(t>>>0)}function kr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function vr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Br(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Pr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function jr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Ir(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Ar(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Dr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Tr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Cr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Wr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function qr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function zr(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function Ur(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function Kr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Qr(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Xr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Nr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Yr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Hr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Jr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function Zr(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function $r(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function nu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function cu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function iu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function ou(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function _u(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function du(n,t){c(n).activeTexture(t>>>0)}function au(n,t,e){c(n).attachShader(c(t),c(e))}function bu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,b(r,u))}function gu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function wu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function su(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function lu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function mu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function pu(n,t){c(n).blendEquation(t>>>0)}function hu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function xu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function yu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Su(n,t){c(n).clear(t>>>0)}function ku(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function vu(n,t){c(n).clearDepth(t)}function Bu(n,t){c(n).clearStencil(t)}function Pu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ju(n,t){c(n).compileShader(c(t))}function Iu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Au(n){const t=c(n).createBuffer();return p(t)?0:g(t)}function Du(n){const t=c(n).createFramebuffer();return p(t)?0:g(t)}function Tu(n){const t=c(n).createProgram();return p(t)?0:g(t)}function Cu(n){const t=c(n).createRenderbuffer();return p(t)?0:g(t)}function Mu(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:g(e)}function Fu(n){const t=c(n).createTexture();return p(t)?0:g(t)}function Eu(n,t){c(n).cullFace(t>>>0)}function Ru(n,t){c(n).deleteBuffer(c(t))}function Lu(n,t){c(n).deleteFramebuffer(c(t))}function Ou(n,t){c(n).deleteProgram(c(t))}function Gu(n,t){c(n).deleteRenderbuffer(c(t))}function Vu(n,t){c(n).deleteShader(c(t))}function Wu(n,t){c(n).deleteTexture(c(t))}function qu(n,t){c(n).depthFunc(t>>>0)}function zu(n,t){c(n).depthMask(0!==t)}function Uu(n,t,e){c(n).depthRange(t,e)}function Ku(n,t){c(n).disable(t>>>0)}function Qu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Xu(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Nu(n,t){c(n).enable(t>>>0)}function Yu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Hu(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Ju(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Zu(n,t){c(n).frontFace(t>>>0)}function $u(){return O((function(n,t,e){const r=c(n).getExtension(b(t,e));return p(r)?0:g(r)}),arguments)}function nf(){return O((function(n,t){return g(c(n).getParameter(t>>>0))}),arguments)}function tf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ef(n,t,e){return g(c(n).getProgramParameter(c(t),e>>>0))}function rf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function uf(n,t,e){return g(c(n).getShaderParameter(c(t),e>>>0))}function ff(n){const t=c(n).getSupportedExtensions();return p(t)?0:g(t)}function cf(n,t,e,r){const u=c(n).getUniformLocation(c(t),b(e,r));return p(u)?0:g(u)}function of(n,t){c(n).linkProgram(c(t))}function _f(n,t,e){c(n).pixelStorei(t>>>0,e)}function df(n,t,e){c(n).polygonOffset(t,e)}function af(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function bf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function gf(n,t,e,r){c(n).shaderSource(c(t),b(e,r))}function wf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function sf(n,t){c(n).stencilMask(t>>>0)}function lf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function mf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function pf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function hf(n,t,e){c(n).uniform1f(c(t),e)}function xf(n,t,e){c(n).uniform1i(c(t),e)}function yf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Sf(n,t){c(n).useProgram(c(t))}function kf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function vf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Bf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Pf(n){const t=c(n).document;return p(t)?0:g(t)}function jf(n){return g(c(n).navigator)}function If(n){return c(n).devicePixelRatio}function Af(n,t){c(n).cancelIdleCallback(t>>>0)}function Df(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:g(e)}),arguments)}function Tf(){return O((function(n,t,e){const r=c(n).matchMedia(b(t,e));return p(r)?0:g(r)}),arguments)}function Cf(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Mf(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ff(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Ef(n,t){c(n).clearTimeout(t)}function Rf(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Lf(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Of(n){const t=c(n).body;return p(t)?0:g(t)}function Gf(n){return g(c(n).visibilityState)}function Vf(n){const t=c(n).activeElement;return p(t)?0:g(t)}function Wf(n){const t=c(n).fullscreenElement;return p(t)?0:g(t)}function qf(){return O((function(n,t,e){return g(c(n).createElement(b(t,e)))}),arguments)}function zf(n,t,e){const r=c(n).getElementById(b(t,e));return p(r)?0:g(r)}function Uf(){return O((function(n,t,e){const r=c(n).querySelector(b(t,e));return p(r)?0:g(r)}),arguments)}function Kf(){return O((function(n,t,e){return g(c(n).querySelectorAll(b(t,e)))}),arguments)}function Qf(){return O((function(n,t,e,r,u){c(n).setAttribute(b(t,e),b(r,u))}),arguments)}function Xf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Nf(n){return g(c(n).navigator)}function Yf(n){return g(c(n).style)}function Hf(){return O((function(n){c(n).focus()}),arguments)}function Jf(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Zf(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function $f(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function nc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function tc(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function ec(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function rc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function uc(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function fc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function cc(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function ic(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function oc(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function _c(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function dc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function ac(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function bc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function gc(n,t){c(n).activeTexture(t>>>0)}function wc(n,t,e){c(n).attachShader(c(t),c(e))}function sc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,b(r,u))}function lc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function mc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function pc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function hc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function xc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function yc(n,t){c(n).blendEquation(t>>>0)}function Sc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function kc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function vc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Bc(n,t){c(n).clear(t>>>0)}function Pc(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function jc(n,t){c(n).clearDepth(t)}function Ic(n,t){c(n).clearStencil(t)}function Ac(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Dc(n,t){c(n).compileShader(c(t))}function Tc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Cc(n){const t=c(n).createBuffer();return p(t)?0:g(t)}function Mc(n){const t=c(n).createFramebuffer();return p(t)?0:g(t)}function Fc(n){const t=c(n).createProgram();return p(t)?0:g(t)}function Ec(n){const t=c(n).createRenderbuffer();return p(t)?0:g(t)}function Rc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:g(e)}function Lc(n){const t=c(n).createTexture();return p(t)?0:g(t)}function Oc(n,t){c(n).cullFace(t>>>0)}function Gc(n,t){c(n).deleteBuffer(c(t))}function Vc(n,t){c(n).deleteFramebuffer(c(t))}function Wc(n,t){c(n).deleteProgram(c(t))}function qc(n,t){c(n).deleteRenderbuffer(c(t))}function zc(n,t){c(n).deleteShader(c(t))}function Uc(n,t){c(n).deleteTexture(c(t))}function Kc(n,t){c(n).depthFunc(t>>>0)}function Qc(n,t){c(n).depthMask(0!==t)}function Xc(n,t,e){c(n).depthRange(t,e)}function Nc(n,t){c(n).disable(t>>>0)}function Yc(n,t){c(n).disableVertexAttribArray(t>>>0)}function Hc(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Jc(n,t){c(n).enable(t>>>0)}function Zc(n,t){c(n).enableVertexAttribArray(t>>>0)}function $c(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ni(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function ti(n,t){c(n).frontFace(t>>>0)}function ei(){return O((function(n,t){return g(c(n).getParameter(t>>>0))}),arguments)}function ri(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ui(n,t,e){return g(c(n).getProgramParameter(c(t),e>>>0))}function fi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ci(n,t,e){return g(c(n).getShaderParameter(c(t),e>>>0))}function ii(n,t,e,r){const u=c(n).getUniformLocation(c(t),b(e,r));return p(u)?0:g(u)}function oi(n,t){c(n).linkProgram(c(t))}function _i(n,t,e){c(n).pixelStorei(t>>>0,e)}function di(n,t,e){c(n).polygonOffset(t,e)}function ai(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function bi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function gi(n,t,e,r){c(n).shaderSource(c(t),b(e,r))}function wi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function si(n,t){c(n).stencilMask(t>>>0)}function li(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function mi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function pi(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function hi(n,t,e){c(n).uniform1f(c(t),e)}function xi(n,t,e){c(n).uniform1i(c(t),e)}function yi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Si(n,t){c(n).useProgram(c(t))}function ki(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function vi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Bi(){return O((function(n,t,e,u){const f=m(c(t).getPropertyValue(b(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Pi(){return O((function(n,t,e,u){const f=m(c(t).removeProperty(b(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function ji(){return O((function(n,t,e,r,u){c(n).setProperty(b(t,e),b(r,u))}),arguments)}function Ii(n){return c(n).width}function Ai(n){return c(n).height}function Di(n){return c(n).videoWidth}function Ti(n){return c(n).videoHeight}function Ci(n){return c(n).width}function Mi(n){return c(n).height}function Fi(n,t){c(n).drawBuffersWEBGL(c(t))}function Ei(n){return g(c(n).signal)}function Ri(){return O((function(){return g(new AbortController)}),arguments)}function Li(n){c(n).abort()}function Oi(n){return c(n).isIntersecting}function Gi(n){return c(n).pointerId}function Vi(n){return c(n).pressure}function Wi(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function qi(n){return g(c(n).getCoalescedEvents())}function zi(n){c(n).preventDefault()}function Ui(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ki(n){return c(n).matches}function Qi(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Xi(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Ni(n){return c(n).ctrlKey}function Yi(n){return c(n).shiftKey}function Hi(n){return c(n).altKey}function Ji(n){return c(n).metaKey}function Zi(n){return c(n).button}function $i(n){return c(n).buttons}function no(n){return c(n).movementX}function to(n){return c(n).movementY}function eo(n){return c(n).deltaX}function ro(n){return c(n).deltaY}function uo(n){return c(n).deltaMode}function fo(){return O((function(n,t,e,r){c(n).addEventListener(b(t,e),c(r))}),arguments)}function co(){return O((function(n,t,e,r){c(n).removeEventListener(b(t,e),c(r))}),arguments)}function io(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function oo(n){return c(n).width}function _o(n,t){c(n).width=t>>>0}function ao(n){return c(n).height}function bo(n,t){c(n).height=t>>>0}function go(){return O((function(n,t,e){const r=c(n).getContext(b(t,e));return p(r)?0:g(r)}),arguments)}function wo(){return O((function(n,t,e,r){const u=c(n).getContext(b(t,e),c(r));return p(u)?0:g(u)}),arguments)}function so(n){return c(n).width}function lo(n,t){c(n).width=t>>>0}function mo(n){return c(n).height}function po(n,t){c(n).height=t>>>0}function ho(){return O((function(n,t,e){const r=c(n).getContext(b(t,e));return p(r)?0:g(r)}),arguments)}function xo(){return O((function(n,t,e,r){const u=c(n).getContext(b(t,e),c(r));return p(u)?0:g(u)}),arguments)}function yo(){return O((function(n){return g(new ResizeObserver(c(n)))}),arguments)}function So(n){c(n).disconnect()}function ko(n,t){c(n).observe(c(t))}function vo(n,t,e){c(n).observe(c(t),c(e))}function Bo(n,t){c(n).unobserve(c(t))}function Po(n){const t=c(n).getSupportedProfiles();return p(t)?0:g(t)}function jo(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Io(n){return g(c(n).contentRect)}function Ao(n){return g(c(n).devicePixelContentBoxSize)}function Do(n){console.debug(c(n))}function To(n){console.error(c(n))}function Co(n,t){console.error(c(n),c(t))}function Mo(n){console.info(c(n))}function Fo(n){console.log(c(n))}function Eo(n){console.warn(c(n))}function Ro(n){return g(c(n).port1)}function Lo(n){return g(c(n).port2)}function Oo(){return O((function(){return g(new MessageChannel)}),arguments)}function Go(n){c(n).close()}function Vo(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Wo(n){c(n).start()}function qo(n){return c(n).inlineSize}function zo(n){return c(n).blockSize}function Uo(n){return c(n).altKey}function Ko(n){return c(n).ctrlKey}function Qo(n){return c(n).shiftKey}function Xo(n){return c(n).metaKey}function No(n){return c(n).location}function Yo(n){return c(n).repeat}function Ho(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Jo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Zo(n){return c(n).persisted}function $o(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function n_(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function t_(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function e_(){return O((function(n){return g(new IntersectionObserver(c(n)))}),arguments)}function r_(n){c(n).disconnect()}function u_(n,t){c(n).observe(c(t))}function f_(){return O((function(n,t){return g(c(n).appendChild(c(t)))}),arguments)}function c_(n,t){return c(n).contains(c(t))}function i_(n,t){const e=c(n)[t>>>0];return p(e)?0:g(e)}function o_(n,t){c(n).bindVertexArrayOES(c(t))}function __(n){const t=c(n).createVertexArrayOES();return p(t)?0:g(t)}function d_(n,t){c(n).deleteVertexArrayOES(c(t))}function a_(n,t){return g(c(n)[t>>>0])}function b_(n){return c(n).length}function g_(){return g(new Array)}function w_(n,t){return g(new Function(b(n,t)))}function s_(){return O((function(n,t){return g(c(n).call(c(t)))}),arguments)}function l_(){return g(new Object)}function m_(){return O((function(){return g(self.self)}),arguments)}function p_(){return O((function(){return g(window.window)}),arguments)}function h_(){return O((function(){return g(globalThis.globalThis)}),arguments)}function x_(){return O((function(){return g(global.global)}),arguments)}function y_(n,t,e){return c(n).includes(c(t),e)}function S_(n){return g(Array.of(c(n)))}function k_(n,t){return c(n).push(c(t))}function v_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function B_(n,t){return g(Object.getOwnPropertyDescriptor(c(n),c(t)))}function P_(n,t){return Object.is(c(n),c(t))}function j_(n){return g(c(n).valueOf())}function I_(n){return g(Promise.resolve(c(n)))}function A_(n,t){return g(c(n).catch(c(t)))}function D_(n,t){return g(c(n).then(c(t)))}function T_(n,t,e){return g(c(n).then(c(t),c(e)))}function C_(n){return g(c(n).buffer)}function M_(n,t,e){return g(new Int8Array(c(n),t>>>0,e>>>0))}function F_(n,t,e){return g(new Int16Array(c(n),t>>>0,e>>>0))}function E_(n,t,e){return g(new Int32Array(c(n),t>>>0,e>>>0))}function R_(n,t,e){return g(new Uint8Array(c(n),t>>>0,e>>>0))}function L_(n){return g(new Uint8Array(c(n)))}function O_(n,t,e){c(n).set(c(t),e>>>0)}function G_(n){return c(n).length}function V_(n,t,e){return g(new Uint16Array(c(n),t>>>0,e>>>0))}function W_(n,t,e){return g(new Uint32Array(c(n),t>>>0,e>>>0))}function q_(n,t,e){return g(new Float32Array(c(n),t>>>0,e>>>0))}function z_(n){return g(c(n).buffer)}function U_(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function K_(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;x()[n/4+1]=u,x()[n/4+0]=e}function Q_(n,t){throw new Error(b(n,t))}function X_(){return g(r.memory)}function N_(n,t,e){return g(k(n,t,9,v))}function Y_(n,t,e){return g(k(n,t,9,B))}function H_(n,t,e){return g(k(n,t,9,B))}function J_(n,t,e){return g(k(n,t,9,P))}function Z_(n,t,e){return g(k(n,t,9,B))}function $_(n,t,e){return g(k(n,t,9,B))}function nd(n,t,e){return g(k(n,t,9,B))}function td(n,t,e){return g(k(n,t,206,j))}function ed(n,t,e){return g(k(n,t,206,j))}function rd(n,t,e){return g(k(n,t,206,j))}function ud(n,t,e){return g(k(n,t,206,I))}function fd(n,t,e){return g(k(n,t,206,A))}function cd(n,t,e){return g(k(n,t,206,j))}function id(n,t,e){return g(k(n,t,206,j))}function od(n,t,e){return g(k(n,t,636,D))}function _d(n,t,e){return g(k(n,t,636,D))}function dd(n,t,e){return g(k(n,t,636,D))}function ad(n,t,e){return g(k(n,t,636,T))}function bd(n,t,e){return g(k(n,t,636,D))}function gd(n,t,e){return g(k(n,t,636,D))}function wd(n,t,e){return g(k(n,t,636,D))}function sd(n,t,e){return g(k(n,t,1777,C))}function ld(n,t,e){return g(k(n,t,1777,C))}function md(n,t,e){return g(k(n,t,1871,M))}}).call(this,e(260)(n))},425:function(n,t,e){"use strict";e.r(t);var r=e(426),u=e(254);e.d(t,"__wbg_set_wasm",(function(){return u.ji})),e.d(t,"run",(function(){return u.Xk})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Tk})),e.d(t,"__wbindgen_cb_drop",(function(){return u.mk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Ok})),e.d(t,"__wbindgen_string_new",(function(){return u.Vk})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.Sk})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.sg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.vi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Od})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Gg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Hg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.le})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.uh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Dh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.xh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Ig})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.Yg})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.bk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.Vg})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.vh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Ch})),e.d(t,"__wbindgen_number_new",(function(){return u.Rk})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ck})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Jg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Bg})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.df})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.Ue})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Rd})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.sf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.th})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Fb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.re})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.gf})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.cg})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.ff})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.ve})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.Tf})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.Uf})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.Vf})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.Sf})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Bf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Cf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Lf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Kf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Nf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Of})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.Qf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.Rf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.Pf})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.gg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.fg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.ag})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Df})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.Yf})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.Zf})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.If})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Ef})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Ff})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Gf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Hf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Jf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Md})),e.d(t,"__wbindgen_string_get",(function(){return u.Uk})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.Ve})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.fh})),e.d(t,"__wbindgen_is_object",(function(){return u.Nk})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.rh})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.ze})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Qd})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.tf})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.mc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Sb})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.bc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.hc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Xb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Vb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.qc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.lc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.ec})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Wb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.gc})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.ad})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.mi})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.Zg})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.Rg})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.yf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.Kj})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.uc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.cd})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.bd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.he})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ie})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Jb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Kb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Pb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Qb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.o})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Kd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.q})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Jd})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.pf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.Wd})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Td})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.hb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.gb})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.kk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.yh})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.Vd})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Ud})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.ik})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.Mj})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.ui})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.jk})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Lb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.Nh})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Ih})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.md})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.ld})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.Uh})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.Jh})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.Lh})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.Qh})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.Sh})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.ei})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.ci})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.xd})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.Kh})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.Mh})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.Ph})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.Rh})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.di})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.wd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.Oh})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.Yh})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.gi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.Zh})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Pd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Gi})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.dh})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.eh})),e.d(t,"__wbindgen_is_function",(function(){return u.Mk})),e.d(t,"__wbindgen_boolean_get",(function(){return u.lk})),e.d(t,"__wbindgen_number_get",(function(){return u.Qk})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.jf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.ib})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.jb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.tb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Ab})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Eb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Ib})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Ob})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.fc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.kc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.tc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Gc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Jc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Mc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Qc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.pd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.td})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.vd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Id})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Sd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ce})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.je})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.lf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.gh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.hh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.jh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.nh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Ah})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Bh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Hi})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ji})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Mi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Ni})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.Ri})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.Si})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Oi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.Qi})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.Wi})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.Vi})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Xi})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.Ui})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Yi})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.fj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.gj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.ij})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.kj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.lj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.oj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.pj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.sj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.vj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.wj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.xj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.zj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Aj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Bj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Dj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Ej})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Fj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Ij})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Jj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.Rj})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.Sj})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.rb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.lb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.pb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.xb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.ac})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.ic})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.oc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.pc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Zc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.qd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Hd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Fd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.be})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ee})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.vf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Mg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.Qg})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.ph})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Eh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.qi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.yi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Bi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.zi})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Di})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Ki})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.cj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.ej})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.qj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Nj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Tj})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Yj})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.kf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.nd})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.kg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.ed})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.zf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.wh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.sh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.qb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.bi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.ai})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Zj})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ge})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Yb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.ch})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.bh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Hh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.Wh})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.jg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Fi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Xd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Bb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.ih})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ii})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.Pi})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.hj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.jj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.mj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.nj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.tj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.uj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.yj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Cj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Hj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.sb})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.kb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.ob})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.wb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.jc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.nc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.rc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Yc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.rd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Zd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ae})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.fe})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.uf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Lg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Pg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.oh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Fh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.pi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.xi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ci})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Ai})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Ei})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Li})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.bj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.dj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.rj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.Oj})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Uj})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Xj})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.mh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.Xh})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.ek})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Wj})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Vj})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.dk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.sd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.ti})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.lg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.mf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Ng})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.Wg})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Og})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.ke})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.Xg})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.bg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Af})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.lh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.ri})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.eg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.hg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.ig})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Sc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Tc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Rc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.kh})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.hf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.gk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.ni})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.li})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.fk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.oi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.ki})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.pg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.jd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Dg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Eg})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Lj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.de})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Hb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.dd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.zc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Nd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Ld})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.xf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.ak})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.Sg})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.Tg})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.ng})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.ub})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.Ug})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.wi})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.si})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.dg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.wf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.qh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.of})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.vb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Kg})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.od})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.ud})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.Qj})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.og})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.kd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Cg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Gb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.sc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Pc})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.rf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.mg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.tg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.rg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Gh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.hk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Fg})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.ah})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.if})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.nf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.Pj})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.zh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Zi})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.aj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.vg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.yg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.wg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Ag})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.qg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ii})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.qf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.zg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.xg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.hi})),e.d(t,"__wbindgen_debug_string",(function(){return u.Lk})),e.d(t,"__wbindgen_throw",(function(){return u.Wk})),e.d(t,"__wbindgen_memory",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper553",(function(){return u.xk})),e.d(t,"__wbindgen_closure_wrapper554",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper555",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper556",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper557",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper558",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper559",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper923",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper924",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper925",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper926",(function(){return u.Hk})),e.d(t,"__wbindgen_closure_wrapper927",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper928",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper929",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper1871",(function(){return u.nk})),e.d(t,"__wbindgen_closure_wrapper1872",(function(){return u.ok})),e.d(t,"__wbindgen_closure_wrapper1873",(function(){return u.pk})),e.d(t,"__wbindgen_closure_wrapper1874",(function(){return u.qk})),e.d(t,"__wbindgen_closure_wrapper1875",(function(){return u.rk})),e.d(t,"__wbindgen_closure_wrapper1876",(function(){return u.sk})),e.d(t,"__wbindgen_closure_wrapper1877",(function(){return u.tk})),e.d(t,"__wbindgen_closure_wrapper3889",(function(){return u.uk})),e.d(t,"__wbindgen_closure_wrapper3891",(function(){return u.vk})),e.d(t,"__wbindgen_closure_wrapper4662",(function(){return u.wk})),Object(u.ji)(r),r.__wbindgen_start()},426:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(254);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/35.71abc664.js b/assets/js/35.71abc664.js new file mode 100644 index 000000000..25caaf22e --- /dev/null +++ b/assets/js/35.71abc664.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{255:function(n,t,e){"use strict";(function(n){e.d(t,"ui",(function(){return u})),e.d(t,"il",(function(){return F})),e.d(t,"el",(function(){return W})),e.d(t,"xk",(function(){return q})),e.d(t,"Zk",(function(){return z})),e.d(t,"dl",(function(){return U})),e.d(t,"gl",(function(){return K})),e.d(t,"Bg",(function(){return Q})),e.d(t,"Gi",(function(){return N})),e.d(t,"Nd",(function(){return X})),e.d(t,"Pg",(function(){return Y})),e.d(t,"Qg",(function(){return H})),e.d(t,"b",(function(){return J})),e.d(t,"nk",(function(){return Z})),e.d(t,"ih",(function(){return $})),e.d(t,"Oh",(function(){return nn})),e.d(t,"ke",(function(){return tn})),e.d(t,"Fh",(function(){return en})),e.d(t,"Ih",(function(){return rn})),e.d(t,"Sg",(function(){return un})),e.d(t,"ok",(function(){return fn})),e.d(t,"Gh",(function(){return cn})),e.d(t,"Nh",(function(){return on})),e.d(t,"fh",(function(){return _n})),e.d(t,"cl",(function(){return dn})),e.d(t,"Tg",(function(){return an})),e.d(t,"Kg",(function(){return bn})),e.d(t,"ff",(function(){return gn})),e.d(t,"ef",(function(){return wn})),e.d(t,"hf",(function(){return sn})),e.d(t,"gf",(function(){return ln})),e.d(t,"Fi",(function(){return mn})),e.d(t,"Yj",(function(){return pn})),e.d(t,"Zc",(function(){return hn})),e.d(t,"ve",(function(){return xn})),e.d(t,"Cf",(function(){return yn})),e.d(t,"Wj",(function(){return Sn})),e.d(t,"ld",(function(){return kn})),e.d(t,"kd",(function(){return vn})),e.d(t,"Jd",(function(){return Bn})),e.d(t,"ei",(function(){return Pn})),e.d(t,"Vh",(function(){return In})),e.d(t,"Xh",(function(){return jn})),e.d(t,"fl",(function(){return An})),e.d(t,"he",(function(){return Dn})),e.d(t,"df",(function(){return Tn})),e.d(t,"Ue",(function(){return Cn})),e.d(t,"ze",(function(){return Mn})),e.d(t,"Ch",(function(){return Fn})),e.d(t,"ge",(function(){return En})),e.d(t,"kg",(function(){return Rn})),e.d(t,"Sd",(function(){return Ln})),e.d(t,"Vd",(function(){return On})),e.d(t,"Wh",(function(){return Gn})),e.d(t,"Uh",(function(){return Vn})),e.d(t,"Bd",(function(){return Wn})),e.d(t,"xd",(function(){return qn})),e.d(t,"vd",(function(){return zn})),e.d(t,"zd",(function(){return Un})),e.d(t,"bi",(function(){return Kn})),e.d(t,"ci",(function(){return Qn})),e.d(t,"gi",(function(){return Nn})),e.d(t,"oi",(function(){return Xn})),e.d(t,"ni",(function(){return Yn})),e.d(t,"Qd",(function(){return Hn})),e.d(t,"vf",(function(){return Jn})),e.d(t,"ph",(function(){return Zn})),e.d(t,"Bf",(function(){return $n})),e.d(t,"xi",(function(){return nt})),e.d(t,"Rb",(function(){return tt})),e.d(t,"Qb",(function(){return et})),e.d(t,"Ub",(function(){return rt})),e.d(t,"Vb",(function(){return ut})),e.d(t,"Wb",(function(){return ft})),e.d(t,"ac",(function(){return ct})),e.d(t,"dc",(function(){return it})),e.d(t,"fc",(function(){return ot})),e.d(t,"gc",(function(){return _t})),e.d(t,"kc",(function(){return dt})),e.d(t,"lc",(function(){return at})),e.d(t,"pc",(function(){return bt})),e.d(t,"ad",(function(){return gt})),e.d(t,"bh",(function(){return wt})),e.d(t,"jh",(function(){return st})),e.d(t,"tc",(function(){return lt})),e.d(t,"bd",(function(){return mt})),e.d(t,"mj",(function(){return pt})),e.d(t,"Rg",(function(){return ht})),e.d(t,"rf",(function(){return xt})),e.d(t,"wf",(function(){return yt})),e.d(t,"ig",(function(){return St})),e.d(t,"Eb",(function(){return kt})),e.d(t,"re",(function(){return vt})),e.d(t,"uh",(function(){return Bt})),e.d(t,"jg",(function(){return Pt})),e.d(t,"Id",(function(){return It})),e.d(t,"Od",(function(){return jt})),e.d(t,"Zh",(function(){return At})),e.d(t,"ji",(function(){return Dt})),e.d(t,"ki",(function(){return Tt})),e.d(t,"ri",(function(){return Ct})),e.d(t,"Th",(function(){return Mt})),e.d(t,"Yh",(function(){return Ft})),e.d(t,"Cd",(function(){return Et})),e.d(t,"yd",(function(){return Rt})),e.d(t,"wd",(function(){return Lt})),e.d(t,"Ad",(function(){return Ot})),e.d(t,"ai",(function(){return Gt})),e.d(t,"di",(function(){return Vt})),e.d(t,"fi",(function(){return Wt})),e.d(t,"qi",(function(){return qt})),e.d(t,"pi",(function(){return zt})),e.d(t,"le",(function(){return Ut})),e.d(t,"qf",(function(){return Kt})),e.d(t,"o",(function(){return Qt})),e.d(t,"q",(function(){return Nt})),e.d(t,"gb",(function(){return Xt})),e.d(t,"hb",(function(){return Yt})),e.d(t,"Ib",(function(){return Ht})),e.d(t,"Jb",(function(){return Jt})),e.d(t,"Ob",(function(){return Zt})),e.d(t,"Pb",(function(){return $t})),e.d(t,"Ud",(function(){return ne})),e.d(t,"Td",(function(){return te})),e.d(t,"Jh",(function(){return ee})),e.d(t,"Md",(function(){return re})),e.d(t,"Ve",(function(){return ue})),e.d(t,"Zf",(function(){return fe})),e.d(t,"ag",(function(){return ce})),e.d(t,"bg",(function(){return ie})),e.d(t,"Yf",(function(){return oe})),e.d(t,"Ff",(function(){return _e})),e.d(t,"Gf",(function(){return de})),e.d(t,"Rf",(function(){return ae})),e.d(t,"Qf",(function(){return be})),e.d(t,"Tf",(function(){return ge})),e.d(t,"Uf",(function(){return we})),e.d(t,"Wf",(function(){return se})),e.d(t,"Xf",(function(){return le})),e.d(t,"dg",(function(){return me})),e.d(t,"cg",(function(){return pe})),e.d(t,"Vf",(function(){return he})),e.d(t,"gg",(function(){return xe})),e.d(t,"Hf",(function(){return ye})),e.d(t,"eg",(function(){return Se})),e.d(t,"fg",(function(){return ke})),e.d(t,"pg",(function(){return ve})),e.d(t,"og",(function(){return Be})),e.d(t,"Sf",(function(){return Pe})),e.d(t,"Jf",(function(){return Ie})),e.d(t,"If",(function(){return je})),e.d(t,"Of",(function(){return Ae})),e.d(t,"Kf",(function(){return De})),e.d(t,"Lf",(function(){return Te})),e.d(t,"Mf",(function(){return Ce})),e.d(t,"Nf",(function(){return Me})),e.d(t,"Pf",(function(){return Fe})),e.d(t,"Yk",(function(){return Ee})),e.d(t,"a",(function(){return Re})),e.d(t,"c",(function(){return Le})),e.d(t,"Eh",(function(){return Oe})),e.d(t,"Pd",(function(){return Ge})),e.d(t,"uf",(function(){return Ve})),e.d(t,"lg",(function(){return We})),e.d(t,"uk",(function(){return qe})),e.d(t,"vk",(function(){return ze})),e.d(t,"Kb",(function(){return Ue})),e.d(t,"Ri",(function(){return Ke})),e.d(t,"oh",(function(){return Qe})),e.d(t,"nh",(function(){return Ne})),e.d(t,"Xk",(function(){return Xe})),e.d(t,"wk",(function(){return Ye})),e.d(t,"bl",(function(){return He})),e.d(t,"kf",(function(){return Je})),e.d(t,"p",(function(){return Ze})),e.d(t,"t",(function(){return $e})),e.d(t,"A",(function(){return nr})),e.d(t,"E",(function(){return tr})),e.d(t,"P",(function(){return er})),e.d(t,"S",(function(){return rr})),e.d(t,"V",(function(){return ur})),e.d(t,"W",(function(){return fr})),e.d(t,"ib",(function(){return cr})),e.d(t,"jb",(function(){return ir})),e.d(t,"kb",(function(){return or})),e.d(t,"sb",(function(){return _r})),e.d(t,"Bb",(function(){return dr})),e.d(t,"zb",(function(){return ar})),e.d(t,"Cb",(function(){return br})),e.d(t,"Db",(function(){return gr})),e.d(t,"Hb",(function(){return wr})),e.d(t,"Nb",(function(){return sr})),e.d(t,"ec",(function(){return lr})),e.d(t,"jc",(function(){return mr})),e.d(t,"sc",(function(){return pr})),e.d(t,"Fc",(function(){return hr})),e.d(t,"Ic",(function(){return xr})),e.d(t,"Lc",(function(){return yr})),e.d(t,"Pc",(function(){return Sr})),e.d(t,"od",(function(){return kr})),e.d(t,"sd",(function(){return vr})),e.d(t,"ud",(function(){return Br})),e.d(t,"Hd",(function(){return Pr})),e.d(t,"Rd",(function(){return Ir})),e.d(t,"be",(function(){return jr})),e.d(t,"ie",(function(){return Ar})),e.d(t,"ue",(function(){return Dr})),e.d(t,"Fe",(function(){return Tr})),e.d(t,"Me",(function(){return Cr})),e.d(t,"Ne",(function(){return Mr})),e.d(t,"mf",(function(){return Fr})),e.d(t,"qh",(function(){return Er})),e.d(t,"rh",(function(){return Rr})),e.d(t,"th",(function(){return Lr})),e.d(t,"yh",(function(){return Or})),e.d(t,"Lh",(function(){return Gr})),e.d(t,"Mh",(function(){return Vr})),e.d(t,"Si",(function(){return Wr})),e.d(t,"Ui",(function(){return qr})),e.d(t,"Xi",(function(){return zr})),e.d(t,"Yi",(function(){return Ur})),e.d(t,"cj",(function(){return Kr})),e.d(t,"dj",(function(){return Qr})),e.d(t,"Zi",(function(){return Nr})),e.d(t,"bj",(function(){return Xr})),e.d(t,"ej",(function(){return Yr})),e.d(t,"hj",(function(){return Hr})),e.d(t,"gj",(function(){return Jr})),e.d(t,"ij",(function(){return Zr})),e.d(t,"fj",(function(){return $r})),e.d(t,"jj",(function(){return nu})),e.d(t,"rj",(function(){return tu})),e.d(t,"sj",(function(){return eu})),e.d(t,"uj",(function(){return ru})),e.d(t,"wj",(function(){return uu})),e.d(t,"xj",(function(){return fu})),e.d(t,"Aj",(function(){return cu})),e.d(t,"Bj",(function(){return iu})),e.d(t,"Ej",(function(){return ou})),e.d(t,"Hj",(function(){return _u})),e.d(t,"Ij",(function(){return du})),e.d(t,"Jj",(function(){return au})),e.d(t,"Lj",(function(){return bu})),e.d(t,"Mj",(function(){return gu})),e.d(t,"Nj",(function(){return wu})),e.d(t,"Pj",(function(){return su})),e.d(t,"Qj",(function(){return lu})),e.d(t,"Rj",(function(){return mu})),e.d(t,"Sj",(function(){return pu})),e.d(t,"Uj",(function(){return hu})),e.d(t,"Vj",(function(){return xu})),e.d(t,"dk",(function(){return yu})),e.d(t,"ek",(function(){return Su})),e.d(t,"g",(function(){return ku})),e.d(t,"m",(function(){return vu})),e.d(t,"s",(function(){return Bu})),e.d(t,"v",(function(){return Pu})),e.d(t,"w",(function(){return Iu})),e.d(t,"y",(function(){return ju})),e.d(t,"B",(function(){return Au})),e.d(t,"F",(function(){return Du})),e.d(t,"J",(function(){return Tu})),e.d(t,"H",(function(){return Cu})),e.d(t,"N",(function(){return Mu})),e.d(t,"L",(function(){return Fu})),e.d(t,"qb",(function(){return Eu})),e.d(t,"mb",(function(){return Ru})),e.d(t,"ob",(function(){return Lu})),e.d(t,"wb",(function(){return Ou})),e.d(t,"yb",(function(){return Gu})),e.d(t,"Mb",(function(){return Vu})),e.d(t,"Tb",(function(){return Wu})),e.d(t,"Zb",(function(){return qu})),e.d(t,"bc",(function(){return zu})),e.d(t,"hc",(function(){return Uu})),e.d(t,"nc",(function(){return Ku})),e.d(t,"oc",(function(){return Qu})),e.d(t,"xc",(function(){return Nu})),e.d(t,"Ac",(function(){return Xu})),e.d(t,"Cc",(function(){return Yu})),e.d(t,"Ec",(function(){return Hu})),e.d(t,"Gc",(function(){return Ju})),e.d(t,"Jc",(function(){return Zu})),e.d(t,"Mc",(function(){return $u})),e.d(t,"Uc",(function(){return nf})),e.d(t,"Vc",(function(){return tf})),e.d(t,"Yc",(function(){return ef})),e.d(t,"hd",(function(){return rf})),e.d(t,"fd",(function(){return uf})),e.d(t,"pd",(function(){return ff})),e.d(t,"Gd",(function(){return cf})),e.d(t,"Ed",(function(){return of})),e.d(t,"Xd",(function(){return _f})),e.d(t,"ae",(function(){return df})),e.d(t,"de",(function(){return af})),e.d(t,"te",(function(){return bf})),e.d(t,"ye",(function(){return gf})),e.d(t,"Ae",(function(){return wf})),e.d(t,"De",(function(){return sf})),e.d(t,"He",(function(){return lf})),e.d(t,"Ie",(function(){return mf})),e.d(t,"Ke",(function(){return pf})),e.d(t,"Oe",(function(){return hf})),e.d(t,"yf",(function(){return xf})),e.d(t,"Wg",(function(){return yf})),e.d(t,"ah",(function(){return Sf})),e.d(t,"Ah",(function(){return kf})),e.d(t,"Ph",(function(){return vf})),e.d(t,"Bi",(function(){return Bf})),e.d(t,"Ji",(function(){return Pf})),e.d(t,"Mi",(function(){return If})),e.d(t,"Ki",(function(){return jf})),e.d(t,"Oi",(function(){return Af})),e.d(t,"Vi",(function(){return Df})),e.d(t,"oj",(function(){return Tf})),e.d(t,"qj",(function(){return Cf})),e.d(t,"Cj",(function(){return Mf})),e.d(t,"Zj",(function(){return Ff})),e.d(t,"fk",(function(){return Ef})),e.d(t,"kk",(function(){return Rf})),e.d(t,"lf",(function(){return Lf})),e.d(t,"md",(function(){return Of})),e.d(t,"tg",(function(){return Gf})),e.d(t,"dd",(function(){return Vf})),e.d(t,"eb",(function(){return Wf})),e.d(t,"me",(function(){return qf})),e.d(t,"Df",(function(){return zf})),e.d(t,"Hh",(function(){return Uf})),e.d(t,"db",(function(){return Kf})),e.d(t,"Dh",(function(){return Qf})),e.d(t,"pb",(function(){return Nf})),e.d(t,"mi",(function(){return Xf})),e.d(t,"li",(function(){return Yf})),e.d(t,"R",(function(){return Hf})),e.d(t,"lk",(function(){return Jf})),e.d(t,"e",(function(){return Zf})),e.d(t,"fe",(function(){return $f})),e.d(t,"Xb",(function(){return nc})),e.d(t,"se",(function(){return tc})),e.d(t,"mh",(function(){return ec})),e.d(t,"lh",(function(){return rc})),e.d(t,"Sh",(function(){return uc})),e.d(t,"hi",(function(){return fc})),e.d(t,"sg",(function(){return cc})),e.d(t,"Qi",(function(){return ic})),e.d(t,"Wd",(function(){return oc})),e.d(t,"U",(function(){return _c})),e.d(t,"T",(function(){return dc})),e.d(t,"X",(function(){return ac})),e.d(t,"Ab",(function(){return bc})),e.d(t,"sh",(function(){return gc})),e.d(t,"Ti",(function(){return wc})),e.d(t,"aj",(function(){return sc})),e.d(t,"tj",(function(){return lc})),e.d(t,"vj",(function(){return mc})),e.d(t,"yj",(function(){return pc})),e.d(t,"zj",(function(){return hc})),e.d(t,"Fj",(function(){return xc})),e.d(t,"Gj",(function(){return yc})),e.d(t,"Kj",(function(){return Sc})),e.d(t,"Oj",(function(){return kc})),e.d(t,"Tj",(function(){return vc})),e.d(t,"f",(function(){return Bc})),e.d(t,"n",(function(){return Pc})),e.d(t,"r",(function(){return Ic})),e.d(t,"u",(function(){return jc})),e.d(t,"x",(function(){return Ac})),e.d(t,"z",(function(){return Dc})),e.d(t,"C",(function(){return Tc})),e.d(t,"G",(function(){return Cc})),e.d(t,"K",(function(){return Mc})),e.d(t,"I",(function(){return Fc})),e.d(t,"O",(function(){return Ec})),e.d(t,"M",(function(){return Rc})),e.d(t,"rb",(function(){return Lc})),e.d(t,"lb",(function(){return Oc})),e.d(t,"nb",(function(){return Gc})),e.d(t,"vb",(function(){return Vc})),e.d(t,"xb",(function(){return Wc})),e.d(t,"Lb",(function(){return qc})),e.d(t,"Sb",(function(){return zc})),e.d(t,"Yb",(function(){return Uc})),e.d(t,"cc",(function(){return Kc})),e.d(t,"ic",(function(){return Qc})),e.d(t,"mc",(function(){return Nc})),e.d(t,"qc",(function(){return Xc})),e.d(t,"wc",(function(){return Yc})),e.d(t,"zc",(function(){return Hc})),e.d(t,"Bc",(function(){return Jc})),e.d(t,"Dc",(function(){return Zc})),e.d(t,"Hc",(function(){return $c})),e.d(t,"Kc",(function(){return ni})),e.d(t,"Nc",(function(){return ti})),e.d(t,"Tc",(function(){return ei})),e.d(t,"Wc",(function(){return ri})),e.d(t,"Xc",(function(){return ui})),e.d(t,"gd",(function(){return fi})),e.d(t,"ed",(function(){return ci})),e.d(t,"qd",(function(){return ii})),e.d(t,"Fd",(function(){return oi})),e.d(t,"Dd",(function(){return _i})),e.d(t,"Yd",(function(){return di})),e.d(t,"Zd",(function(){return ai})),e.d(t,"ee",(function(){return bi})),e.d(t,"xe",(function(){return gi})),e.d(t,"Be",(function(){return wi})),e.d(t,"Ce",(function(){return si})),e.d(t,"Ge",(function(){return li})),e.d(t,"Je",(function(){return mi})),e.d(t,"Pe",(function(){return pi})),e.d(t,"xf",(function(){return hi})),e.d(t,"Vg",(function(){return xi})),e.d(t,"Zg",(function(){return yi})),e.d(t,"zh",(function(){return Si})),e.d(t,"Qh",(function(){return ki})),e.d(t,"Ai",(function(){return vi})),e.d(t,"Ii",(function(){return Bi})),e.d(t,"Ni",(function(){return Pi})),e.d(t,"Li",(function(){return Ii})),e.d(t,"Pi",(function(){return ji})),e.d(t,"Wi",(function(){return Ai})),e.d(t,"nj",(function(){return Di})),e.d(t,"pj",(function(){return Ti})),e.d(t,"Dj",(function(){return Ci})),e.d(t,"ak",(function(){return Mi})),e.d(t,"gk",(function(){return Fi})),e.d(t,"jk",(function(){return Ei})),e.d(t,"nd",(function(){return Ri})),e.d(t,"td",(function(){return Li})),e.d(t,"ck",(function(){return Oi})),e.d(t,"Ee",(function(){return Gi})),e.d(t,"xh",(function(){return Vi})),e.d(t,"ii",(function(){return Wi})),e.d(t,"xg",(function(){return qi})),e.d(t,"jd",(function(){return zi})),e.d(t,"Lg",(function(){return Ui})),e.d(t,"l",(function(){return Ki})),e.d(t,"Fb",(function(){return Qi})),e.d(t,"Qe",(function(){return Ni})),e.d(t,"rd",(function(){return Xi})),e.d(t,"ik",(function(){return Yi})),e.d(t,"hk",(function(){return Hi})),e.d(t,"ch",(function(){return Ji})),e.d(t,"dh",(function(){return Zi})),e.d(t,"wg",(function(){return $i})),e.d(t,"ce",(function(){return no})),e.d(t,"nf",(function(){return to})),e.d(t,"Gb",(function(){return eo})),e.d(t,"cd",(function(){return ro})),e.d(t,"cf",(function(){return uo})),e.d(t,"Q",(function(){return fo})),e.d(t,"yc",(function(){return co})),e.d(t,"Ld",(function(){return io})),e.d(t,"Kd",(function(){return oo})),e.d(t,"bf",(function(){return _o})),e.d(t,"Af",(function(){return ao})),e.d(t,"mk",(function(){return bo})),e.d(t,"Ei",(function(){return go})),e.d(t,"ug",(function(){return wo})),e.d(t,"d",(function(){return so})),e.d(t,"tb",(function(){return lo})),e.d(t,"eh",(function(){return mo})),e.d(t,"Hi",(function(){return po})),e.d(t,"qk",(function(){return ho})),e.d(t,"Xe",(function(){return xo})),e.d(t,"if",(function(){return yo})),e.d(t,"sk",(function(){return So})),e.d(t,"yi",(function(){return ko})),e.d(t,"Ye",(function(){return vo})),e.d(t,"wi",(function(){return Bo})),e.d(t,"pe",(function(){return Po})),e.d(t,"qe",(function(){return Io})),e.d(t,"pk",(function(){return jo})),e.d(t,"Ze",(function(){return Ao})),e.d(t,"k",(function(){return Do})),e.d(t,"vc",(function(){return To})),e.d(t,"Di",(function(){return Co})),e.d(t,"mg",(function(){return Mo})),e.d(t,"zf",(function(){return Fo})),e.d(t,"Bh",(function(){return Eo})),e.d(t,"pf",(function(){return Ro})),e.d(t,"ub",(function(){return Lo})),e.d(t,"rk",(function(){return Oo})),e.d(t,"zi",(function(){return Go})),e.d(t,"We",(function(){return Vo})),e.d(t,"vi",(function(){return Wo})),e.d(t,"ne",(function(){return qo})),e.d(t,"oe",(function(){return zo})),e.d(t,"Ug",(function(){return Uo})),e.d(t,"h",(function(){return Ko})),e.d(t,"vh",(function(){return Qo})),e.d(t,"yg",(function(){return No})),e.d(t,"id",(function(){return Xo})),e.d(t,"Mg",(function(){return Yo})),e.d(t,"Ng",(function(){return Ho})),e.d(t,"Xj",(function(){return Jo})),e.d(t,"Rc",(function(){return Zo})),e.d(t,"Sc",(function(){return $o})),e.d(t,"Qc",(function(){return n_})),e.d(t,"D",(function(){return t_})),e.d(t,"rc",(function(){return e_})),e.d(t,"Oc",(function(){return r_})),e.d(t,"Le",(function(){return u_})),e.d(t,"hh",(function(){return f_})),e.d(t,"hg",(function(){return c_})),e.d(t,"Ef",(function(){return i_})),e.d(t,"i",(function(){return o_})),e.d(t,"wh",(function(){return __})),e.d(t,"uc",(function(){return d_})),e.d(t,"Ci",(function(){return a_})),e.d(t,"j",(function(){return b_})),e.d(t,"ng",(function(){return g_})),e.d(t,"ab",(function(){return w_})),e.d(t,"bb",(function(){return s_})),e.d(t,"qg",(function(){return l_})),e.d(t,"rg",(function(){return m_})),e.d(t,"Xg",(function(){return p_})),e.d(t,"gh",(function(){return h_})),e.d(t,"Yg",(function(){return x_})),e.d(t,"je",(function(){return y_})),e.d(t,"Re",(function(){return S_})),e.d(t,"tf",(function(){return k_})),e.d(t,"vg",(function(){return v_})),e.d(t,"Cg",(function(){return B_})),e.d(t,"cb",(function(){return P_})),e.d(t,"Ag",(function(){return I_})),e.d(t,"Rh",(function(){return j_})),e.d(t,"tk",(function(){return A_})),e.d(t,"Se",(function(){return D_})),e.d(t,"Te",(function(){return T_})),e.d(t,"af",(function(){return C_})),e.d(t,"Og",(function(){return M_})),e.d(t,"kh",(function(){return F_})),e.d(t,"jf",(function(){return E_})),e.d(t,"we",(function(){return R_})),e.d(t,"of",(function(){return L_})),e.d(t,"bk",(function(){return O_})),e.d(t,"Kh",(function(){return G_})),e.d(t,"fb",(function(){return V_})),e.d(t,"kj",(function(){return W_})),e.d(t,"lj",(function(){return q_})),e.d(t,"Y",(function(){return z_})),e.d(t,"Eg",(function(){return U_})),e.d(t,"Hg",(function(){return K_})),e.d(t,"Fg",(function(){return Q_})),e.d(t,"Jg",(function(){return N_})),e.d(t,"zg",(function(){return X_})),e.d(t,"ti",(function(){return Y_})),e.d(t,"sf",(function(){return H_})),e.d(t,"Ig",(function(){return J_})),e.d(t,"Dg",(function(){return Z_})),e.d(t,"Gg",(function(){return $_})),e.d(t,"Z",(function(){return nd})),e.d(t,"si",(function(){return td})),e.d(t,"Wk",(function(){return ed})),e.d(t,"hl",(function(){return rd})),e.d(t,"al",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"Lk",(function(){return od})),e.d(t,"Mk",(function(){return _d})),e.d(t,"Nk",(function(){return dd})),e.d(t,"Ok",(function(){return ad})),e.d(t,"Pk",(function(){return bd})),e.d(t,"Qk",(function(){return gd})),e.d(t,"Rk",(function(){return wd})),e.d(t,"Sk",(function(){return sd})),e.d(t,"Tk",(function(){return ld})),e.d(t,"Uk",(function(){return md})),e.d(t,"Vk",(function(){return pd})),e.d(t,"yk",(function(){return hd})),e.d(t,"zk",(function(){return xd})),e.d(t,"Ak",(function(){return yd})),e.d(t,"Bk",(function(){return Sd})),e.d(t,"Ck",(function(){return kd})),e.d(t,"Dk",(function(){return vd})),e.d(t,"Ek",(function(){return Bd})),e.d(t,"Fk",(function(){return Pd})),e.d(t,"Gk",(function(){return Id})),e.d(t,"Hk",(function(){return jd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}function _(n){i===f.length&&f.push(f.length+1);const t=i;return i=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))}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,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h18689c71d57f08c2(n,t,_(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h7c9f23f043f2457f(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h7c596a7320a5a85d(n,t,_(e),_(u))}function I(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h4294e2b726bcd36f(n,t,_(e))}function j(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hafda2dd7dbbdbc01(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h79dbf9c0dae26d7c(n,t,_(e),_(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,_(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,_(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,_(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(_(n))}}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n){return _(c(n))}function K(n,t){return _(g(n,t))}function Q(){return _(new Error)}function N(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function X(n,t){let e,u;try{e=n,u=t,console.error(g(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){return c(n).offsetX}function H(n){return c(n).offsetY}function J(n){return _(c(n).Window)}function Z(n){const t=c(n).webkitFullscreenElement;return p(t)?0:_(t)}function $(){return _(ResizeObserverEntry.prototype)}function nn(n){return _(c(n).scheduler)}function tn(n){return _(c(n).getCoalescedEvents)}function en(n){return _(c(n).requestFullscreen)}function rn(n){return _(c(n).requestIdleCallback)}function un(n){return _(c(n).onpointerrawupdate)}function fn(n){c(n).webkitRequestFullscreen()}function cn(n){return _(c(n).requestFullscreen())}function on(n){return _(c(n).scheduler)}function _n(n,t,e){return _(c(n).postTask(c(t),c(e)))}function dn(n){return _(n)}function an(n){return _(c(n).performance)}function bn(n){return c(n).now()}function gn(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function wn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function sn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function mn(n){return c(n).size}function pn(n){return c(n).usage}function hn(n){c(n).destroy()}function xn(n,t,e){return _(c(n).getMappedRange(t,e))}function yn(n,t,e,r){return _(c(n).mapAsync(t>>>0,e,r))}function Sn(n){c(n).unmap()}function kn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function vn(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function Bn(n){c(n).end()}function Pn(n,t){c(n).setPipeline(c(t))}function In(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function jn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function An(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function Dn(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Tn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function Cn(n){return _(c(n).gpu)}function Mn(n){return _(c(n).getPreferredCanvasFormat())}function Fn(n,t){return _(c(n).requestAdapter(c(t)))}function En(n,t){return _(c(n).getBindGroupLayout(t>>>0))}function Rn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ln(n){return _(c(n).finish())}function On(n,t){return _(c(n).finish(c(t)))}function Gn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Vn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Wn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function qn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function zn(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Un(n,t,e){c(n).drawIndirect(c(t),e)}function Kn(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Qn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Nn(n,t){c(n).setPipeline(c(t))}function Xn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Yn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Hn(n){return _(c(n).features)}function Jn(n){return _(c(n).limits)}function Zn(n){return _(c(n).queue)}function $n(n){return _(c(n).lost)}function nt(n,t){c(n).onuncapturederror=c(t)}function tt(n,t){return _(c(n).createBindGroup(c(t)))}function et(n,t){return _(c(n).createBindGroupLayout(c(t)))}function rt(n,t){return _(c(n).createBuffer(c(t)))}function ut(n,t){return _(c(n).createCommandEncoder(c(t)))}function ft(n,t){return _(c(n).createComputePipeline(c(t)))}function ct(n,t){return _(c(n).createPipelineLayout(c(t)))}function it(n,t){return _(c(n).createQuerySet(c(t)))}function ot(n,t){return _(c(n).createRenderBundleEncoder(c(t)))}function _t(n,t){return _(c(n).createRenderPipeline(c(t)))}function dt(n,t){return _(c(n).createSampler(c(t)))}function at(n,t){return _(c(n).createShaderModule(c(t)))}function bt(n,t){return _(c(n).createTexture(c(t)))}function gt(n){c(n).destroy()}function wt(n){return _(c(n).popErrorScope())}function st(n,t){c(n).pushErrorScope(o(t))}function lt(n,t){return _(c(n).createView(c(t)))}function mt(n){c(n).destroy()}function pt(n){return _(c(n).type)}function ht(n){return c(n).offset}function xt(n){return c(n).length}function yt(n){return c(n).lineNum}function St(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function kt(n,t){c(n).configure(c(t))}function vt(n){return _(c(n).getCurrentTexture())}function Bt(n){return _(c(n).reason)}function Pt(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function It(n){c(n).end()}function jt(n,t){c(n).executeBundles(c(t))}function At(n,t){c(n).setBlendConstant(c(t))}function Dt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Tt(n,t){c(n).setStencilReference(t>>>0)}function Ct(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Mt(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Ft(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Et(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Rt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Lt(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ot(n,t,e){c(n).drawIndirect(c(t),e)}function Gt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Vt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Wt(n,t){c(n).setPipeline(c(t))}function qt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function zt(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Ut(n){return _(c(n).getCompilationInfo())}function Kt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Qt(n,t){return _(c(n).beginComputePass(c(t)))}function Nt(n,t){return _(c(n).beginRenderPass(c(t)))}function Xt(n,t,e){c(n).clearBuffer(c(t),e)}function Yt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Ht(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Jt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Zt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function $t(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function ne(n){return _(c(n).finish())}function te(n,t){return _(c(n).finish(c(t)))}function ee(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function re(n){return _(c(n).error)}function ue(n,t,e){return c(n).has(g(t,e))}function fe(n){return c(n).maxTextureDimension1D}function ce(n){return c(n).maxTextureDimension2D}function ie(n){return c(n).maxTextureDimension3D}function oe(n){return c(n).maxTextureArrayLayers}function _e(n){return c(n).maxBindGroups}function de(n){return c(n).maxBindingsPerBindGroup}function ae(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function be(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function ge(n){return c(n).maxSampledTexturesPerShaderStage}function we(n){return c(n).maxSamplersPerShaderStage}function se(n){return c(n).maxStorageBuffersPerShaderStage}function le(n){return c(n).maxStorageTexturesPerShaderStage}function me(n){return c(n).maxUniformBuffersPerShaderStage}function pe(n){return c(n).maxUniformBufferBindingSize}function he(n){return c(n).maxStorageBufferBindingSize}function xe(n){return c(n).maxVertexBuffers}function ye(n){return c(n).maxBufferSize}function Se(n){return c(n).maxVertexAttributes}function ke(n){return c(n).maxVertexBufferArrayStride}function ve(n){return c(n).minUniformBufferOffsetAlignment}function Be(n){return c(n).minStorageBufferOffsetAlignment}function Pe(n){return c(n).maxInterStageShaderComponents}function Ie(n){return c(n).maxColorAttachments}function je(n){return c(n).maxColorAttachmentBytesPerSample}function Ae(n){return c(n).maxComputeWorkgroupStorageSize}function De(n){return c(n).maxComputeInvocationsPerWorkgroup}function Te(n){return c(n).maxComputeWorkgroupSizeX}function Ce(n){return c(n).maxComputeWorkgroupSizeY}function Me(n){return c(n).maxComputeWorkgroupSizeZ}function Fe(n){return c(n).maxComputeWorkgroupsPerDimension}function Ee(n){const t=c(n);return"object"==typeof t&&null!==t}function Re(n){return _(c(n).Window)}function Le(n){return _(c(n).WorkerGlobalScope)}function Oe(n,t){return _(c(n).requestDevice(c(t)))}function Ge(n){return _(c(n).features)}function Ve(n){return _(c(n).limits)}function We(n){return _(c(n).messages)}function qe(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function ze(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ue(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Ke(n,t){c(n).submit(c(t))}function Qe(n){queueMicrotask(c(n))}function Ne(n){return _(c(n).queueMicrotask)}function Xe(n){return"function"==typeof c(n)}function Ye(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function He(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Je(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Ze(n,t,e){c(n).beginQuery(t>>>0,c(e))}function $e(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function nr(n,t,e){c(n).bindSampler(t>>>0,c(e))}function tr(n,t){c(n).bindVertexArray(c(t))}function er(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function rr(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function ur(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function fr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function cr(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function ir(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function or(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function _r(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function dr(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function ar(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function br(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function gr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function wr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function sr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function lr(n){const t=c(n).createQuery();return p(t)?0:_(t)}function mr(n){const t=c(n).createSampler();return p(t)?0:_(t)}function pr(n){const t=c(n).createVertexArray();return p(t)?0:_(t)}function hr(n,t){c(n).deleteQuery(c(t))}function xr(n,t){c(n).deleteSampler(c(t))}function yr(n,t){c(n).deleteSync(c(t))}function Sr(n,t){c(n).deleteVertexArray(c(t))}function kr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function vr(n,t){c(n).drawBuffers(c(t))}function Br(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function Pr(n,t){c(n).endQuery(t>>>0)}function Ir(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:_(r)}function jr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Ar(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Dr(){return V((function(n,t,e){return _(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Tr(n,t,e){return _(c(n).getQueryParameter(c(t),e>>>0))}function Cr(n,t,e){return _(c(n).getSyncParameter(c(t),e>>>0))}function Mr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),g(e,r))}function Fr(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Er(n,t){c(n).readBuffer(t>>>0)}function Rr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Lr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Or(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Gr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Vr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Wr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function qr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function zr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Ur(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Kr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function nu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function tu(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function eu(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function ru(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function uu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function fu(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function cu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function iu(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function ou(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function _u(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function du(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function au(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function bu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function gu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function hu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function xu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function yu(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function Su(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function ku(n,t){c(n).activeTexture(t>>>0)}function vu(n,t,e){c(n).attachShader(c(t),c(e))}function Bu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function Pu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Iu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function ju(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Au(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Du(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Tu(n,t){c(n).blendEquation(t>>>0)}function Cu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Mu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Fu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Eu(n,t){c(n).clear(t>>>0)}function Ru(n,t){c(n).clearDepth(t)}function Lu(n,t){c(n).clearStencil(t)}function Ou(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Gu(n,t){c(n).compileShader(c(t))}function Vu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Wu(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function qu(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function zu(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Uu(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Ku(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Qu(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Nu(n,t){c(n).cullFace(t>>>0)}function Xu(n,t){c(n).deleteBuffer(c(t))}function Yu(n,t){c(n).deleteFramebuffer(c(t))}function Hu(n,t){c(n).deleteProgram(c(t))}function Ju(n,t){c(n).deleteRenderbuffer(c(t))}function Zu(n,t){c(n).deleteShader(c(t))}function $u(n,t){c(n).deleteTexture(c(t))}function nf(n,t){c(n).depthFunc(t>>>0)}function tf(n,t){c(n).depthMask(0!==t)}function ef(n,t,e){c(n).depthRange(t,e)}function rf(n,t){c(n).disable(t>>>0)}function uf(n,t){c(n).disableVertexAttribArray(t>>>0)}function ff(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function cf(n,t){c(n).enable(t>>>0)}function of(n,t){c(n).enableVertexAttribArray(t>>>0)}function _f(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function df(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function af(n,t){c(n).frontFace(t>>>0)}function bf(){return V((function(n,t,e){const r=c(n).getExtension(g(t,e));return p(r)?0:_(r)}),arguments)}function gf(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function wf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function sf(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function lf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function mf(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function pf(n){const t=c(n).getSupportedExtensions();return p(t)?0:_(t)}function hf(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function xf(n,t){c(n).linkProgram(c(t))}function yf(n,t,e){c(n).pixelStorei(t>>>0,e)}function Sf(n,t,e){c(n).polygonOffset(t,e)}function kf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function vf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Bf(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Pf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function If(n,t){c(n).stencilMask(t>>>0)}function jf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Af(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Df(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Tf(n,t,e){c(n).uniform1f(c(t),e)}function Cf(n,t,e){c(n).uniform1i(c(t),e)}function Mf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ff(n,t){c(n).useProgram(c(t))}function Ef(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Rf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Lf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Of(n){const t=c(n).document;return p(t)?0:_(t)}function Gf(n){return _(c(n).navigator)}function Vf(n){return c(n).devicePixelRatio}function Wf(n,t){c(n).cancelIdleCallback(t>>>0)}function qf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:_(e)}),arguments)}function zf(){return V((function(n,t,e){const r=c(n).matchMedia(g(t,e));return p(r)?0:_(r)}),arguments)}function Uf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Kf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Qf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Nf(n,t){c(n).clearTimeout(t)}function Xf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Yf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Hf(n){const t=c(n).body;return p(t)?0:_(t)}function Jf(n){return _(c(n).visibilityState)}function Zf(n){const t=c(n).activeElement;return p(t)?0:_(t)}function $f(n){const t=c(n).fullscreenElement;return p(t)?0:_(t)}function nc(){return V((function(n,t,e){return _(c(n).createElement(g(t,e)))}),arguments)}function tc(n,t,e){const r=c(n).getElementById(g(t,e));return p(r)?0:_(r)}function ec(){return V((function(n,t,e){const r=c(n).querySelector(g(t,e));return p(r)?0:_(r)}),arguments)}function rc(){return V((function(n,t,e){return _(c(n).querySelectorAll(g(t,e)))}),arguments)}function uc(){return V((function(n,t,e,r,u){c(n).setAttribute(g(t,e),g(r,u))}),arguments)}function fc(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function cc(n){return _(c(n).navigator)}function ic(n){return _(c(n).style)}function oc(){return V((function(n){c(n).focus()}),arguments)}function _c(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function dc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function ac(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function bc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function gc(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function wc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function sc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function lc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function mc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function pc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function hc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function xc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function yc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function Sc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function kc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function vc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function Bc(n,t){c(n).activeTexture(t>>>0)}function Pc(n,t,e){c(n).attachShader(c(t),c(e))}function Ic(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,g(r,u))}function jc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Ac(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Dc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Tc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Cc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Mc(n,t){c(n).blendEquation(t>>>0)}function Fc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Ec(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Rc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Lc(n,t){c(n).clear(t>>>0)}function Oc(n,t){c(n).clearDepth(t)}function Gc(n,t){c(n).clearStencil(t)}function Vc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Wc(n,t){c(n).compileShader(c(t))}function qc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function zc(n){const t=c(n).createBuffer();return p(t)?0:_(t)}function Uc(n){const t=c(n).createFramebuffer();return p(t)?0:_(t)}function Kc(n){const t=c(n).createProgram();return p(t)?0:_(t)}function Qc(n){const t=c(n).createRenderbuffer();return p(t)?0:_(t)}function Nc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:_(e)}function Xc(n){const t=c(n).createTexture();return p(t)?0:_(t)}function Yc(n,t){c(n).cullFace(t>>>0)}function Hc(n,t){c(n).deleteBuffer(c(t))}function Jc(n,t){c(n).deleteFramebuffer(c(t))}function Zc(n,t){c(n).deleteProgram(c(t))}function $c(n,t){c(n).deleteRenderbuffer(c(t))}function ni(n,t){c(n).deleteShader(c(t))}function ti(n,t){c(n).deleteTexture(c(t))}function ei(n,t){c(n).depthFunc(t>>>0)}function ri(n,t){c(n).depthMask(0!==t)}function ui(n,t,e){c(n).depthRange(t,e)}function fi(n,t){c(n).disable(t>>>0)}function ci(n,t){c(n).disableVertexAttribArray(t>>>0)}function ii(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function oi(n,t){c(n).enable(t>>>0)}function _i(n,t){c(n).enableVertexAttribArray(t>>>0)}function di(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ai(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function bi(n,t){c(n).frontFace(t>>>0)}function gi(){return V((function(n,t){return _(c(n).getParameter(t>>>0))}),arguments)}function wi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function si(n,t,e){return _(c(n).getProgramParameter(c(t),e>>>0))}function li(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function mi(n,t,e){return _(c(n).getShaderParameter(c(t),e>>>0))}function pi(n,t,e,r){const u=c(n).getUniformLocation(c(t),g(e,r));return p(u)?0:_(u)}function hi(n,t){c(n).linkProgram(c(t))}function xi(n,t,e){c(n).pixelStorei(t>>>0,e)}function yi(n,t,e){c(n).polygonOffset(t,e)}function Si(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function ki(n,t,e,r,u){c(n).scissor(t,e,r,u)}function vi(n,t,e,r){c(n).shaderSource(c(t),g(e,r))}function Bi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Pi(n,t){c(n).stencilMask(t>>>0)}function Ii(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function ji(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ai(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Di(n,t,e){c(n).uniform1f(c(t),e)}function Ti(n,t,e){c(n).uniform1i(c(t),e)}function Ci(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Mi(n,t){c(n).useProgram(c(t))}function Fi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Ei(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ri(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Li(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Oi(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function Gi(){return V((function(n,t,e,u){const f=m(c(t).getPropertyValue(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Vi(){return V((function(n,t,e,u){const f=m(c(t).removeProperty(g(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Wi(){return V((function(n,t,e,r,u){c(n).setProperty(g(t,e),g(r,u))}),arguments)}function qi(){return V((function(n){return _(new IntersectionObserver(c(n)))}),arguments)}function zi(n){c(n).disconnect()}function Ui(n,t){c(n).observe(c(t))}function Ki(){return V((function(n,t){return _(c(n).appendChild(c(t)))}),arguments)}function Qi(n,t){return c(n).contains(c(t))}function Ni(n,t){const e=c(n)[t>>>0];return p(e)?0:_(e)}function Xi(n,t){c(n).drawBuffersWEBGL(c(t))}function Yi(n){return c(n).videoWidth}function Hi(n){return c(n).videoHeight}function Ji(n){return _(c(n).port1)}function Zi(n){return _(c(n).port2)}function $i(){return V((function(){return _(new MessageChannel)}),arguments)}function no(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function to(n){return c(n).isIntersecting}function eo(n){return _(c(n).contentRect)}function ro(n){return _(c(n).devicePixelContentBoxSize)}function uo(n){return c(n).inlineSize}function fo(n){return c(n).blockSize}function co(n){console.debug(c(n))}function io(n){console.error(c(n))}function oo(n,t){console.error(c(n),c(t))}function _o(n){console.info(c(n))}function ao(n){console.log(c(n))}function bo(n){console.warn(c(n))}function go(n){return _(c(n).signal)}function wo(){return V((function(){return _(new AbortController)}),arguments)}function so(n){c(n).abort()}function lo(n){c(n).close()}function mo(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function po(n){c(n).start()}function ho(n){return c(n).width}function xo(n){return c(n).height}function yo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function So(n){return c(n).width}function ko(n,t){c(n).width=t>>>0}function vo(n){return c(n).height}function Bo(n,t){c(n).height=t>>>0}function Po(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function Io(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function jo(n){return c(n).width}function Ao(n){return c(n).height}function Do(n){return c(n).altKey}function To(n){return c(n).ctrlKey}function Co(n){return c(n).shiftKey}function Mo(n){return c(n).metaKey}function Fo(n){return c(n).location}function Eo(n){return c(n).repeat}function Ro(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Lo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Oo(n){return c(n).width}function Go(n,t){c(n).width=t>>>0}function Vo(n){return c(n).height}function Wo(n,t){c(n).height=t>>>0}function qo(){return V((function(n,t,e){const r=c(n).getContext(g(t,e));return p(r)?0:_(r)}),arguments)}function zo(){return V((function(n,t,e,r){const u=c(n).getContext(g(t,e),c(r));return p(u)?0:_(u)}),arguments)}function Uo(n){return c(n).persisted}function Ko(){return V((function(n,t,e,r){c(n).addEventListener(g(t,e),c(r))}),arguments)}function Qo(){return V((function(n,t,e,r){c(n).removeEventListener(g(t,e),c(r))}),arguments)}function No(){return V((function(n){return _(new ResizeObserver(c(n)))}),arguments)}function Xo(n){c(n).disconnect()}function Yo(n,t){c(n).observe(c(t))}function Ho(n,t,e){c(n).observe(c(t),c(e))}function Jo(n,t){c(n).unobserve(c(t))}function Zo(n){return c(n).deltaX}function $o(n){return c(n).deltaY}function n_(n){return c(n).deltaMode}function t_(n,t){c(n).bindVertexArrayOES(c(t))}function e_(n){const t=c(n).createVertexArrayOES();return p(t)?0:_(t)}function r_(n,t){c(n).deleteVertexArrayOES(c(t))}function u_(n){const t=c(n).getSupportedProfiles();return p(t)?0:_(t)}function f_(n){c(n).preventDefault()}function c_(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function i_(n){return c(n).matches}function o_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function __(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function d_(n){return c(n).ctrlKey}function a_(n){return c(n).shiftKey}function b_(n){return c(n).altKey}function g_(n){return c(n).metaKey}function w_(n){return c(n).button}function s_(n){return c(n).buttons}function l_(n){return c(n).movementX}function m_(n){return c(n).movementY}function p_(n){return c(n).pointerId}function h_(n){return c(n).pressure}function x_(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function y_(n){return _(c(n).getCoalescedEvents())}function S_(n,t){return _(c(n)[t>>>0])}function k_(n){return c(n).length}function v_(){return _(new Array)}function B_(n,t){return _(new Function(g(n,t)))}function P_(){return V((function(n,t){return _(c(n).call(c(t)))}),arguments)}function I_(){return _(new Object)}function j_(){return V((function(){return _(self.self)}),arguments)}function A_(){return V((function(){return _(window.window)}),arguments)}function D_(){return V((function(){return _(globalThis.globalThis)}),arguments)}function T_(){return V((function(){return _(global.global)}),arguments)}function C_(n,t,e){return c(n).includes(c(t),e)}function M_(n){return _(Array.of(c(n)))}function F_(n,t){return c(n).push(c(t))}function E_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function R_(n,t){return _(Object.getOwnPropertyDescriptor(c(n),c(t)))}function L_(n,t){return Object.is(c(n),c(t))}function O_(n){return _(c(n).valueOf())}function G_(n){return _(Promise.resolve(c(n)))}function V_(n,t){return _(c(n).catch(c(t)))}function W_(n,t){return _(c(n).then(c(t)))}function q_(n,t,e){return _(c(n).then(c(t),c(e)))}function z_(n){return _(c(n).buffer)}function U_(n,t,e){return _(new Int8Array(c(n),t>>>0,e>>>0))}function K_(n,t,e){return _(new Int16Array(c(n),t>>>0,e>>>0))}function Q_(n,t,e){return _(new Int32Array(c(n),t>>>0,e>>>0))}function N_(n,t,e){return _(new Uint8Array(c(n),t>>>0,e>>>0))}function X_(n){return _(new Uint8Array(c(n)))}function Y_(n,t,e){c(n).set(c(t),e>>>0)}function H_(n){return c(n).length}function J_(n,t,e){return _(new Uint16Array(c(n),t>>>0,e>>>0))}function Z_(n,t,e){return _(new Uint32Array(c(n),t>>>0,e>>>0))}function $_(n,t,e){return _(new Float32Array(c(n),t>>>0,e>>>0))}function nd(n){return _(c(n).buffer)}function td(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ed(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;x()[n/4+1]=u,x()[n/4+0]=e}function rd(n,t){throw new Error(g(n,t))}function ud(){return _(r.memory)}function fd(n,t,e){return _(k(n,t,9,v))}function cd(n,t,e){return _(k(n,t,9,v))}function id(n,t,e){return _(k(n,t,9,v))}function od(n,t,e){return _(k(n,t,9,B))}function _d(n,t,e){return _(k(n,t,9,v))}function dd(n,t,e){return _(k(n,t,9,P))}function ad(n,t,e){return _(k(n,t,9,v))}function bd(n,t,e){return _(k(n,t,209,I))}function gd(n,t,e){return _(k(n,t,209,I))}function wd(n,t,e){return _(k(n,t,209,I))}function sd(n,t,e){return _(k(n,t,209,j))}function ld(n,t,e){return _(k(n,t,209,A))}function md(n,t,e){return _(k(n,t,209,I))}function pd(n,t,e){return _(k(n,t,209,I))}function hd(n,t,e){return _(k(n,t,636,D))}function xd(n,t,e){return _(k(n,t,636,D))}function yd(n,t,e){return _(k(n,t,636,T))}function Sd(n,t,e){return _(k(n,t,636,D))}function kd(n,t,e){return _(k(n,t,636,D))}function vd(n,t,e){return _(k(n,t,636,D))}function Bd(n,t,e){return _(k(n,t,636,D))}function Pd(n,t,e){return _(k(n,t,1775,C))}function Id(n,t,e){return _(k(n,t,1775,C))}function jd(n,t,e){return _(k(n,t,1953,M))}}).call(this,e(260)(n))},424:function(n,t,e){"use strict";e.r(t);var r=e(425),u=e(255);e.d(t,"__wbg_set_wasm",(function(){return u.ui})),e.d(t,"run",(function(){return u.il})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.el})),e.d(t,"__wbindgen_cb_drop",(function(){return u.xk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Zk})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.dl})),e.d(t,"__wbindgen_string_new",(function(){return u.gl})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Bg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Gi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Nd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Pg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Qg})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.nk})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.ih})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Oh})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.ke})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Fh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Ih})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Sg})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ok})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Gh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Nh})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.fh})),e.d(t,"__wbindgen_number_new",(function(){return u.cl})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Tg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Kg})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.ff})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.hf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.gf})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Fi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.Yj})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.Zc})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.ve})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Cf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.Wj})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.ld})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.kd})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Jd})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.ei})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.Xh})),e.d(t,"__wbindgen_string_get",(function(){return u.fl})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.he})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.df})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.Ue})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.ze})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Ch})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.ge})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.kg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Sd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.Vd})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.Wh})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.Uh})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.xd})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.vd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.zd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.bi})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.ci})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.gi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.oi})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.ni})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Qd})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.vf})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.ph})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Bf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.xi})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Qb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Ub})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Vb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Wb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.ac})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.dc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.fc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.gc})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.kc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.lc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.pc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.ad})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.bh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.jh})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.tc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.bd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.mj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.Rg})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.rf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.wf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.ig})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Eb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.re})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.uh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.jg})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Id})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Od})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.Zh})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.ji})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.ki})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.ri})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.Yh})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.yd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.wd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Ad})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.ai})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.di})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.qi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.pi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.le})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.qf})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.o})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.q})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.gb})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.hb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Ib})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Jb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Ob})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Pb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Ud})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Td})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.Jh})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Md})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.Ve})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.Zf})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.ag})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.bg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.Yf})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Ff})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Gf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.Qf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.Tf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.Uf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.dg})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.cg})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.Vf})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.gg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Hf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.eg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.fg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.pg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.og})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.Sf})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Jf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.If})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Of})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Kf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Lf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Nf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.Pf})),e.d(t,"__wbindgen_is_object",(function(){return u.Yk})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Eh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Pd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.uf})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.lg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.uk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.vk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Kb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.Ri})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.oh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.nh})),e.d(t,"__wbindgen_is_function",(function(){return u.Xk})),e.d(t,"__wbindgen_boolean_get",(function(){return u.wk})),e.d(t,"__wbindgen_number_get",(function(){return u.bl})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.kf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.ib})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.jb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.kb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.sb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.zb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Db})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Hb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Nb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.ec})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.jc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.sc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Fc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Ic})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Lc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Pc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.od})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.sd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.ud})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Hd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Rd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.be})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ie})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.mf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.qh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.rh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.th})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.yh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Lh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Mh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Si})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ui})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Xi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Yi})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.cj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.dj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Zi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.bj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.ej})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.hj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.gj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.ij})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.fj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.jj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.rj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.sj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.uj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.wj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.xj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Aj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Bj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Ej})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Hj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Ij})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Jj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Lj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Mj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Nj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Pj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Qj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Vj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.dk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.ek})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.qb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.ob})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.wb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.bc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.hc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.nc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.oc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Gc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Jc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Mc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Vc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Yc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.pd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Xd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ae})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.de})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.yf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Wg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.ah})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Ah})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Ph})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Bi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Ji})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Mi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Ki})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Oi})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Vi})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.oj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.qj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Cj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Zj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.fk})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.kk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.lf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.md})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.tg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.dd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Df})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Hh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Dh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.pb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.mi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.li})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.lk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.fe})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Xb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.mh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.lh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Sh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.hi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.sg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Qi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Wd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Ab})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.sh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.aj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.tj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.vj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.yj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.zj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Fj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Kj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Oj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Tj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.rb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.lb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.nb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.vb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.xb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Lb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Sb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Yb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.ic})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.mc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.qc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.wc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.zc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Bc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Dc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Tc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Xc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.gd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.ed})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.qd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Fd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Dd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.Zd})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ee})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.xf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Vg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Zg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.zh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Qh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Ai})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Ii})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ni})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Li})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Pi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Wi})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.nj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.pj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Dj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.ak})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.gk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.jk})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.nd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.td})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.ck})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.xh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.ii})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.xg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.jd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Lg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Fb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.rd})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.ik})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.hk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.ch})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.dh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.wg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ce})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.nf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Gb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.cd})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.yc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Ld})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Kd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Af})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.mk})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ei})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.ug})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.tb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.eh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Hi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.qk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.if})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.sk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.yi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.wi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.pk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Di})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.mg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.zf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Bh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.pf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.ub})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.rk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.zi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.vi})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Ug})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.vh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.yg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.id})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Mg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Ng})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Xj})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Rc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Sc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Qc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.rc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Oc})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.hh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.hg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Ef})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.wh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.uc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Ci})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.ng})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.qg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.rg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Xg})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.gh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Yg})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.je})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.tf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.vg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Cg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Ag})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Rh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.tk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Og})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.kh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.jf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.of})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.bk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Kh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.kj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.lj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Eg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Fg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Jg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.zg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ti})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.sf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Dg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Gg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.si})),e.d(t,"__wbindgen_debug_string",(function(){return u.Wk})),e.d(t,"__wbindgen_throw",(function(){return u.hl})),e.d(t,"__wbindgen_memory",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper564",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper565",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper566",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper567",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper568",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper569",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper570",(function(){return u.Ok})),e.d(t,"__wbindgen_closure_wrapper939",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper940",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper941",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper942",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper943",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper944",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper945",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper1846",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper1847",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper1848",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper1849",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper1850",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper1851",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper1852",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper3927",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper3929",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper4662",(function(){return u.Hk})),Object(u.ui)(r),r.__wbindgen_start()},425:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(255);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/36.451d33ac.js b/assets/js/36.451d33ac.js deleted file mode 100644 index 8e239ff23..000000000 --- a/assets/js/36.451d33ac.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{255:function(n,t,e){"use strict";(function(n){e.d(t,"ji",(function(){return u})),e.d(t,"Xk",(function(){return F})),e.d(t,"Tk",(function(){return W})),e.d(t,"mk",(function(){return q})),e.d(t,"Ok",(function(){return z})),e.d(t,"Vk",(function(){return U})),e.d(t,"Sk",(function(){return K})),e.d(t,"sg",(function(){return Q})),e.d(t,"vi",(function(){return X})),e.d(t,"Od",(function(){return N})),e.d(t,"Gg",(function(){return Y})),e.d(t,"Hg",(function(){return H})),e.d(t,"le",(function(){return J})),e.d(t,"uh",(function(){return Z})),e.d(t,"Dh",(function(){return $})),e.d(t,"xh",(function(){return nn})),e.d(t,"Ig",(function(){return tn})),e.d(t,"Yg",(function(){return en})),e.d(t,"bk",(function(){return rn})),e.d(t,"b",(function(){return un})),e.d(t,"Vg",(function(){return fn})),e.d(t,"vh",(function(){return cn})),e.d(t,"Ch",(function(){return on})),e.d(t,"Rk",(function(){return _n})),e.d(t,"ck",(function(){return dn})),e.d(t,"Jg",(function(){return an})),e.d(t,"Bg",(function(){return bn})),e.d(t,"ef",(function(){return gn})),e.d(t,"df",(function(){return wn})),e.d(t,"Ue",(function(){return sn})),e.d(t,"Rd",(function(){return ln})),e.d(t,"sf",(function(){return mn})),e.d(t,"th",(function(){return pn})),e.d(t,"Fb",(function(){return hn})),e.d(t,"re",(function(){return xn})),e.d(t,"gf",(function(){return yn})),e.d(t,"cg",(function(){return Sn})),e.d(t,"ff",(function(){return kn})),e.d(t,"ve",(function(){return vn})),e.d(t,"Tf",(function(){return Bn})),e.d(t,"Uf",(function(){return Pn})),e.d(t,"Vf",(function(){return jn})),e.d(t,"Sf",(function(){return In})),e.d(t,"Bf",(function(){return An})),e.d(t,"Cf",(function(){return Dn})),e.d(t,"Lf",(function(){return Tn})),e.d(t,"Kf",(function(){return Cn})),e.d(t,"Nf",(function(){return Mn})),e.d(t,"Of",(function(){return Fn})),e.d(t,"Qf",(function(){return En})),e.d(t,"Rf",(function(){return Rn})),e.d(t,"Xf",(function(){return Ln})),e.d(t,"Wf",(function(){return On})),e.d(t,"Pf",(function(){return Gn})),e.d(t,"gg",(function(){return Vn})),e.d(t,"fg",(function(){return Wn})),e.d(t,"ag",(function(){return qn})),e.d(t,"Df",(function(){return zn})),e.d(t,"Yf",(function(){return Un})),e.d(t,"Zf",(function(){return Kn})),e.d(t,"Mf",(function(){return Qn})),e.d(t,"If",(function(){return Xn})),e.d(t,"Ef",(function(){return Nn})),e.d(t,"Ff",(function(){return Yn})),e.d(t,"Gf",(function(){return Hn})),e.d(t,"Hf",(function(){return Jn})),e.d(t,"Jf",(function(){return Zn})),e.d(t,"Md",(function(){return $n})),e.d(t,"Uk",(function(){return nt})),e.d(t,"Ve",(function(){return tt})),e.d(t,"fh",(function(){return et})),e.d(t,"Nk",(function(){return rt})),e.d(t,"a",(function(){return ut})),e.d(t,"c",(function(){return ft})),e.d(t,"rh",(function(){return ct})),e.d(t,"ze",(function(){return it})),e.d(t,"Qd",(function(){return ot})),e.d(t,"tf",(function(){return _t})),e.d(t,"mc",(function(){return dt})),e.d(t,"Rb",(function(){return at})),e.d(t,"Sb",(function(){return bt})),e.d(t,"bc",(function(){return gt})),e.d(t,"hc",(function(){return wt})),e.d(t,"Xb",(function(){return st})),e.d(t,"Vb",(function(){return lt})),e.d(t,"qc",(function(){return mt})),e.d(t,"lc",(function(){return pt})),e.d(t,"ec",(function(){return ht})),e.d(t,"Wb",(function(){return xt})),e.d(t,"gc",(function(){return yt})),e.d(t,"ad",(function(){return St})),e.d(t,"mi",(function(){return kt})),e.d(t,"Zg",(function(){return vt})),e.d(t,"Rg",(function(){return Bt})),e.d(t,"yf",(function(){return Pt})),e.d(t,"Kj",(function(){return jt})),e.d(t,"uc",(function(){return It})),e.d(t,"cd",(function(){return At})),e.d(t,"bd",(function(){return Dt})),e.d(t,"he",(function(){return Tt})),e.d(t,"ie",(function(){return Ct})),e.d(t,"Jb",(function(){return Mt})),e.d(t,"Kb",(function(){return Ft})),e.d(t,"Pb",(function(){return Et})),e.d(t,"Qb",(function(){return Rt})),e.d(t,"o",(function(){return Lt})),e.d(t,"Kd",(function(){return Ot})),e.d(t,"q",(function(){return Gt})),e.d(t,"Jd",(function(){return Vt})),e.d(t,"pf",(function(){return Wt})),e.d(t,"Wd",(function(){return qt})),e.d(t,"Td",(function(){return zt})),e.d(t,"hb",(function(){return Ut})),e.d(t,"gb",(function(){return Kt})),e.d(t,"kk",(function(){return Qt})),e.d(t,"yh",(function(){return Xt})),e.d(t,"Vd",(function(){return Nt})),e.d(t,"Ud",(function(){return Yt})),e.d(t,"ik",(function(){return Ht})),e.d(t,"Mj",(function(){return Jt})),e.d(t,"ui",(function(){return Zt})),e.d(t,"jk",(function(){return $t})),e.d(t,"Lb",(function(){return ne})),e.d(t,"Th",(function(){return te})),e.d(t,"Nh",(function(){return ee})),e.d(t,"Ih",(function(){return re})),e.d(t,"md",(function(){return ue})),e.d(t,"ld",(function(){return fe})),e.d(t,"Uh",(function(){return ce})),e.d(t,"Jh",(function(){return ie})),e.d(t,"Lh",(function(){return oe})),e.d(t,"Qh",(function(){return _e})),e.d(t,"Sh",(function(){return de})),e.d(t,"ei",(function(){return ae})),e.d(t,"ci",(function(){return be})),e.d(t,"Cd",(function(){return ge})),e.d(t,"zd",(function(){return we})),e.d(t,"Bd",(function(){return se})),e.d(t,"xd",(function(){return le})),e.d(t,"Vh",(function(){return me})),e.d(t,"Kh",(function(){return pe})),e.d(t,"Mh",(function(){return he})),e.d(t,"Ph",(function(){return xe})),e.d(t,"Rh",(function(){return ye})),e.d(t,"fi",(function(){return Se})),e.d(t,"di",(function(){return ke})),e.d(t,"Dd",(function(){return ve})),e.d(t,"yd",(function(){return Be})),e.d(t,"Ad",(function(){return Pe})),e.d(t,"wd",(function(){return je})),e.d(t,"Oh",(function(){return Ie})),e.d(t,"Yh",(function(){return Ae})),e.d(t,"gi",(function(){return De})),e.d(t,"Zh",(function(){return Te})),e.d(t,"Pd",(function(){return Ce})),e.d(t,"Gi",(function(){return Me})),e.d(t,"dh",(function(){return Fe})),e.d(t,"eh",(function(){return Ee})),e.d(t,"Mk",(function(){return Re})),e.d(t,"lk",(function(){return Le})),e.d(t,"Qk",(function(){return Oe})),e.d(t,"jf",(function(){return Ge})),e.d(t,"p",(function(){return Ve})),e.d(t,"t",(function(){return We})),e.d(t,"A",(function(){return qe})),e.d(t,"E",(function(){return ze})),e.d(t,"P",(function(){return Ue})),e.d(t,"S",(function(){return Ke})),e.d(t,"V",(function(){return Qe})),e.d(t,"W",(function(){return Xe})),e.d(t,"ib",(function(){return Ne})),e.d(t,"jb",(function(){return Ye})),e.d(t,"tb",(function(){return He})),e.d(t,"Cb",(function(){return Je})),e.d(t,"Ab",(function(){return Ze})),e.d(t,"Db",(function(){return $e})),e.d(t,"Eb",(function(){return nr})),e.d(t,"Ib",(function(){return tr})),e.d(t,"Ob",(function(){return er})),e.d(t,"fc",(function(){return rr})),e.d(t,"kc",(function(){return ur})),e.d(t,"tc",(function(){return fr})),e.d(t,"Gc",(function(){return cr})),e.d(t,"Jc",(function(){return ir})),e.d(t,"Mc",(function(){return or})),e.d(t,"Qc",(function(){return _r})),e.d(t,"pd",(function(){return dr})),e.d(t,"td",(function(){return ar})),e.d(t,"vd",(function(){return br})),e.d(t,"Id",(function(){return gr})),e.d(t,"Sd",(function(){return wr})),e.d(t,"ce",(function(){return sr})),e.d(t,"je",(function(){return lr})),e.d(t,"ue",(function(){return mr})),e.d(t,"Fe",(function(){return pr})),e.d(t,"Me",(function(){return hr})),e.d(t,"Ne",(function(){return xr})),e.d(t,"lf",(function(){return yr})),e.d(t,"gh",(function(){return Sr})),e.d(t,"hh",(function(){return kr})),e.d(t,"jh",(function(){return vr})),e.d(t,"nh",(function(){return Br})),e.d(t,"Ah",(function(){return Pr})),e.d(t,"Bh",(function(){return jr})),e.d(t,"Hi",(function(){return Ir})),e.d(t,"Ji",(function(){return Ar})),e.d(t,"Mi",(function(){return Dr})),e.d(t,"Ni",(function(){return Tr})),e.d(t,"Ri",(function(){return Cr})),e.d(t,"Si",(function(){return Mr})),e.d(t,"Oi",(function(){return Fr})),e.d(t,"Qi",(function(){return Er})),e.d(t,"Ti",(function(){return Rr})),e.d(t,"Wi",(function(){return Lr})),e.d(t,"Vi",(function(){return Or})),e.d(t,"Xi",(function(){return Gr})),e.d(t,"Ui",(function(){return Vr})),e.d(t,"Yi",(function(){return Wr})),e.d(t,"fj",(function(){return qr})),e.d(t,"gj",(function(){return zr})),e.d(t,"ij",(function(){return Ur})),e.d(t,"kj",(function(){return Kr})),e.d(t,"lj",(function(){return Qr})),e.d(t,"oj",(function(){return Xr})),e.d(t,"pj",(function(){return Nr})),e.d(t,"sj",(function(){return Yr})),e.d(t,"vj",(function(){return Hr})),e.d(t,"wj",(function(){return Jr})),e.d(t,"xj",(function(){return Zr})),e.d(t,"zj",(function(){return $r})),e.d(t,"Aj",(function(){return nu})),e.d(t,"Bj",(function(){return tu})),e.d(t,"Dj",(function(){return eu})),e.d(t,"Ej",(function(){return ru})),e.d(t,"Fj",(function(){return uu})),e.d(t,"Gj",(function(){return fu})),e.d(t,"Ij",(function(){return cu})),e.d(t,"Jj",(function(){return iu})),e.d(t,"Rj",(function(){return ou})),e.d(t,"Sj",(function(){return _u})),e.d(t,"g",(function(){return du})),e.d(t,"m",(function(){return au})),e.d(t,"s",(function(){return bu})),e.d(t,"v",(function(){return gu})),e.d(t,"w",(function(){return wu})),e.d(t,"y",(function(){return su})),e.d(t,"B",(function(){return lu})),e.d(t,"F",(function(){return mu})),e.d(t,"J",(function(){return pu})),e.d(t,"H",(function(){return hu})),e.d(t,"N",(function(){return xu})),e.d(t,"L",(function(){return yu})),e.d(t,"rb",(function(){return Su})),e.d(t,"lb",(function(){return ku})),e.d(t,"nb",(function(){return vu})),e.d(t,"pb",(function(){return Bu})),e.d(t,"xb",(function(){return Pu})),e.d(t,"zb",(function(){return ju})),e.d(t,"Nb",(function(){return Iu})),e.d(t,"Ub",(function(){return Au})),e.d(t,"ac",(function(){return Du})),e.d(t,"cc",(function(){return Tu})),e.d(t,"ic",(function(){return Cu})),e.d(t,"oc",(function(){return Mu})),e.d(t,"pc",(function(){return Fu})),e.d(t,"yc",(function(){return Eu})),e.d(t,"Bc",(function(){return Ru})),e.d(t,"Dc",(function(){return Lu})),e.d(t,"Fc",(function(){return Ou})),e.d(t,"Hc",(function(){return Gu})),e.d(t,"Kc",(function(){return Vu})),e.d(t,"Nc",(function(){return Wu})),e.d(t,"Vc",(function(){return qu})),e.d(t,"Wc",(function(){return zu})),e.d(t,"Zc",(function(){return Uu})),e.d(t,"id",(function(){return Ku})),e.d(t,"gd",(function(){return Qu})),e.d(t,"qd",(function(){return Xu})),e.d(t,"Hd",(function(){return Nu})),e.d(t,"Fd",(function(){return Yu})),e.d(t,"Yd",(function(){return Hu})),e.d(t,"be",(function(){return Ju})),e.d(t,"ee",(function(){return Zu})),e.d(t,"te",(function(){return $u})),e.d(t,"ye",(function(){return nf})),e.d(t,"Ae",(function(){return tf})),e.d(t,"De",(function(){return ef})),e.d(t,"He",(function(){return rf})),e.d(t,"Ie",(function(){return uf})),e.d(t,"Ke",(function(){return ff})),e.d(t,"Oe",(function(){return cf})),e.d(t,"vf",(function(){return of})),e.d(t,"Mg",(function(){return _f})),e.d(t,"Qg",(function(){return df})),e.d(t,"ph",(function(){return af})),e.d(t,"Eh",(function(){return bf})),e.d(t,"qi",(function(){return gf})),e.d(t,"yi",(function(){return wf})),e.d(t,"Bi",(function(){return sf})),e.d(t,"zi",(function(){return lf})),e.d(t,"Di",(function(){return mf})),e.d(t,"Ki",(function(){return pf})),e.d(t,"cj",(function(){return hf})),e.d(t,"ej",(function(){return xf})),e.d(t,"qj",(function(){return yf})),e.d(t,"Nj",(function(){return Sf})),e.d(t,"Tj",(function(){return kf})),e.d(t,"Yj",(function(){return vf})),e.d(t,"kf",(function(){return Bf})),e.d(t,"nd",(function(){return Pf})),e.d(t,"kg",(function(){return jf})),e.d(t,"ed",(function(){return If})),e.d(t,"eb",(function(){return Af})),e.d(t,"me",(function(){return Df})),e.d(t,"zf",(function(){return Tf})),e.d(t,"wh",(function(){return Cf})),e.d(t,"db",(function(){return Mf})),e.d(t,"sh",(function(){return Ff})),e.d(t,"qb",(function(){return Ef})),e.d(t,"bi",(function(){return Rf})),e.d(t,"ai",(function(){return Lf})),e.d(t,"R",(function(){return Of})),e.d(t,"Zj",(function(){return Gf})),e.d(t,"e",(function(){return Vf})),e.d(t,"ge",(function(){return Wf})),e.d(t,"Yb",(function(){return qf})),e.d(t,"se",(function(){return zf})),e.d(t,"ch",(function(){return Uf})),e.d(t,"bh",(function(){return Kf})),e.d(t,"Hh",(function(){return Qf})),e.d(t,"Wh",(function(){return Xf})),e.d(t,"jg",(function(){return Nf})),e.d(t,"Fi",(function(){return Yf})),e.d(t,"Xd",(function(){return Hf})),e.d(t,"U",(function(){return Jf})),e.d(t,"T",(function(){return Zf})),e.d(t,"X",(function(){return $f})),e.d(t,"Bb",(function(){return nc})),e.d(t,"ih",(function(){return tc})),e.d(t,"Ii",(function(){return ec})),e.d(t,"Pi",(function(){return rc})),e.d(t,"hj",(function(){return uc})),e.d(t,"jj",(function(){return fc})),e.d(t,"mj",(function(){return cc})),e.d(t,"nj",(function(){return ic})),e.d(t,"tj",(function(){return oc})),e.d(t,"uj",(function(){return _c})),e.d(t,"yj",(function(){return dc})),e.d(t,"Cj",(function(){return ac})),e.d(t,"Hj",(function(){return bc})),e.d(t,"f",(function(){return gc})),e.d(t,"n",(function(){return wc})),e.d(t,"r",(function(){return sc})),e.d(t,"u",(function(){return lc})),e.d(t,"x",(function(){return mc})),e.d(t,"z",(function(){return pc})),e.d(t,"C",(function(){return hc})),e.d(t,"G",(function(){return xc})),e.d(t,"K",(function(){return yc})),e.d(t,"I",(function(){return Sc})),e.d(t,"O",(function(){return kc})),e.d(t,"M",(function(){return vc})),e.d(t,"sb",(function(){return Bc})),e.d(t,"kb",(function(){return Pc})),e.d(t,"mb",(function(){return jc})),e.d(t,"ob",(function(){return Ic})),e.d(t,"wb",(function(){return Ac})),e.d(t,"yb",(function(){return Dc})),e.d(t,"Mb",(function(){return Tc})),e.d(t,"Tb",(function(){return Cc})),e.d(t,"Zb",(function(){return Mc})),e.d(t,"dc",(function(){return Fc})),e.d(t,"jc",(function(){return Ec})),e.d(t,"nc",(function(){return Rc})),e.d(t,"rc",(function(){return Lc})),e.d(t,"xc",(function(){return Oc})),e.d(t,"Ac",(function(){return Gc})),e.d(t,"Cc",(function(){return Vc})),e.d(t,"Ec",(function(){return Wc})),e.d(t,"Ic",(function(){return qc})),e.d(t,"Lc",(function(){return zc})),e.d(t,"Oc",(function(){return Uc})),e.d(t,"Uc",(function(){return Kc})),e.d(t,"Xc",(function(){return Qc})),e.d(t,"Yc",(function(){return Xc})),e.d(t,"hd",(function(){return Nc})),e.d(t,"fd",(function(){return Yc})),e.d(t,"rd",(function(){return Hc})),e.d(t,"Gd",(function(){return Jc})),e.d(t,"Ed",(function(){return Zc})),e.d(t,"Zd",(function(){return $c})),e.d(t,"ae",(function(){return ni})),e.d(t,"fe",(function(){return ti})),e.d(t,"xe",(function(){return ei})),e.d(t,"Be",(function(){return ri})),e.d(t,"Ce",(function(){return ui})),e.d(t,"Ge",(function(){return fi})),e.d(t,"Je",(function(){return ci})),e.d(t,"Pe",(function(){return ii})),e.d(t,"uf",(function(){return oi})),e.d(t,"Lg",(function(){return _i})),e.d(t,"Pg",(function(){return di})),e.d(t,"oh",(function(){return ai})),e.d(t,"Fh",(function(){return bi})),e.d(t,"pi",(function(){return gi})),e.d(t,"xi",(function(){return wi})),e.d(t,"Ci",(function(){return si})),e.d(t,"Ai",(function(){return li})),e.d(t,"Ei",(function(){return mi})),e.d(t,"Li",(function(){return pi})),e.d(t,"bj",(function(){return hi})),e.d(t,"dj",(function(){return xi})),e.d(t,"rj",(function(){return yi})),e.d(t,"Oj",(function(){return Si})),e.d(t,"Uj",(function(){return ki})),e.d(t,"Xj",(function(){return vi})),e.d(t,"Ee",(function(){return Bi})),e.d(t,"mh",(function(){return Pi})),e.d(t,"Xh",(function(){return ji})),e.d(t,"ek",(function(){return Ii})),e.d(t,"Xe",(function(){return Ai})),e.d(t,"Wj",(function(){return Di})),e.d(t,"Vj",(function(){return Ti})),e.d(t,"dk",(function(){return Ci})),e.d(t,"Ze",(function(){return Mi})),e.d(t,"sd",(function(){return Fi})),e.d(t,"ti",(function(){return Ei})),e.d(t,"lg",(function(){return Ri})),e.d(t,"d",(function(){return Li})),e.d(t,"mf",(function(){return Oi})),e.d(t,"Ng",(function(){return Gi})),e.d(t,"Wg",(function(){return Vi})),e.d(t,"Og",(function(){return Wi})),e.d(t,"ke",(function(){return qi})),e.d(t,"Xg",(function(){return zi})),e.d(t,"bg",(function(){return Ui})),e.d(t,"Af",(function(){return Ki})),e.d(t,"i",(function(){return Qi})),e.d(t,"lh",(function(){return Xi})),e.d(t,"vc",(function(){return Ni})),e.d(t,"ri",(function(){return Yi})),e.d(t,"j",(function(){return Hi})),e.d(t,"eg",(function(){return Ji})),e.d(t,"ab",(function(){return Zi})),e.d(t,"bb",(function(){return $i})),e.d(t,"hg",(function(){return no})),e.d(t,"ig",(function(){return to})),e.d(t,"Sc",(function(){return eo})),e.d(t,"Tc",(function(){return ro})),e.d(t,"Rc",(function(){return uo})),e.d(t,"h",(function(){return fo})),e.d(t,"kh",(function(){return co})),e.d(t,"hf",(function(){return io})),e.d(t,"gk",(function(){return oo})),e.d(t,"ni",(function(){return _o})),e.d(t,"Ye",(function(){return ao})),e.d(t,"li",(function(){return bo})),e.d(t,"pe",(function(){return go})),e.d(t,"qe",(function(){return wo})),e.d(t,"fk",(function(){return so})),e.d(t,"oi",(function(){return lo})),e.d(t,"We",(function(){return mo})),e.d(t,"ki",(function(){return po})),e.d(t,"ne",(function(){return ho})),e.d(t,"oe",(function(){return xo})),e.d(t,"pg",(function(){return yo})),e.d(t,"jd",(function(){return So})),e.d(t,"Dg",(function(){return ko})),e.d(t,"Eg",(function(){return vo})),e.d(t,"Lj",(function(){return Bo})),e.d(t,"Le",(function(){return Po})),e.d(t,"de",(function(){return jo})),e.d(t,"Hb",(function(){return Io})),e.d(t,"dd",(function(){return Ao})),e.d(t,"zc",(function(){return Do})),e.d(t,"Nd",(function(){return To})),e.d(t,"Ld",(function(){return Co})),e.d(t,"bf",(function(){return Mo})),e.d(t,"xf",(function(){return Fo})),e.d(t,"ak",(function(){return Eo})),e.d(t,"Sg",(function(){return Ro})),e.d(t,"Tg",(function(){return Lo})),e.d(t,"ng",(function(){return Oo})),e.d(t,"ub",(function(){return Go})),e.d(t,"Ug",(function(){return Vo})),e.d(t,"wi",(function(){return Wo})),e.d(t,"cf",(function(){return qo})),e.d(t,"Q",(function(){return zo})),e.d(t,"k",(function(){return Uo})),e.d(t,"wc",(function(){return Ko})),e.d(t,"si",(function(){return Qo})),e.d(t,"dg",(function(){return Xo})),e.d(t,"wf",(function(){return No})),e.d(t,"qh",(function(){return Yo})),e.d(t,"of",(function(){return Ho})),e.d(t,"vb",(function(){return Jo})),e.d(t,"Kg",(function(){return Zo})),e.d(t,"od",(function(){return $o})),e.d(t,"ud",(function(){return n_})),e.d(t,"Qj",(function(){return t_})),e.d(t,"og",(function(){return e_})),e.d(t,"kd",(function(){return r_})),e.d(t,"Cg",(function(){return u_})),e.d(t,"l",(function(){return f_})),e.d(t,"Gb",(function(){return c_})),e.d(t,"Qe",(function(){return i_})),e.d(t,"D",(function(){return o_})),e.d(t,"sc",(function(){return __})),e.d(t,"Pc",(function(){return d_})),e.d(t,"Re",(function(){return a_})),e.d(t,"rf",(function(){return b_})),e.d(t,"mg",(function(){return g_})),e.d(t,"tg",(function(){return w_})),e.d(t,"cb",(function(){return s_})),e.d(t,"rg",(function(){return l_})),e.d(t,"Gh",(function(){return m_})),e.d(t,"hk",(function(){return p_})),e.d(t,"Se",(function(){return h_})),e.d(t,"Te",(function(){return x_})),e.d(t,"af",(function(){return y_})),e.d(t,"Fg",(function(){return S_})),e.d(t,"ah",(function(){return k_})),e.d(t,"if",(function(){return v_})),e.d(t,"we",(function(){return B_})),e.d(t,"nf",(function(){return P_})),e.d(t,"Pj",(function(){return j_})),e.d(t,"zh",(function(){return I_})),e.d(t,"fb",(function(){return A_})),e.d(t,"Zi",(function(){return D_})),e.d(t,"aj",(function(){return T_})),e.d(t,"Y",(function(){return C_})),e.d(t,"vg",(function(){return M_})),e.d(t,"yg",(function(){return F_})),e.d(t,"wg",(function(){return E_})),e.d(t,"Ag",(function(){return R_})),e.d(t,"qg",(function(){return L_})),e.d(t,"ii",(function(){return O_})),e.d(t,"qf",(function(){return G_})),e.d(t,"zg",(function(){return V_})),e.d(t,"ug",(function(){return W_})),e.d(t,"xg",(function(){return q_})),e.d(t,"Z",(function(){return z_})),e.d(t,"hi",(function(){return U_})),e.d(t,"Lk",(function(){return K_})),e.d(t,"Wk",(function(){return Q_})),e.d(t,"Pk",(function(){return X_})),e.d(t,"xk",(function(){return N_})),e.d(t,"yk",(function(){return Y_})),e.d(t,"zk",(function(){return H_})),e.d(t,"Ak",(function(){return J_})),e.d(t,"Bk",(function(){return Z_})),e.d(t,"Ck",(function(){return $_})),e.d(t,"Dk",(function(){return nd})),e.d(t,"Ek",(function(){return td})),e.d(t,"Fk",(function(){return ed})),e.d(t,"Gk",(function(){return rd})),e.d(t,"Hk",(function(){return ud})),e.d(t,"Ik",(function(){return fd})),e.d(t,"Jk",(function(){return cd})),e.d(t,"Kk",(function(){return id})),e.d(t,"nk",(function(){return od})),e.d(t,"ok",(function(){return _d})),e.d(t,"pk",(function(){return dd})),e.d(t,"qk",(function(){return ad})),e.d(t,"rk",(function(){return bd})),e.d(t,"sk",(function(){return gd})),e.d(t,"tk",(function(){return wd})),e.d(t,"uk",(function(){return sd})),e.d(t,"vk",(function(){return ld})),e.d(t,"wk",(function(){return md}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});_.decode();let d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}function b(n,t){return n>>>=0,_.decode(a().subarray(n,n+t))}function g(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=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 a().subarray(r,r+e.length).set(e),w=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=l(n,t).written,u=e(u,r,c,1)>>>0}return w=c,u}function p(n){return null==n}let h=null;function x(){return null!==h&&0!==h.byteLength||(h=new Int32Array(r.memory.buffer)),h}let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h01685ab620837abe(n,t,g(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h440de6e5e523466e(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hff0301c7690820a3(n,t,g(e),g(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h05a0ffad16158125(n,t,g(e))}function I(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hbf0e091be681fe6c(n,t,g(e),g(u))}function A(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0f1f9ff8274de43e(n,t)}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,g(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,g(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,g(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,x().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(g(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function z(n){return void 0===c(n)}function U(n,t){return g(b(n,t))}function K(n){return g(c(n))}function Q(){return g(new Error)}function X(n,t){const e=m(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function N(n,t){let e,u;try{e=n,u=t,console.error(b(n,t))}finally{r.__wbindgen_free(e,u,1)}}function Y(n){return c(n).offsetX}function H(n){return c(n).offsetY}function J(n){return g(c(n).getCoalescedEvents)}function Z(n){return g(c(n).requestFullscreen)}function $(n){return g(c(n).scheduler)}function nn(n){return g(c(n).requestIdleCallback)}function tn(n){return g(c(n).onpointerrawupdate)}function en(){return g(ResizeObserverEntry.prototype)}function rn(n){const t=c(n).webkitFullscreenElement;return p(t)?0:g(t)}function un(n){return g(c(n).Window)}function fn(n,t,e){return g(c(n).postTask(c(t),c(e)))}function cn(n){return g(c(n).requestFullscreen())}function on(n){return g(c(n).scheduler)}function _n(n){return g(n)}function dn(n){c(n).webkitRequestFullscreen()}function an(n){return g(c(n).performance)}function bn(n){return c(n).now()}function gn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function wn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function sn(n){return g(c(n).gpu)}function ln(n){return g(c(n).features)}function mn(n){return g(c(n).limits)}function pn(n,t){return g(c(n).requestDevice(c(t)))}function hn(n,t){c(n).configure(c(t))}function xn(n){return g(c(n).getCurrentTexture())}function yn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function Sn(n,t){const e=m(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function kn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function vn(n,t,e){return g(c(n).getMappedRange(t,e))}function Bn(n){return c(n).maxTextureDimension1D}function Pn(n){return c(n).maxTextureDimension2D}function jn(n){return c(n).maxTextureDimension3D}function In(n){return c(n).maxTextureArrayLayers}function An(n){return c(n).maxBindGroups}function Dn(n){return c(n).maxBindingsPerBindGroup}function Tn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Cn(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function Mn(n){return c(n).maxSampledTexturesPerShaderStage}function Fn(n){return c(n).maxSamplersPerShaderStage}function En(n){return c(n).maxStorageBuffersPerShaderStage}function Rn(n){return c(n).maxStorageTexturesPerShaderStage}function Ln(n){return c(n).maxUniformBuffersPerShaderStage}function On(n){return c(n).maxUniformBufferBindingSize}function Gn(n){return c(n).maxStorageBufferBindingSize}function Vn(n){return c(n).minUniformBufferOffsetAlignment}function Wn(n){return c(n).minStorageBufferOffsetAlignment}function qn(n){return c(n).maxVertexBuffers}function zn(n){return c(n).maxBufferSize}function Un(n){return c(n).maxVertexAttributes}function Kn(n){return c(n).maxVertexBufferArrayStride}function Qn(n){return c(n).maxInterStageShaderComponents}function Xn(n){return c(n).maxComputeWorkgroupStorageSize}function Nn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Yn(n){return c(n).maxComputeWorkgroupSizeX}function Hn(n){return c(n).maxComputeWorkgroupSizeY}function Jn(n){return c(n).maxComputeWorkgroupSizeZ}function Zn(n){return c(n).maxComputeWorkgroupsPerDimension}function $n(n){return g(c(n).error)}function nt(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),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function tt(n,t,e){return c(n).has(b(t,e))}function et(n){return g(c(n).queue)}function rt(n){const t=c(n);return"object"==typeof t&&null!==t}function ut(n){return g(c(n).Window)}function ft(n){return g(c(n).WorkerGlobalScope)}function ct(n,t){return g(c(n).requestAdapter(c(t)))}function it(n){return g(c(n).getPreferredCanvasFormat())}function ot(n){return g(c(n).features)}function _t(n){return g(c(n).limits)}function dt(n,t){return g(c(n).createShaderModule(c(t)))}function at(n,t){return g(c(n).createBindGroupLayout(c(t)))}function bt(n,t){return g(c(n).createBindGroup(c(t)))}function gt(n,t){return g(c(n).createPipelineLayout(c(t)))}function wt(n,t){return g(c(n).createRenderPipeline(c(t)))}function st(n,t){return g(c(n).createComputePipeline(c(t)))}function lt(n,t){return g(c(n).createBuffer(c(t)))}function mt(n,t){return g(c(n).createTexture(c(t)))}function pt(n,t){return g(c(n).createSampler(c(t)))}function ht(n,t){return g(c(n).createQuerySet(c(t)))}function xt(n,t){return g(c(n).createCommandEncoder(c(t)))}function yt(n,t){return g(c(n).createRenderBundleEncoder(c(t)))}function St(n){c(n).destroy()}function kt(n,t){c(n).onuncapturederror=c(t)}function vt(n,t){c(n).pushErrorScope(o(t))}function Bt(n){return g(c(n).popErrorScope())}function Pt(n,t,e,r){return g(c(n).mapAsync(t>>>0,e,r))}function jt(n){c(n).unmap()}function It(n,t){return g(c(n).createView(c(t)))}function At(n){c(n).destroy()}function Dt(n){c(n).destroy()}function Tt(n,t){return g(c(n).getBindGroupLayout(t>>>0))}function Ct(n,t){return g(c(n).getBindGroupLayout(t>>>0))}function Mt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Ft(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Et(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Lt(n,t){return g(c(n).beginComputePass(c(t)))}function Ot(n){c(n).end()}function Gt(n,t){return g(c(n).beginRenderPass(c(t)))}function Vt(n){c(n).end()}function Wt(n,t){const e=m(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function qt(n,t){return g(c(n).finish(c(t)))}function zt(n){return g(c(n).finish())}function Ut(n,t,e){c(n).clearBuffer(c(t),e)}function Kt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Qt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Xt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Nt(n){return g(c(n).finish())}function Yt(n,t){return g(c(n).finish(c(t)))}function Ht(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Jt(n){return c(n).usage}function Zt(n){return c(n).size}function $t(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function ne(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function te(n,t){c(n).setPipeline(c(t))}function ee(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function re(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ue(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function fe(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function ce(n,t){c(n).setPipeline(c(t))}function ie(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function oe(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function _e(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function de(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ae(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function be(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function ge(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function we(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function se(n,t,e){c(n).drawIndirect(c(t),e)}function le(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function me(n,t){c(n).setPipeline(c(t))}function pe(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function he(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function xe(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function ye(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Se(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ke(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function ve(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Be(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Pe(n,t,e){c(n).drawIndirect(c(t),e)}function je(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ie(n,t){c(n).setBlendConstant(c(t))}function Ae(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function De(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Te(n,t){c(n).setStencilReference(t>>>0)}function Ce(n,t){c(n).executeBundles(c(t))}function Me(n,t){c(n).submit(c(t))}function Fe(n){queueMicrotask(c(n))}function Ee(n){return g(c(n).queueMicrotask)}function Re(n){return"function"==typeof c(n)}function Le(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Oe(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=p(u)?0:u,x()[n/4+0]=!p(u)}function Ge(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function Ve(n,t,e){c(n).beginQuery(t>>>0,c(e))}function We(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function qe(n,t,e){c(n).bindSampler(t>>>0,c(e))}function ze(n,t){c(n).bindVertexArray(c(t))}function Ue(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function Ke(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Qe(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Xe(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Ne(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function Ye(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function He(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Je(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function Ze(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function $e(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function nr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function tr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function er(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function rr(n){const t=c(n).createQuery();return p(t)?0:g(t)}function ur(n){const t=c(n).createSampler();return p(t)?0:g(t)}function fr(n){const t=c(n).createVertexArray();return p(t)?0:g(t)}function cr(n,t){c(n).deleteQuery(c(t))}function ir(n,t){c(n).deleteSampler(c(t))}function or(n,t){c(n).deleteSync(c(t))}function _r(n,t){c(n).deleteVertexArray(c(t))}function dr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function ar(n,t){c(n).drawBuffers(c(t))}function br(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function gr(n,t){c(n).endQuery(t>>>0)}function wr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return p(r)?0:g(r)}function sr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function lr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function mr(){return O((function(n,t,e){return g(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function pr(n,t,e){return g(c(n).getQueryParameter(c(t),e>>>0))}function hr(n,t,e){return g(c(n).getSyncParameter(c(t),e>>>0))}function xr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),b(e,r))}function yr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Sr(n,t){c(n).readBuffer(t>>>0)}function kr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function vr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Br(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Pr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function jr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Ir(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Ar(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Dr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Tr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Cr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Wr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function qr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function zr(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function Ur(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function Kr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Qr(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Xr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Nr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Yr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Hr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Jr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function Zr(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function $r(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function nu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function cu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function iu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function ou(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function _u(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function du(n,t){c(n).activeTexture(t>>>0)}function au(n,t,e){c(n).attachShader(c(t),c(e))}function bu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,b(r,u))}function gu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function wu(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function su(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function lu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function mu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function pu(n,t){c(n).blendEquation(t>>>0)}function hu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function xu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function yu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Su(n,t){c(n).clear(t>>>0)}function ku(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function vu(n,t){c(n).clearDepth(t)}function Bu(n,t){c(n).clearStencil(t)}function Pu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function ju(n,t){c(n).compileShader(c(t))}function Iu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Au(n){const t=c(n).createBuffer();return p(t)?0:g(t)}function Du(n){const t=c(n).createFramebuffer();return p(t)?0:g(t)}function Tu(n){const t=c(n).createProgram();return p(t)?0:g(t)}function Cu(n){const t=c(n).createRenderbuffer();return p(t)?0:g(t)}function Mu(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:g(e)}function Fu(n){const t=c(n).createTexture();return p(t)?0:g(t)}function Eu(n,t){c(n).cullFace(t>>>0)}function Ru(n,t){c(n).deleteBuffer(c(t))}function Lu(n,t){c(n).deleteFramebuffer(c(t))}function Ou(n,t){c(n).deleteProgram(c(t))}function Gu(n,t){c(n).deleteRenderbuffer(c(t))}function Vu(n,t){c(n).deleteShader(c(t))}function Wu(n,t){c(n).deleteTexture(c(t))}function qu(n,t){c(n).depthFunc(t>>>0)}function zu(n,t){c(n).depthMask(0!==t)}function Uu(n,t,e){c(n).depthRange(t,e)}function Ku(n,t){c(n).disable(t>>>0)}function Qu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Xu(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Nu(n,t){c(n).enable(t>>>0)}function Yu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Hu(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Ju(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function Zu(n,t){c(n).frontFace(t>>>0)}function $u(){return O((function(n,t,e){const r=c(n).getExtension(b(t,e));return p(r)?0:g(r)}),arguments)}function nf(){return O((function(n,t){return g(c(n).getParameter(t>>>0))}),arguments)}function tf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ef(n,t,e){return g(c(n).getProgramParameter(c(t),e>>>0))}function rf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function uf(n,t,e){return g(c(n).getShaderParameter(c(t),e>>>0))}function ff(n){const t=c(n).getSupportedExtensions();return p(t)?0:g(t)}function cf(n,t,e,r){const u=c(n).getUniformLocation(c(t),b(e,r));return p(u)?0:g(u)}function of(n,t){c(n).linkProgram(c(t))}function _f(n,t,e){c(n).pixelStorei(t>>>0,e)}function df(n,t,e){c(n).polygonOffset(t,e)}function af(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function bf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function gf(n,t,e,r){c(n).shaderSource(c(t),b(e,r))}function wf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function sf(n,t){c(n).stencilMask(t>>>0)}function lf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function mf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function pf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function hf(n,t,e){c(n).uniform1f(c(t),e)}function xf(n,t,e){c(n).uniform1i(c(t),e)}function yf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Sf(n,t){c(n).useProgram(c(t))}function kf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function vf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Bf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Pf(n){const t=c(n).document;return p(t)?0:g(t)}function jf(n){return g(c(n).navigator)}function If(n){return c(n).devicePixelRatio}function Af(n,t){c(n).cancelIdleCallback(t>>>0)}function Df(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return p(e)?0:g(e)}),arguments)}function Tf(){return O((function(n,t,e){const r=c(n).matchMedia(b(t,e));return p(r)?0:g(r)}),arguments)}function Cf(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Mf(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Ff(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Ef(n,t){c(n).clearTimeout(t)}function Rf(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Lf(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Of(n){const t=c(n).body;return p(t)?0:g(t)}function Gf(n){return g(c(n).visibilityState)}function Vf(n){const t=c(n).activeElement;return p(t)?0:g(t)}function Wf(n){const t=c(n).fullscreenElement;return p(t)?0:g(t)}function qf(){return O((function(n,t,e){return g(c(n).createElement(b(t,e)))}),arguments)}function zf(n,t,e){const r=c(n).getElementById(b(t,e));return p(r)?0:g(r)}function Uf(){return O((function(n,t,e){const r=c(n).querySelector(b(t,e));return p(r)?0:g(r)}),arguments)}function Kf(){return O((function(n,t,e){return g(c(n).querySelectorAll(b(t,e)))}),arguments)}function Qf(){return O((function(n,t,e,r,u){c(n).setAttribute(b(t,e),b(r,u))}),arguments)}function Xf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Nf(n){return g(c(n).navigator)}function Yf(n){return g(c(n).style)}function Hf(){return O((function(n){c(n).focus()}),arguments)}function Jf(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Zf(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function $f(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function nc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function tc(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function ec(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function rc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function uc(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function fc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function cc(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function ic(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function oc(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function _c(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function dc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function ac(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function bc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function gc(n,t){c(n).activeTexture(t>>>0)}function wc(n,t,e){c(n).attachShader(c(t),c(e))}function sc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,b(r,u))}function lc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function mc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function pc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function hc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function xc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function yc(n,t){c(n).blendEquation(t>>>0)}function Sc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function kc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function vc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Bc(n,t){c(n).clear(t>>>0)}function Pc(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function jc(n,t){c(n).clearDepth(t)}function Ic(n,t){c(n).clearStencil(t)}function Ac(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Dc(n,t){c(n).compileShader(c(t))}function Tc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Cc(n){const t=c(n).createBuffer();return p(t)?0:g(t)}function Mc(n){const t=c(n).createFramebuffer();return p(t)?0:g(t)}function Fc(n){const t=c(n).createProgram();return p(t)?0:g(t)}function Ec(n){const t=c(n).createRenderbuffer();return p(t)?0:g(t)}function Rc(n,t){const e=c(n).createShader(t>>>0);return p(e)?0:g(e)}function Lc(n){const t=c(n).createTexture();return p(t)?0:g(t)}function Oc(n,t){c(n).cullFace(t>>>0)}function Gc(n,t){c(n).deleteBuffer(c(t))}function Vc(n,t){c(n).deleteFramebuffer(c(t))}function Wc(n,t){c(n).deleteProgram(c(t))}function qc(n,t){c(n).deleteRenderbuffer(c(t))}function zc(n,t){c(n).deleteShader(c(t))}function Uc(n,t){c(n).deleteTexture(c(t))}function Kc(n,t){c(n).depthFunc(t>>>0)}function Qc(n,t){c(n).depthMask(0!==t)}function Xc(n,t,e){c(n).depthRange(t,e)}function Nc(n,t){c(n).disable(t>>>0)}function Yc(n,t){c(n).disableVertexAttribArray(t>>>0)}function Hc(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Jc(n,t){c(n).enable(t>>>0)}function Zc(n,t){c(n).enableVertexAttribArray(t>>>0)}function $c(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ni(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function ti(n,t){c(n).frontFace(t>>>0)}function ei(){return O((function(n,t){return g(c(n).getParameter(t>>>0))}),arguments)}function ri(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ui(n,t,e){return g(c(n).getProgramParameter(c(t),e>>>0))}function fi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=p(u)?0:m(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}function ci(n,t,e){return g(c(n).getShaderParameter(c(t),e>>>0))}function ii(n,t,e,r){const u=c(n).getUniformLocation(c(t),b(e,r));return p(u)?0:g(u)}function oi(n,t){c(n).linkProgram(c(t))}function _i(n,t,e){c(n).pixelStorei(t>>>0,e)}function di(n,t,e){c(n).polygonOffset(t,e)}function ai(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function bi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function gi(n,t,e,r){c(n).shaderSource(c(t),b(e,r))}function wi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function si(n,t){c(n).stencilMask(t>>>0)}function li(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function mi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function pi(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function hi(n,t,e){c(n).uniform1f(c(t),e)}function xi(n,t,e){c(n).uniform1i(c(t),e)}function yi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Si(n,t){c(n).useProgram(c(t))}function ki(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function vi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Bi(){return O((function(n,t,e,u){const f=m(c(t).getPropertyValue(b(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function Pi(){return O((function(n,t,e,u){const f=m(c(t).removeProperty(b(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=w;x()[n/4+1]=i,x()[n/4+0]=f}),arguments)}function ji(){return O((function(n,t,e,r,u){c(n).setProperty(b(t,e),b(r,u))}),arguments)}function Ii(n){return c(n).width}function Ai(n){return c(n).height}function Di(n){return c(n).videoWidth}function Ti(n){return c(n).videoHeight}function Ci(n){return c(n).width}function Mi(n){return c(n).height}function Fi(n,t){c(n).drawBuffersWEBGL(c(t))}function Ei(n){return g(c(n).signal)}function Ri(){return O((function(){return g(new AbortController)}),arguments)}function Li(n){c(n).abort()}function Oi(n){return c(n).isIntersecting}function Gi(n){return c(n).pointerId}function Vi(n){return c(n).pressure}function Wi(n,t){const e=m(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function qi(n){return g(c(n).getCoalescedEvents())}function zi(n){c(n).preventDefault()}function Ui(n,t){const e=m(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Ki(n){return c(n).matches}function Qi(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Xi(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Ni(n){return c(n).ctrlKey}function Yi(n){return c(n).shiftKey}function Hi(n){return c(n).altKey}function Ji(n){return c(n).metaKey}function Zi(n){return c(n).button}function $i(n){return c(n).buttons}function no(n){return c(n).movementX}function to(n){return c(n).movementY}function eo(n){return c(n).deltaX}function ro(n){return c(n).deltaY}function uo(n){return c(n).deltaMode}function fo(){return O((function(n,t,e,r){c(n).addEventListener(b(t,e),c(r))}),arguments)}function co(){return O((function(n,t,e,r){c(n).removeEventListener(b(t,e),c(r))}),arguments)}function io(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function oo(n){return c(n).width}function _o(n,t){c(n).width=t>>>0}function ao(n){return c(n).height}function bo(n,t){c(n).height=t>>>0}function go(){return O((function(n,t,e){const r=c(n).getContext(b(t,e));return p(r)?0:g(r)}),arguments)}function wo(){return O((function(n,t,e,r){const u=c(n).getContext(b(t,e),c(r));return p(u)?0:g(u)}),arguments)}function so(n){return c(n).width}function lo(n,t){c(n).width=t>>>0}function mo(n){return c(n).height}function po(n,t){c(n).height=t>>>0}function ho(){return O((function(n,t,e){const r=c(n).getContext(b(t,e));return p(r)?0:g(r)}),arguments)}function xo(){return O((function(n,t,e,r){const u=c(n).getContext(b(t,e),c(r));return p(u)?0:g(u)}),arguments)}function yo(){return O((function(n){return g(new ResizeObserver(c(n)))}),arguments)}function So(n){c(n).disconnect()}function ko(n,t){c(n).observe(c(t))}function vo(n,t,e){c(n).observe(c(t),c(e))}function Bo(n,t){c(n).unobserve(c(t))}function Po(n){const t=c(n).getSupportedProfiles();return p(t)?0:g(t)}function jo(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Io(n){return g(c(n).contentRect)}function Ao(n){return g(c(n).devicePixelContentBoxSize)}function Do(n){console.debug(c(n))}function To(n){console.error(c(n))}function Co(n,t){console.error(c(n),c(t))}function Mo(n){console.info(c(n))}function Fo(n){console.log(c(n))}function Eo(n){console.warn(c(n))}function Ro(n){return g(c(n).port1)}function Lo(n){return g(c(n).port2)}function Oo(){return O((function(){return g(new MessageChannel)}),arguments)}function Go(n){c(n).close()}function Vo(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Wo(n){c(n).start()}function qo(n){return c(n).inlineSize}function zo(n){return c(n).blockSize}function Uo(n){return c(n).altKey}function Ko(n){return c(n).ctrlKey}function Qo(n){return c(n).shiftKey}function Xo(n){return c(n).metaKey}function No(n){return c(n).location}function Yo(n){return c(n).repeat}function Ho(n,t){const e=m(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Jo(n,t){const e=m(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=w;x()[n/4+1]=u,x()[n/4+0]=e}function Zo(n){return c(n).persisted}function $o(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function n_(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function t_(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function e_(){return O((function(n){return g(new IntersectionObserver(c(n)))}),arguments)}function r_(n){c(n).disconnect()}function u_(n,t){c(n).observe(c(t))}function f_(){return O((function(n,t){return g(c(n).appendChild(c(t)))}),arguments)}function c_(n,t){return c(n).contains(c(t))}function i_(n,t){const e=c(n)[t>>>0];return p(e)?0:g(e)}function o_(n,t){c(n).bindVertexArrayOES(c(t))}function __(n){const t=c(n).createVertexArrayOES();return p(t)?0:g(t)}function d_(n,t){c(n).deleteVertexArrayOES(c(t))}function a_(n,t){return g(c(n)[t>>>0])}function b_(n){return c(n).length}function g_(){return g(new Array)}function w_(n,t){return g(new Function(b(n,t)))}function s_(){return O((function(n,t){return g(c(n).call(c(t)))}),arguments)}function l_(){return g(new Object)}function m_(){return O((function(){return g(self.self)}),arguments)}function p_(){return O((function(){return g(window.window)}),arguments)}function h_(){return O((function(){return g(globalThis.globalThis)}),arguments)}function x_(){return O((function(){return g(global.global)}),arguments)}function y_(n,t,e){return c(n).includes(c(t),e)}function S_(n){return g(Array.of(c(n)))}function k_(n,t){return c(n).push(c(t))}function v_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function B_(n,t){return g(Object.getOwnPropertyDescriptor(c(n),c(t)))}function P_(n,t){return Object.is(c(n),c(t))}function j_(n){return g(c(n).valueOf())}function I_(n){return g(Promise.resolve(c(n)))}function A_(n,t){return g(c(n).catch(c(t)))}function D_(n,t){return g(c(n).then(c(t)))}function T_(n,t,e){return g(c(n).then(c(t),c(e)))}function C_(n){return g(c(n).buffer)}function M_(n,t,e){return g(new Int8Array(c(n),t>>>0,e>>>0))}function F_(n,t,e){return g(new Int16Array(c(n),t>>>0,e>>>0))}function E_(n,t,e){return g(new Int32Array(c(n),t>>>0,e>>>0))}function R_(n,t,e){return g(new Uint8Array(c(n),t>>>0,e>>>0))}function L_(n){return g(new Uint8Array(c(n)))}function O_(n,t,e){c(n).set(c(t),e>>>0)}function G_(n){return c(n).length}function V_(n,t,e){return g(new Uint16Array(c(n),t>>>0,e>>>0))}function W_(n,t,e){return g(new Uint32Array(c(n),t>>>0,e>>>0))}function q_(n,t,e){return g(new Float32Array(c(n),t>>>0,e>>>0))}function z_(n){return g(c(n).buffer)}function U_(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function K_(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;x()[n/4+1]=u,x()[n/4+0]=e}function Q_(n,t){throw new Error(b(n,t))}function X_(){return g(r.memory)}function N_(n,t,e){return g(k(n,t,9,v))}function Y_(n,t,e){return g(k(n,t,9,v))}function H_(n,t,e){return g(k(n,t,9,v))}function J_(n,t,e){return g(k(n,t,9,B))}function Z_(n,t,e){return g(k(n,t,9,v))}function $_(n,t,e){return g(k(n,t,9,P))}function nd(n,t,e){return g(k(n,t,9,v))}function td(n,t,e){return g(k(n,t,206,j))}function ed(n,t,e){return g(k(n,t,206,j))}function rd(n,t,e){return g(k(n,t,206,I))}function ud(n,t,e){return g(k(n,t,206,j))}function fd(n,t,e){return g(k(n,t,206,A))}function cd(n,t,e){return g(k(n,t,206,j))}function id(n,t,e){return g(k(n,t,206,j))}function od(n,t,e){return g(k(n,t,636,D))}function _d(n,t,e){return g(k(n,t,636,D))}function dd(n,t,e){return g(k(n,t,636,D))}function ad(n,t,e){return g(k(n,t,636,T))}function bd(n,t,e){return g(k(n,t,636,D))}function gd(n,t,e){return g(k(n,t,636,D))}function wd(n,t,e){return g(k(n,t,636,D))}function sd(n,t,e){return g(k(n,t,1777,C))}function ld(n,t,e){return g(k(n,t,1777,C))}function md(n,t,e){return g(k(n,t,1871,M))}}).call(this,e(260)(n))},427:function(n,t,e){"use strict";e.r(t);var r=e(428),u=e(255);e.d(t,"__wbg_set_wasm",(function(){return u.ji})),e.d(t,"run",(function(){return u.Xk})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.Tk})),e.d(t,"__wbindgen_cb_drop",(function(){return u.mk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.Ok})),e.d(t,"__wbindgen_string_new",(function(){return u.Vk})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.Sk})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.sg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.vi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Od})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Gg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Hg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.le})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.uh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Dh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.xh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Ig})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.Yg})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.bk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.Vg})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.vh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Ch})),e.d(t,"__wbindgen_number_new",(function(){return u.Rk})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.ck})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Jg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Bg})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.ef})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.df})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.Ue})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Rd})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.sf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.th})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Fb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.re})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.gf})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.cg})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.ff})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.ve})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.Tf})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.Uf})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.Vf})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.Sf})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Bf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Cf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Lf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Kf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Nf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Of})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.Qf})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.Rf})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.Xf})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.Wf})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.Pf})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.gg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.fg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.ag})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Df})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.Yf})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.Zf})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Mf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.If})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Ef})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Ff})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Gf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Hf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Jf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Md})),e.d(t,"__wbindgen_string_get",(function(){return u.Uk})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.Ve})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.fh})),e.d(t,"__wbindgen_is_object",(function(){return u.Nk})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.rh})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.ze})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Qd})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.tf})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.mc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Rb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Sb})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.bc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.hc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Xb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Vb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.qc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.lc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.ec})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Wb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.gc})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.ad})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.mi})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.Zg})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.Rg})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.yf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.Kj})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.uc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.cd})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.bd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.he})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ie})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Jb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Kb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Pb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Qb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.o})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Kd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.q})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Jd})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.pf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.Wd})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Td})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.hb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.gb})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.kk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.yh})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.Vd})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Ud})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.ik})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.Mj})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.ui})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.jk})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Lb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.Th})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.Nh})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Ih})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.md})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.ld})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.Uh})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.Jh})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.Lh})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.Qh})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.Sh})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.ei})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.ci})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Cd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.xd})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.Vh})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.Kh})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.Mh})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.Ph})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.Rh})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.fi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.di})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.wd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.Oh})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.Yh})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.gi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.Zh})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Pd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Gi})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.dh})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.eh})),e.d(t,"__wbindgen_is_function",(function(){return u.Mk})),e.d(t,"__wbindgen_boolean_get",(function(){return u.lk})),e.d(t,"__wbindgen_number_get",(function(){return u.Qk})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.jf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.p})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.t})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.A})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.E})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.P})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.S})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.W})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.ib})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.jb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.tb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Ab})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Eb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Ib})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Ob})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.fc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.kc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.tc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Gc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Jc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Mc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Qc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.pd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.td})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.vd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Id})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Sd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ce})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.je})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ue})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Fe})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Me})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Ne})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.lf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.gh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.hh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.jh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.nh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Ah})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Bh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Hi})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.Ji})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.Mi})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.Ni})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.Ri})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.Si})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.Oi})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.Qi})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.Ti})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.Wi})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.Vi})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Xi})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.Ui})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Yi})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.fj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.gj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.ij})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.kj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.lj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.oj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.pj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.sj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.vj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.wj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.xj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.zj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Aj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Bj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Dj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Ej})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Fj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Gj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.Ij})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.Jj})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.Rj})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.Sj})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.m})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.s})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.v})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.w})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.y})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.B})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.F})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.J})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.H})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.N})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.L})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.rb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.lb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.pb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.xb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.ac})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.cc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.ic})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.oc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.pc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Hc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Kc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Nc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Wc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.Zc})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.qd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Hd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Fd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.Yd})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.be})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ee})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.te})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.ye})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Ae})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.De})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.He})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ie})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Ke})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Oe})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.vf})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.Mg})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.Qg})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.ph})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Eh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.qi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.yi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Bi})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.zi})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Di})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.Ki})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.cj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.ej})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.qj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.Nj})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Tj})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Yj})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.kf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.nd})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.kg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.ed})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.eb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.me})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.zf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.wh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.db})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.sh})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.qb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.bi})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.ai})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.R})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Zj})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ge})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Yb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.se})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.ch})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.bh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Hh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.Wh})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.jg})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Fi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.Xd})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.U})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.T})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.X})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Bb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.ih})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.Ii})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.Pi})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.hj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.jj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.mj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.nj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.tj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.uj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.yj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Cj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.Hj})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.n})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.r})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.u})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.x})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.z})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.C})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.G})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.K})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.I})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.O})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.M})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.sb})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.kb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.mb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.ob})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.wb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.yb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Mb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Tb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.Zb})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.jc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.nc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.rc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.xc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Ac})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Cc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Ec})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Uc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Yc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.hd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.fd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.rd})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Gd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Ed})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.Zd})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ae})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.fe})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.xe})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Be})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.Ce})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Ge})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Je})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Pe})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.uf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.Lg})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.Pg})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.oh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Fh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.pi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.xi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ci})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Ai})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Ei})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.Li})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.bj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.dj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.rj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.Oj})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Uj})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Xj})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Ee})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.mh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.Xh})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.ek})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.Xe})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Wj})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Vj})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.dk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.Ze})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.sd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.ti})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.lg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.mf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.Ng})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.Wg})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.Og})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.ke})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.Xg})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.bg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Af})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.lh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.vc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.ri})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.eg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.ab})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.bb})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.hg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.ig})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Sc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Tc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Rc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.kh})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.hf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.gk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.ni})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.Ye})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.li})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.pe})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.qe})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.fk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.oi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.We})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.ki})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.ne})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.oe})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.pg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.jd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Dg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Eg})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.Lj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Le})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.de})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Hb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.dd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.zc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Nd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Ld})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.bf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.xf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.ak})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.Sg})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.Tg})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.ng})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.ub})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.Ug})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.wi})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.cf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.Q})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.si})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.dg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.wf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.qh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.of})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.vb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.Kg})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.od})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.ud})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.Qj})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.og})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.kd})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Cg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Gb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Qe})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.D})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.sc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Pc})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.Re})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.rf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.mg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.tg})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.cb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.rg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Gh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.hk})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Se})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Te})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.af})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Fg})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.ah})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.if})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.we})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.nf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.Pj})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.zh})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.fb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Zi})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.aj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.Y})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.vg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.yg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.wg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Ag})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.qg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.ii})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.qf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.zg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.xg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.Z})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.hi})),e.d(t,"__wbindgen_debug_string",(function(){return u.Lk})),e.d(t,"__wbindgen_throw",(function(){return u.Wk})),e.d(t,"__wbindgen_memory",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper553",(function(){return u.xk})),e.d(t,"__wbindgen_closure_wrapper554",(function(){return u.yk})),e.d(t,"__wbindgen_closure_wrapper555",(function(){return u.zk})),e.d(t,"__wbindgen_closure_wrapper556",(function(){return u.Ak})),e.d(t,"__wbindgen_closure_wrapper557",(function(){return u.Bk})),e.d(t,"__wbindgen_closure_wrapper558",(function(){return u.Ck})),e.d(t,"__wbindgen_closure_wrapper559",(function(){return u.Dk})),e.d(t,"__wbindgen_closure_wrapper923",(function(){return u.Ek})),e.d(t,"__wbindgen_closure_wrapper924",(function(){return u.Fk})),e.d(t,"__wbindgen_closure_wrapper925",(function(){return u.Gk})),e.d(t,"__wbindgen_closure_wrapper926",(function(){return u.Hk})),e.d(t,"__wbindgen_closure_wrapper927",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper928",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper929",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper1872",(function(){return u.nk})),e.d(t,"__wbindgen_closure_wrapper1873",(function(){return u.ok})),e.d(t,"__wbindgen_closure_wrapper1874",(function(){return u.pk})),e.d(t,"__wbindgen_closure_wrapper1875",(function(){return u.qk})),e.d(t,"__wbindgen_closure_wrapper1876",(function(){return u.rk})),e.d(t,"__wbindgen_closure_wrapper1877",(function(){return u.sk})),e.d(t,"__wbindgen_closure_wrapper1878",(function(){return u.tk})),e.d(t,"__wbindgen_closure_wrapper3892",(function(){return u.uk})),e.d(t,"__wbindgen_closure_wrapper3894",(function(){return u.vk})),e.d(t,"__wbindgen_closure_wrapper4665",(function(){return u.wk})),Object(u.ji)(r),r.__wbindgen_start()},428:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(255);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/36.e5eec929.js b/assets/js/36.e5eec929.js new file mode 100644 index 000000000..69b0dd8ca --- /dev/null +++ b/assets/js/36.e5eec929.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{248:function(n,t,e){"use strict";(function(n){e.d(t,"Ki",(function(){return u})),e.d(t,"Dl",(function(){return F})),e.d(t,"zl",(function(){return W})),e.d(t,"Al",(function(){return q})),e.d(t,"Sk",(function(){return z})),e.d(t,"Bl",(function(){return U})),e.d(t,"yl",(function(){return K})),e.d(t,"ul",(function(){return Q})),e.d(t,"Ng",(function(){return N})),e.d(t,"Wi",(function(){return X})),e.d(t,"Qd",(function(){return Y})),e.d(t,"Vd",(function(){return H})),e.d(t,"eh",(function(){return J})),e.d(t,"fh",(function(){return Z})),e.d(t,"b",(function(){return $})),e.d(t,"Ik",(function(){return nn})),e.d(t,"yh",(function(){return tn})),e.d(t,"ei",(function(){return en})),e.d(t,"pe",(function(){return rn})),e.d(t,"Vh",(function(){return un})),e.d(t,"Yh",(function(){return fn})),e.d(t,"hh",(function(){return cn})),e.d(t,"Jk",(function(){return on})),e.d(t,"Wh",(function(){return _n})),e.d(t,"di",(function(){return dn})),e.d(t,"vh",(function(){return an})),e.d(t,"xl",(function(){return bn})),e.d(t,"jh",(function(){return gn})),e.d(t,"Zg",(function(){return wn})),e.d(t,"nf",(function(){return sn})),e.d(t,"mf",(function(){return ln})),e.d(t,"pf",(function(){return mn})),e.d(t,"of",(function(){return pn})),e.d(t,"Vi",(function(){return hn})),e.d(t,"sk",(function(){return xn})),e.d(t,"bd",(function(){return yn})),e.d(t,"Ae",(function(){return Sn})),e.d(t,"Nf",(function(){return kn})),e.d(t,"pk",(function(){return vn})),e.d(t,"nd",(function(){return Bn})),e.d(t,"md",(function(){return Pn})),e.d(t,"Md",(function(){return In})),e.d(t,"ui",(function(){return jn})),e.d(t,"li",(function(){return An})),e.d(t,"ni",(function(){return Dn})),e.d(t,"me",(function(){return Tn})),e.d(t,"lf",(function(){return Cn})),e.d(t,"af",(function(){return Mn})),e.d(t,"Ee",(function(){return Fn})),e.d(t,"Sh",(function(){return En})),e.d(t,"le",(function(){return Rn})),e.d(t,"vg",(function(){return Ln})),e.d(t,"Xd",(function(){return On})),e.d(t,"ae",(function(){return Gn})),e.d(t,"mi",(function(){return Vn})),e.d(t,"ki",(function(){return Wn})),e.d(t,"Ed",(function(){return qn})),e.d(t,"Ad",(function(){return zn})),e.d(t,"yd",(function(){return Un})),e.d(t,"Cd",(function(){return Kn})),e.d(t,"ri",(function(){return Qn})),e.d(t,"si",(function(){return Nn})),e.d(t,"wi",(function(){return Xn})),e.d(t,"Ei",(function(){return Yn})),e.d(t,"Di",(function(){return Hn})),e.d(t,"Td",(function(){return Jn})),e.d(t,"Ff",(function(){return Zn})),e.d(t,"Fh",(function(){return $n})),e.d(t,"Mf",(function(){return nt})),e.d(t,"Ni",(function(){return tt})),e.d(t,"Tb",(function(){return et})),e.d(t,"Sb",(function(){return rt})),e.d(t,"Wb",(function(){return ut})),e.d(t,"Xb",(function(){return ft})),e.d(t,"Yb",(function(){return ct})),e.d(t,"cc",(function(){return it})),e.d(t,"fc",(function(){return ot})),e.d(t,"hc",(function(){return _t})),e.d(t,"ic",(function(){return dt})),e.d(t,"mc",(function(){return at})),e.d(t,"nc",(function(){return bt})),e.d(t,"rc",(function(){return gt})),e.d(t,"cd",(function(){return wt})),e.d(t,"rh",(function(){return st})),e.d(t,"zh",(function(){return lt})),e.d(t,"vc",(function(){return mt})),e.d(t,"dd",(function(){return pt})),e.d(t,"Fj",(function(){return ht})),e.d(t,"gh",(function(){return xt})),e.d(t,"Bf",(function(){return yt})),e.d(t,"Gf",(function(){return St})),e.d(t,"tg",(function(){return kt})),e.d(t,"Gb",(function(){return vt})),e.d(t,"we",(function(){return Bt})),e.d(t,"Kh",(function(){return Pt})),e.d(t,"ug",(function(){return It})),e.d(t,"Ld",(function(){return jt})),e.d(t,"Rd",(function(){return At})),e.d(t,"pi",(function(){return Dt})),e.d(t,"zi",(function(){return Tt})),e.d(t,"Ai",(function(){return Ct})),e.d(t,"Hi",(function(){return Mt})),e.d(t,"ji",(function(){return Ft})),e.d(t,"oi",(function(){return Et})),e.d(t,"Fd",(function(){return Rt})),e.d(t,"Bd",(function(){return Lt})),e.d(t,"zd",(function(){return Ot})),e.d(t,"Dd",(function(){return Gt})),e.d(t,"qi",(function(){return Vt})),e.d(t,"ti",(function(){return Wt})),e.d(t,"vi",(function(){return qt})),e.d(t,"Gi",(function(){return zt})),e.d(t,"Fi",(function(){return Ut})),e.d(t,"qe",(function(){return Kt})),e.d(t,"Af",(function(){return Qt})),e.d(t,"q",(function(){return Nt})),e.d(t,"s",(function(){return Xt})),e.d(t,"ib",(function(){return Yt})),e.d(t,"jb",(function(){return Ht})),e.d(t,"Kb",(function(){return Jt})),e.d(t,"Lb",(function(){return Zt})),e.d(t,"Qb",(function(){return $t})),e.d(t,"Rb",(function(){return ne})),e.d(t,"Zd",(function(){return te})),e.d(t,"Yd",(function(){return ee})),e.d(t,"Zh",(function(){return re})),e.d(t,"Pd",(function(){return ue})),e.d(t,"cf",(function(){return fe})),e.d(t,"kg",(function(){return ce})),e.d(t,"lg",(function(){return ie})),e.d(t,"mg",(function(){return oe})),e.d(t,"jg",(function(){return _e})),e.d(t,"Qf",(function(){return de})),e.d(t,"Rf",(function(){return ae})),e.d(t,"cg",(function(){return be})),e.d(t,"bg",(function(){return ge})),e.d(t,"eg",(function(){return we})),e.d(t,"fg",(function(){return se})),e.d(t,"hg",(function(){return le})),e.d(t,"ig",(function(){return me})),e.d(t,"og",(function(){return pe})),e.d(t,"ng",(function(){return he})),e.d(t,"gg",(function(){return xe})),e.d(t,"rg",(function(){return ye})),e.d(t,"Sf",(function(){return Se})),e.d(t,"pg",(function(){return ke})),e.d(t,"qg",(function(){return ve})),e.d(t,"Ag",(function(){return Be})),e.d(t,"zg",(function(){return Pe})),e.d(t,"dg",(function(){return Ie})),e.d(t,"Uf",(function(){return je})),e.d(t,"Tf",(function(){return Ae})),e.d(t,"Zf",(function(){return De})),e.d(t,"Vf",(function(){return Te})),e.d(t,"Wf",(function(){return Ce})),e.d(t,"Xf",(function(){return Me})),e.d(t,"Yf",(function(){return Fe})),e.d(t,"ag",(function(){return Ee})),e.d(t,"tl",(function(){return Re})),e.d(t,"a",(function(){return Le})),e.d(t,"c",(function(){return Oe})),e.d(t,"Uh",(function(){return Ge})),e.d(t,"Sd",(function(){return Ve})),e.d(t,"Ef",(function(){return We})),e.d(t,"wg",(function(){return qe})),e.d(t,"Pk",(function(){return ze})),e.d(t,"Qk",(function(){return Ue})),e.d(t,"Mb",(function(){return Ke})),e.d(t,"jj",(function(){return Qe})),e.d(t,"Eh",(function(){return Ne})),e.d(t,"Dh",(function(){return Xe})),e.d(t,"sl",(function(){return Ye})),e.d(t,"Rk",(function(){return He})),e.d(t,"wl",(function(){return Je})),e.d(t,"tf",(function(){return Ze})),e.d(t,"r",(function(){return $e})),e.d(t,"v",(function(){return nr})),e.d(t,"C",(function(){return tr})),e.d(t,"G",(function(){return er})),e.d(t,"R",(function(){return rr})),e.d(t,"U",(function(){return ur})),e.d(t,"X",(function(){return fr})),e.d(t,"Y",(function(){return cr})),e.d(t,"kb",(function(){return ir})),e.d(t,"lb",(function(){return or})),e.d(t,"mb",(function(){return _r})),e.d(t,"ub",(function(){return dr})),e.d(t,"Db",(function(){return ar})),e.d(t,"Bb",(function(){return br})),e.d(t,"Eb",(function(){return gr})),e.d(t,"Fb",(function(){return wr})),e.d(t,"Jb",(function(){return sr})),e.d(t,"Pb",(function(){return lr})),e.d(t,"gc",(function(){return mr})),e.d(t,"lc",(function(){return pr})),e.d(t,"uc",(function(){return hr})),e.d(t,"Hc",(function(){return xr})),e.d(t,"Kc",(function(){return yr})),e.d(t,"Nc",(function(){return Sr})),e.d(t,"Rc",(function(){return kr})),e.d(t,"rd",(function(){return vr})),e.d(t,"vd",(function(){return Br})),e.d(t,"xd",(function(){return Pr})),e.d(t,"Kd",(function(){return Ir})),e.d(t,"Ud",(function(){return jr})),e.d(t,"ge",(function(){return Ar})),e.d(t,"ne",(function(){return Dr})),e.d(t,"ze",(function(){return Tr})),e.d(t,"Ke",(function(){return Cr})),e.d(t,"Re",(function(){return Mr})),e.d(t,"Se",(function(){return Fr})),e.d(t,"vf",(function(){return Er})),e.d(t,"Gh",(function(){return Rr})),e.d(t,"Hh",(function(){return Lr})),e.d(t,"Jh",(function(){return Or})),e.d(t,"Oh",(function(){return Gr})),e.d(t,"bi",(function(){return Vr})),e.d(t,"ci",(function(){return Wr})),e.d(t,"kj",(function(){return qr})),e.d(t,"mj",(function(){return zr})),e.d(t,"pj",(function(){return Ur})),e.d(t,"qj",(function(){return Kr})),e.d(t,"uj",(function(){return Qr})),e.d(t,"vj",(function(){return Nr})),e.d(t,"rj",(function(){return Xr})),e.d(t,"tj",(function(){return Yr})),e.d(t,"wj",(function(){return Hr})),e.d(t,"zj",(function(){return Jr})),e.d(t,"yj",(function(){return Zr})),e.d(t,"Aj",(function(){return $r})),e.d(t,"xj",(function(){return nu})),e.d(t,"Bj",(function(){return tu})),e.d(t,"Kj",(function(){return eu})),e.d(t,"Lj",(function(){return ru})),e.d(t,"Nj",(function(){return uu})),e.d(t,"Pj",(function(){return fu})),e.d(t,"Qj",(function(){return cu})),e.d(t,"Tj",(function(){return iu})),e.d(t,"Uj",(function(){return ou})),e.d(t,"Xj",(function(){return _u})),e.d(t,"ak",(function(){return du})),e.d(t,"bk",(function(){return au})),e.d(t,"ck",(function(){return bu})),e.d(t,"ek",(function(){return gu})),e.d(t,"fk",(function(){return wu})),e.d(t,"gk",(function(){return su})),e.d(t,"ik",(function(){return lu})),e.d(t,"jk",(function(){return mu})),e.d(t,"kk",(function(){return pu})),e.d(t,"lk",(function(){return hu})),e.d(t,"nk",(function(){return xu})),e.d(t,"ok",(function(){return yu})),e.d(t,"yk",(function(){return Su})),e.d(t,"zk",(function(){return ku})),e.d(t,"g",(function(){return vu})),e.d(t,"o",(function(){return Bu})),e.d(t,"u",(function(){return Pu})),e.d(t,"x",(function(){return Iu})),e.d(t,"y",(function(){return ju})),e.d(t,"A",(function(){return Au})),e.d(t,"D",(function(){return Du})),e.d(t,"H",(function(){return Tu})),e.d(t,"L",(function(){return Cu})),e.d(t,"J",(function(){return Mu})),e.d(t,"P",(function(){return Fu})),e.d(t,"N",(function(){return Eu})),e.d(t,"sb",(function(){return Ru})),e.d(t,"ob",(function(){return Lu})),e.d(t,"qb",(function(){return Ou})),e.d(t,"yb",(function(){return Gu})),e.d(t,"Ab",(function(){return Vu})),e.d(t,"Ob",(function(){return Wu})),e.d(t,"Vb",(function(){return qu})),e.d(t,"bc",(function(){return zu})),e.d(t,"dc",(function(){return Uu})),e.d(t,"jc",(function(){return Ku})),e.d(t,"pc",(function(){return Qu})),e.d(t,"qc",(function(){return Nu})),e.d(t,"zc",(function(){return Xu})),e.d(t,"Cc",(function(){return Yu})),e.d(t,"Ec",(function(){return Hu})),e.d(t,"Gc",(function(){return Ju})),e.d(t,"Ic",(function(){return Zu})),e.d(t,"Lc",(function(){return $u})),e.d(t,"Oc",(function(){return nf})),e.d(t,"Wc",(function(){return tf})),e.d(t,"Xc",(function(){return ef})),e.d(t,"ad",(function(){return rf})),e.d(t,"jd",(function(){return uf})),e.d(t,"hd",(function(){return ff})),e.d(t,"sd",(function(){return cf})),e.d(t,"Jd",(function(){return of})),e.d(t,"Hd",(function(){return _f})),e.d(t,"ce",(function(){return df})),e.d(t,"fe",(function(){return af})),e.d(t,"ie",(function(){return bf})),e.d(t,"ye",(function(){return gf})),e.d(t,"De",(function(){return wf})),e.d(t,"Fe",(function(){return sf})),e.d(t,"Ie",(function(){return lf})),e.d(t,"Me",(function(){return mf})),e.d(t,"Ne",(function(){return pf})),e.d(t,"Pe",(function(){return hf})),e.d(t,"Te",(function(){return xf})),e.d(t,"If",(function(){return yf})),e.d(t,"mh",(function(){return Sf})),e.d(t,"qh",(function(){return kf})),e.d(t,"Qh",(function(){return vf})),e.d(t,"fi",(function(){return Bf})),e.d(t,"Ri",(function(){return Pf})),e.d(t,"aj",(function(){return If})),e.d(t,"dj",(function(){return jf})),e.d(t,"bj",(function(){return Af})),e.d(t,"fj",(function(){return Df})),e.d(t,"nj",(function(){return Tf})),e.d(t,"Hj",(function(){return Cf})),e.d(t,"Jj",(function(){return Mf})),e.d(t,"Vj",(function(){return Ff})),e.d(t,"tk",(function(){return Ef})),e.d(t,"Ak",(function(){return Rf})),e.d(t,"Fk",(function(){return Lf})),e.d(t,"uf",(function(){return Of})),e.d(t,"od",(function(){return Gf})),e.d(t,"Jf",(function(){return Vf})),e.d(t,"Eg",(function(){return Wf})),e.d(t,"fd",(function(){return qf})),e.d(t,"gb",(function(){return zf})),e.d(t,"re",(function(){return Uf})),e.d(t,"Of",(function(){return Kf})),e.d(t,"Xh",(function(){return Qf})),e.d(t,"fb",(function(){return Nf})),e.d(t,"Th",(function(){return Xf})),e.d(t,"rb",(function(){return Yf})),e.d(t,"Ci",(function(){return Hf})),e.d(t,"Bi",(function(){return Jf})),e.d(t,"T",(function(){return Zf})),e.d(t,"Gk",(function(){return $f})),e.d(t,"e",(function(){return nc})),e.d(t,"ke",(function(){return tc})),e.d(t,"Zb",(function(){return ec})),e.d(t,"xe",(function(){return rc})),e.d(t,"Ch",(function(){return uc})),e.d(t,"Bh",(function(){return fc})),e.d(t,"ii",(function(){return cc})),e.d(t,"xi",(function(){return ic})),e.d(t,"Dg",(function(){return oc})),e.d(t,"Wd",(function(){return _c})),e.d(t,"ij",(function(){return dc})),e.d(t,"be",(function(){return ac})),e.d(t,"W",(function(){return bc})),e.d(t,"V",(function(){return gc})),e.d(t,"Z",(function(){return wc})),e.d(t,"Cb",(function(){return sc})),e.d(t,"Ih",(function(){return lc})),e.d(t,"lj",(function(){return mc})),e.d(t,"sj",(function(){return pc})),e.d(t,"Mj",(function(){return hc})),e.d(t,"Oj",(function(){return xc})),e.d(t,"Rj",(function(){return yc})),e.d(t,"Sj",(function(){return Sc})),e.d(t,"Yj",(function(){return kc})),e.d(t,"Zj",(function(){return vc})),e.d(t,"dk",(function(){return Bc})),e.d(t,"hk",(function(){return Pc})),e.d(t,"mk",(function(){return Ic})),e.d(t,"f",(function(){return jc})),e.d(t,"p",(function(){return Ac})),e.d(t,"t",(function(){return Dc})),e.d(t,"w",(function(){return Tc})),e.d(t,"z",(function(){return Cc})),e.d(t,"B",(function(){return Mc})),e.d(t,"E",(function(){return Fc})),e.d(t,"I",(function(){return Ec})),e.d(t,"M",(function(){return Rc})),e.d(t,"K",(function(){return Lc})),e.d(t,"Q",(function(){return Oc})),e.d(t,"O",(function(){return Gc})),e.d(t,"tb",(function(){return Vc})),e.d(t,"nb",(function(){return Wc})),e.d(t,"pb",(function(){return qc})),e.d(t,"xb",(function(){return zc})),e.d(t,"zb",(function(){return Uc})),e.d(t,"Nb",(function(){return Kc})),e.d(t,"Ub",(function(){return Qc})),e.d(t,"ac",(function(){return Nc})),e.d(t,"ec",(function(){return Xc})),e.d(t,"kc",(function(){return Yc})),e.d(t,"oc",(function(){return Hc})),e.d(t,"sc",(function(){return Jc})),e.d(t,"yc",(function(){return Zc})),e.d(t,"Bc",(function(){return $c})),e.d(t,"Dc",(function(){return ni})),e.d(t,"Fc",(function(){return ti})),e.d(t,"Jc",(function(){return ei})),e.d(t,"Mc",(function(){return ri})),e.d(t,"Pc",(function(){return ui})),e.d(t,"Vc",(function(){return fi})),e.d(t,"Yc",(function(){return ci})),e.d(t,"Zc",(function(){return ii})),e.d(t,"id",(function(){return oi})),e.d(t,"gd",(function(){return _i})),e.d(t,"td",(function(){return di})),e.d(t,"Id",(function(){return ai})),e.d(t,"Gd",(function(){return bi})),e.d(t,"de",(function(){return gi})),e.d(t,"ee",(function(){return wi})),e.d(t,"je",(function(){return si})),e.d(t,"Ce",(function(){return li})),e.d(t,"Ge",(function(){return mi})),e.d(t,"He",(function(){return pi})),e.d(t,"Le",(function(){return hi})),e.d(t,"Oe",(function(){return xi})),e.d(t,"Ue",(function(){return yi})),e.d(t,"Hf",(function(){return Si})),e.d(t,"lh",(function(){return ki})),e.d(t,"ph",(function(){return vi})),e.d(t,"Ph",(function(){return Bi})),e.d(t,"gi",(function(){return Pi})),e.d(t,"Qi",(function(){return Ii})),e.d(t,"Zi",(function(){return ji})),e.d(t,"ej",(function(){return Ai})),e.d(t,"cj",(function(){return Di})),e.d(t,"gj",(function(){return Ti})),e.d(t,"oj",(function(){return Ci})),e.d(t,"Gj",(function(){return Mi})),e.d(t,"Ij",(function(){return Fi})),e.d(t,"Wj",(function(){return Ei})),e.d(t,"uk",(function(){return Ri})),e.d(t,"Bk",(function(){return Li})),e.d(t,"Ek",(function(){return Oi})),e.d(t,"qd",(function(){return Gi})),e.d(t,"wd",(function(){return Vi})),e.d(t,"xk",(function(){return Wi})),e.d(t,"Je",(function(){return qi})),e.d(t,"Nh",(function(){return zi})),e.d(t,"yi",(function(){return Ui})),e.d(t,"Ig",(function(){return Ki})),e.d(t,"ld",(function(){return Qi})),e.d(t,"ah",(function(){return Ni})),e.d(t,"l",(function(){return Xi})),e.d(t,"Hb",(function(){return Yi})),e.d(t,"Ve",(function(){return Hi})),e.d(t,"ud",(function(){return Ji})),e.d(t,"Dk",(function(){return Zi})),e.d(t,"Ck",(function(){return $i})),e.d(t,"sh",(function(){return no})),e.d(t,"th",(function(){return to})),e.d(t,"Hg",(function(){return eo})),e.d(t,"he",(function(){return ro})),e.d(t,"wf",(function(){return uo})),e.d(t,"Ib",(function(){return fo})),e.d(t,"ed",(function(){return co})),e.d(t,"kf",(function(){return io})),e.d(t,"S",(function(){return oo})),e.d(t,"Ac",(function(){return _o})),e.d(t,"Od",(function(){return ao})),e.d(t,"Nd",(function(){return bo})),e.d(t,"jf",(function(){return go})),e.d(t,"Lf",(function(){return wo})),e.d(t,"Hk",(function(){return so})),e.d(t,"Ui",(function(){return lo})),e.d(t,"Fg",(function(){return mo})),e.d(t,"d",(function(){return po})),e.d(t,"vb",(function(){return ho})),e.d(t,"uh",(function(){return xo})),e.d(t,"Xi",(function(){return yo})),e.d(t,"Lk",(function(){return So})),e.d(t,"ff",(function(){return ko})),e.d(t,"qf",(function(){return vo})),e.d(t,"Nk",(function(){return Bo})),e.d(t,"Oi",(function(){return Po})),e.d(t,"gf",(function(){return Io})),e.d(t,"Mi",(function(){return jo})),e.d(t,"ue",(function(){return Ao})),e.d(t,"ve",(function(){return Do})),e.d(t,"Kk",(function(){return To})),e.d(t,"hf",(function(){return Co})),e.d(t,"k",(function(){return Mo})),e.d(t,"xc",(function(){return Fo})),e.d(t,"Ti",(function(){return Eo})),e.d(t,"xg",(function(){return Ro})),e.d(t,"Kf",(function(){return Lo})),e.d(t,"Rh",(function(){return Oo})),e.d(t,"zf",(function(){return Go})),e.d(t,"wb",(function(){return Vo})),e.d(t,"Mk",(function(){return Wo})),e.d(t,"Pi",(function(){return qo})),e.d(t,"ef",(function(){return zo})),e.d(t,"Li",(function(){return Uo})),e.d(t,"se",(function(){return Ko})),e.d(t,"te",(function(){return Qo})),e.d(t,"kh",(function(){return No})),e.d(t,"h",(function(){return Xo})),e.d(t,"Lh",(function(){return Yo})),e.d(t,"Jg",(function(){return Ho})),e.d(t,"kd",(function(){return Jo})),e.d(t,"bh",(function(){return Zo})),e.d(t,"ch",(function(){return $o})),e.d(t,"qk",(function(){return n_})),e.d(t,"Mg",(function(){return t_})),e.d(t,"m",(function(){return e_})),e.d(t,"ih",(function(){return r_})),e.d(t,"Tc",(function(){return u_})),e.d(t,"Uc",(function(){return f_})),e.d(t,"Sc",(function(){return c_})),e.d(t,"F",(function(){return i_})),e.d(t,"tc",(function(){return o_})),e.d(t,"Qc",(function(){return __})),e.d(t,"Wg",(function(){return d_})),e.d(t,"sf",(function(){return a_})),e.d(t,"rk",(function(){return b_})),e.d(t,"Yi",(function(){return g_})),e.d(t,"df",(function(){return w_})),e.d(t,"n",(function(){return s_})),e.d(t,"Cj",(function(){return l_})),e.d(t,"Qe",(function(){return m_})),e.d(t,"xh",(function(){return p_})),e.d(t,"sg",(function(){return h_})),e.d(t,"Pf",(function(){return x_})),e.d(t,"i",(function(){return y_})),e.d(t,"Mh",(function(){return S_})),e.d(t,"wc",(function(){return k_})),e.d(t,"Si",(function(){return v_})),e.d(t,"j",(function(){return B_})),e.d(t,"yg",(function(){return P_})),e.d(t,"cb",(function(){return I_})),e.d(t,"db",(function(){return j_})),e.d(t,"Bg",(function(){return A_})),e.d(t,"Cg",(function(){return D_})),e.d(t,"nh",(function(){return T_})),e.d(t,"wh",(function(){return C_})),e.d(t,"oh",(function(){return M_})),e.d(t,"oe",(function(){return F_})),e.d(t,"We",(function(){return E_})),e.d(t,"Df",(function(){return R_})),e.d(t,"Gg",(function(){return L_})),e.d(t,"Og",(function(){return O_})),e.d(t,"Yg",(function(){return G_})),e.d(t,"Xg",(function(){return V_})),e.d(t,"pd",(function(){return W_})),e.d(t,"wk",(function(){return q_})),e.d(t,"yf",(function(){return z_})),e.d(t,"Xe",(function(){return U_})),e.d(t,"eb",(function(){return K_})),e.d(t,"Lg",(function(){return Q_})),e.d(t,"hi",(function(){return N_})),e.d(t,"Ok",(function(){return X_})),e.d(t,"Ye",(function(){return Y_})),e.d(t,"Ze",(function(){return H_})),e.d(t,"if",(function(){return J_})),e.d(t,"dh",(function(){return Z_})),e.d(t,"Ah",(function(){return $_})),e.d(t,"rf",(function(){return nd})),e.d(t,"Be",(function(){return td})),e.d(t,"xf",(function(){return ed})),e.d(t,"vk",(function(){return rd})),e.d(t,"ai",(function(){return ud})),e.d(t,"hb",(function(){return fd})),e.d(t,"Dj",(function(){return cd})),e.d(t,"Ej",(function(){return id})),e.d(t,"ab",(function(){return od})),e.d(t,"Qg",(function(){return _d})),e.d(t,"Tg",(function(){return dd})),e.d(t,"Rg",(function(){return ad})),e.d(t,"Vg",(function(){return bd})),e.d(t,"Kg",(function(){return gd})),e.d(t,"Ji",(function(){return wd})),e.d(t,"Cf",(function(){return sd})),e.d(t,"Ug",(function(){return ld})),e.d(t,"Pg",(function(){return md})),e.d(t,"Sg",(function(){return pd})),e.d(t,"bb",(function(){return hd})),e.d(t,"bf",(function(){return xd})),e.d(t,"Ii",(function(){return yd})),e.d(t,"hj",(function(){return Sd})),e.d(t,"rl",(function(){return kd})),e.d(t,"Cl",(function(){return vd})),e.d(t,"vl",(function(){return Bd})),e.d(t,"kl",(function(){return Pd})),e.d(t,"ll",(function(){return Id})),e.d(t,"ml",(function(){return jd})),e.d(t,"nl",(function(){return Ad})),e.d(t,"ol",(function(){return Dd})),e.d(t,"pl",(function(){return Td})),e.d(t,"ql",(function(){return Cd})),e.d(t,"Tk",(function(){return Md})),e.d(t,"Uk",(function(){return Fd})),e.d(t,"Vk",(function(){return Ed})),e.d(t,"Wk",(function(){return Rd})),e.d(t,"Xk",(function(){return Ld})),e.d(t,"Yk",(function(){return Od})),e.d(t,"Zk",(function(){return Gd})),e.d(t,"al",(function(){return Vd})),e.d(t,"bl",(function(){return Wd})),e.d(t,"cl",(function(){return qd})),e.d(t,"dl",(function(){return zd})),e.d(t,"el",(function(){return Ud})),e.d(t,"fl",(function(){return Kd})),e.d(t,"gl",(function(){return Qd})),e.d(t,"hl",(function(){return Nd})),e.d(t,"il",(function(){return Xd})),e.d(t,"jl",(function(){return Yd}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=0,d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}let b=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof b.encodeInto?function(n,t){return b.encodeInto(n,t)}:function(n,t){const e=b.encode(n);return t.set(e),{read:n.length,written:e.length}};function w(n,t,e){if(void 0===e){const e=b.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),_=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=g(n,t).written,u=e(u,r,c,1)>>>0}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}let p=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function h(n,t){return n>>>=0,p.decode(a().subarray(n,n+t))}function x(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=n,t}p.decode();let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1f16ed14c4113ada(n,t,x(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd5049760db0adc06(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__ha7ea60f8c5574a3c(n,t,x(e),x(u))}function I(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h045398e91cfcbcdb(n,t,x(e))}function j(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h4ab5cbe7c5ccb7a3(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0aa8edca6c9e0bd1(n,t,x(e),x(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h07d5f0bdfa9c26d9(n,t,x(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h093c1a5c04fc1136(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hdff0f3ecdf0e4b79(n,t,x(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h2c2400aa68036af3(n,t,x(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}let L=null;function O(n,t){return n>>>=0,(null!==L&&0!==L.byteLength||(L=new Float32Array(r.memory.buffer)),L).subarray(n/4,n/4+t)}function G(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}function V(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(x(n))}}function W(n){o(n)}function q(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function z(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n,t){return x(h(n,t))}function K(n){return x(c(n))}function Q(n){return void 0===c(n)}function N(){return x(new Error)}function X(n,t){const e=w(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Y(n,t){let e,u;try{e=n,u=t,console.error(h(n,t))}finally{r.__wbindgen_free(e,u,1)}}function H(n){return x(fetch(c(n)))}function J(n){return c(n).offsetX}function Z(n){return c(n).offsetY}function $(n){return x(c(n).Window)}function nn(n){const t=c(n).webkitFullscreenElement;return s(t)?0:x(t)}function tn(){return x(ResizeObserverEntry.prototype)}function en(n){return x(c(n).scheduler)}function rn(n){return x(c(n).getCoalescedEvents)}function un(n){return x(c(n).requestFullscreen)}function fn(n){return x(c(n).requestIdleCallback)}function cn(n){return x(c(n).onpointerrawupdate)}function on(n){c(n).webkitRequestFullscreen()}function _n(n){return x(c(n).requestFullscreen())}function dn(n){return x(c(n).scheduler)}function an(n,t,e){return x(c(n).postTask(c(t),c(e)))}function bn(n){return x(n)}function gn(n){return x(c(n).performance)}function wn(n){return c(n).now()}function sn(n){let t;try{t=c(n)instanceof GPUDeviceLostInfo}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function mn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function pn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function hn(n){return c(n).size}function xn(n){return c(n).usage}function yn(n){c(n).destroy()}function Sn(n,t,e){return x(c(n).getMappedRange(t,e))}function kn(n,t,e,r){return x(c(n).mapAsync(t>>>0,e,r))}function vn(n){c(n).unmap()}function Bn(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function Pn(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function In(n){c(n).end()}function jn(n,t){c(n).setPipeline(c(t))}function An(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Dn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Tn(n,t){return x(c(n).getBindGroupLayout(t>>>0))}function Cn(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function Mn(n){return x(c(n).gpu)}function Fn(n){return x(c(n).getPreferredCanvasFormat())}function En(n,t){return x(c(n).requestAdapter(c(t)))}function Rn(n,t){return x(c(n).getBindGroupLayout(t>>>0))}function Ln(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function On(n){return x(c(n).finish())}function Gn(n,t){return x(c(n).finish(c(t)))}function Vn(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Wn(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function qn(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function zn(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Un(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Kn(n,t,e){c(n).drawIndirect(c(t),e)}function Qn(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Nn(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function Xn(n,t){c(n).setPipeline(c(t))}function Yn(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Hn(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Jn(n){return x(c(n).features)}function Zn(n){return x(c(n).limits)}function $n(n){return x(c(n).queue)}function nt(n){return x(c(n).lost)}function tt(n,t){c(n).onuncapturederror=c(t)}function et(n,t){return x(c(n).createBindGroup(c(t)))}function rt(n,t){return x(c(n).createBindGroupLayout(c(t)))}function ut(n,t){return x(c(n).createBuffer(c(t)))}function ft(n,t){return x(c(n).createCommandEncoder(c(t)))}function ct(n,t){return x(c(n).createComputePipeline(c(t)))}function it(n,t){return x(c(n).createPipelineLayout(c(t)))}function ot(n,t){return x(c(n).createQuerySet(c(t)))}function _t(n,t){return x(c(n).createRenderBundleEncoder(c(t)))}function dt(n,t){return x(c(n).createRenderPipeline(c(t)))}function at(n,t){return x(c(n).createSampler(c(t)))}function bt(n,t){return x(c(n).createShaderModule(c(t)))}function gt(n,t){return x(c(n).createTexture(c(t)))}function wt(n){c(n).destroy()}function st(n){return x(c(n).popErrorScope())}function lt(n,t){c(n).pushErrorScope(o(t))}function mt(n,t){return x(c(n).createView(c(t)))}function pt(n){c(n).destroy()}function ht(n){return x(c(n).type)}function xt(n){return c(n).offset}function yt(n){return c(n).length}function St(n){return c(n).lineNum}function kt(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function vt(n,t){c(n).configure(c(t))}function Bt(n){return x(c(n).getCurrentTexture())}function Pt(n){return x(c(n).reason)}function It(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function jt(n){c(n).end()}function At(n,t){c(n).executeBundles(c(t))}function Dt(n,t){c(n).setBlendConstant(c(t))}function Tt(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Ct(n,t){c(n).setStencilReference(t>>>0)}function Mt(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Ft(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function Et(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function Rt(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Lt(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function Ot(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Gt(n,t,e){c(n).drawIndirect(c(t),e)}function Vt(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Wt(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function qt(n,t){c(n).setPipeline(c(t))}function zt(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function Ut(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Kt(n){return x(c(n).getCompilationInfo())}function Qt(n,t){const e=w(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Nt(n,t){return x(c(n).beginComputePass(c(t)))}function Xt(n,t){return x(c(n).beginRenderPass(c(t)))}function Yt(n,t,e){c(n).clearBuffer(c(t),e)}function Ht(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Jt(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Zt(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function $t(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function ne(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function te(n){return x(c(n).finish())}function ee(n,t){return x(c(n).finish(c(t)))}function re(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function ue(n){return x(c(n).error)}function fe(n,t,e){return c(n).has(h(t,e))}function ce(n){return c(n).maxTextureDimension1D}function ie(n){return c(n).maxTextureDimension2D}function oe(n){return c(n).maxTextureDimension3D}function _e(n){return c(n).maxTextureArrayLayers}function de(n){return c(n).maxBindGroups}function ae(n){return c(n).maxBindingsPerBindGroup}function be(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function ge(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function we(n){return c(n).maxSampledTexturesPerShaderStage}function se(n){return c(n).maxSamplersPerShaderStage}function le(n){return c(n).maxStorageBuffersPerShaderStage}function me(n){return c(n).maxStorageTexturesPerShaderStage}function pe(n){return c(n).maxUniformBuffersPerShaderStage}function he(n){return c(n).maxUniformBufferBindingSize}function xe(n){return c(n).maxStorageBufferBindingSize}function ye(n){return c(n).maxVertexBuffers}function Se(n){return c(n).maxBufferSize}function ke(n){return c(n).maxVertexAttributes}function ve(n){return c(n).maxVertexBufferArrayStride}function Be(n){return c(n).minUniformBufferOffsetAlignment}function Pe(n){return c(n).minStorageBufferOffsetAlignment}function Ie(n){return c(n).maxInterStageShaderComponents}function je(n){return c(n).maxColorAttachments}function Ae(n){return c(n).maxColorAttachmentBytesPerSample}function De(n){return c(n).maxComputeWorkgroupStorageSize}function Te(n){return c(n).maxComputeInvocationsPerWorkgroup}function Ce(n){return c(n).maxComputeWorkgroupSizeX}function Me(n){return c(n).maxComputeWorkgroupSizeY}function Fe(n){return c(n).maxComputeWorkgroupSizeZ}function Ee(n){return c(n).maxComputeWorkgroupsPerDimension}function Re(n){const t=c(n);return"object"==typeof t&&null!==t}function Le(n){return x(c(n).Window)}function Oe(n){return x(c(n).WorkerGlobalScope)}function Ge(n,t){return x(c(n).requestDevice(c(t)))}function Ve(n){return x(c(n).features)}function We(n){return x(c(n).limits)}function qe(n){return x(c(n).messages)}function ze(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Ue(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function Ke(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function Qe(n,t){c(n).submit(c(t))}function Ne(n){queueMicrotask(c(n))}function Xe(n){return x(c(n).queueMicrotask)}function Ye(n){return"function"==typeof c(n)}function He(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Je(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function Ze(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function $e(n,t,e){c(n).beginQuery(t>>>0,c(e))}function nr(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function tr(n,t,e){c(n).bindSampler(t>>>0,c(e))}function er(n,t){c(n).bindVertexArray(c(t))}function rr(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function ur(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function fr(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function cr(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function ir(n,t,e,r,u){c(n).clearBufferfv(t>>>0,e,O(r,u))}function or(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,G(r,u))}function _r(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function dr(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function ar(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function br(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function gr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function wr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function sr(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function lr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function mr(n){const t=c(n).createQuery();return s(t)?0:x(t)}function pr(n){const t=c(n).createSampler();return s(t)?0:x(t)}function hr(n){const t=c(n).createVertexArray();return s(t)?0:x(t)}function xr(n,t){c(n).deleteQuery(c(t))}function yr(n,t){c(n).deleteSampler(c(t))}function Sr(n,t){c(n).deleteSync(c(t))}function kr(n,t){c(n).deleteVertexArray(c(t))}function vr(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function Br(n,t){c(n).drawBuffers(c(t))}function Pr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function Ir(n,t){c(n).endQuery(t>>>0)}function jr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return s(r)?0:x(r)}function Ar(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function Dr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function Tr(){return V((function(n,t,e){return x(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function Cr(n,t,e){return x(c(n).getQueryParameter(c(t),e>>>0))}function Mr(n,t,e){return x(c(n).getSyncParameter(c(t),e>>>0))}function Fr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),h(e,r))}function Er(){return V((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function Rr(n,t){c(n).readBuffer(t>>>0)}function Lr(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Or(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Gr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function Vr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Wr(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Ur(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Kr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Qr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Nr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Xr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Yr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Hr(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Jr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Zr(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function $r(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function nu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function tu(){return V((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function eu(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function ru(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function uu(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function fu(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function cu(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function iu(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function ou(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function _u(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function du(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function au(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function bu(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function gu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function wu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,O(r,u))}function su(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,O(r,u))}function lu(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function mu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,O(r,u))}function pu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,O(r,u))}function hu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function xu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,O(r,u))}function yu(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,O(r,u))}function Su(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function ku(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function vu(n,t){c(n).activeTexture(t>>>0)}function Bu(n,t,e){c(n).attachShader(c(t),c(e))}function Pu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,h(r,u))}function Iu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function ju(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Au(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Du(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Tu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Cu(n,t){c(n).blendEquation(t>>>0)}function Mu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Fu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Eu(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ru(n,t){c(n).clear(t>>>0)}function Lu(n,t){c(n).clearDepth(t)}function Ou(n,t){c(n).clearStencil(t)}function Gu(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Vu(n,t){c(n).compileShader(c(t))}function Wu(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function qu(n){const t=c(n).createBuffer();return s(t)?0:x(t)}function zu(n){const t=c(n).createFramebuffer();return s(t)?0:x(t)}function Uu(n){const t=c(n).createProgram();return s(t)?0:x(t)}function Ku(n){const t=c(n).createRenderbuffer();return s(t)?0:x(t)}function Qu(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:x(e)}function Nu(n){const t=c(n).createTexture();return s(t)?0:x(t)}function Xu(n,t){c(n).cullFace(t>>>0)}function Yu(n,t){c(n).deleteBuffer(c(t))}function Hu(n,t){c(n).deleteFramebuffer(c(t))}function Ju(n,t){c(n).deleteProgram(c(t))}function Zu(n,t){c(n).deleteRenderbuffer(c(t))}function $u(n,t){c(n).deleteShader(c(t))}function nf(n,t){c(n).deleteTexture(c(t))}function tf(n,t){c(n).depthFunc(t>>>0)}function ef(n,t){c(n).depthMask(0!==t)}function rf(n,t,e){c(n).depthRange(t,e)}function uf(n,t){c(n).disable(t>>>0)}function ff(n,t){c(n).disableVertexAttribArray(t>>>0)}function cf(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function of(n,t){c(n).enable(t>>>0)}function _f(n,t){c(n).enableVertexAttribArray(t>>>0)}function df(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function af(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function bf(n,t){c(n).frontFace(t>>>0)}function gf(){return V((function(n,t,e){const r=c(n).getExtension(h(t,e));return s(r)?0:x(r)}),arguments)}function wf(){return V((function(n,t){return x(c(n).getParameter(t>>>0))}),arguments)}function sf(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function lf(n,t,e){return x(c(n).getProgramParameter(c(t),e>>>0))}function mf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function pf(n,t,e){return x(c(n).getShaderParameter(c(t),e>>>0))}function hf(n){const t=c(n).getSupportedExtensions();return s(t)?0:x(t)}function xf(n,t,e,r){const u=c(n).getUniformLocation(c(t),h(e,r));return s(u)?0:x(u)}function yf(n,t){c(n).linkProgram(c(t))}function Sf(n,t,e){c(n).pixelStorei(t>>>0,e)}function kf(n,t,e){c(n).polygonOffset(t,e)}function vf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Bf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Pf(n,t,e,r){c(n).shaderSource(c(t),h(e,r))}function If(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function jf(n,t){c(n).stencilMask(t>>>0)}function Af(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Df(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Tf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Cf(n,t,e){c(n).uniform1f(c(t),e)}function Mf(n,t,e){c(n).uniform1i(c(t),e)}function Ff(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ef(n,t){c(n).useProgram(c(t))}function Rf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Lf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Of(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function Gf(n){const t=c(n).document;return s(t)?0:x(t)}function Vf(n){return x(c(n).location)}function Wf(n){return x(c(n).navigator)}function qf(n){return c(n).devicePixelRatio}function zf(n,t){c(n).cancelIdleCallback(t>>>0)}function Uf(){return V((function(n,t){const e=c(n).getComputedStyle(c(t));return s(e)?0:x(e)}),arguments)}function Kf(){return V((function(n,t,e){const r=c(n).matchMedia(h(t,e));return s(r)?0:x(r)}),arguments)}function Qf(){return V((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Nf(){return V((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Xf(){return V((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Yf(n,t){c(n).clearTimeout(t)}function Hf(){return V((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Jf(){return V((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Zf(n){const t=c(n).body;return s(t)?0:x(t)}function $f(n){return x(c(n).visibilityState)}function nc(n){const t=c(n).activeElement;return s(t)?0:x(t)}function tc(n){const t=c(n).fullscreenElement;return s(t)?0:x(t)}function ec(){return V((function(n,t,e){return x(c(n).createElement(h(t,e)))}),arguments)}function rc(n,t,e){const r=c(n).getElementById(h(t,e));return s(r)?0:x(r)}function uc(){return V((function(n,t,e){const r=c(n).querySelector(h(t,e));return s(r)?0:x(r)}),arguments)}function fc(){return V((function(n,t,e){return x(c(n).querySelectorAll(h(t,e)))}),arguments)}function cc(){return V((function(n,t,e,r,u){c(n).setAttribute(h(t,e),h(r,u))}),arguments)}function ic(){return V((function(n,t){c(n).setPointerCapture(t)}),arguments)}function oc(n){return x(c(n).navigator)}function _c(n,t){return x(c(n).fetch(c(t)))}function dc(n){return x(c(n).style)}function ac(){return V((function(n){c(n).focus()}),arguments)}function bc(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function gc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function wc(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function sc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function lc(){return V((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function mc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function pc(){return V((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function hc(n,t,e,r){c(n).uniform2fv(c(t),O(e,r))}function xc(n,t,e,r){c(n).uniform2iv(c(t),G(e,r))}function yc(n,t,e,r){c(n).uniform3fv(c(t),O(e,r))}function Sc(n,t,e,r){c(n).uniform3iv(c(t),G(e,r))}function kc(n,t,e,r){c(n).uniform4fv(c(t),O(e,r))}function vc(n,t,e,r){c(n).uniform4iv(c(t),G(e,r))}function Bc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,O(r,u))}function Pc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,O(r,u))}function Ic(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,O(r,u))}function jc(n,t){c(n).activeTexture(t>>>0)}function Ac(n,t,e){c(n).attachShader(c(t),c(e))}function Dc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,h(r,u))}function Tc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function Cc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function Mc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Fc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function Ec(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function Rc(n,t){c(n).blendEquation(t>>>0)}function Lc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Oc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Gc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Vc(n,t){c(n).clear(t>>>0)}function Wc(n,t){c(n).clearDepth(t)}function qc(n,t){c(n).clearStencil(t)}function zc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Uc(n,t){c(n).compileShader(c(t))}function Kc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Qc(n){const t=c(n).createBuffer();return s(t)?0:x(t)}function Nc(n){const t=c(n).createFramebuffer();return s(t)?0:x(t)}function Xc(n){const t=c(n).createProgram();return s(t)?0:x(t)}function Yc(n){const t=c(n).createRenderbuffer();return s(t)?0:x(t)}function Hc(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:x(e)}function Jc(n){const t=c(n).createTexture();return s(t)?0:x(t)}function Zc(n,t){c(n).cullFace(t>>>0)}function $c(n,t){c(n).deleteBuffer(c(t))}function ni(n,t){c(n).deleteFramebuffer(c(t))}function ti(n,t){c(n).deleteProgram(c(t))}function ei(n,t){c(n).deleteRenderbuffer(c(t))}function ri(n,t){c(n).deleteShader(c(t))}function ui(n,t){c(n).deleteTexture(c(t))}function fi(n,t){c(n).depthFunc(t>>>0)}function ci(n,t){c(n).depthMask(0!==t)}function ii(n,t,e){c(n).depthRange(t,e)}function oi(n,t){c(n).disable(t>>>0)}function _i(n,t){c(n).disableVertexAttribArray(t>>>0)}function di(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ai(n,t){c(n).enable(t>>>0)}function bi(n,t){c(n).enableVertexAttribArray(t>>>0)}function gi(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function wi(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function si(n,t){c(n).frontFace(t>>>0)}function li(){return V((function(n,t){return x(c(n).getParameter(t>>>0))}),arguments)}function mi(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function pi(n,t,e){return x(c(n).getProgramParameter(c(t),e>>>0))}function hi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function xi(n,t,e){return x(c(n).getShaderParameter(c(t),e>>>0))}function yi(n,t,e,r){const u=c(n).getUniformLocation(c(t),h(e,r));return s(u)?0:x(u)}function Si(n,t){c(n).linkProgram(c(t))}function ki(n,t,e){c(n).pixelStorei(t>>>0,e)}function vi(n,t,e){c(n).polygonOffset(t,e)}function Bi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function Pi(n,t,e,r,u){c(n).scissor(t,e,r,u)}function Ii(n,t,e,r){c(n).shaderSource(c(t),h(e,r))}function ji(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function Ai(n,t){c(n).stencilMask(t>>>0)}function Di(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function Ti(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ci(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Mi(n,t,e){c(n).uniform1f(c(t),e)}function Fi(n,t,e){c(n).uniform1i(c(t),e)}function Ei(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Ri(n,t){c(n).useProgram(c(t))}function Li(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Oi(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Gi(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function Vi(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function Wi(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function qi(){return V((function(n,t,e,u){const f=w(c(t).getPropertyValue(h(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function zi(){return V((function(n,t,e,u){const f=w(c(t).removeProperty(h(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Ui(){return V((function(n,t,e,r,u){c(n).setProperty(h(t,e),h(r,u))}),arguments)}function Ki(){return V((function(n){return x(new IntersectionObserver(c(n)))}),arguments)}function Qi(n){c(n).disconnect()}function Ni(n,t){c(n).observe(c(t))}function Xi(){return V((function(n,t){return x(c(n).appendChild(c(t)))}),arguments)}function Yi(n,t){return c(n).contains(c(t))}function Hi(n,t){const e=c(n)[t>>>0];return s(e)?0:x(e)}function Ji(n,t){c(n).drawBuffersWEBGL(c(t))}function Zi(n){return c(n).videoWidth}function $i(n){return c(n).videoHeight}function no(n){return x(c(n).port1)}function to(n){return x(c(n).port2)}function eo(){return V((function(){return x(new MessageChannel)}),arguments)}function ro(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function uo(n){return c(n).isIntersecting}function fo(n){return x(c(n).contentRect)}function co(n){return x(c(n).devicePixelContentBoxSize)}function io(n){return c(n).inlineSize}function oo(n){return c(n).blockSize}function _o(n){console.debug(c(n))}function ao(n){console.error(c(n))}function bo(n,t){console.error(c(n),c(t))}function go(n){console.info(c(n))}function wo(n){console.log(c(n))}function so(n){console.warn(c(n))}function lo(n){return x(c(n).signal)}function mo(){return V((function(){return x(new AbortController)}),arguments)}function po(n){c(n).abort()}function ho(n){c(n).close()}function xo(){return V((function(n,t){c(n).postMessage(c(t))}),arguments)}function yo(n){c(n).start()}function So(n){return c(n).width}function ko(n){return c(n).height}function vo(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function Bo(n){return c(n).width}function Po(n,t){c(n).width=t>>>0}function Io(n){return c(n).height}function jo(n,t){c(n).height=t>>>0}function Ao(){return V((function(n,t,e){const r=c(n).getContext(h(t,e));return s(r)?0:x(r)}),arguments)}function Do(){return V((function(n,t,e,r){const u=c(n).getContext(h(t,e),c(r));return s(u)?0:x(u)}),arguments)}function To(n){return c(n).width}function Co(n){return c(n).height}function Mo(n){return c(n).altKey}function Fo(n){return c(n).ctrlKey}function Eo(n){return c(n).shiftKey}function Ro(n){return c(n).metaKey}function Lo(n){return c(n).location}function Oo(n){return c(n).repeat}function Go(n,t){const e=w(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Vo(n,t){const e=w(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Wo(n){return c(n).width}function qo(n,t){c(n).width=t>>>0}function zo(n){return c(n).height}function Uo(n,t){c(n).height=t>>>0}function Ko(){return V((function(n,t,e){const r=c(n).getContext(h(t,e));return s(r)?0:x(r)}),arguments)}function Qo(){return V((function(n,t,e,r){const u=c(n).getContext(h(t,e),c(r));return s(u)?0:x(u)}),arguments)}function No(n){return c(n).persisted}function Xo(){return V((function(n,t,e,r){c(n).addEventListener(h(t,e),c(r))}),arguments)}function Yo(){return V((function(n,t,e,r){c(n).removeEventListener(h(t,e),c(r))}),arguments)}function Ho(){return V((function(n){return x(new ResizeObserver(c(n)))}),arguments)}function Jo(n){c(n).disconnect()}function Zo(n,t){c(n).observe(c(t))}function $o(n,t,e){c(n).observe(c(t),c(e))}function n_(n,t){c(n).unobserve(c(t))}function t_(){return V((function(){return x(new Headers)}),arguments)}function e_(){return V((function(n,t,e,r,u){c(n).append(h(t,e),h(r,u))}),arguments)}function r_(){return V((function(n,t){const e=w(c(t).origin,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}),arguments)}function u_(n){return c(n).deltaX}function f_(n){return c(n).deltaY}function c_(n){return c(n).deltaMode}function i_(n,t){c(n).bindVertexArrayOES(c(t))}function o_(n){const t=c(n).createVertexArrayOES();return s(t)?0:x(t)}function __(n,t){c(n).deleteVertexArrayOES(c(t))}function d_(){return V((function(n,t,e){return x(new Request(h(n,t),c(e)))}),arguments)}function a_(n){let t;try{t=c(n)instanceof Response}catch(n){t=!1}return t}function b_(n,t){const e=w(c(t).url,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function g_(n){return c(n).status}function w_(n){return x(c(n).headers)}function s_(){return V((function(n){return x(c(n).arrayBuffer())}),arguments)}function l_(){return V((function(n){return x(c(n).text())}),arguments)}function m_(n){const t=c(n).getSupportedProfiles();return s(t)?0:x(t)}function p_(n){c(n).preventDefault()}function h_(n,t){const e=w(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function x_(n){return c(n).matches}function y_(){return V((function(n,t){c(n).addListener(c(t))}),arguments)}function S_(){return V((function(n,t){c(n).removeListener(c(t))}),arguments)}function k_(n){return c(n).ctrlKey}function v_(n){return c(n).shiftKey}function B_(n){return c(n).altKey}function P_(n){return c(n).metaKey}function I_(n){return c(n).button}function j_(n){return c(n).buttons}function A_(n){return c(n).movementX}function D_(n){return c(n).movementY}function T_(n){return c(n).pointerId}function C_(n){return c(n).pressure}function M_(n,t){const e=w(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function F_(n){return x(c(n).getCoalescedEvents())}function E_(n,t){return x(c(n)[t>>>0])}function R_(n){return c(n).length}function L_(){return x(new Array)}function O_(n,t){return x(new Function(h(n,t)))}function G_(n){return x(c(n).next)}function V_(){return V((function(n){return x(c(n).next())}),arguments)}function W_(n){return c(n).done}function q_(n){return x(c(n).value)}function z_(){return x(Symbol.iterator)}function U_(){return V((function(n,t){return x(Reflect.get(c(n),c(t)))}),arguments)}function K_(){return V((function(n,t){return x(c(n).call(c(t)))}),arguments)}function Q_(){return x(new Object)}function N_(){return V((function(){return x(self.self)}),arguments)}function X_(){return V((function(){return x(window.window)}),arguments)}function Y_(){return V((function(){return x(globalThis.globalThis)}),arguments)}function H_(){return V((function(){return x(global.global)}),arguments)}function J_(n,t,e){return c(n).includes(c(t),e)}function Z_(n){return x(Array.of(c(n)))}function $_(n,t){return c(n).push(c(t))}function nd(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function td(n,t){return x(Object.getOwnPropertyDescriptor(c(n),c(t)))}function ed(n,t){return Object.is(c(n),c(t))}function rd(n){return x(c(n).valueOf())}function ud(n){return x(Promise.resolve(c(n)))}function fd(n,t){return x(c(n).catch(c(t)))}function cd(n,t){return x(c(n).then(c(t)))}function id(n,t,e){return x(c(n).then(c(t),c(e)))}function od(n){return x(c(n).buffer)}function _d(n,t,e){return x(new Int8Array(c(n),t>>>0,e>>>0))}function dd(n,t,e){return x(new Int16Array(c(n),t>>>0,e>>>0))}function ad(n,t,e){return x(new Int32Array(c(n),t>>>0,e>>>0))}function bd(n,t,e){return x(new Uint8Array(c(n),t>>>0,e>>>0))}function gd(n){return x(new Uint8Array(c(n)))}function wd(n,t,e){c(n).set(c(t),e>>>0)}function sd(n){return c(n).length}function ld(n,t,e){return x(new Uint16Array(c(n),t>>>0,e>>>0))}function md(n,t,e){return x(new Uint32Array(c(n),t>>>0,e>>>0))}function pd(n,t,e){return x(new Float32Array(c(n),t>>>0,e>>>0))}function hd(n){return x(c(n).buffer)}function xd(){return V((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function yd(){return V((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function Sd(){return V((function(n){return x(JSON.stringify(c(n)))}),arguments)}function kd(n,t){const e=w(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=_;m()[n/4+1]=u,m()[n/4+0]=e}function vd(n,t){throw new Error(h(n,t))}function Bd(){return x(r.memory)}function Pd(n,t,e){return x(k(n,t,49,v))}function Id(n,t,e){return x(k(n,t,49,v))}function jd(n,t,e){return x(k(n,t,49,v))}function Ad(n,t,e){return x(k(n,t,49,v))}function Dd(n,t,e){return x(k(n,t,49,B))}function Td(n,t,e){return x(k(n,t,49,v))}function Cd(n,t,e){return x(k(n,t,49,P))}function Md(n,t,e){return x(k(n,t,400,I))}function Fd(n,t,e){return x(k(n,t,400,I))}function Ed(n,t,e){return x(k(n,t,400,I))}function Rd(n,t,e){return x(k(n,t,400,I))}function Ld(n,t,e){return x(k(n,t,400,j))}function Od(n,t,e){return x(k(n,t,400,I))}function Gd(n,t,e){return x(k(n,t,400,A))}function Vd(n,t,e){return x(k(n,t,901,D))}function Wd(n,t,e){return x(k(n,t,901,D))}function qd(n,t,e){return x(k(n,t,901,T))}function zd(n,t,e){return x(k(n,t,901,D))}function Ud(n,t,e){return x(k(n,t,901,D))}function Kd(n,t,e){return x(k(n,t,901,D))}function Qd(n,t,e){return x(k(n,t,901,D))}function Nd(n,t,e){return x(k(n,t,2036,C))}function Xd(n,t,e){return x(k(n,t,2036,C))}function Yd(n,t,e){return x(k(n,t,2213,M))}}).call(this,e(260)(n))},426:function(n,t,e){"use strict";e.r(t);var r=e(427),u=e(248);e.d(t,"__wbg_set_wasm",(function(){return u.Ki})),e.d(t,"run",(function(){return u.Dl})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.zl})),e.d(t,"__wbindgen_string_get",(function(){return u.Al})),e.d(t,"__wbindgen_cb_drop",(function(){return u.Sk})),e.d(t,"__wbindgen_string_new",(function(){return u.Bl})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.yl})),e.d(t,"__wbindgen_is_undefined",(function(){return u.ul})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Ng})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Wi})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Qd})),e.d(t,"__wbg_fetch_386f87a3ebf5003c",(function(){return u.Vd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.eh})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.fh})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.Ik})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.yh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.ei})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.pe})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Vh})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Yh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.hh})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.Jk})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Wh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.di})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.vh})),e.d(t,"__wbindgen_number_new",(function(){return u.xl})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.jh})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Zg})),e.d(t,"__wbg_instanceof_GpuDeviceLostInfo_7e4f4c14e734d560",(function(){return u.nf})),e.d(t,"__wbg_instanceof_GpuCanvasContext_72cf2f3147fa568b",(function(){return u.mf})),e.d(t,"__wbg_instanceof_GpuValidationError_e7146b8b62d138ed",(function(){return u.pf})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_ad5a9be631a5a885",(function(){return u.of})),e.d(t,"__wbg_size_4feb49ef9a442235",(function(){return u.Vi})),e.d(t,"__wbg_usage_4924f3f43423706f",(function(){return u.sk})),e.d(t,"__wbg_destroy_2066c3be8bd2b3d4",(function(){return u.bd})),e.d(t,"__wbg_getMappedRange_a7d6128fd2468571",(function(){return u.Ae})),e.d(t,"__wbg_mapAsync_d327338760612efe",(function(){return u.Nf})),e.d(t,"__wbg_unmap_0f3b0fa964e121f2",(function(){return u.pk})),e.d(t,"__wbg_dispatchWorkgroups_fefc6526d5b3d53e",(function(){return u.nd})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_757505524ce1d2c1",(function(){return u.md})),e.d(t,"__wbg_end_86264633497c7abb",(function(){return u.Md})),e.d(t,"__wbg_setPipeline_150bb18fb4c2ec59",(function(){return u.ui})),e.d(t,"__wbg_setBindGroup_5a6e8d58446a31d7",(function(){return u.li})),e.d(t,"__wbg_setBindGroup_cc35d87f67bdd8ba",(function(){return u.ni})),e.d(t,"__wbg_getBindGroupLayout_fb182c306948892a",(function(){return u.me})),e.d(t,"__wbg_instanceof_GpuAdapter_db0c3387cc59947c",(function(){return u.lf})),e.d(t,"__wbg_gpu_277beb1ba6532ef1",(function(){return u.af})),e.d(t,"__wbg_getPreferredCanvasFormat_3c91d609a992d5b5",(function(){return u.Ee})),e.d(t,"__wbg_requestAdapter_d4f9de0ec00d885a",(function(){return u.Sh})),e.d(t,"__wbg_getBindGroupLayout_e4826038352f02f8",(function(){return u.le})),e.d(t,"__wbg_message_cb3df5b2dd101658",(function(){return u.vg})),e.d(t,"__wbg_finish_16055427f8d72a3a",(function(){return u.Xd})),e.d(t,"__wbg_finish_b4fdba02b1c5d125",(function(){return u.ae})),e.d(t,"__wbg_setBindGroup_c4b0ecd6bed8bef8",(function(){return u.mi})),e.d(t,"__wbg_setBindGroup_594f0344b759081c",(function(){return u.ki})),e.d(t,"__wbg_draw_735e4838bac489e3",(function(){return u.Ed})),e.d(t,"__wbg_drawIndexed_47cad7e4d91cc535",(function(){return u.Ad})),e.d(t,"__wbg_drawIndexedIndirect_3268698ea1f656b0",(function(){return u.yd})),e.d(t,"__wbg_drawIndirect_0fed61d8c02d6492",(function(){return u.Cd})),e.d(t,"__wbg_setIndexBuffer_27dacb8c312e452a",(function(){return u.ri})),e.d(t,"__wbg_setIndexBuffer_7e30c8999cdb61da",(function(){return u.si})),e.d(t,"__wbg_setPipeline_d04155144eeb06a6",(function(){return u.wi})),e.d(t,"__wbg_setVertexBuffer_7fa1c5d1981b1b25",(function(){return u.Ei})),e.d(t,"__wbg_setVertexBuffer_69b599180a9c78eb",(function(){return u.Di})),e.d(t,"__wbg_features_7c0d3a64a29404cd",(function(){return u.Td})),e.d(t,"__wbg_limits_509ce801b2bb07f1",(function(){return u.Ff})),e.d(t,"__wbg_queue_75db0ccbdab685b1",(function(){return u.Fh})),e.d(t,"__wbg_lost_efcd7af72fc0e5bd",(function(){return u.Mf})),e.d(t,"__wbg_setonuncapturederror_e5bd32773a18ba7b",(function(){return u.Ni})),e.d(t,"__wbg_createBindGroup_75a1cf9ef7562a07",(function(){return u.Tb})),e.d(t,"__wbg_createBindGroupLayout_ac790a338b41dffd",(function(){return u.Sb})),e.d(t,"__wbg_createBuffer_ac256792e80cf023",(function(){return u.Wb})),e.d(t,"__wbg_createCommandEncoder_921eb0405e5127c8",(function(){return u.Xb})),e.d(t,"__wbg_createComputePipeline_33c5d62227646de8",(function(){return u.Yb})),e.d(t,"__wbg_createPipelineLayout_8fd996592f162636",(function(){return u.cc})),e.d(t,"__wbg_createQuerySet_ed42ff89f25d48d1",(function(){return u.fc})),e.d(t,"__wbg_createRenderBundleEncoder_02e21a1658c5341e",(function(){return u.hc})),e.d(t,"__wbg_createRenderPipeline_59f0e558af531c5d",(function(){return u.ic})),e.d(t,"__wbg_createSampler_d3e1a00417360270",(function(){return u.mc})),e.d(t,"__wbg_createShaderModule_7c7c1409f0b07867",(function(){return u.nc})),e.d(t,"__wbg_createTexture_28e8e0adab2ea101",(function(){return u.rc})),e.d(t,"__wbg_destroy_4c972e44ba22f29c",(function(){return u.cd})),e.d(t,"__wbg_popErrorScope_06cf37f64ac2f04f",(function(){return u.rh})),e.d(t,"__wbg_pushErrorScope_3af1c8cf441c60ec",(function(){return u.zh})),e.d(t,"__wbg_createView_25ff961900f4f127",(function(){return u.vc})),e.d(t,"__wbg_destroy_6294201086a36784",(function(){return u.dd})),e.d(t,"__wbg_type_3e96ff69755439f3",(function(){return u.Fj})),e.d(t,"__wbg_offset_47d9890d068c36f7",(function(){return u.gh})),e.d(t,"__wbg_length_65e8c2731dffd2c9",(function(){return u.Bf})),e.d(t,"__wbg_lineNum_73e2e8133d0b6194",(function(){return u.Gf})),e.d(t,"__wbg_message_30465084f154eb19",(function(){return u.tg})),e.d(t,"__wbg_configure_c38cb0a8cdcce026",(function(){return u.Gb})),e.d(t,"__wbg_getCurrentTexture_ce4fa2faf23e493e",(function(){return u.we})),e.d(t,"__wbg_reason_9ae3f90c7da67694",(function(){return u.Kh})),e.d(t,"__wbg_message_c292e216af2145c2",(function(){return u.ug})),e.d(t,"__wbg_end_1fc0ec63989fb66b",(function(){return u.Ld})),e.d(t,"__wbg_executeBundles_c16c7e291bf864c9",(function(){return u.Rd})),e.d(t,"__wbg_setBlendConstant_3f8cb3864191a018",(function(){return u.pi})),e.d(t,"__wbg_setScissorRect_5af338cf8c8f7768",(function(){return u.zi})),e.d(t,"__wbg_setStencilReference_b961aa39cd44c5c7",(function(){return u.Ai})),e.d(t,"__wbg_setViewport_de053c264e0f946c",(function(){return u.Hi})),e.d(t,"__wbg_setBindGroup_4c843299d584c65d",(function(){return u.ji})),e.d(t,"__wbg_setBindGroup_de8a68a3a8f2fe0f",(function(){return u.oi})),e.d(t,"__wbg_draw_ec4e6d5f693827ec",(function(){return u.Fd})),e.d(t,"__wbg_drawIndexed_53406a969d468014",(function(){return u.Bd})),e.d(t,"__wbg_drawIndexedIndirect_64cd3fa86bb6a57e",(function(){return u.zd})),e.d(t,"__wbg_drawIndirect_95256ae3fc258bd7",(function(){return u.Dd})),e.d(t,"__wbg_setIndexBuffer_1da8698225e775b6",(function(){return u.qi})),e.d(t,"__wbg_setIndexBuffer_88b1b0614010b624",(function(){return u.ti})),e.d(t,"__wbg_setPipeline_731f7a4c73e804ab",(function(){return u.vi})),e.d(t,"__wbg_setVertexBuffer_bb9520da07aabe08",(function(){return u.Gi})),e.d(t,"__wbg_setVertexBuffer_b39a489ae0439bb5",(function(){return u.Fi})),e.d(t,"__wbg_getCompilationInfo_85315172204a0d3c",(function(){return u.qe})),e.d(t,"__wbg_label_e1f2274c29fe0fe1",(function(){return u.Af})),e.d(t,"__wbg_beginComputePass_72414f8bff799a63",(function(){return u.q})),e.d(t,"__wbg_beginRenderPass_ccaceb8df9c417fb",(function(){return u.s})),e.d(t,"__wbg_clearBuffer_7a4e626e60c153b5",(function(){return u.ib})),e.d(t,"__wbg_clearBuffer_bda4a86cfce2062b",(function(){return u.jb})),e.d(t,"__wbg_copyBufferToBuffer_daa0df76f9353412",(function(){return u.Kb})),e.d(t,"__wbg_copyBufferToTexture_41c7ac6c7e36db44",(function(){return u.Lb})),e.d(t,"__wbg_copyTextureToBuffer_316ffc2f76ae5e08",(function(){return u.Qb})),e.d(t,"__wbg_copyTextureToTexture_f414a3b48775e73b",(function(){return u.Rb})),e.d(t,"__wbg_finish_955ac749a1d7c84e",(function(){return u.Zd})),e.d(t,"__wbg_finish_17f3d495170d32fb",(function(){return u.Yd})),e.d(t,"__wbg_resolveQuerySet_36e76abab6c74350",(function(){return u.Zh})),e.d(t,"__wbg_error_9c1815f0e066919b",(function(){return u.Pd})),e.d(t,"__wbg_has_ff9a418e6a921f7f",(function(){return u.cf})),e.d(t,"__wbg_maxTextureDimension1D_e0f6d91684c7b79d",(function(){return u.kg})),e.d(t,"__wbg_maxTextureDimension2D_82ed71820123d389",(function(){return u.lg})),e.d(t,"__wbg_maxTextureDimension3D_876fb4ed9c87e356",(function(){return u.mg})),e.d(t,"__wbg_maxTextureArrayLayers_9241abc36485150c",(function(){return u.jg})),e.d(t,"__wbg_maxBindGroups_afc03b0ce9378df2",(function(){return u.Qf})),e.d(t,"__wbg_maxBindingsPerBindGroup_3f2aaf88adbedbce",(function(){return u.Rf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_d450c7962662cd96",(function(){return u.cg})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_1a00eb129d2bcb5c",(function(){return u.bg})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_2cd3b16da0689770",(function(){return u.eg})),e.d(t,"__wbg_maxSamplersPerShaderStage_5adabe5f5eb10d25",(function(){return u.fg})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_a49f4edff8399782",(function(){return u.hg})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_af1466739716de95",(function(){return u.ig})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_a325eabcda9461ad",(function(){return u.og})),e.d(t,"__wbg_maxUniformBufferBindingSize_e605b551b792a52f",(function(){return u.ng})),e.d(t,"__wbg_maxStorageBufferBindingSize_14c78ded0b37c877",(function(){return u.gg})),e.d(t,"__wbg_maxVertexBuffers_963ce0431745eb10",(function(){return u.rg})),e.d(t,"__wbg_maxBufferSize_acc43082e77cdc3c",(function(){return u.Sf})),e.d(t,"__wbg_maxVertexAttributes_4d04a728f72754c1",(function(){return u.pg})),e.d(t,"__wbg_maxVertexBufferArrayStride_5cfccf6c15c66c68",(function(){return u.qg})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_dd1e981bb371c991",(function(){return u.Ag})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_1d3a8e19ebef4ad8",(function(){return u.zg})),e.d(t,"__wbg_maxInterStageShaderComponents_ca026bbe305495a4",(function(){return u.dg})),e.d(t,"__wbg_maxColorAttachments_9b700f51d8be5791",(function(){return u.Uf})),e.d(t,"__wbg_maxColorAttachmentBytesPerSample_521568e6ebb80e3f",(function(){return u.Tf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_d9e20a91602c689f",(function(){return u.Zf})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_200e19ea645f8c9f",(function(){return u.Vf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_44045e9a9b5933c5",(function(){return u.Wf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_2b7ba7536fb605fe",(function(){return u.Xf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_0d22104a6e8f46a3",(function(){return u.Yf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_dd5e9764d314e653",(function(){return u.ag})),e.d(t,"__wbindgen_is_object",(function(){return u.tl})),e.d(t,"__wbg_Window_b75f66843c9f4863",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_567d3d0bf453d6cc",(function(){return u.c})),e.d(t,"__wbg_requestDevice_31d6651b7bd270d9",(function(){return u.Uh})),e.d(t,"__wbg_features_0780fac845546516",(function(){return u.Sd})),e.d(t,"__wbg_limits_18e29c46fbcd8049",(function(){return u.Ef})),e.d(t,"__wbg_messages_857b2a8af7feb48a",(function(){return u.wg})),e.d(t,"__wbg_writeBuffer_0ac8a128ea9e87bf",(function(){return u.Pk})),e.d(t,"__wbg_writeTexture_081acd3feefaf3b9",(function(){return u.Qk})),e.d(t,"__wbg_copyExternalImageToTexture_1405c3d20091570e",(function(){return u.Mb})),e.d(t,"__wbg_submit_1cc38731ecfb1bb4",(function(){return u.jj})),e.d(t,"__wbg_queueMicrotask_481971b0d87f3dd4",(function(){return u.Eh})),e.d(t,"__wbg_queueMicrotask_3cbae2ec6b6cd3d6",(function(){return u.Dh})),e.d(t,"__wbindgen_is_function",(function(){return u.sl})),e.d(t,"__wbindgen_boolean_get",(function(){return u.Rk})),e.d(t,"__wbindgen_number_get",(function(){return u.wl})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.tf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.r})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.v})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.C})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.G})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.R})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.U})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.X})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.Y})),e.d(t,"__wbg_clearBufferfv_e15ec21e5f45b314",(function(){return u.kb})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.lb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.mb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.ub})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Db})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Bb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Eb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Fb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Jb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Pb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.gc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.lc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.uc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Hc})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Kc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Nc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Rc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.rd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.vd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.xd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Kd})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Ud})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.ge})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.ne})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ze})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Ke})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Re})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Se})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.vf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.Gh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.Hh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.Jh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.Oh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.bi})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.ci})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.kj})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.mj})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.pj})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.qj})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.uj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.vj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.rj})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.tj})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.wj})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.zj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.yj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.Aj})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.xj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.Bj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.Kj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.Lj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.Nj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.Pj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.Qj})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Tj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Uj})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Xj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.ak})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.bk})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.ck})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.ek})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.fk})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.gk})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.ik})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.jk})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.kk})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.lk})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.nk})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.ok})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.yk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.zk})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.o})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.u})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.x})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.y})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.A})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.D})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.H})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.L})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.J})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.P})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.N})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.sb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.ob})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.qb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.yb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.Ab})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Ob})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Vb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.bc})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.dc})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.jc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.pc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.qc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.zc})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Cc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Ec})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Gc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Ic})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Lc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Oc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Wc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Xc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.ad})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.jd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.hd})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.sd})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Jd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Hd})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.ce})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.fe})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.ie})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.ye})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.De})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Fe})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.Ie})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.Me})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ne})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Pe})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Te})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.If})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.mh})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.qh})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Qh})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.fi})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Ri})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.aj})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.dj})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.bj})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.fj})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.nj})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.Hj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.Jj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Vj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.tk})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.Ak})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.Fk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.uf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.od})),e.d(t,"__wbg_location_2951b5ee34f19221",(function(){return u.Jf})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.Eg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.fd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.gb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.re})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Of})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Xh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.fb})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Th})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.rb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.Ci})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.Bi})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.T})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.Gk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.ke})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.Zb})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.xe})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.Ch})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.Bh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.ii})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.xi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.Dg})),e.d(t,"__wbg_fetch_921fad6ef9e883dd",(function(){return u.Wd})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.ij})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.be})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.W})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.Z})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Cb})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.Ih})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.lj})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.sj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.Mj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.Oj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.Rj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.Sj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Yj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Zj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.dk})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.hk})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.mk})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.p})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.t})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.w})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.z})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.B})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.E})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.I})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.M})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.K})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.Q})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.O})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.tb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.nb})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.pb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.xb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.zb})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Nb})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Ub})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.ac})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.ec})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.kc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.oc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.sc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.yc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Bc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Dc})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Fc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Jc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Mc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Pc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Vc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Yc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.Zc})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.id})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.gd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.td})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Id})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Gd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.de})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.ee})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.je})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.Ce})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Ge})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.He})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Le})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Oe})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Ue})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.Hf})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.lh})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.ph})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.Ph})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.gi})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Qi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Zi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.ej})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.cj})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.gj})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.oj})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.Gj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.Ij})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Wj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.uk})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.Bk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.Ek})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.qd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.wd})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.xk})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Je})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Nh})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.yi})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.Ig})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.ld})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.ah})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Hb})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Ve})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.ud})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.Dk})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.Ck})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.sh})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.th})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.Hg})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.he})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.wf})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Ib})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.ed})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.kf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.S})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.Ac})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Od})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Nd})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.jf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.Lf})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.Hk})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ui})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.Fg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.vb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.uh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Xi})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.Lk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.ff})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.qf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.Nk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.Oi})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.gf})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.Mi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.ue})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.ve})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.Kk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.hf})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.xc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Ti})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.xg})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.Kf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Rh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.zf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.wb})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.Mk})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.Pi})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.ef})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.Li})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.se})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.te})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.kh})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Lh})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.Jg})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.kd})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.bh})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.ch})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.qk})),e.d(t,"__wbg_new_ab6fd82b10560829",(function(){return u.Mg})),e.d(t,"__wbg_append_7bfcb4937d1d5e29",(function(){return u.m})),e.d(t,"__wbg_origin_ee93e29ace71f568",(function(){return u.ih})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Tc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Uc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Sc})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.F})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.tc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Qc})),e.d(t,"__wbg_newwithstrandinit_3fd6fba4083ff2d0",(function(){return u.Wg})),e.d(t,"__wbg_instanceof_Response_849eb93e75734b6e",(function(){return u.sf})),e.d(t,"__wbg_url_5f6dc4009ac5f99d",(function(){return u.rk})),e.d(t,"__wbg_status_61a01141acd3cf74",(function(){return u.Yi})),e.d(t,"__wbg_headers_9620bfada380764a",(function(){return u.df})),e.d(t,"__wbg_arrayBuffer_29931d52c7206b02",(function(){return u.n})),e.d(t,"__wbg_text_450a059667fd91fd",(function(){return u.Cj})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Qe})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.xh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.sg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Pf})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Mh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.wc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Si})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.yg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.cb})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.db})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.Bg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.Cg})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.nh})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.wh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.oh})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.oe})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.We})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.Df})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.Gg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Og})),e.d(t,"__wbg_next_40fc327bfc8770e6",(function(){return u.Yg})),e.d(t,"__wbg_next_196c84450b364254",(function(){return u.Xg})),e.d(t,"__wbg_done_298b57d23c0fc80c",(function(){return u.pd})),e.d(t,"__wbg_value_d93c65011f51a456",(function(){return u.wk})),e.d(t,"__wbg_iterator_2cee6dadfd956dfa",(function(){return u.yf})),e.d(t,"__wbg_get_e3c254076557e348",(function(){return u.Xe})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.eb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Lg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.hi})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.Ok})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Ye})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Ze})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.if})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.dh})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.Ah})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.rf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Be})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.xf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.vk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.ai})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.hb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.Dj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.Ej})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.ab})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Qg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Tg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Rg})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Vg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.Kg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.Ji})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.Cf})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Ug})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Pg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Sg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.bb})),e.d(t,"__wbg_has_0af94d20077affa2",(function(){return u.bf})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.Ii})),e.d(t,"__wbg_stringify_8887fe74e1c50d81",(function(){return u.hj})),e.d(t,"__wbindgen_debug_string",(function(){return u.rl})),e.d(t,"__wbindgen_throw",(function(){return u.Cl})),e.d(t,"__wbindgen_memory",(function(){return u.vl})),e.d(t,"__wbindgen_closure_wrapper642",(function(){return u.kl})),e.d(t,"__wbindgen_closure_wrapper643",(function(){return u.ll})),e.d(t,"__wbindgen_closure_wrapper644",(function(){return u.ml})),e.d(t,"__wbindgen_closure_wrapper645",(function(){return u.nl})),e.d(t,"__wbindgen_closure_wrapper646",(function(){return u.ol})),e.d(t,"__wbindgen_closure_wrapper647",(function(){return u.pl})),e.d(t,"__wbindgen_closure_wrapper648",(function(){return u.ql})),e.d(t,"__wbindgen_closure_wrapper1272",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper1273",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper1274",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper1275",(function(){return u.Wk})),e.d(t,"__wbindgen_closure_wrapper1276",(function(){return u.Xk})),e.d(t,"__wbindgen_closure_wrapper1277",(function(){return u.Yk})),e.d(t,"__wbindgen_closure_wrapper1278",(function(){return u.Zk})),e.d(t,"__wbindgen_closure_wrapper2462",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper2463",(function(){return u.bl})),e.d(t,"__wbindgen_closure_wrapper2464",(function(){return u.cl})),e.d(t,"__wbindgen_closure_wrapper2465",(function(){return u.dl})),e.d(t,"__wbindgen_closure_wrapper2466",(function(){return u.el})),e.d(t,"__wbindgen_closure_wrapper2467",(function(){return u.fl})),e.d(t,"__wbindgen_closure_wrapper2468",(function(){return u.gl})),e.d(t,"__wbindgen_closure_wrapper4547",(function(){return u.hl})),e.d(t,"__wbindgen_closure_wrapper4549",(function(){return u.il})),e.d(t,"__wbindgen_closure_wrapper5282",(function(){return u.jl})),Object(u.Ki)(r),r.__wbindgen_start()},427:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(248);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/37.947da040.js b/assets/js/37.947da040.js deleted file mode 100644 index 7449bb089..000000000 --- a/assets/js/37.947da040.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{248:function(n,t,e){"use strict";(function(n){e.d(t,"zi",(function(){return u})),e.d(t,"sl",(function(){return F})),e.d(t,"ol",(function(){return W})),e.d(t,"pl",(function(){return q})),e.d(t,"Hk",(function(){return z})),e.d(t,"jl",(function(){return U})),e.d(t,"nl",(function(){return K})),e.d(t,"ql",(function(){return Q})),e.d(t,"Eg",(function(){return N})),e.d(t,"Li",(function(){return X})),e.d(t,"Rd",(function(){return Y})),e.d(t,"Wd",(function(){return H})),e.d(t,"Vg",(function(){return J})),e.d(t,"Wg",(function(){return Z})),e.d(t,"qe",(function(){return $})),e.d(t,"Kh",(function(){return nn})),e.d(t,"Th",(function(){return tn})),e.d(t,"Nh",(function(){return en})),e.d(t,"Xg",(function(){return rn})),e.d(t,"oh",(function(){return un})),e.d(t,"wk",(function(){return fn})),e.d(t,"b",(function(){return cn})),e.d(t,"lh",(function(){return on})),e.d(t,"Lh",(function(){return _n})),e.d(t,"Sh",(function(){return dn})),e.d(t,"ml",(function(){return an})),e.d(t,"xk",(function(){return bn})),e.d(t,"Zg",(function(){return gn})),e.d(t,"Qg",(function(){return wn})),e.d(t,"mf",(function(){return sn})),e.d(t,"lf",(function(){return ln})),e.d(t,"af",(function(){return mn})),e.d(t,"Ud",(function(){return pn})),e.d(t,"Cf",(function(){return hn})),e.d(t,"Jh",(function(){return xn})),e.d(t,"Hb",(function(){return yn})),e.d(t,"we",(function(){return Sn})),e.d(t,"of",(function(){return kn})),e.d(t,"ng",(function(){return vn})),e.d(t,"nf",(function(){return Bn})),e.d(t,"Ae",(function(){return Pn})),e.d(t,"eg",(function(){return jn})),e.d(t,"fg",(function(){return In})),e.d(t,"gg",(function(){return An})),e.d(t,"dg",(function(){return Dn})),e.d(t,"Mf",(function(){return Tn})),e.d(t,"Nf",(function(){return Cn})),e.d(t,"Wf",(function(){return Mn})),e.d(t,"Vf",(function(){return Fn})),e.d(t,"Yf",(function(){return En})),e.d(t,"Zf",(function(){return Rn})),e.d(t,"bg",(function(){return Ln})),e.d(t,"cg",(function(){return On})),e.d(t,"ig",(function(){return Gn})),e.d(t,"hg",(function(){return Vn})),e.d(t,"ag",(function(){return Wn})),e.d(t,"rg",(function(){return qn})),e.d(t,"qg",(function(){return zn})),e.d(t,"lg",(function(){return Un})),e.d(t,"Of",(function(){return Kn})),e.d(t,"jg",(function(){return Qn})),e.d(t,"kg",(function(){return Nn})),e.d(t,"Xf",(function(){return Xn})),e.d(t,"Tf",(function(){return Yn})),e.d(t,"Pf",(function(){return Hn})),e.d(t,"Qf",(function(){return Jn})),e.d(t,"Rf",(function(){return Zn})),e.d(t,"Sf",(function(){return $n})),e.d(t,"Uf",(function(){return nt})),e.d(t,"Pd",(function(){return tt})),e.d(t,"cf",(function(){return et})),e.d(t,"vh",(function(){return rt})),e.d(t,"il",(function(){return ut})),e.d(t,"a",(function(){return ft})),e.d(t,"c",(function(){return ct})),e.d(t,"Hh",(function(){return it})),e.d(t,"Ee",(function(){return ot})),e.d(t,"Td",(function(){return _t})),e.d(t,"Df",(function(){return dt})),e.d(t,"oc",(function(){return at})),e.d(t,"Tb",(function(){return bt})),e.d(t,"Ub",(function(){return gt})),e.d(t,"dc",(function(){return wt})),e.d(t,"jc",(function(){return st})),e.d(t,"Zb",(function(){return lt})),e.d(t,"Xb",(function(){return mt})),e.d(t,"sc",(function(){return pt})),e.d(t,"nc",(function(){return ht})),e.d(t,"gc",(function(){return xt})),e.d(t,"Yb",(function(){return yt})),e.d(t,"ic",(function(){return St})),e.d(t,"cd",(function(){return kt})),e.d(t,"Ci",(function(){return vt})),e.d(t,"ph",(function(){return Bt})),e.d(t,"hh",(function(){return Pt})),e.d(t,"Jf",(function(){return jt})),e.d(t,"dk",(function(){return It})),e.d(t,"wc",(function(){return At})),e.d(t,"ed",(function(){return Dt})),e.d(t,"dd",(function(){return Tt})),e.d(t,"me",(function(){return Ct})),e.d(t,"ne",(function(){return Mt})),e.d(t,"Lb",(function(){return Ft})),e.d(t,"Mb",(function(){return Et})),e.d(t,"Rb",(function(){return Rt})),e.d(t,"Sb",(function(){return Lt})),e.d(t,"q",(function(){return Ot})),e.d(t,"Nd",(function(){return Gt})),e.d(t,"s",(function(){return Vt})),e.d(t,"Md",(function(){return Wt})),e.d(t,"zf",(function(){return qt})),e.d(t,"be",(function(){return zt})),e.d(t,"Yd",(function(){return Ut})),e.d(t,"jb",(function(){return Kt})),e.d(t,"ib",(function(){return Qt})),e.d(t,"Fk",(function(){return Nt})),e.d(t,"Oh",(function(){return Xt})),e.d(t,"ae",(function(){return Yt})),e.d(t,"Zd",(function(){return Ht})),e.d(t,"Dk",(function(){return Jt})),e.d(t,"gk",(function(){return Zt})),e.d(t,"Ki",(function(){return $t})),e.d(t,"Ek",(function(){return ne})),e.d(t,"Nb",(function(){return te})),e.d(t,"ji",(function(){return ee})),e.d(t,"di",(function(){return re})),e.d(t,"Yh",(function(){return ue})),e.d(t,"od",(function(){return fe})),e.d(t,"nd",(function(){return ce})),e.d(t,"ki",(function(){return ie})),e.d(t,"Zh",(function(){return oe})),e.d(t,"bi",(function(){return _e})),e.d(t,"gi",(function(){return de})),e.d(t,"ii",(function(){return ae})),e.d(t,"ui",(function(){return be})),e.d(t,"si",(function(){return ge})),e.d(t,"Fd",(function(){return we})),e.d(t,"Cd",(function(){return se})),e.d(t,"Ed",(function(){return le})),e.d(t,"Ad",(function(){return me})),e.d(t,"li",(function(){return pe})),e.d(t,"ai",(function(){return he})),e.d(t,"ci",(function(){return xe})),e.d(t,"fi",(function(){return ye})),e.d(t,"hi",(function(){return Se})),e.d(t,"vi",(function(){return ke})),e.d(t,"ti",(function(){return ve})),e.d(t,"Gd",(function(){return Be})),e.d(t,"Bd",(function(){return Pe})),e.d(t,"Dd",(function(){return je})),e.d(t,"zd",(function(){return Ie})),e.d(t,"ei",(function(){return Ae})),e.d(t,"oi",(function(){return De})),e.d(t,"wi",(function(){return Te})),e.d(t,"pi",(function(){return Ce})),e.d(t,"Sd",(function(){return Me})),e.d(t,"Yi",(function(){return Fe})),e.d(t,"th",(function(){return Ee})),e.d(t,"uh",(function(){return Re})),e.d(t,"hl",(function(){return Le})),e.d(t,"Gk",(function(){return Oe})),e.d(t,"ll",(function(){return Ge})),e.d(t,"sf",(function(){return Ve})),e.d(t,"r",(function(){return We})),e.d(t,"v",(function(){return qe})),e.d(t,"C",(function(){return ze})),e.d(t,"G",(function(){return Ue})),e.d(t,"R",(function(){return Ke})),e.d(t,"U",(function(){return Qe})),e.d(t,"X",(function(){return Ne})),e.d(t,"Y",(function(){return Xe})),e.d(t,"kb",(function(){return Ye})),e.d(t,"lb",(function(){return He})),e.d(t,"vb",(function(){return Je})),e.d(t,"Eb",(function(){return Ze})),e.d(t,"Cb",(function(){return $e})),e.d(t,"Fb",(function(){return nr})),e.d(t,"Gb",(function(){return tr})),e.d(t,"Kb",(function(){return er})),e.d(t,"Qb",(function(){return rr})),e.d(t,"hc",(function(){return ur})),e.d(t,"mc",(function(){return fr})),e.d(t,"vc",(function(){return cr})),e.d(t,"Ic",(function(){return ir})),e.d(t,"Lc",(function(){return or})),e.d(t,"Oc",(function(){return _r})),e.d(t,"Sc",(function(){return dr})),e.d(t,"sd",(function(){return ar})),e.d(t,"wd",(function(){return br})),e.d(t,"yd",(function(){return gr})),e.d(t,"Ld",(function(){return wr})),e.d(t,"Vd",(function(){return sr})),e.d(t,"he",(function(){return lr})),e.d(t,"oe",(function(){return mr})),e.d(t,"ze",(function(){return pr})),e.d(t,"Ke",(function(){return hr})),e.d(t,"Re",(function(){return xr})),e.d(t,"Se",(function(){return yr})),e.d(t,"uf",(function(){return Sr})),e.d(t,"wh",(function(){return kr})),e.d(t,"xh",(function(){return vr})),e.d(t,"zh",(function(){return Br})),e.d(t,"Dh",(function(){return Pr})),e.d(t,"Qh",(function(){return jr})),e.d(t,"Rh",(function(){return Ir})),e.d(t,"Zi",(function(){return Ar})),e.d(t,"bj",(function(){return Dr})),e.d(t,"ej",(function(){return Tr})),e.d(t,"fj",(function(){return Cr})),e.d(t,"jj",(function(){return Mr})),e.d(t,"kj",(function(){return Fr})),e.d(t,"gj",(function(){return Er})),e.d(t,"ij",(function(){return Rr})),e.d(t,"lj",(function(){return Lr})),e.d(t,"oj",(function(){return Or})),e.d(t,"nj",(function(){return Gr})),e.d(t,"pj",(function(){return Vr})),e.d(t,"mj",(function(){return Wr})),e.d(t,"qj",(function(){return qr})),e.d(t,"yj",(function(){return zr})),e.d(t,"zj",(function(){return Ur})),e.d(t,"Bj",(function(){return Kr})),e.d(t,"Dj",(function(){return Qr})),e.d(t,"Ej",(function(){return Nr})),e.d(t,"Hj",(function(){return Xr})),e.d(t,"Ij",(function(){return Yr})),e.d(t,"Lj",(function(){return Hr})),e.d(t,"Oj",(function(){return Jr})),e.d(t,"Pj",(function(){return Zr})),e.d(t,"Qj",(function(){return $r})),e.d(t,"Sj",(function(){return nu})),e.d(t,"Tj",(function(){return tu})),e.d(t,"Uj",(function(){return eu})),e.d(t,"Wj",(function(){return ru})),e.d(t,"Xj",(function(){return uu})),e.d(t,"Yj",(function(){return fu})),e.d(t,"Zj",(function(){return cu})),e.d(t,"bk",(function(){return iu})),e.d(t,"ck",(function(){return ou})),e.d(t,"mk",(function(){return _u})),e.d(t,"nk",(function(){return du})),e.d(t,"g",(function(){return au})),e.d(t,"o",(function(){return bu})),e.d(t,"u",(function(){return gu})),e.d(t,"x",(function(){return wu})),e.d(t,"y",(function(){return su})),e.d(t,"A",(function(){return lu})),e.d(t,"D",(function(){return mu})),e.d(t,"H",(function(){return pu})),e.d(t,"L",(function(){return hu})),e.d(t,"J",(function(){return xu})),e.d(t,"P",(function(){return yu})),e.d(t,"N",(function(){return Su})),e.d(t,"tb",(function(){return ku})),e.d(t,"nb",(function(){return vu})),e.d(t,"pb",(function(){return Bu})),e.d(t,"rb",(function(){return Pu})),e.d(t,"zb",(function(){return ju})),e.d(t,"Bb",(function(){return Iu})),e.d(t,"Pb",(function(){return Au})),e.d(t,"Wb",(function(){return Du})),e.d(t,"cc",(function(){return Tu})),e.d(t,"ec",(function(){return Cu})),e.d(t,"kc",(function(){return Mu})),e.d(t,"qc",(function(){return Fu})),e.d(t,"rc",(function(){return Eu})),e.d(t,"Ac",(function(){return Ru})),e.d(t,"Dc",(function(){return Lu})),e.d(t,"Fc",(function(){return Ou})),e.d(t,"Hc",(function(){return Gu})),e.d(t,"Jc",(function(){return Vu})),e.d(t,"Mc",(function(){return Wu})),e.d(t,"Pc",(function(){return qu})),e.d(t,"Xc",(function(){return zu})),e.d(t,"Yc",(function(){return Uu})),e.d(t,"bd",(function(){return Ku})),e.d(t,"kd",(function(){return Qu})),e.d(t,"id",(function(){return Nu})),e.d(t,"td",(function(){return Xu})),e.d(t,"Kd",(function(){return Yu})),e.d(t,"Id",(function(){return Hu})),e.d(t,"de",(function(){return Ju})),e.d(t,"ge",(function(){return Zu})),e.d(t,"je",(function(){return $u})),e.d(t,"ye",(function(){return nf})),e.d(t,"De",(function(){return tf})),e.d(t,"Fe",(function(){return ef})),e.d(t,"Ie",(function(){return rf})),e.d(t,"Me",(function(){return uf})),e.d(t,"Ne",(function(){return ff})),e.d(t,"Pe",(function(){return cf})),e.d(t,"Te",(function(){return of})),e.d(t,"Ff",(function(){return _f})),e.d(t,"ch",(function(){return df})),e.d(t,"gh",(function(){return af})),e.d(t,"Fh",(function(){return bf})),e.d(t,"Uh",(function(){return gf})),e.d(t,"Gi",(function(){return wf})),e.d(t,"Pi",(function(){return sf})),e.d(t,"Si",(function(){return lf})),e.d(t,"Qi",(function(){return mf})),e.d(t,"Ui",(function(){return pf})),e.d(t,"cj",(function(){return hf})),e.d(t,"vj",(function(){return xf})),e.d(t,"xj",(function(){return yf})),e.d(t,"Jj",(function(){return Sf})),e.d(t,"hk",(function(){return kf})),e.d(t,"ok",(function(){return vf})),e.d(t,"tk",(function(){return Bf})),e.d(t,"tf",(function(){return Pf})),e.d(t,"pd",(function(){return jf})),e.d(t,"Gf",(function(){return If})),e.d(t,"vg",(function(){return Af})),e.d(t,"gd",(function(){return Df})),e.d(t,"gb",(function(){return Tf})),e.d(t,"re",(function(){return Cf})),e.d(t,"Kf",(function(){return Mf})),e.d(t,"Mh",(function(){return Ff})),e.d(t,"fb",(function(){return Ef})),e.d(t,"Ih",(function(){return Rf})),e.d(t,"sb",(function(){return Lf})),e.d(t,"ri",(function(){return Of})),e.d(t,"qi",(function(){return Gf})),e.d(t,"T",(function(){return Vf})),e.d(t,"uk",(function(){return Wf})),e.d(t,"e",(function(){return qf})),e.d(t,"le",(function(){return zf})),e.d(t,"ac",(function(){return Uf})),e.d(t,"xe",(function(){return Kf})),e.d(t,"sh",(function(){return Qf})),e.d(t,"rh",(function(){return Nf})),e.d(t,"Xh",(function(){return Xf})),e.d(t,"mi",(function(){return Yf})),e.d(t,"ug",(function(){return Hf})),e.d(t,"Xd",(function(){return Jf})),e.d(t,"Xi",(function(){return Zf})),e.d(t,"ce",(function(){return $f})),e.d(t,"W",(function(){return nc})),e.d(t,"V",(function(){return tc})),e.d(t,"Z",(function(){return ec})),e.d(t,"Db",(function(){return rc})),e.d(t,"yh",(function(){return uc})),e.d(t,"aj",(function(){return fc})),e.d(t,"hj",(function(){return cc})),e.d(t,"Aj",(function(){return ic})),e.d(t,"Cj",(function(){return oc})),e.d(t,"Fj",(function(){return _c})),e.d(t,"Gj",(function(){return dc})),e.d(t,"Mj",(function(){return ac})),e.d(t,"Nj",(function(){return bc})),e.d(t,"Rj",(function(){return gc})),e.d(t,"Vj",(function(){return wc})),e.d(t,"ak",(function(){return sc})),e.d(t,"f",(function(){return lc})),e.d(t,"p",(function(){return mc})),e.d(t,"t",(function(){return pc})),e.d(t,"w",(function(){return hc})),e.d(t,"z",(function(){return xc})),e.d(t,"B",(function(){return yc})),e.d(t,"E",(function(){return Sc})),e.d(t,"I",(function(){return kc})),e.d(t,"M",(function(){return vc})),e.d(t,"K",(function(){return Bc})),e.d(t,"Q",(function(){return Pc})),e.d(t,"O",(function(){return jc})),e.d(t,"ub",(function(){return Ic})),e.d(t,"mb",(function(){return Ac})),e.d(t,"ob",(function(){return Dc})),e.d(t,"qb",(function(){return Tc})),e.d(t,"yb",(function(){return Cc})),e.d(t,"Ab",(function(){return Mc})),e.d(t,"Ob",(function(){return Fc})),e.d(t,"Vb",(function(){return Ec})),e.d(t,"bc",(function(){return Rc})),e.d(t,"fc",(function(){return Lc})),e.d(t,"lc",(function(){return Oc})),e.d(t,"pc",(function(){return Gc})),e.d(t,"tc",(function(){return Vc})),e.d(t,"zc",(function(){return Wc})),e.d(t,"Cc",(function(){return qc})),e.d(t,"Ec",(function(){return zc})),e.d(t,"Gc",(function(){return Uc})),e.d(t,"Kc",(function(){return Kc})),e.d(t,"Nc",(function(){return Qc})),e.d(t,"Qc",(function(){return Nc})),e.d(t,"Wc",(function(){return Xc})),e.d(t,"Zc",(function(){return Yc})),e.d(t,"ad",(function(){return Hc})),e.d(t,"jd",(function(){return Jc})),e.d(t,"hd",(function(){return Zc})),e.d(t,"ud",(function(){return $c})),e.d(t,"Jd",(function(){return ni})),e.d(t,"Hd",(function(){return ti})),e.d(t,"ee",(function(){return ei})),e.d(t,"fe",(function(){return ri})),e.d(t,"ke",(function(){return ui})),e.d(t,"Ce",(function(){return fi})),e.d(t,"Ge",(function(){return ci})),e.d(t,"He",(function(){return ii})),e.d(t,"Le",(function(){return oi})),e.d(t,"Oe",(function(){return _i})),e.d(t,"Ue",(function(){return di})),e.d(t,"Ef",(function(){return ai})),e.d(t,"bh",(function(){return bi})),e.d(t,"fh",(function(){return gi})),e.d(t,"Eh",(function(){return wi})),e.d(t,"Vh",(function(){return si})),e.d(t,"Fi",(function(){return li})),e.d(t,"Oi",(function(){return mi})),e.d(t,"Ti",(function(){return pi})),e.d(t,"Ri",(function(){return hi})),e.d(t,"Vi",(function(){return xi})),e.d(t,"dj",(function(){return yi})),e.d(t,"uj",(function(){return Si})),e.d(t,"wj",(function(){return ki})),e.d(t,"Kj",(function(){return vi})),e.d(t,"ik",(function(){return Bi})),e.d(t,"pk",(function(){return Pi})),e.d(t,"sk",(function(){return ji})),e.d(t,"Je",(function(){return Ii})),e.d(t,"Ch",(function(){return Ai})),e.d(t,"ni",(function(){return Di})),e.d(t,"zk",(function(){return Ti})),e.d(t,"ff",(function(){return Ci})),e.d(t,"rk",(function(){return Mi})),e.d(t,"qk",(function(){return Fi})),e.d(t,"yk",(function(){return Ei})),e.d(t,"hf",(function(){return Ri})),e.d(t,"vd",(function(){return Li})),e.d(t,"Ji",(function(){return Oi})),e.d(t,"wg",(function(){return Gi})),e.d(t,"d",(function(){return Vi})),e.d(t,"vf",(function(){return Wi})),e.d(t,"dh",(function(){return qi})),e.d(t,"mh",(function(){return zi})),e.d(t,"eh",(function(){return Ui})),e.d(t,"pe",(function(){return Ki})),e.d(t,"nh",(function(){return Qi})),e.d(t,"mg",(function(){return Ni})),e.d(t,"Lf",(function(){return Xi})),e.d(t,"i",(function(){return Yi})),e.d(t,"Bh",(function(){return Hi})),e.d(t,"xc",(function(){return Ji})),e.d(t,"Hi",(function(){return Zi})),e.d(t,"j",(function(){return $i})),e.d(t,"pg",(function(){return no})),e.d(t,"cb",(function(){return to})),e.d(t,"db",(function(){return eo})),e.d(t,"sg",(function(){return ro})),e.d(t,"tg",(function(){return uo})),e.d(t,"Uc",(function(){return fo})),e.d(t,"Vc",(function(){return co})),e.d(t,"Tc",(function(){return io})),e.d(t,"h",(function(){return oo})),e.d(t,"Ah",(function(){return _o})),e.d(t,"pf",(function(){return ao})),e.d(t,"Bk",(function(){return bo})),e.d(t,"Di",(function(){return go})),e.d(t,"gf",(function(){return wo})),e.d(t,"Bi",(function(){return so})),e.d(t,"ue",(function(){return lo})),e.d(t,"ve",(function(){return mo})),e.d(t,"Yg",(function(){return po})),e.d(t,"Ak",(function(){return ho})),e.d(t,"Ei",(function(){return xo})),e.d(t,"ef",(function(){return yo})),e.d(t,"Ai",(function(){return So})),e.d(t,"se",(function(){return ko})),e.d(t,"te",(function(){return vo})),e.d(t,"Ag",(function(){return Bo})),e.d(t,"ld",(function(){return Po})),e.d(t,"Sg",(function(){return jo})),e.d(t,"Tg",(function(){return Io})),e.d(t,"ek",(function(){return Ao})),e.d(t,"Qe",(function(){return Do})),e.d(t,"ie",(function(){return To})),e.d(t,"Jb",(function(){return Co})),e.d(t,"fd",(function(){return Mo})),e.d(t,"Bc",(function(){return Fo})),e.d(t,"Qd",(function(){return Eo})),e.d(t,"Od",(function(){return Ro})),e.d(t,"jf",(function(){return Lo})),e.d(t,"If",(function(){return Oo})),e.d(t,"vk",(function(){return Go})),e.d(t,"ih",(function(){return Vo})),e.d(t,"jh",(function(){return Wo})),e.d(t,"yg",(function(){return qo})),e.d(t,"wb",(function(){return zo})),e.d(t,"kh",(function(){return Uo})),e.d(t,"Mi",(function(){return Ko})),e.d(t,"kf",(function(){return Qo})),e.d(t,"S",(function(){return No})),e.d(t,"rf",(function(){return Xo})),e.d(t,"fk",(function(){return Yo})),e.d(t,"Ni",(function(){return Ho})),e.d(t,"df",(function(){return Jo})),e.d(t,"n",(function(){return Zo})),e.d(t,"rj",(function(){return $o})),e.d(t,"k",(function(){return n_})),e.d(t,"yc",(function(){return t_})),e.d(t,"Ii",(function(){return e_})),e.d(t,"og",(function(){return r_})),e.d(t,"Hf",(function(){return u_})),e.d(t,"Gh",(function(){return f_})),e.d(t,"yf",(function(){return c_})),e.d(t,"xb",(function(){return i_})),e.d(t,"ah",(function(){return o_})),e.d(t,"Ng",(function(){return __})),e.d(t,"rd",(function(){return d_})),e.d(t,"xd",(function(){return a_})),e.d(t,"lk",(function(){return b_})),e.d(t,"Dg",(function(){return g_})),e.d(t,"m",(function(){return w_})),e.d(t,"zg",(function(){return s_})),e.d(t,"md",(function(){return l_})),e.d(t,"Rg",(function(){return m_})),e.d(t,"l",(function(){return p_})),e.d(t,"Ib",(function(){return h_})),e.d(t,"Ve",(function(){return x_})),e.d(t,"F",(function(){return y_})),e.d(t,"uc",(function(){return S_})),e.d(t,"Rc",(function(){return k_})),e.d(t,"We",(function(){return v_})),e.d(t,"Bf",(function(){return B_})),e.d(t,"xg",(function(){return P_})),e.d(t,"Fg",(function(){return j_})),e.d(t,"Pg",(function(){return I_})),e.d(t,"Og",(function(){return A_})),e.d(t,"qd",(function(){return D_})),e.d(t,"kk",(function(){return T_})),e.d(t,"xf",(function(){return C_})),e.d(t,"Xe",(function(){return M_})),e.d(t,"eb",(function(){return F_})),e.d(t,"Cg",(function(){return E_})),e.d(t,"Wh",(function(){return R_})),e.d(t,"Ck",(function(){return L_})),e.d(t,"Ye",(function(){return O_})),e.d(t,"Ze",(function(){return G_})),e.d(t,"if",(function(){return V_})),e.d(t,"Ug",(function(){return W_})),e.d(t,"qh",(function(){return q_})),e.d(t,"qf",(function(){return z_})),e.d(t,"Be",(function(){return U_})),e.d(t,"wf",(function(){return K_})),e.d(t,"jk",(function(){return Q_})),e.d(t,"Ph",(function(){return N_})),e.d(t,"hb",(function(){return X_})),e.d(t,"sj",(function(){return Y_})),e.d(t,"tj",(function(){return H_})),e.d(t,"ab",(function(){return J_})),e.d(t,"Hg",(function(){return Z_})),e.d(t,"Kg",(function(){return $_})),e.d(t,"Ig",(function(){return nd})),e.d(t,"Mg",(function(){return td})),e.d(t,"Bg",(function(){return ed})),e.d(t,"yi",(function(){return rd})),e.d(t,"Af",(function(){return ud})),e.d(t,"Lg",(function(){return fd})),e.d(t,"Gg",(function(){return cd})),e.d(t,"Jg",(function(){return id})),e.d(t,"bb",(function(){return od})),e.d(t,"bf",(function(){return _d})),e.d(t,"xi",(function(){return dd})),e.d(t,"Wi",(function(){return ad})),e.d(t,"gl",(function(){return bd})),e.d(t,"rl",(function(){return gd})),e.d(t,"kl",(function(){return wd})),e.d(t,"Zk",(function(){return sd})),e.d(t,"al",(function(){return ld})),e.d(t,"bl",(function(){return md})),e.d(t,"cl",(function(){return pd})),e.d(t,"dl",(function(){return hd})),e.d(t,"el",(function(){return xd})),e.d(t,"fl",(function(){return yd})),e.d(t,"Ik",(function(){return Sd})),e.d(t,"Jk",(function(){return kd})),e.d(t,"Kk",(function(){return vd})),e.d(t,"Lk",(function(){return Bd})),e.d(t,"Mk",(function(){return Pd})),e.d(t,"Nk",(function(){return jd})),e.d(t,"Ok",(function(){return Id})),e.d(t,"Pk",(function(){return Ad})),e.d(t,"Qk",(function(){return Dd})),e.d(t,"Rk",(function(){return Td})),e.d(t,"Sk",(function(){return Cd})),e.d(t,"Tk",(function(){return Md})),e.d(t,"Uk",(function(){return Fd})),e.d(t,"Vk",(function(){return Ed})),e.d(t,"Wk",(function(){return Rd})),e.d(t,"Xk",(function(){return Ld})),e.d(t,"Yk",(function(){return Od}));e(92),e(91),e(261),e(262),e(263),e(264),e(265),e(266),e(267),e(268),e(269),e(270),e(271);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 i=f.length;function o(n){const t=c(n);return function(n){n<132||(f[n]=i,i=n)}(n),t}let _=0,d=null;function a(){return null!==d&&0!==d.byteLength||(d=new Uint8Array(r.memory.buffer)),d}let b=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8");const g="function"==typeof b.encodeInto?function(n,t){return b.encodeInto(n,t)}:function(n,t){const e=b.encode(n);return t.set(e),{read:n.length,written:e.length}};function w(n,t,e){if(void 0===e){const e=b.encode(n),r=t(e.length,1)>>>0;return a().subarray(r,r+e.length).set(e),_=e.length,r}let r=n.length,u=t(r,1)>>>0;const f=a();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=a().subarray(u+c,u+r);c+=g(n,t).written,u=e(u,r,c,1)>>>0}return _=c,u}function s(n){return null==n}let l=null;function m(){return null!==l&&0!==l.byteLength||(l=new Int32Array(r.memory.buffer)),l}function p(n){i===f.length&&f.push(f.length+1);const t=i;return i=f[t],f[t]=n,t}let h=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});function x(n,t){return n>>>=0,h.decode(a().subarray(n,n+t))}h.decode();let y=null;const S="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry(n=>{r.__wbindgen_export_2.get(n.dtor)(n.a,n.b)});function k(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),S.unregister(f)):f.a=t}};return c.original=f,S.register(c,f,f),c}function v(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h4cb81c1984850c36(n,t,p(e))}function B(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hb6621ce89d7149e2(n,t)}function P(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3ee02e0986c916aa(n,t,p(e),p(u))}function j(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h29d254483106b85c(n,t,p(e))}function I(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h241da3f1b9e847a4(n,t)}function A(n,t,e,u){r._dyn_core__ops__function__FnMut__A_B___Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h53042a21c8c1fa4f(n,t,p(e),p(u))}function D(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h277105eb5dd7a1c4(n,t,p(e))}function T(n,t){r._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hc16bb161c0d94285(n,t)}function C(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h26c51973f5c0a36d(n,t,p(e))}function M(n,t,e){r._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hd4d2c166cfe1a5c2(n,t,p(e))}function F(){r.run()}let E=null;function R(n,t){return n>>>=0,(null!==E&&0!==E.byteLength||(E=new Uint32Array(r.memory.buffer)),E).subarray(n/4,n/4+t)}function L(n,t){return n>>>=0,m().subarray(n/4,n/4+t)}function O(n,t){try{return n.apply(this,t)}catch(n){r.__wbindgen_exn_store(p(n))}}let G=null;function V(n,t){return n>>>=0,(null!==G&&0!==G.byteLength||(G=new Float32Array(r.memory.buffer)),G).subarray(n/4,n/4+t)}function W(n){o(n)}function q(n,t){const e=c(t),u="string"==typeof e?e:void 0;var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function z(n){const t=o(n).original;if(1==t.cnt--)return t.a=0,!0;return!1}function U(n){return void 0===c(n)}function K(n){return p(c(n))}function Q(n,t){return p(x(n,t))}function N(){return p(new Error)}function X(n,t){const e=w(c(t).stack,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Y(n,t){let e,u;try{e=n,u=t,console.error(x(n,t))}finally{r.__wbindgen_free(e,u,1)}}function H(n){return p(fetch(c(n)))}function J(n){return c(n).offsetX}function Z(n){return c(n).offsetY}function $(n){return p(c(n).getCoalescedEvents)}function nn(n){return p(c(n).requestFullscreen)}function tn(n){return p(c(n).scheduler)}function en(n){return p(c(n).requestIdleCallback)}function rn(n){return p(c(n).onpointerrawupdate)}function un(){return p(ResizeObserverEntry.prototype)}function fn(n){const t=c(n).webkitFullscreenElement;return s(t)?0:p(t)}function cn(n){return p(c(n).Window)}function on(n,t,e){return p(c(n).postTask(c(t),c(e)))}function _n(n){return p(c(n).requestFullscreen())}function dn(n){return p(c(n).scheduler)}function an(n){return p(n)}function bn(n){c(n).webkitRequestFullscreen()}function gn(n){return p(c(n).performance)}function wn(n){return c(n).now()}function sn(n){let t;try{t=c(n)instanceof GPUCanvasContext}catch(n){t=!1}return t}function ln(n){let t;try{t=c(n)instanceof GPUAdapter}catch(n){t=!1}return t}function mn(n){return p(c(n).gpu)}function pn(n){return p(c(n).features)}function hn(n){return p(c(n).limits)}function xn(n,t){return p(c(n).requestDevice(c(t)))}function yn(n,t){c(n).configure(c(t))}function Sn(n){return p(c(n).getCurrentTexture())}function kn(n){let t;try{t=c(n)instanceof GPUValidationError}catch(n){t=!1}return t}function vn(n,t){const e=w(c(t).message,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Bn(n){let t;try{t=c(n)instanceof GPUOutOfMemoryError}catch(n){t=!1}return t}function Pn(n,t,e){return p(c(n).getMappedRange(t,e))}function jn(n){return c(n).maxTextureDimension1D}function In(n){return c(n).maxTextureDimension2D}function An(n){return c(n).maxTextureDimension3D}function Dn(n){return c(n).maxTextureArrayLayers}function Tn(n){return c(n).maxBindGroups}function Cn(n){return c(n).maxBindingsPerBindGroup}function Mn(n){return c(n).maxDynamicUniformBuffersPerPipelineLayout}function Fn(n){return c(n).maxDynamicStorageBuffersPerPipelineLayout}function En(n){return c(n).maxSampledTexturesPerShaderStage}function Rn(n){return c(n).maxSamplersPerShaderStage}function Ln(n){return c(n).maxStorageBuffersPerShaderStage}function On(n){return c(n).maxStorageTexturesPerShaderStage}function Gn(n){return c(n).maxUniformBuffersPerShaderStage}function Vn(n){return c(n).maxUniformBufferBindingSize}function Wn(n){return c(n).maxStorageBufferBindingSize}function qn(n){return c(n).minUniformBufferOffsetAlignment}function zn(n){return c(n).minStorageBufferOffsetAlignment}function Un(n){return c(n).maxVertexBuffers}function Kn(n){return c(n).maxBufferSize}function Qn(n){return c(n).maxVertexAttributes}function Nn(n){return c(n).maxVertexBufferArrayStride}function Xn(n){return c(n).maxInterStageShaderComponents}function Yn(n){return c(n).maxComputeWorkgroupStorageSize}function Hn(n){return c(n).maxComputeInvocationsPerWorkgroup}function Jn(n){return c(n).maxComputeWorkgroupSizeX}function Zn(n){return c(n).maxComputeWorkgroupSizeY}function $n(n){return c(n).maxComputeWorkgroupSizeZ}function nt(n){return c(n).maxComputeWorkgroupsPerDimension}function tt(n){return p(c(n).error)}function et(n,t,e){return c(n).has(x(t,e))}function rt(n){return p(c(n).queue)}function ut(n){const t=c(n);return"object"==typeof t&&null!==t}function ft(n){return p(c(n).Window)}function ct(n){return p(c(n).WorkerGlobalScope)}function it(n,t){return p(c(n).requestAdapter(c(t)))}function ot(n){return p(c(n).getPreferredCanvasFormat())}function _t(n){return p(c(n).features)}function dt(n){return p(c(n).limits)}function at(n,t){return p(c(n).createShaderModule(c(t)))}function bt(n,t){return p(c(n).createBindGroupLayout(c(t)))}function gt(n,t){return p(c(n).createBindGroup(c(t)))}function wt(n,t){return p(c(n).createPipelineLayout(c(t)))}function st(n,t){return p(c(n).createRenderPipeline(c(t)))}function lt(n,t){return p(c(n).createComputePipeline(c(t)))}function mt(n,t){return p(c(n).createBuffer(c(t)))}function pt(n,t){return p(c(n).createTexture(c(t)))}function ht(n,t){return p(c(n).createSampler(c(t)))}function xt(n,t){return p(c(n).createQuerySet(c(t)))}function yt(n,t){return p(c(n).createCommandEncoder(c(t)))}function St(n,t){return p(c(n).createRenderBundleEncoder(c(t)))}function kt(n){c(n).destroy()}function vt(n,t){c(n).onuncapturederror=c(t)}function Bt(n,t){c(n).pushErrorScope(o(t))}function Pt(n){return p(c(n).popErrorScope())}function jt(n,t,e,r){return p(c(n).mapAsync(t>>>0,e,r))}function It(n){c(n).unmap()}function At(n,t){return p(c(n).createView(c(t)))}function Dt(n){c(n).destroy()}function Tt(n){c(n).destroy()}function Ct(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Mt(n,t){return p(c(n).getBindGroupLayout(t>>>0))}function Ft(n,t,e,r,u,f){c(n).copyBufferToBuffer(c(t),e,c(r),u,f)}function Et(n,t,e,r){c(n).copyBufferToTexture(c(t),c(e),c(r))}function Rt(n,t,e,r){c(n).copyTextureToBuffer(c(t),c(e),c(r))}function Lt(n,t,e,r){c(n).copyTextureToTexture(c(t),c(e),c(r))}function Ot(n,t){return p(c(n).beginComputePass(c(t)))}function Gt(n){c(n).end()}function Vt(n,t){return p(c(n).beginRenderPass(c(t)))}function Wt(n){c(n).end()}function qt(n,t){const e=w(c(t).label,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function zt(n,t){return p(c(n).finish(c(t)))}function Ut(n){return p(c(n).finish())}function Kt(n,t,e){c(n).clearBuffer(c(t),e)}function Qt(n,t,e,r){c(n).clearBuffer(c(t),e,r)}function Nt(n,t,e){c(n).writeTimestamp(c(t),e>>>0)}function Xt(n,t,e,r,u,f){c(n).resolveQuerySet(c(t),e>>>0,r>>>0,c(u),f>>>0)}function Yt(n){return p(c(n).finish())}function Ht(n,t){return p(c(n).finish(c(t)))}function Jt(n,t,e,r,u,f){c(n).writeBuffer(c(t),e,c(r),u,f)}function Zt(n){return c(n).usage}function $t(n){return c(n).size}function ne(n,t,e,r,u){c(n).writeTexture(c(t),c(e),c(r),c(u))}function te(n,t,e,r){c(n).copyExternalImageToTexture(c(t),c(e),c(r))}function ee(n,t){c(n).setPipeline(c(t))}function re(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function ue(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function fe(n,t,e,r){c(n).dispatchWorkgroups(t>>>0,e>>>0,r>>>0)}function ce(n,t,e){c(n).dispatchWorkgroupsIndirect(c(t),e)}function ie(n,t){c(n).setPipeline(c(t))}function oe(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function _e(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function de(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function ae(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function be(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ge(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function we(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function se(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function le(n,t,e){c(n).drawIndirect(c(t),e)}function me(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function pe(n,t){c(n).setPipeline(c(t))}function he(n,t,e){c(n).setBindGroup(t>>>0,c(e))}function xe(n,t,e,r,u,f,i){c(n).setBindGroup(t>>>0,c(e),R(r,u),f,i>>>0)}function ye(n,t,e,r){c(n).setIndexBuffer(c(t),o(e),r)}function Se(n,t,e,r,u){c(n).setIndexBuffer(c(t),o(e),r,u)}function ke(n,t,e,r){c(n).setVertexBuffer(t>>>0,c(e),r)}function ve(n,t,e,r,u){c(n).setVertexBuffer(t>>>0,c(e),r,u)}function Be(n,t,e,r,u){c(n).draw(t>>>0,e>>>0,r>>>0,u>>>0)}function Pe(n,t,e,r,u,f){c(n).drawIndexed(t>>>0,e>>>0,r>>>0,u,f>>>0)}function je(n,t,e){c(n).drawIndirect(c(t),e)}function Ie(n,t,e){c(n).drawIndexedIndirect(c(t),e)}function Ae(n,t){c(n).setBlendConstant(c(t))}function De(n,t,e,r,u){c(n).setScissorRect(t>>>0,e>>>0,r>>>0,u>>>0)}function Te(n,t,e,r,u,f,i){c(n).setViewport(t,e,r,u,f,i)}function Ce(n,t){c(n).setStencilReference(t>>>0)}function Me(n,t){c(n).executeBundles(c(t))}function Fe(n,t){c(n).submit(c(t))}function Ee(n){queueMicrotask(c(n))}function Re(n){return p(c(n).queueMicrotask)}function Le(n){return"function"==typeof c(n)}function Oe(n){const t=c(n);return"boolean"==typeof t?t?1:0:2}function Ge(n,t){const e=c(t),u="number"==typeof e?e:void 0;(null!==y&&0!==y.byteLength||(y=new Float64Array(r.memory.buffer)),y)[n/8+1]=s(u)?0:u,m()[n/4+0]=!s(u)}function Ve(n){let t;try{t=c(n)instanceof WebGL2RenderingContext}catch(n){t=!1}return t}function We(n,t,e){c(n).beginQuery(t>>>0,c(e))}function qe(n,t,e,r,u,f){c(n).bindBufferRange(t>>>0,e>>>0,c(r),u,f)}function ze(n,t,e){c(n).bindSampler(t>>>0,c(e))}function Ue(n,t){c(n).bindVertexArray(c(t))}function Ke(n,t,e,r,u,f,i,o,_,d,a){c(n).blitFramebuffer(t,e,r,u,f,i,o,_,d>>>0,a>>>0)}function Qe(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function Ne(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function Xe(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function Ye(n,t,e,r,u){c(n).clearBufferiv(t>>>0,e,L(r,u))}function He(n,t,e,r,u){c(n).clearBufferuiv(t>>>0,e,R(r,u))}function Je(n,t,e,r){return c(n).clientWaitSync(c(t),e>>>0,r>>>0)}function Ze(n,t,e,r,u,f,i,o,_,d){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_,d)}function $e(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function nr(n,t,e,r,u,f,i,o,_,d,a,b){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a,b)}function tr(n,t,e,r,u,f,i,o,_,d,a){c(n).compressedTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,c(a))}function er(n,t,e,r,u,f){c(n).copyBufferSubData(t>>>0,e>>>0,r,u,f)}function rr(n,t,e,r,u,f,i,o,_,d){c(n).copyTexSubImage3D(t>>>0,e,r,u,f,i,o,_,d)}function ur(n){const t=c(n).createQuery();return s(t)?0:p(t)}function fr(n){const t=c(n).createSampler();return s(t)?0:p(t)}function cr(n){const t=c(n).createVertexArray();return s(t)?0:p(t)}function ir(n,t){c(n).deleteQuery(c(t))}function or(n,t){c(n).deleteSampler(c(t))}function _r(n,t){c(n).deleteSync(c(t))}function dr(n,t){c(n).deleteVertexArray(c(t))}function ar(n,t,e,r,u){c(n).drawArraysInstanced(t>>>0,e,r,u)}function br(n,t){c(n).drawBuffers(c(t))}function gr(n,t,e,r,u,f){c(n).drawElementsInstanced(t>>>0,e,r>>>0,u,f)}function wr(n,t){c(n).endQuery(t>>>0)}function sr(n,t,e){const r=c(n).fenceSync(t>>>0,e>>>0);return s(r)?0:p(r)}function lr(n,t,e,r,u,f){c(n).framebufferTextureLayer(t>>>0,e>>>0,c(r),u,f)}function mr(n,t,e,r){c(n).getBufferSubData(t>>>0,e,c(r))}function pr(){return O((function(n,t,e){return p(c(n).getIndexedParameter(t>>>0,e>>>0))}),arguments)}function hr(n,t,e){return p(c(n).getQueryParameter(c(t),e>>>0))}function xr(n,t,e){return p(c(n).getSyncParameter(c(t),e>>>0))}function yr(n,t,e,r){return c(n).getUniformBlockIndex(c(t),x(e,r))}function Sr(){return O((function(n,t,e){c(n).invalidateFramebuffer(t>>>0,c(e))}),arguments)}function kr(n,t){c(n).readBuffer(t>>>0)}function vr(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function Br(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,o)}),arguments)}function Pr(n,t,e,r,u,f){c(n).renderbufferStorageMultisample(t>>>0,e,r>>>0,u,f)}function jr(n,t,e,r){c(n).samplerParameterf(c(t),e>>>0,r)}function Ir(n,t,e,r){c(n).samplerParameteri(c(t),e>>>0,r)}function Ar(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Dr(){return O((function(n,t,e,r,u,f,i,o,_,d,a){c(n).texImage3D(t>>>0,e,r,u,f,i,o,_>>>0,d>>>0,c(a))}),arguments)}function Tr(n,t,e,r,u,f){c(n).texStorage2D(t>>>0,e,r>>>0,u,f)}function Cr(n,t,e,r,u,f,i){c(n).texStorage3D(t>>>0,e,r>>>0,u,f,i)}function Mr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Fr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,d)}),arguments)}function Er(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Rr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Lr(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function Or(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,b)}),arguments)}function Gr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Vr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function Wr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function qr(){return O((function(n,t,e,r,u,f,i,o,_,d,a,b){c(n).texSubImage3D(t>>>0,e,r,u,f,i,o,_,d>>>0,a>>>0,c(b))}),arguments)}function zr(n,t,e){c(n).uniform1ui(c(t),e>>>0)}function Ur(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function Kr(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function Qr(n,t,e,r){c(n).uniform2uiv(c(t),R(e,r))}function Nr(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function Xr(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function Yr(n,t,e,r){c(n).uniform3uiv(c(t),R(e,r))}function Hr(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function Jr(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function Zr(n,t,e,r){c(n).uniform4uiv(c(t),R(e,r))}function $r(n,t,e,r){c(n).uniformBlockBinding(c(t),e>>>0,r>>>0)}function nu(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function tu(n,t,e,r,u){c(n).uniformMatrix2x3fv(c(t),0!==e,V(r,u))}function eu(n,t,e,r,u){c(n).uniformMatrix2x4fv(c(t),0!==e,V(r,u))}function ru(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function uu(n,t,e,r,u){c(n).uniformMatrix3x2fv(c(t),0!==e,V(r,u))}function fu(n,t,e,r,u){c(n).uniformMatrix3x4fv(c(t),0!==e,V(r,u))}function cu(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function iu(n,t,e,r,u){c(n).uniformMatrix4x2fv(c(t),0!==e,V(r,u))}function ou(n,t,e,r,u){c(n).uniformMatrix4x3fv(c(t),0!==e,V(r,u))}function _u(n,t,e){c(n).vertexAttribDivisor(t>>>0,e>>>0)}function du(n,t,e,r,u,f){c(n).vertexAttribIPointer(t>>>0,e,r>>>0,u,f)}function au(n,t){c(n).activeTexture(t>>>0)}function bu(n,t,e){c(n).attachShader(c(t),c(e))}function gu(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function wu(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function su(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function lu(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function mu(n,t,e){c(n).bindTexture(t>>>0,c(e))}function pu(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function hu(n,t){c(n).blendEquation(t>>>0)}function xu(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function yu(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function Su(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function ku(n,t){c(n).clear(t>>>0)}function vu(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Bu(n,t){c(n).clearDepth(t)}function Pu(n,t){c(n).clearStencil(t)}function ju(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Iu(n,t){c(n).compileShader(c(t))}function Au(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Du(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function Tu(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Cu(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Mu(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Fu(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Eu(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Ru(n,t){c(n).cullFace(t>>>0)}function Lu(n,t){c(n).deleteBuffer(c(t))}function Ou(n,t){c(n).deleteFramebuffer(c(t))}function Gu(n,t){c(n).deleteProgram(c(t))}function Vu(n,t){c(n).deleteRenderbuffer(c(t))}function Wu(n,t){c(n).deleteShader(c(t))}function qu(n,t){c(n).deleteTexture(c(t))}function zu(n,t){c(n).depthFunc(t>>>0)}function Uu(n,t){c(n).depthMask(0!==t)}function Ku(n,t,e){c(n).depthRange(t,e)}function Qu(n,t){c(n).disable(t>>>0)}function Nu(n,t){c(n).disableVertexAttribArray(t>>>0)}function Xu(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function Yu(n,t){c(n).enable(t>>>0)}function Hu(n,t){c(n).enableVertexAttribArray(t>>>0)}function Ju(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function Zu(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function $u(n,t){c(n).frontFace(t>>>0)}function nf(){return O((function(n,t,e){const r=c(n).getExtension(x(t,e));return s(r)?0:p(r)}),arguments)}function tf(){return O((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function ef(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function rf(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function uf(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function ff(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function cf(n){const t=c(n).getSupportedExtensions();return s(t)?0:p(t)}function of(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function _f(n,t){c(n).linkProgram(c(t))}function df(n,t,e){c(n).pixelStorei(t>>>0,e)}function af(n,t,e){c(n).polygonOffset(t,e)}function bf(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function gf(n,t,e,r,u){c(n).scissor(t,e,r,u)}function wf(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function sf(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function lf(n,t){c(n).stencilMask(t>>>0)}function mf(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function pf(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function hf(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function xf(n,t,e){c(n).uniform1f(c(t),e)}function yf(n,t,e){c(n).uniform1i(c(t),e)}function Sf(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function kf(n,t){c(n).useProgram(c(t))}function vf(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function Bf(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Pf(n){let t;try{t=c(n)instanceof Window}catch(n){t=!1}return t}function jf(n){const t=c(n).document;return s(t)?0:p(t)}function If(n){return p(c(n).location)}function Af(n){return p(c(n).navigator)}function Df(n){return c(n).devicePixelRatio}function Tf(n,t){c(n).cancelIdleCallback(t>>>0)}function Cf(){return O((function(n,t){const e=c(n).getComputedStyle(c(t));return s(e)?0:p(e)}),arguments)}function Mf(){return O((function(n,t,e){const r=c(n).matchMedia(x(t,e));return s(r)?0:p(r)}),arguments)}function Ff(){return O((function(n,t){return c(n).requestIdleCallback(c(t))}),arguments)}function Ef(){return O((function(n,t){c(n).cancelAnimationFrame(t)}),arguments)}function Rf(){return O((function(n,t){return c(n).requestAnimationFrame(c(t))}),arguments)}function Lf(n,t){c(n).clearTimeout(t)}function Of(){return O((function(n,t){return c(n).setTimeout(c(t))}),arguments)}function Gf(){return O((function(n,t,e){return c(n).setTimeout(c(t),e)}),arguments)}function Vf(n){const t=c(n).body;return s(t)?0:p(t)}function Wf(n){return p(c(n).visibilityState)}function qf(n){const t=c(n).activeElement;return s(t)?0:p(t)}function zf(n){const t=c(n).fullscreenElement;return s(t)?0:p(t)}function Uf(){return O((function(n,t,e){return p(c(n).createElement(x(t,e)))}),arguments)}function Kf(n,t,e){const r=c(n).getElementById(x(t,e));return s(r)?0:p(r)}function Qf(){return O((function(n,t,e){const r=c(n).querySelector(x(t,e));return s(r)?0:p(r)}),arguments)}function Nf(){return O((function(n,t,e){return p(c(n).querySelectorAll(x(t,e)))}),arguments)}function Xf(){return O((function(n,t,e,r,u){c(n).setAttribute(x(t,e),x(r,u))}),arguments)}function Yf(){return O((function(n,t){c(n).setPointerCapture(t)}),arguments)}function Hf(n){return p(c(n).navigator)}function Jf(n,t){return p(c(n).fetch(c(t)))}function Zf(n){return p(c(n).style)}function $f(){return O((function(n){c(n).focus()}),arguments)}function nc(n,t,e,r){c(n).bufferData(t>>>0,e,r>>>0)}function tc(n,t,e,r){c(n).bufferData(t>>>0,c(e),r>>>0)}function ec(n,t,e,r){c(n).bufferSubData(t>>>0,e,c(r))}function rc(n,t,e,r,u,f,i,o,_){c(n).compressedTexSubImage2D(t>>>0,e,r,u,f,i,o>>>0,c(_))}function uc(){return O((function(n,t,e,r,u,f,i,o){c(n).readPixels(t,e,r,u,f>>>0,i>>>0,c(o))}),arguments)}function fc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function cc(){return O((function(n,t,e,r,u,f,i,o,_,d){c(n).texSubImage2D(t>>>0,e,r,u,f,i,o>>>0,_>>>0,c(d))}),arguments)}function ic(n,t,e,r){c(n).uniform2fv(c(t),V(e,r))}function oc(n,t,e,r){c(n).uniform2iv(c(t),L(e,r))}function _c(n,t,e,r){c(n).uniform3fv(c(t),V(e,r))}function dc(n,t,e,r){c(n).uniform3iv(c(t),L(e,r))}function ac(n,t,e,r){c(n).uniform4fv(c(t),V(e,r))}function bc(n,t,e,r){c(n).uniform4iv(c(t),L(e,r))}function gc(n,t,e,r,u){c(n).uniformMatrix2fv(c(t),0!==e,V(r,u))}function wc(n,t,e,r,u){c(n).uniformMatrix3fv(c(t),0!==e,V(r,u))}function sc(n,t,e,r,u){c(n).uniformMatrix4fv(c(t),0!==e,V(r,u))}function lc(n,t){c(n).activeTexture(t>>>0)}function mc(n,t,e){c(n).attachShader(c(t),c(e))}function pc(n,t,e,r,u){c(n).bindAttribLocation(c(t),e>>>0,x(r,u))}function hc(n,t,e){c(n).bindBuffer(t>>>0,c(e))}function xc(n,t,e){c(n).bindFramebuffer(t>>>0,c(e))}function yc(n,t,e){c(n).bindRenderbuffer(t>>>0,c(e))}function Sc(n,t,e){c(n).bindTexture(t>>>0,c(e))}function kc(n,t,e,r,u){c(n).blendColor(t,e,r,u)}function vc(n,t){c(n).blendEquation(t>>>0)}function Bc(n,t,e){c(n).blendEquationSeparate(t>>>0,e>>>0)}function Pc(n,t,e){c(n).blendFunc(t>>>0,e>>>0)}function jc(n,t,e,r,u){c(n).blendFuncSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function Ic(n,t){c(n).clear(t>>>0)}function Ac(n,t,e,r,u){c(n).clearColor(t,e,r,u)}function Dc(n,t){c(n).clearDepth(t)}function Tc(n,t){c(n).clearStencil(t)}function Cc(n,t,e,r,u){c(n).colorMask(0!==t,0!==e,0!==r,0!==u)}function Mc(n,t){c(n).compileShader(c(t))}function Fc(n,t,e,r,u,f,i,o,_){c(n).copyTexSubImage2D(t>>>0,e,r,u,f,i,o,_)}function Ec(n){const t=c(n).createBuffer();return s(t)?0:p(t)}function Rc(n){const t=c(n).createFramebuffer();return s(t)?0:p(t)}function Lc(n){const t=c(n).createProgram();return s(t)?0:p(t)}function Oc(n){const t=c(n).createRenderbuffer();return s(t)?0:p(t)}function Gc(n,t){const e=c(n).createShader(t>>>0);return s(e)?0:p(e)}function Vc(n){const t=c(n).createTexture();return s(t)?0:p(t)}function Wc(n,t){c(n).cullFace(t>>>0)}function qc(n,t){c(n).deleteBuffer(c(t))}function zc(n,t){c(n).deleteFramebuffer(c(t))}function Uc(n,t){c(n).deleteProgram(c(t))}function Kc(n,t){c(n).deleteRenderbuffer(c(t))}function Qc(n,t){c(n).deleteShader(c(t))}function Nc(n,t){c(n).deleteTexture(c(t))}function Xc(n,t){c(n).depthFunc(t>>>0)}function Yc(n,t){c(n).depthMask(0!==t)}function Hc(n,t,e){c(n).depthRange(t,e)}function Jc(n,t){c(n).disable(t>>>0)}function Zc(n,t){c(n).disableVertexAttribArray(t>>>0)}function $c(n,t,e,r){c(n).drawArrays(t>>>0,e,r)}function ni(n,t){c(n).enable(t>>>0)}function ti(n,t){c(n).enableVertexAttribArray(t>>>0)}function ei(n,t,e,r,u){c(n).framebufferRenderbuffer(t>>>0,e>>>0,r>>>0,c(u))}function ri(n,t,e,r,u,f){c(n).framebufferTexture2D(t>>>0,e>>>0,r>>>0,c(u),f)}function ui(n,t){c(n).frontFace(t>>>0)}function fi(){return O((function(n,t){return p(c(n).getParameter(t>>>0))}),arguments)}function ci(n,t,e){const u=c(t).getProgramInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function ii(n,t,e){return p(c(n).getProgramParameter(c(t),e>>>0))}function oi(n,t,e){const u=c(t).getShaderInfoLog(c(e));var f=s(u)?0:w(u,r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}function _i(n,t,e){return p(c(n).getShaderParameter(c(t),e>>>0))}function di(n,t,e,r){const u=c(n).getUniformLocation(c(t),x(e,r));return s(u)?0:p(u)}function ai(n,t){c(n).linkProgram(c(t))}function bi(n,t,e){c(n).pixelStorei(t>>>0,e)}function gi(n,t,e){c(n).polygonOffset(t,e)}function wi(n,t,e,r,u){c(n).renderbufferStorage(t>>>0,e>>>0,r,u)}function si(n,t,e,r,u){c(n).scissor(t,e,r,u)}function li(n,t,e,r){c(n).shaderSource(c(t),x(e,r))}function mi(n,t,e,r,u){c(n).stencilFuncSeparate(t>>>0,e>>>0,r,u>>>0)}function pi(n,t){c(n).stencilMask(t>>>0)}function hi(n,t,e){c(n).stencilMaskSeparate(t>>>0,e>>>0)}function xi(n,t,e,r,u){c(n).stencilOpSeparate(t>>>0,e>>>0,r>>>0,u>>>0)}function yi(n,t,e,r){c(n).texParameteri(t>>>0,e>>>0,r)}function Si(n,t,e){c(n).uniform1f(c(t),e)}function ki(n,t,e){c(n).uniform1i(c(t),e)}function vi(n,t,e,r,u,f){c(n).uniform4f(c(t),e,r,u,f)}function Bi(n,t){c(n).useProgram(c(t))}function Pi(n,t,e,r,u,f,i){c(n).vertexAttribPointer(t>>>0,e,r>>>0,0!==u,f,i)}function ji(n,t,e,r,u){c(n).viewport(t,e,r,u)}function Ii(){return O((function(n,t,e,u){const f=w(c(t).getPropertyValue(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Ai(){return O((function(n,t,e,u){const f=w(c(t).removeProperty(x(e,u)),r.__wbindgen_malloc,r.__wbindgen_realloc),i=_;m()[n/4+1]=i,m()[n/4+0]=f}),arguments)}function Di(){return O((function(n,t,e,r,u){c(n).setProperty(x(t,e),x(r,u))}),arguments)}function Ti(n){return c(n).width}function Ci(n){return c(n).height}function Mi(n){return c(n).videoWidth}function Fi(n){return c(n).videoHeight}function Ei(n){return c(n).width}function Ri(n){return c(n).height}function Li(n,t){c(n).drawBuffersWEBGL(c(t))}function Oi(n){return p(c(n).signal)}function Gi(){return O((function(){return p(new AbortController)}),arguments)}function Vi(n){c(n).abort()}function Wi(n){return c(n).isIntersecting}function qi(n){return c(n).pointerId}function zi(n){return c(n).pressure}function Ui(n,t){const e=w(c(t).pointerType,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Ki(n){return p(c(n).getCoalescedEvents())}function Qi(n){c(n).preventDefault()}function Ni(n,t){const e=w(c(t).media,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Xi(n){return c(n).matches}function Yi(){return O((function(n,t){c(n).addListener(c(t))}),arguments)}function Hi(){return O((function(n,t){c(n).removeListener(c(t))}),arguments)}function Ji(n){return c(n).ctrlKey}function Zi(n){return c(n).shiftKey}function $i(n){return c(n).altKey}function no(n){return c(n).metaKey}function to(n){return c(n).button}function eo(n){return c(n).buttons}function ro(n){return c(n).movementX}function uo(n){return c(n).movementY}function fo(n){return c(n).deltaX}function co(n){return c(n).deltaY}function io(n){return c(n).deltaMode}function oo(){return O((function(n,t,e,r){c(n).addEventListener(x(t,e),c(r))}),arguments)}function _o(){return O((function(n,t,e,r){c(n).removeEventListener(x(t,e),c(r))}),arguments)}function ao(n){let t;try{t=c(n)instanceof HTMLCanvasElement}catch(n){t=!1}return t}function bo(n){return c(n).width}function go(n,t){c(n).width=t>>>0}function wo(n){return c(n).height}function so(n,t){c(n).height=t>>>0}function lo(){return O((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function mo(){return O((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function po(){return O((function(n,t){const e=w(c(t).origin,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}),arguments)}function ho(n){return c(n).width}function xo(n,t){c(n).width=t>>>0}function yo(n){return c(n).height}function So(n,t){c(n).height=t>>>0}function ko(){return O((function(n,t,e){const r=c(n).getContext(x(t,e));return s(r)?0:p(r)}),arguments)}function vo(){return O((function(n,t,e,r){const u=c(n).getContext(x(t,e),c(r));return s(u)?0:p(u)}),arguments)}function Bo(){return O((function(n){return p(new ResizeObserver(c(n)))}),arguments)}function Po(n){c(n).disconnect()}function jo(n,t){c(n).observe(c(t))}function Io(n,t,e){c(n).observe(c(t),c(e))}function Ao(n,t){c(n).unobserve(c(t))}function Do(n){const t=c(n).getSupportedProfiles();return s(t)?0:p(t)}function To(n,t,e,r,u,f,i){c(n).framebufferTextureMultiviewOVR(t>>>0,e>>>0,c(r),u,f,i)}function Co(n){return p(c(n).contentRect)}function Mo(n){return p(c(n).devicePixelContentBoxSize)}function Fo(n){console.debug(c(n))}function Eo(n){console.error(c(n))}function Ro(n,t){console.error(c(n),c(t))}function Lo(n){console.info(c(n))}function Oo(n){console.log(c(n))}function Go(n){console.warn(c(n))}function Vo(n){return p(c(n).port1)}function Wo(n){return p(c(n).port2)}function qo(){return O((function(){return p(new MessageChannel)}),arguments)}function zo(n){c(n).close()}function Uo(){return O((function(n,t){c(n).postMessage(c(t))}),arguments)}function Ko(n){c(n).start()}function Qo(n){return c(n).inlineSize}function No(n){return c(n).blockSize}function Xo(n){let t;try{t=c(n)instanceof Response}catch(n){t=!1}return t}function Yo(n,t){const e=w(c(t).url,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function Ho(n){return c(n).status}function Jo(n){return p(c(n).headers)}function Zo(){return O((function(n){return p(c(n).arrayBuffer())}),arguments)}function $o(){return O((function(n){return p(c(n).text())}),arguments)}function n_(n){return c(n).altKey}function t_(n){return c(n).ctrlKey}function e_(n){return c(n).shiftKey}function r_(n){return c(n).metaKey}function u_(n){return c(n).location}function f_(n){return c(n).repeat}function c_(n,t){const e=w(c(t).key,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function i_(n,t){const e=w(c(t).code,r.__wbindgen_malloc,r.__wbindgen_realloc),u=_;m()[n/4+1]=u,m()[n/4+0]=e}function o_(n){return c(n).persisted}function __(){return O((function(n,t,e){return p(new Request(x(n,t),c(e)))}),arguments)}function d_(n,t,e,r,u){c(n).drawArraysInstancedANGLE(t>>>0,e,r,u)}function a_(n,t,e,r,u,f){c(n).drawElementsInstancedANGLE(t>>>0,e,r>>>0,u,f)}function b_(n,t,e){c(n).vertexAttribDivisorANGLE(t>>>0,e>>>0)}function g_(){return O((function(){return p(new Headers)}),arguments)}function w_(){return O((function(n,t,e,r,u){c(n).append(x(t,e),x(r,u))}),arguments)}function s_(){return O((function(n){return p(new IntersectionObserver(c(n)))}),arguments)}function l_(n){c(n).disconnect()}function m_(n,t){c(n).observe(c(t))}function p_(){return O((function(n,t){return p(c(n).appendChild(c(t)))}),arguments)}function h_(n,t){return c(n).contains(c(t))}function x_(n,t){const e=c(n)[t>>>0];return s(e)?0:p(e)}function y_(n,t){c(n).bindVertexArrayOES(c(t))}function S_(n){const t=c(n).createVertexArrayOES();return s(t)?0:p(t)}function k_(n,t){c(n).deleteVertexArrayOES(c(t))}function v_(n,t){return p(c(n)[t>>>0])}function B_(n){return c(n).length}function P_(){return p(new Array)}function j_(n,t){return p(new Function(x(n,t)))}function I_(n){return p(c(n).next)}function A_(){return O((function(n){return p(c(n).next())}),arguments)}function D_(n){return c(n).done}function T_(n){return p(c(n).value)}function C_(){return p(Symbol.iterator)}function M_(){return O((function(n,t){return p(Reflect.get(c(n),c(t)))}),arguments)}function F_(){return O((function(n,t){return p(c(n).call(c(t)))}),arguments)}function E_(){return p(new Object)}function R_(){return O((function(){return p(self.self)}),arguments)}function L_(){return O((function(){return p(window.window)}),arguments)}function O_(){return O((function(){return p(globalThis.globalThis)}),arguments)}function G_(){return O((function(){return p(global.global)}),arguments)}function V_(n,t,e){return c(n).includes(c(t),e)}function W_(n){return p(Array.of(c(n)))}function q_(n,t){return c(n).push(c(t))}function z_(n){let t;try{t=c(n)instanceof Object}catch(n){t=!1}return t}function U_(n,t){return p(Object.getOwnPropertyDescriptor(c(n),c(t)))}function K_(n,t){return Object.is(c(n),c(t))}function Q_(n){return p(c(n).valueOf())}function N_(n){return p(Promise.resolve(c(n)))}function X_(n,t){return p(c(n).catch(c(t)))}function Y_(n,t){return p(c(n).then(c(t)))}function H_(n,t,e){return p(c(n).then(c(t),c(e)))}function J_(n){return p(c(n).buffer)}function Z_(n,t,e){return p(new Int8Array(c(n),t>>>0,e>>>0))}function $_(n,t,e){return p(new Int16Array(c(n),t>>>0,e>>>0))}function nd(n,t,e){return p(new Int32Array(c(n),t>>>0,e>>>0))}function td(n,t,e){return p(new Uint8Array(c(n),t>>>0,e>>>0))}function ed(n){return p(new Uint8Array(c(n)))}function rd(n,t,e){c(n).set(c(t),e>>>0)}function ud(n){return c(n).length}function fd(n,t,e){return p(new Uint16Array(c(n),t>>>0,e>>>0))}function cd(n,t,e){return p(new Uint32Array(c(n),t>>>0,e>>>0))}function id(n,t,e){return p(new Float32Array(c(n),t>>>0,e>>>0))}function od(n){return p(c(n).buffer)}function _d(){return O((function(n,t){return Reflect.has(c(n),c(t))}),arguments)}function dd(){return O((function(n,t,e){return Reflect.set(c(n),c(t),c(e))}),arguments)}function ad(){return O((function(n){return p(JSON.stringify(c(n)))}),arguments)}function bd(n,t){const e=w(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=_;m()[n/4+1]=u,m()[n/4+0]=e}function gd(n,t){throw new Error(x(n,t))}function wd(){return p(r.memory)}function sd(n,t,e){return p(k(n,t,49,v))}function ld(n,t,e){return p(k(n,t,49,v))}function md(n,t,e){return p(k(n,t,49,v))}function pd(n,t,e){return p(k(n,t,49,v))}function hd(n,t,e){return p(k(n,t,49,B))}function xd(n,t,e){return p(k(n,t,49,v))}function yd(n,t,e){return p(k(n,t,49,P))}function Sd(n,t,e){return p(k(n,t,333,j))}function kd(n,t,e){return p(k(n,t,333,j))}function vd(n,t,e){return p(k(n,t,333,j))}function Bd(n,t,e){return p(k(n,t,333,I))}function Pd(n,t,e){return p(k(n,t,333,j))}function jd(n,t,e){return p(k(n,t,333,j))}function Id(n,t,e){return p(k(n,t,333,A))}function Ad(n,t,e){return p(k(n,t,901,D))}function Dd(n,t,e){return p(k(n,t,901,D))}function Td(n,t,e){return p(k(n,t,901,D))}function Cd(n,t,e){return p(k(n,t,901,T))}function Md(n,t,e){return p(k(n,t,901,D))}function Fd(n,t,e){return p(k(n,t,901,D))}function Ed(n,t,e){return p(k(n,t,901,D))}function Rd(n,t,e){return p(k(n,t,2036,C))}function Ld(n,t,e){return p(k(n,t,2036,C))}function Od(n,t,e){return p(k(n,t,2130,M))}}).call(this,e(260)(n))},429:function(n,t,e){"use strict";e.r(t);var r=e(430),u=e(248);e.d(t,"__wbg_set_wasm",(function(){return u.zi})),e.d(t,"run",(function(){return u.sl})),e.d(t,"__wbindgen_object_drop_ref",(function(){return u.ol})),e.d(t,"__wbindgen_string_get",(function(){return u.pl})),e.d(t,"__wbindgen_cb_drop",(function(){return u.Hk})),e.d(t,"__wbindgen_is_undefined",(function(){return u.jl})),e.d(t,"__wbindgen_object_clone_ref",(function(){return u.nl})),e.d(t,"__wbindgen_string_new",(function(){return u.ql})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return u.Eg})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return u.Li})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return u.Rd})),e.d(t,"__wbg_fetch_386f87a3ebf5003c",(function(){return u.Wd})),e.d(t,"__wbg_offsetX_2a15015b9df991ec",(function(){return u.Vg})),e.d(t,"__wbg_offsetY_f4992c922228f662",(function(){return u.Wg})),e.d(t,"__wbg_getCoalescedEvents_806e5358e1f3130b",(function(){return u.qe})),e.d(t,"__wbg_requestFullscreen_5a116c6464189b61",(function(){return u.Kh})),e.d(t,"__wbg_scheduler_c3c850461f2d7b5f",(function(){return u.Th})),e.d(t,"__wbg_requestIdleCallback_f8f727e4ca7842d0",(function(){return u.Nh})),e.d(t,"__wbg_onpointerrawupdate_2641d497db2638e4",(function(){return u.Xg})),e.d(t,"__wbg_prototype_d761fd8c272c3aee",(function(){return u.oh})),e.d(t,"__wbg_webkitFullscreenElement_3a363126a251fcd9",(function(){return u.wk})),e.d(t,"__wbg_Window_c0d141cc7e9b1f6d",(function(){return u.b})),e.d(t,"__wbg_postTask_319d3986858dc461",(function(){return u.lh})),e.d(t,"__wbg_requestFullscreen_7a35806115b07885",(function(){return u.Lh})),e.d(t,"__wbg_scheduler_181be421fd0b2855",(function(){return u.Sh})),e.d(t,"__wbindgen_number_new",(function(){return u.ml})),e.d(t,"__wbg_webkitRequestFullscreen_db1af6d8d06ed38d",(function(){return u.xk})),e.d(t,"__wbg_performance_eeefc685c9bc38b4",(function(){return u.Zg})),e.d(t,"__wbg_now_e0d8ec93dd25766a",(function(){return u.Qg})),e.d(t,"__wbg_instanceof_GpuCanvasContext_05351086956f1883",(function(){return u.mf})),e.d(t,"__wbg_instanceof_GpuAdapter_76bb05881d5f91d1",(function(){return u.lf})),e.d(t,"__wbg_gpu_4ac835f782ad971d",(function(){return u.af})),e.d(t,"__wbg_features_7fd6ee02e18d77a4",(function(){return u.Ud})),e.d(t,"__wbg_limits_7c1e17ce28ddf954",(function(){return u.Cf})),e.d(t,"__wbg_requestDevice_baf0b46015a90431",(function(){return u.Jh})),e.d(t,"__wbg_configure_8ae8b7e66a9d6189",(function(){return u.Hb})),e.d(t,"__wbg_getCurrentTexture_26a07297d850dcb1",(function(){return u.we})),e.d(t,"__wbg_instanceof_GpuValidationError_3128431f7a0514f4",(function(){return u.of})),e.d(t,"__wbg_message_867097f776344069",(function(){return u.ng})),e.d(t,"__wbg_instanceof_GpuOutOfMemoryError_b37a08bfb7cee038",(function(){return u.nf})),e.d(t,"__wbg_getMappedRange_8229b08f744819c0",(function(){return u.Ae})),e.d(t,"__wbg_maxTextureDimension1D_53351b4a7253c324",(function(){return u.eg})),e.d(t,"__wbg_maxTextureDimension2D_26995ffa94733f82",(function(){return u.fg})),e.d(t,"__wbg_maxTextureDimension3D_8d77c6d768caef58",(function(){return u.gg})),e.d(t,"__wbg_maxTextureArrayLayers_cbf7e90284df66c3",(function(){return u.dg})),e.d(t,"__wbg_maxBindGroups_54fa38a646718d85",(function(){return u.Mf})),e.d(t,"__wbg_maxBindingsPerBindGroup_e8f7a2792b9ac107",(function(){return u.Nf})),e.d(t,"__wbg_maxDynamicUniformBuffersPerPipelineLayout_7c5942f359a6fb1b",(function(){return u.Wf})),e.d(t,"__wbg_maxDynamicStorageBuffersPerPipelineLayout_bd22a382d13e6ef5",(function(){return u.Vf})),e.d(t,"__wbg_maxSampledTexturesPerShaderStage_5704d5ff400bceee",(function(){return u.Yf})),e.d(t,"__wbg_maxSamplersPerShaderStage_5e8845f07c33913a",(function(){return u.Zf})),e.d(t,"__wbg_maxStorageBuffersPerShaderStage_18a674788ed5fdad",(function(){return u.bg})),e.d(t,"__wbg_maxStorageTexturesPerShaderStage_bfff5cb8d91bcfcc",(function(){return u.cg})),e.d(t,"__wbg_maxUniformBuffersPerShaderStage_ef06df9be2943d45",(function(){return u.ig})),e.d(t,"__wbg_maxUniformBufferBindingSize_f84670235a7e5df9",(function(){return u.hg})),e.d(t,"__wbg_maxStorageBufferBindingSize_9245cd89c719dbf2",(function(){return u.ag})),e.d(t,"__wbg_minUniformBufferOffsetAlignment_5574ef5e4f6d62da",(function(){return u.rg})),e.d(t,"__wbg_minStorageBufferOffsetAlignment_a6666e346184b953",(function(){return u.qg})),e.d(t,"__wbg_maxVertexBuffers_73da155813feea78",(function(){return u.lg})),e.d(t,"__wbg_maxBufferSize_7087869d4548c87d",(function(){return u.Of})),e.d(t,"__wbg_maxVertexAttributes_3a0ea01143239608",(function(){return u.jg})),e.d(t,"__wbg_maxVertexBufferArrayStride_d699c03944dd52d9",(function(){return u.kg})),e.d(t,"__wbg_maxInterStageShaderComponents_09be6edd346cb8da",(function(){return u.Xf})),e.d(t,"__wbg_maxComputeWorkgroupStorageSize_58415be93e502f25",(function(){return u.Tf})),e.d(t,"__wbg_maxComputeInvocationsPerWorkgroup_8aa2f0a5861ce5ef",(function(){return u.Pf})),e.d(t,"__wbg_maxComputeWorkgroupSizeX_789174905500f6c7",(function(){return u.Qf})),e.d(t,"__wbg_maxComputeWorkgroupSizeY_926ec1c24c6136da",(function(){return u.Rf})),e.d(t,"__wbg_maxComputeWorkgroupSizeZ_562c888ae9402be1",(function(){return u.Sf})),e.d(t,"__wbg_maxComputeWorkgroupsPerDimension_07fa50cdca40e120",(function(){return u.Uf})),e.d(t,"__wbg_error_7ced2e8034eb1f3f",(function(){return u.Pd})),e.d(t,"__wbg_has_d655f3a252d0b10a",(function(){return u.cf})),e.d(t,"__wbg_queue_9f8d8658085c6f43",(function(){return u.vh})),e.d(t,"__wbindgen_is_object",(function(){return u.il})),e.d(t,"__wbg_Window_a1459b9c171b6eed",(function(){return u.a})),e.d(t,"__wbg_WorkerGlobalScope_e1b8bcefd2818e94",(function(){return u.c})),e.d(t,"__wbg_requestAdapter_913357b9788f14cd",(function(){return u.Hh})),e.d(t,"__wbg_getPreferredCanvasFormat_c57006806f2efe1b",(function(){return u.Ee})),e.d(t,"__wbg_features_01f848ca4efe700b",(function(){return u.Td})),e.d(t,"__wbg_limits_cf6e9ab92d696f0c",(function(){return u.Df})),e.d(t,"__wbg_createShaderModule_6851cf2067c2f947",(function(){return u.oc})),e.d(t,"__wbg_createBindGroupLayout_6adcd872318d899a",(function(){return u.Tb})),e.d(t,"__wbg_createBindGroup_5ac37963cb812b24",(function(){return u.Ub})),e.d(t,"__wbg_createPipelineLayout_2648fbc756354294",(function(){return u.dc})),e.d(t,"__wbg_createRenderPipeline_513576fa326b8ccf",(function(){return u.jc})),e.d(t,"__wbg_createComputePipeline_957ea1dbcd97e6de",(function(){return u.Zb})),e.d(t,"__wbg_createBuffer_90ac080c7cc1375d",(function(){return u.Xb})),e.d(t,"__wbg_createTexture_4297303d703376ef",(function(){return u.sc})),e.d(t,"__wbg_createSampler_e56450d56435986f",(function(){return u.nc})),e.d(t,"__wbg_createQuerySet_c6b5390470139efb",(function(){return u.gc})),e.d(t,"__wbg_createCommandEncoder_9ee63be2a93c77dd",(function(){return u.Yb})),e.d(t,"__wbg_createRenderBundleEncoder_bbce060a45e55caf",(function(){return u.ic})),e.d(t,"__wbg_destroy_6e1daab7792230a0",(function(){return u.cd})),e.d(t,"__wbg_setonuncapturederror_0901d4d8bff41810",(function(){return u.Ci})),e.d(t,"__wbg_pushErrorScope_d39727ef0414ac9f",(function(){return u.ph})),e.d(t,"__wbg_popErrorScope_1d998d85c7b134be",(function(){return u.hh})),e.d(t,"__wbg_mapAsync_7d9fc5c22fb1f55e",(function(){return u.Jf})),e.d(t,"__wbg_unmap_abe29e47be94736f",(function(){return u.dk})),e.d(t,"__wbg_createView_8463cbef5f0c4d5c",(function(){return u.wc})),e.d(t,"__wbg_destroy_b8ea7d8b8cee78c4",(function(){return u.ed})),e.d(t,"__wbg_destroy_7fe69567d342b339",(function(){return u.dd})),e.d(t,"__wbg_getBindGroupLayout_255eaa69c120a995",(function(){return u.me})),e.d(t,"__wbg_getBindGroupLayout_d573a4d2adfb5ae8",(function(){return u.ne})),e.d(t,"__wbg_copyBufferToBuffer_0a44e23b31a7ca5a",(function(){return u.Lb})),e.d(t,"__wbg_copyBufferToTexture_de6f3cd9ac87a870",(function(){return u.Mb})),e.d(t,"__wbg_copyTextureToBuffer_7ab49ff0dd12cd22",(function(){return u.Rb})),e.d(t,"__wbg_copyTextureToTexture_45800f5fb0aaaf6c",(function(){return u.Sb})),e.d(t,"__wbg_beginComputePass_99e2aa27fb960fa5",(function(){return u.q})),e.d(t,"__wbg_end_a895c7d0f47bb8e0",(function(){return u.Nd})),e.d(t,"__wbg_beginRenderPass_b4c178a1fd787b5c",(function(){return u.s})),e.d(t,"__wbg_end_0fafe47bdc78c53d",(function(){return u.Md})),e.d(t,"__wbg_label_4956528ad99b1650",(function(){return u.zf})),e.d(t,"__wbg_finish_cbd8e5d52fe81fd6",(function(){return u.be})),e.d(t,"__wbg_finish_3cd844105a9de3e9",(function(){return u.Yd})),e.d(t,"__wbg_clearBuffer_50e1d3d029849fdb",(function(){return u.jb})),e.d(t,"__wbg_clearBuffer_157bab025583c473",(function(){return u.ib})),e.d(t,"__wbg_writeTimestamp_70875f22e698e86b",(function(){return u.Fk})),e.d(t,"__wbg_resolveQuerySet_8f696a33e8da099f",(function(){return u.Oh})),e.d(t,"__wbg_finish_806df42c71c712c3",(function(){return u.ae})),e.d(t,"__wbg_finish_55ef253db8a2e02a",(function(){return u.Zd})),e.d(t,"__wbg_writeBuffer_b225dafa1a52c298",(function(){return u.Dk})),e.d(t,"__wbg_usage_2e5ff7c87b5e9737",(function(){return u.gk})),e.d(t,"__wbg_size_7838da1244dcc49f",(function(){return u.Ki})),e.d(t,"__wbg_writeTexture_05b125d21ce9740e",(function(){return u.Ek})),e.d(t,"__wbg_copyExternalImageToTexture_5389ee5babf9d86f",(function(){return u.Nb})),e.d(t,"__wbg_setPipeline_9730cb37968bb3d1",(function(){return u.ji})),e.d(t,"__wbg_setBindGroup_c11c5cfe30b7ec4a",(function(){return u.di})),e.d(t,"__wbg_setBindGroup_0184ac17323d75b2",(function(){return u.Yh})),e.d(t,"__wbg_dispatchWorkgroups_2190ad793cd27850",(function(){return u.od})),e.d(t,"__wbg_dispatchWorkgroupsIndirect_cfc6272439398a21",(function(){return u.nd})),e.d(t,"__wbg_setPipeline_b1e4ff4a2d89b8aa",(function(){return u.ki})),e.d(t,"__wbg_setBindGroup_2054136f79b0fed9",(function(){return u.Zh})),e.d(t,"__wbg_setBindGroup_7908d39626c7bcc5",(function(){return u.bi})),e.d(t,"__wbg_setIndexBuffer_4deca629ec05a510",(function(){return u.gi})),e.d(t,"__wbg_setIndexBuffer_ea5677e397c8df89",(function(){return u.ii})),e.d(t,"__wbg_setVertexBuffer_4c924a9cc335e437",(function(){return u.ui})),e.d(t,"__wbg_setVertexBuffer_0aca41ad007e04fc",(function(){return u.si})),e.d(t,"__wbg_draw_2ea14b17b7ad7b86",(function(){return u.Fd})),e.d(t,"__wbg_drawIndexed_81f7662bc9f8bda1",(function(){return u.Cd})),e.d(t,"__wbg_drawIndirect_3de3a4df802f8f74",(function(){return u.Ed})),e.d(t,"__wbg_drawIndexedIndirect_74e31bc5d14e7aab",(function(){return u.Ad})),e.d(t,"__wbg_setPipeline_d3556629635bf281",(function(){return u.li})),e.d(t,"__wbg_setBindGroup_4147d4ebb7213bb3",(function(){return u.ai})),e.d(t,"__wbg_setBindGroup_96a4847ff3077350",(function(){return u.ci})),e.d(t,"__wbg_setIndexBuffer_1860608e395ec140",(function(){return u.fi})),e.d(t,"__wbg_setIndexBuffer_83f311a5a378a545",(function(){return u.hi})),e.d(t,"__wbg_setVertexBuffer_d439a224a2369412",(function(){return u.vi})),e.d(t,"__wbg_setVertexBuffer_0dca9fc7421bd152",(function(){return u.ti})),e.d(t,"__wbg_draw_7266fe228aea02a8",(function(){return u.Gd})),e.d(t,"__wbg_drawIndexed_23bcd62668716ed0",(function(){return u.Bd})),e.d(t,"__wbg_drawIndirect_1a15176b1b8537ff",(function(){return u.Dd})),e.d(t,"__wbg_drawIndexedIndirect_6f3721f18ad10b1e",(function(){return u.zd})),e.d(t,"__wbg_setBlendConstant_a946e294911337e9",(function(){return u.ei})),e.d(t,"__wbg_setScissorRect_cd8f44130fd71416",(function(){return u.oi})),e.d(t,"__wbg_setViewport_66dfe2ad99a0ccd6",(function(){return u.wi})),e.d(t,"__wbg_setStencilReference_08db4d5601a3f285",(function(){return u.pi})),e.d(t,"__wbg_executeBundles_4bcd6c8ecfaedf51",(function(){return u.Sd})),e.d(t,"__wbg_submit_c512d9a4b5ff838d",(function(){return u.Yi})),e.d(t,"__wbg_queueMicrotask_118eeb525d584d9a",(function(){return u.th})),e.d(t,"__wbg_queueMicrotask_26a89c14c53809c0",(function(){return u.uh})),e.d(t,"__wbindgen_is_function",(function(){return u.hl})),e.d(t,"__wbindgen_boolean_get",(function(){return u.Gk})),e.d(t,"__wbindgen_number_get",(function(){return u.ll})),e.d(t,"__wbg_instanceof_WebGl2RenderingContext_6b8f92d566ced9e1",(function(){return u.sf})),e.d(t,"__wbg_beginQuery_3d6bb95151ccc499",(function(){return u.r})),e.d(t,"__wbg_bindBufferRange_e7b7d4cd65a6f94d",(function(){return u.v})),e.d(t,"__wbg_bindSampler_065f0bdf49888ff1",(function(){return u.C})),e.d(t,"__wbg_bindVertexArray_239574d42dbbd203",(function(){return u.G})),e.d(t,"__wbg_blitFramebuffer_4d77c70dcb183e0c",(function(){return u.R})),e.d(t,"__wbg_bufferData_194f0914aaada840",(function(){return u.U})),e.d(t,"__wbg_bufferData_c787516945ba48c2",(function(){return u.X})),e.d(t,"__wbg_bufferSubData_7f5ddd4fdc628963",(function(){return u.Y})),e.d(t,"__wbg_clearBufferiv_519fe97abe38622e",(function(){return u.kb})),e.d(t,"__wbg_clearBufferuiv_1ae6df4bc96ffe37",(function(){return u.lb})),e.d(t,"__wbg_clientWaitSync_8f9f625ae9a42de6",(function(){return u.vb})),e.d(t,"__wbg_compressedTexSubImage2D_f77856eab95e8671",(function(){return u.Eb})),e.d(t,"__wbg_compressedTexSubImage2D_87d89d4b3f413805",(function(){return u.Cb})),e.d(t,"__wbg_compressedTexSubImage3D_b69e67d3cd62b756",(function(){return u.Fb})),e.d(t,"__wbg_compressedTexSubImage3D_ff8eceb18a7ea2d6",(function(){return u.Gb})),e.d(t,"__wbg_copyBufferSubData_db2c040cc06be689",(function(){return u.Kb})),e.d(t,"__wbg_copyTexSubImage3D_0a3f60d0ee6409c7",(function(){return u.Qb})),e.d(t,"__wbg_createQuery_576d391ec549ed5e",(function(){return u.hc})),e.d(t,"__wbg_createSampler_49de055e495fedf8",(function(){return u.mc})),e.d(t,"__wbg_createVertexArray_4f450ed4d4a69acf",(function(){return u.vc})),e.d(t,"__wbg_deleteQuery_9aaca8e15da5bc9c",(function(){return u.Ic})),e.d(t,"__wbg_deleteSampler_93e35dc696f633c9",(function(){return u.Lc})),e.d(t,"__wbg_deleteSync_80326e1fc23a1016",(function(){return u.Oc})),e.d(t,"__wbg_deleteVertexArray_67635c7fe59aa660",(function(){return u.Sc})),e.d(t,"__wbg_drawArraysInstanced_3f02ae8708f8c4c7",(function(){return u.sd})),e.d(t,"__wbg_drawBuffers_6d32a0c370b9cb7f",(function(){return u.wd})),e.d(t,"__wbg_drawElementsInstanced_981861e70f6f9991",(function(){return u.yd})),e.d(t,"__wbg_endQuery_f256667aaa2e9fac",(function(){return u.Ld})),e.d(t,"__wbg_fenceSync_f9c8da648fd4e444",(function(){return u.Vd})),e.d(t,"__wbg_framebufferTextureLayer_45cb5a2978de4939",(function(){return u.he})),e.d(t,"__wbg_getBufferSubData_7f31bd9ec3682832",(function(){return u.oe})),e.d(t,"__wbg_getIndexedParameter_ad00bfb1210dbb28",(function(){return u.ze})),e.d(t,"__wbg_getQueryParameter_ea4da47c69182e79",(function(){return u.Ke})),e.d(t,"__wbg_getSyncParameter_295178259afc15d8",(function(){return u.Re})),e.d(t,"__wbg_getUniformBlockIndex_091bee5be624ff21",(function(){return u.Se})),e.d(t,"__wbg_invalidateFramebuffer_99c0131e9e958f49",(function(){return u.uf})),e.d(t,"__wbg_readBuffer_c02ab6ce6d95c99b",(function(){return u.wh})),e.d(t,"__wbg_readPixels_40ba392d7aaf6ac0",(function(){return u.xh})),e.d(t,"__wbg_readPixels_db02ea1a888b611a",(function(){return u.zh})),e.d(t,"__wbg_renderbufferStorageMultisample_37c0b1b9e8a4f342",(function(){return u.Dh})),e.d(t,"__wbg_samplerParameterf_f60306a8facede3e",(function(){return u.Qh})),e.d(t,"__wbg_samplerParameteri_da5225ffbb653046",(function(){return u.Rh})),e.d(t,"__wbg_texImage2D_2558a70047650d54",(function(){return u.Zi})),e.d(t,"__wbg_texImage3D_7987a4b692d91b21",(function(){return u.bj})),e.d(t,"__wbg_texStorage2D_0fff70234489e5a8",(function(){return u.ej})),e.d(t,"__wbg_texStorage3D_7d322e9790add281",(function(){return u.fj})),e.d(t,"__wbg_texSubImage2D_b4ac5eac47418cc5",(function(){return u.jj})),e.d(t,"__wbg_texSubImage2D_b962ba533b866161",(function(){return u.kj})),e.d(t,"__wbg_texSubImage2D_0b72a7308c3e78d3",(function(){return u.gj})),e.d(t,"__wbg_texSubImage2D_8f2db7871647d37a",(function(){return u.ij})),e.d(t,"__wbg_texSubImage2D_defc51298c31c0e3",(function(){return u.lj})),e.d(t,"__wbg_texSubImage3D_bd2fd28608206fe5",(function(){return u.oj})),e.d(t,"__wbg_texSubImage3D_895cc20d45e04909",(function(){return u.nj})),e.d(t,"__wbg_texSubImage3D_f75ab42a48d9b789",(function(){return u.pj})),e.d(t,"__wbg_texSubImage3D_2b48a701e63f042e",(function(){return u.mj})),e.d(t,"__wbg_texSubImage3D_f983428ce1099b7f",(function(){return u.qj})),e.d(t,"__wbg_uniform1ui_71145d62b7bd13f4",(function(){return u.yj})),e.d(t,"__wbg_uniform2fv_4bd352337ccc4530",(function(){return u.zj})),e.d(t,"__wbg_uniform2iv_829bd2f635ddf819",(function(){return u.Bj})),e.d(t,"__wbg_uniform2uiv_6ae4fe2845703965",(function(){return u.Dj})),e.d(t,"__wbg_uniform3fv_3d2854c81603e498",(function(){return u.Ej})),e.d(t,"__wbg_uniform3iv_71333eb685ad9616",(function(){return u.Hj})),e.d(t,"__wbg_uniform3uiv_998cd5452e009d35",(function(){return u.Ij})),e.d(t,"__wbg_uniform4fv_39cdcce4b1acc767",(function(){return u.Lj})),e.d(t,"__wbg_uniform4iv_f54116c4cfdcd96e",(function(){return u.Oj})),e.d(t,"__wbg_uniform4uiv_c1b79c253aa0271f",(function(){return u.Pj})),e.d(t,"__wbg_uniformBlockBinding_52117c1104e3ac8a",(function(){return u.Qj})),e.d(t,"__wbg_uniformMatrix2fv_756ddcf41f02aa75",(function(){return u.Sj})),e.d(t,"__wbg_uniformMatrix2x3fv_b11505178375085e",(function(){return u.Tj})),e.d(t,"__wbg_uniformMatrix2x4fv_9a96ca1263d07814",(function(){return u.Uj})),e.d(t,"__wbg_uniformMatrix3fv_f26b98137276fd3d",(function(){return u.Wj})),e.d(t,"__wbg_uniformMatrix3x2fv_8e447d81dfee8f45",(function(){return u.Xj})),e.d(t,"__wbg_uniformMatrix3x4fv_0b4125c5150e9ebc",(function(){return u.Yj})),e.d(t,"__wbg_uniformMatrix4fv_5d8e0e047546456b",(function(){return u.Zj})),e.d(t,"__wbg_uniformMatrix4x2fv_15b6f3535fd4ce98",(function(){return u.bk})),e.d(t,"__wbg_uniformMatrix4x3fv_5550b8543a32bbbd",(function(){return u.ck})),e.d(t,"__wbg_vertexAttribDivisor_8479e8b81c913ed6",(function(){return u.mk})),e.d(t,"__wbg_vertexAttribIPointer_69f2f4bd74cf0bcb",(function(){return u.nk})),e.d(t,"__wbg_activeTexture_d42cec3a26e47a5b",(function(){return u.g})),e.d(t,"__wbg_attachShader_2112634b3ffa9e9f",(function(){return u.o})),e.d(t,"__wbg_bindAttribLocation_e05596ff4f5413c3",(function(){return u.u})),e.d(t,"__wbg_bindBuffer_90d4fb91538001d5",(function(){return u.x})),e.d(t,"__wbg_bindFramebuffer_4f950b884dc4be83",(function(){return u.y})),e.d(t,"__wbg_bindRenderbuffer_1e0b14f526ed7a9d",(function(){return u.A})),e.d(t,"__wbg_bindTexture_75a698c47a923814",(function(){return u.D})),e.d(t,"__wbg_blendColor_7d3bf5e5214b44f7",(function(){return u.H})),e.d(t,"__wbg_blendEquation_6ca8e567e79464a4",(function(){return u.L})),e.d(t,"__wbg_blendEquationSeparate_34aa4cecd02882ab",(function(){return u.J})),e.d(t,"__wbg_blendFunc_cffe61957c92e9ac",(function(){return u.P})),e.d(t,"__wbg_blendFuncSeparate_3c342f57887c2900",(function(){return u.N})),e.d(t,"__wbg_clear_8e2508724944df18",(function(){return u.tb})),e.d(t,"__wbg_clearColor_480962bfac4e1cbd",(function(){return u.nb})),e.d(t,"__wbg_clearDepth_f5b4a73c4b8050eb",(function(){return u.pb})),e.d(t,"__wbg_clearStencil_1e4bb9932be75fce",(function(){return u.rb})),e.d(t,"__wbg_colorMask_21a93d0180bcbffa",(function(){return u.zb})),e.d(t,"__wbg_compileShader_f40e0c51a7a836fd",(function(){return u.Bb})),e.d(t,"__wbg_copyTexSubImage2D_65140521b061c61b",(function(){return u.Pb})),e.d(t,"__wbg_createBuffer_7f57647465d111f0",(function(){return u.Wb})),e.d(t,"__wbg_createFramebuffer_8ebfde8c77472024",(function(){return u.cc})),e.d(t,"__wbg_createProgram_7759fb2effb5d9b3",(function(){return u.ec})),e.d(t,"__wbg_createRenderbuffer_340b1c428d564bfd",(function(){return u.kc})),e.d(t,"__wbg_createShader_b474ef421ec0f80b",(function(){return u.qc})),e.d(t,"__wbg_createTexture_18b4a88c14cb086e",(function(){return u.rc})),e.d(t,"__wbg_cullFace_fe427cdf8d0ea4e2",(function(){return u.Ac})),e.d(t,"__wbg_deleteBuffer_fca5d765302c9a4e",(function(){return u.Dc})),e.d(t,"__wbg_deleteFramebuffer_da681ed1dfa6d543",(function(){return u.Fc})),e.d(t,"__wbg_deleteProgram_a06d69620332cc70",(function(){return u.Hc})),e.d(t,"__wbg_deleteRenderbuffer_5dcdde247a392125",(function(){return u.Jc})),e.d(t,"__wbg_deleteShader_138a810cc0ca9986",(function(){return u.Mc})),e.d(t,"__wbg_deleteTexture_eae7abcfa3015f09",(function(){return u.Pc})),e.d(t,"__wbg_depthFunc_5527d3ee35e25a8d",(function(){return u.Xc})),e.d(t,"__wbg_depthMask_9120207d491c649a",(function(){return u.Yc})),e.d(t,"__wbg_depthRange_d8d5ad00fd133fc0",(function(){return u.bd})),e.d(t,"__wbg_disable_f0ef6e9a7ac6ddd7",(function(){return u.kd})),e.d(t,"__wbg_disableVertexAttribArray_e4f458e34e54fe78",(function(){return u.id})),e.d(t,"__wbg_drawArrays_5bf0d92947e472af",(function(){return u.td})),e.d(t,"__wbg_enable_8b3019da8846ce76",(function(){return u.Kd})),e.d(t,"__wbg_enableVertexAttribArray_9d7b7e199f86e09b",(function(){return u.Id})),e.d(t,"__wbg_framebufferRenderbuffer_0144c6e35e2edb19",(function(){return u.de})),e.d(t,"__wbg_framebufferTexture2D_a6ad7148f7983ae6",(function(){return u.ge})),e.d(t,"__wbg_frontFace_41ab8e7ce3e48cae",(function(){return u.je})),e.d(t,"__wbg_getExtension_bef4112494c87f34",(function(){return u.ye})),e.d(t,"__wbg_getParameter_aa9af66884d2b210",(function(){return u.De})),e.d(t,"__wbg_getProgramInfoLog_4d189135f8d5a2de",(function(){return u.Fe})),e.d(t,"__wbg_getProgramParameter_7b04ca71a79d9047",(function(){return u.Ie})),e.d(t,"__wbg_getShaderInfoLog_d5de3e4eab06fc46",(function(){return u.Me})),e.d(t,"__wbg_getShaderParameter_4ddb51279bb1500b",(function(){return u.Ne})),e.d(t,"__wbg_getSupportedExtensions_7a174085f9e1983a",(function(){return u.Pe})),e.d(t,"__wbg_getUniformLocation_51ec30e3755e574d",(function(){return u.Te})),e.d(t,"__wbg_linkProgram_eabc664217816e72",(function(){return u.Ff})),e.d(t,"__wbg_pixelStorei_162a23ba7872b886",(function(){return u.ch})),e.d(t,"__wbg_polygonOffset_9f20aa27db3ea0a2",(function(){return u.gh})),e.d(t,"__wbg_renderbufferStorage_ff5740fb95ecf231",(function(){return u.Fh})),e.d(t,"__wbg_scissor_726eea865bbd6809",(function(){return u.Uh})),e.d(t,"__wbg_shaderSource_7943d06f24862a3b",(function(){return u.Gi})),e.d(t,"__wbg_stencilFuncSeparate_c16750a621e43580",(function(){return u.Pi})),e.d(t,"__wbg_stencilMask_9abfc669d9c2a893",(function(){return u.Si})),e.d(t,"__wbg_stencilMaskSeparate_a1f8f805de62aac5",(function(){return u.Qi})),e.d(t,"__wbg_stencilOpSeparate_2f2cc25254360270",(function(){return u.Ui})),e.d(t,"__wbg_texParameteri_8f70dffce11d7da1",(function(){return u.cj})),e.d(t,"__wbg_uniform1f_9b9e5339e7560722",(function(){return u.vj})),e.d(t,"__wbg_uniform1i_bdcd75be097285e6",(function(){return u.xj})),e.d(t,"__wbg_uniform4f_b143081575a3bb56",(function(){return u.Jj})),e.d(t,"__wbg_useProgram_757fab437af29c20",(function(){return u.hk})),e.d(t,"__wbg_vertexAttribPointer_4416f0325c02aa13",(function(){return u.ok})),e.d(t,"__wbg_viewport_7414e7e2a83afc72",(function(){return u.tk})),e.d(t,"__wbg_instanceof_Window_f401953a2cf86220",(function(){return u.tf})),e.d(t,"__wbg_document_5100775d18896c16",(function(){return u.pd})),e.d(t,"__wbg_location_2951b5ee34f19221",(function(){return u.Gf})),e.d(t,"__wbg_navigator_6c8fa55c5cc8796e",(function(){return u.vg})),e.d(t,"__wbg_devicePixelRatio_efc553b59506f64c",(function(){return u.gd})),e.d(t,"__wbg_cancelIdleCallback_3a36cf77475b492b",(function(){return u.gb})),e.d(t,"__wbg_getComputedStyle_078292ffe423aded",(function(){return u.re})),e.d(t,"__wbg_matchMedia_66bb21e3ef19270c",(function(){return u.Kf})),e.d(t,"__wbg_requestIdleCallback_cee8e1d6bdcfae9e",(function(){return u.Mh})),e.d(t,"__wbg_cancelAnimationFrame_111532f326e480af",(function(){return u.fb})),e.d(t,"__wbg_requestAnimationFrame_549258cfa66011f0",(function(){return u.Ih})),e.d(t,"__wbg_clearTimeout_ba63ae54a36e111e",(function(){return u.sb})),e.d(t,"__wbg_setTimeout_d2b9a986d10a6182",(function(){return u.ri})),e.d(t,"__wbg_setTimeout_c172d5704ef82276",(function(){return u.qi})),e.d(t,"__wbg_body_edb1908d3ceff3a1",(function(){return u.T})),e.d(t,"__wbg_visibilityState_990071edf70b1c55",(function(){return u.uk})),e.d(t,"__wbg_activeElement_fa7feca08f5028c0",(function(){return u.e})),e.d(t,"__wbg_fullscreenElement_1bef71098bd8dfde",(function(){return u.le})),e.d(t,"__wbg_createElement_8bae7856a4bb7411",(function(){return u.ac})),e.d(t,"__wbg_getElementById_c369ff43f0db99cf",(function(){return u.xe})),e.d(t,"__wbg_querySelector_a5f74efc5fa193dd",(function(){return u.sh})),e.d(t,"__wbg_querySelectorAll_4e0fcdb64cda2cd5",(function(){return u.rh})),e.d(t,"__wbg_setAttribute_3c9f6c303b696daa",(function(){return u.Xh})),e.d(t,"__wbg_setPointerCapture_0fdaad7a916c8486",(function(){return u.mi})),e.d(t,"__wbg_navigator_56803b85352a0575",(function(){return u.ug})),e.d(t,"__wbg_fetch_921fad6ef9e883dd",(function(){return u.Xd})),e.d(t,"__wbg_style_c3fc3dd146182a2d",(function(){return u.Xi})),e.d(t,"__wbg_focus_39d4b8ba8ff9df14",(function(){return u.ce})),e.d(t,"__wbg_bufferData_bb9321e8fa042bac",(function(){return u.W})),e.d(t,"__wbg_bufferData_5d1e6b8eaa7d23c8",(function(){return u.V})),e.d(t,"__wbg_bufferSubData_a6cea5e056662bd7",(function(){return u.Z})),e.d(t,"__wbg_compressedTexSubImage2D_db8b170a99900aff",(function(){return u.Db})),e.d(t,"__wbg_readPixels_551d0505625c865b",(function(){return u.yh})),e.d(t,"__wbg_texImage2D_a14a3c7863e25c89",(function(){return u.aj})),e.d(t,"__wbg_texSubImage2D_55a407e48f3a5cb4",(function(){return u.hj})),e.d(t,"__wbg_uniform2fv_dcb8b73e2637092a",(function(){return u.Aj})),e.d(t,"__wbg_uniform2iv_fc73855d9dec793a",(function(){return u.Cj})),e.d(t,"__wbg_uniform3fv_3e32c897d3ed1eaa",(function(){return u.Fj})),e.d(t,"__wbg_uniform3iv_2b3fa9d97dff01a2",(function(){return u.Gj})),e.d(t,"__wbg_uniform4fv_980ce05d950ee599",(function(){return u.Mj})),e.d(t,"__wbg_uniform4iv_f112dcc4401f5469",(function(){return u.Nj})),e.d(t,"__wbg_uniformMatrix2fv_4417ed4d88a140be",(function(){return u.Rj})),e.d(t,"__wbg_uniformMatrix3fv_d46553a1248946b5",(function(){return u.Vj})),e.d(t,"__wbg_uniformMatrix4fv_cd46ed81bccb0cb2",(function(){return u.ak})),e.d(t,"__wbg_activeTexture_5f084e1b3f14853e",(function(){return u.f})),e.d(t,"__wbg_attachShader_6397dc4fd87343d3",(function(){return u.p})),e.d(t,"__wbg_bindAttribLocation_7ab87f5815dce9f0",(function(){return u.t})),e.d(t,"__wbg_bindBuffer_1e5043751efddd4f",(function(){return u.w})),e.d(t,"__wbg_bindFramebuffer_c301d73a2c2842bb",(function(){return u.z})),e.d(t,"__wbg_bindRenderbuffer_8ec7d02bd60bdfb2",(function(){return u.B})),e.d(t,"__wbg_bindTexture_772f5eb022019d87",(function(){return u.E})),e.d(t,"__wbg_blendColor_f25a274ecd388a1e",(function(){return u.I})),e.d(t,"__wbg_blendEquation_a442d97b5c6efedb",(function(){return u.M})),e.d(t,"__wbg_blendEquationSeparate_721f30ba584a5233",(function(){return u.K})),e.d(t,"__wbg_blendFunc_fc4b298f39801a9c",(function(){return u.Q})),e.d(t,"__wbg_blendFuncSeparate_abe2ad4272c8365e",(function(){return u.O})),e.d(t,"__wbg_clear_f9731a47df2e70d8",(function(){return u.ub})),e.d(t,"__wbg_clearColor_42707553c40e0e0f",(function(){return u.mb})),e.d(t,"__wbg_clearDepth_42ac48f2ab25c419",(function(){return u.ob})),e.d(t,"__wbg_clearStencil_0f906e2d8b61aa7a",(function(){return u.qb})),e.d(t,"__wbg_colorMask_03aa359acc86fd70",(function(){return u.yb})),e.d(t,"__wbg_compileShader_3af4719dfdb508e3",(function(){return u.Ab})),e.d(t,"__wbg_copyTexSubImage2D_0e21b1e1089c410a",(function(){return u.Ob})),e.d(t,"__wbg_createBuffer_34e01f5c10929b41",(function(){return u.Vb})),e.d(t,"__wbg_createFramebuffer_49ca64e9e1c6f5eb",(function(){return u.bc})),e.d(t,"__wbg_createProgram_9affbfa62b7b2608",(function(){return u.fc})),e.d(t,"__wbg_createRenderbuffer_375d7f4004bc49bd",(function(){return u.lc})),e.d(t,"__wbg_createShader_55ca04b44164bd41",(function(){return u.pc})),e.d(t,"__wbg_createTexture_c13c31b2b132c17f",(function(){return u.tc})),e.d(t,"__wbg_cullFace_af37bb1c2d22ab73",(function(){return u.zc})),e.d(t,"__wbg_deleteBuffer_96df38349e3487d2",(function(){return u.Cc})),e.d(t,"__wbg_deleteFramebuffer_417b62b6156d4894",(function(){return u.Ec})),e.d(t,"__wbg_deleteProgram_641402f7551587d8",(function(){return u.Gc})),e.d(t,"__wbg_deleteRenderbuffer_d3aedb394b1ea546",(function(){return u.Kc})),e.d(t,"__wbg_deleteShader_e5c778f25b722e68",(function(){return u.Nc})),e.d(t,"__wbg_deleteTexture_f89d8e417b156960",(function(){return u.Qc})),e.d(t,"__wbg_depthFunc_1ee4bf1e0127bf7f",(function(){return u.Wc})),e.d(t,"__wbg_depthMask_dd6cd8a9aff90e5c",(function(){return u.Zc})),e.d(t,"__wbg_depthRange_7e521414b51cf5de",(function(){return u.ad})),e.d(t,"__wbg_disable_5dd8c3842de93e92",(function(){return u.jd})),e.d(t,"__wbg_disableVertexAttribArray_12bc9adefa738796",(function(){return u.hd})),e.d(t,"__wbg_drawArrays_f619a26a53ab5ab3",(function(){return u.ud})),e.d(t,"__wbg_enable_7abe812a71c76206",(function(){return u.Jd})),e.d(t,"__wbg_enableVertexAttribArray_6d44444aa994f42a",(function(){return u.Hd})),e.d(t,"__wbg_framebufferRenderbuffer_e1c9c64aea848b39",(function(){return u.ee})),e.d(t,"__wbg_framebufferTexture2D_66e1968fd5b7b3e3",(function(){return u.fe})),e.d(t,"__wbg_frontFace_bb8a1ded6f52865e",(function(){return u.ke})),e.d(t,"__wbg_getParameter_a77768abe8a51f24",(function(){return u.Ce})),e.d(t,"__wbg_getProgramInfoLog_bf1fba8fa90667c7",(function(){return u.Ge})),e.d(t,"__wbg_getProgramParameter_10c8a43809fb8c2e",(function(){return u.He})),e.d(t,"__wbg_getShaderInfoLog_0262cb299092ce92",(function(){return u.Le})),e.d(t,"__wbg_getShaderParameter_60b69083e8d662ce",(function(){return u.Oe})),e.d(t,"__wbg_getUniformLocation_6eedfb513ccce732",(function(){return u.Ue})),e.d(t,"__wbg_linkProgram_af5fed9dc3f1cdf9",(function(){return u.Ef})),e.d(t,"__wbg_pixelStorei_054e50b5fdc17824",(function(){return u.bh})),e.d(t,"__wbg_polygonOffset_2927e355350d4327",(function(){return u.fh})),e.d(t,"__wbg_renderbufferStorage_f41b3c99f6a8f25e",(function(){return u.Eh})),e.d(t,"__wbg_scissor_75ba2245d4db0eaf",(function(){return u.Vh})),e.d(t,"__wbg_shaderSource_7891a1fcb69a0023",(function(){return u.Fi})),e.d(t,"__wbg_stencilFuncSeparate_a3699f92e69c1494",(function(){return u.Oi})),e.d(t,"__wbg_stencilMask_c5ad44ea27c5f169",(function(){return u.Ti})),e.d(t,"__wbg_stencilMaskSeparate_a7830b1e1eabf5bd",(function(){return u.Ri})),e.d(t,"__wbg_stencilOpSeparate_321604240216c55c",(function(){return u.Vi})),e.d(t,"__wbg_texParameteri_d1035ed45d6c5655",(function(){return u.dj})),e.d(t,"__wbg_uniform1f_8914cb45b3ad5887",(function(){return u.uj})),e.d(t,"__wbg_uniform1i_badd5ff70c0d30bf",(function(){return u.wj})),e.d(t,"__wbg_uniform4f_fb56c7f4de64dd4c",(function(){return u.Kj})),e.d(t,"__wbg_useProgram_c637e43f9cd4c07a",(function(){return u.ik})),e.d(t,"__wbg_vertexAttribPointer_c25e4c5ed17f8a1d",(function(){return u.pk})),e.d(t,"__wbg_viewport_221ade2aef6032c8",(function(){return u.sk})),e.d(t,"__wbg_getPropertyValue_fa32ee1811f224cb",(function(){return u.Je})),e.d(t,"__wbg_removeProperty_fa6d48e2923dcfac",(function(){return u.Ch})),e.d(t,"__wbg_setProperty_ea7d15a2b591aa97",(function(){return u.ni})),e.d(t,"__wbg_width_1e8430024cb82aba",(function(){return u.zk})),e.d(t,"__wbg_height_0c1394f089d7bb71",(function(){return u.ff})),e.d(t,"__wbg_videoWidth_f0b751704b53672c",(function(){return u.rk})),e.d(t,"__wbg_videoHeight_e75550285bbbfdab",(function(){return u.qk})),e.d(t,"__wbg_width_0e2f1c393242f16e",(function(){return u.yk})),e.d(t,"__wbg_height_d6c8a3041eff461a",(function(){return u.hf})),e.d(t,"__wbg_drawBuffersWEBGL_4c663e042e093892",(function(){return u.vd})),e.d(t,"__wbg_signal_a61f78a3478fd9bc",(function(){return u.Ji})),e.d(t,"__wbg_new_0d76b0581eca6298",(function(){return u.wg})),e.d(t,"__wbg_abort_2aa7521d5690750e",(function(){return u.d})),e.d(t,"__wbg_isIntersecting_082397a1d66e2e35",(function(){return u.vf})),e.d(t,"__wbg_pointerId_e030fa156647fedd",(function(){return u.dh})),e.d(t,"__wbg_pressure_99cd07399f942a7c",(function(){return u.mh})),e.d(t,"__wbg_pointerType_0f2f0383406aa7fa",(function(){return u.eh})),e.d(t,"__wbg_getCoalescedEvents_14b443b6f75837a2",(function(){return u.pe})),e.d(t,"__wbg_preventDefault_b1a4aafc79409429",(function(){return u.nh})),e.d(t,"__wbg_media_bcef0e2ec4383569",(function(){return u.mg})),e.d(t,"__wbg_matches_e14ed9ff8291cf24",(function(){return u.Lf})),e.d(t,"__wbg_addListener_143ad0a501fabc3a",(function(){return u.i})),e.d(t,"__wbg_removeListener_46f3ee00c5b95320",(function(){return u.Bh})),e.d(t,"__wbg_ctrlKey_008695ce60a588f5",(function(){return u.xc})),e.d(t,"__wbg_shiftKey_1e76dbfcdd36a4b4",(function(){return u.Hi})),e.d(t,"__wbg_altKey_07da841b54bd3ed6",(function(){return u.j})),e.d(t,"__wbg_metaKey_86bfd3b0d3a8083f",(function(){return u.pg})),e.d(t,"__wbg_button_367cdc7303e3cf9b",(function(){return u.cb})),e.d(t,"__wbg_buttons_d004fa75ac704227",(function(){return u.db})),e.d(t,"__wbg_movementX_b800a0cacd14d9bf",(function(){return u.sg})),e.d(t,"__wbg_movementY_7907e03eb8c0ea1e",(function(){return u.tg})),e.d(t,"__wbg_deltaX_206576827ededbe5",(function(){return u.Uc})),e.d(t,"__wbg_deltaY_032e327e216f2b2b",(function(){return u.Vc})),e.d(t,"__wbg_deltaMode_294b2eaf54047265",(function(){return u.Tc})),e.d(t,"__wbg_addEventListener_53b787075bd5e003",(function(){return u.h})),e.d(t,"__wbg_removeEventListener_92cb9b3943463338",(function(){return u.Ah})),e.d(t,"__wbg_instanceof_HtmlCanvasElement_46bdbf323b0b18d1",(function(){return u.pf})),e.d(t,"__wbg_width_aee8b8809b033b05",(function(){return u.Bk})),e.d(t,"__wbg_setwidth_080107476e633963",(function(){return u.Di})),e.d(t,"__wbg_height_80053d3c71b338e0",(function(){return u.gf})),e.d(t,"__wbg_setheight_dc240617639f1f51",(function(){return u.Bi})),e.d(t,"__wbg_getContext_df50fa48a8876636",(function(){return u.ue})),e.d(t,"__wbg_getContext_fec464290556673c",(function(){return u.ve})),e.d(t,"__wbg_origin_ee93e29ace71f568",(function(){return u.Yg})),e.d(t,"__wbg_width_6aa39fc77f088914",(function(){return u.Ak})),e.d(t,"__wbg_setwidth_83d936c4b04dcbec",(function(){return u.Ei})),e.d(t,"__wbg_height_05a87854adf24d83",(function(){return u.ef})),e.d(t,"__wbg_setheight_6025ba0d58e6cc8c",(function(){return u.Ai})),e.d(t,"__wbg_getContext_c102f659d540d068",(function(){return u.se})),e.d(t,"__wbg_getContext_c9fc178d1fa6f8fe",(function(){return u.te})),e.d(t,"__wbg_new_61d4f20a1c08a45c",(function(){return u.Ag})),e.d(t,"__wbg_disconnect_6675f32e2ae8deb7",(function(){return u.ld})),e.d(t,"__wbg_observe_a79646ce7bb08cb8",(function(){return u.Sg})),e.d(t,"__wbg_observe_dc0ebcd59ee7cd17",(function(){return u.Tg})),e.d(t,"__wbg_unobserve_55c93518cad6ac06",(function(){return u.ek})),e.d(t,"__wbg_getSupportedProfiles_904a0392ad42295b",(function(){return u.Qe})),e.d(t,"__wbg_framebufferTextureMultiviewOVR_a4eb1a11052508f4",(function(){return u.ie})),e.d(t,"__wbg_contentRect_bce644376332c7a5",(function(){return u.Jb})),e.d(t,"__wbg_devicePixelContentBoxSize_d5bcdcd5e96671f3",(function(){return u.fd})),e.d(t,"__wbg_debug_5fb96680aecf5dc8",(function(){return u.Bc})),e.d(t,"__wbg_error_8e3928cfb8a43e2b",(function(){return u.Qd})),e.d(t,"__wbg_error_6e987ee48d9fdf45",(function(){return u.Od})),e.d(t,"__wbg_info_530a29cb2e4e3304",(function(){return u.jf})),e.d(t,"__wbg_log_5bb5f88f245d7762",(function(){return u.If})),e.d(t,"__wbg_warn_63bbae1730aead09",(function(){return u.vk})),e.d(t,"__wbg_port1_d51a1bd2c33125d0",(function(){return u.ih})),e.d(t,"__wbg_port2_f522a81e92362e7e",(function(){return u.jh})),e.d(t,"__wbg_new_34615e164dc78975",(function(){return u.yg})),e.d(t,"__wbg_close_a5883ed21dc3d115",(function(){return u.wb})),e.d(t,"__wbg_postMessage_fbddfe9314af804e",(function(){return u.kh})),e.d(t,"__wbg_start_5a293222bc398f51",(function(){return u.Mi})),e.d(t,"__wbg_inlineSize_ff0e40258cefeba2",(function(){return u.kf})),e.d(t,"__wbg_blockSize_73f4e5608c08713d",(function(){return u.S})),e.d(t,"__wbg_instanceof_Response_849eb93e75734b6e",(function(){return u.rf})),e.d(t,"__wbg_url_5f6dc4009ac5f99d",(function(){return u.fk})),e.d(t,"__wbg_status_61a01141acd3cf74",(function(){return u.Ni})),e.d(t,"__wbg_headers_9620bfada380764a",(function(){return u.df})),e.d(t,"__wbg_arrayBuffer_29931d52c7206b02",(function(){return u.n})),e.d(t,"__wbg_text_450a059667fd91fd",(function(){return u.rj})),e.d(t,"__wbg_altKey_2e6c34c37088d8b1",(function(){return u.k})),e.d(t,"__wbg_ctrlKey_bb5b6fef87339703",(function(){return u.yc})),e.d(t,"__wbg_shiftKey_5911baf439ab232b",(function(){return u.Ii})),e.d(t,"__wbg_metaKey_6bf4ae4e83a11278",(function(){return u.og})),e.d(t,"__wbg_location_f7b033ddfc516739",(function(){return u.Hf})),e.d(t,"__wbg_repeat_f64b916c6eed0685",(function(){return u.Gh})),e.d(t,"__wbg_key_dccf9e8aa1315a8e",(function(){return u.yf})),e.d(t,"__wbg_code_3b0c3912a2351163",(function(){return u.xb})),e.d(t,"__wbg_persisted_cbb7e3c657029516",(function(){return u.ah})),e.d(t,"__wbg_newwithstrandinit_3fd6fba4083ff2d0",(function(){return u.Ng})),e.d(t,"__wbg_drawArraysInstancedANGLE_6afae595a484db93",(function(){return u.rd})),e.d(t,"__wbg_drawElementsInstancedANGLE_f175a178d553357e",(function(){return u.xd})),e.d(t,"__wbg_vertexAttribDivisorANGLE_b258d7388e466921",(function(){return u.lk})),e.d(t,"__wbg_new_ab6fd82b10560829",(function(){return u.Dg})),e.d(t,"__wbg_append_7bfcb4937d1d5e29",(function(){return u.m})),e.d(t,"__wbg_new_4e95a9abecc83cd4",(function(){return u.zg})),e.d(t,"__wbg_disconnect_e694940ce6d0ef91",(function(){return u.md})),e.d(t,"__wbg_observe_538a6d1df0deb993",(function(){return u.Rg})),e.d(t,"__wbg_appendChild_580ccb11a660db68",(function(){return u.l})),e.d(t,"__wbg_contains_fdfd1dc667f36695",(function(){return u.Ib})),e.d(t,"__wbg_get_8cd5eba00ab6304f",(function(){return u.Ve})),e.d(t,"__wbg_bindVertexArrayOES_abe2fd389c6a2f56",(function(){return u.F})),e.d(t,"__wbg_createVertexArrayOES_886be8a08db32ce6",(function(){return u.uc})),e.d(t,"__wbg_deleteVertexArrayOES_153f352862874f30",(function(){return u.Rc})),e.d(t,"__wbg_get_bd8e338fbd5f5cc8",(function(){return u.We})),e.d(t,"__wbg_length_cd7af8117672b8b8",(function(){return u.Bf})),e.d(t,"__wbg_new_16b304a2cfa7ff4a",(function(){return u.xg})),e.d(t,"__wbg_newnoargs_e258087cd0daa0ea",(function(){return u.Fg})),e.d(t,"__wbg_next_40fc327bfc8770e6",(function(){return u.Pg})),e.d(t,"__wbg_next_196c84450b364254",(function(){return u.Og})),e.d(t,"__wbg_done_298b57d23c0fc80c",(function(){return u.qd})),e.d(t,"__wbg_value_d93c65011f51a456",(function(){return u.kk})),e.d(t,"__wbg_iterator_2cee6dadfd956dfa",(function(){return u.xf})),e.d(t,"__wbg_get_e3c254076557e348",(function(){return u.Xe})),e.d(t,"__wbg_call_27c0f87801dedf93",(function(){return u.eb})),e.d(t,"__wbg_new_72fb9a18b5ae2624",(function(){return u.Cg})),e.d(t,"__wbg_self_ce0dbfc45cf2f5be",(function(){return u.Wh})),e.d(t,"__wbg_window_c6fb939a7f436783",(function(){return u.Ck})),e.d(t,"__wbg_globalThis_d1e6af4856ba331b",(function(){return u.Ye})),e.d(t,"__wbg_global_207b558942527489",(function(){return u.Ze})),e.d(t,"__wbg_includes_310a37f41280ae42",(function(){return u.if})),e.d(t,"__wbg_of_4a2b313a453ec059",(function(){return u.Ug})),e.d(t,"__wbg_push_a5b05aedc7234f9f",(function(){return u.qh})),e.d(t,"__wbg_instanceof_Object_71ca3c0a59266746",(function(){return u.qf})),e.d(t,"__wbg_getOwnPropertyDescriptor_fcb32c9a1f90b136",(function(){return u.Be})),e.d(t,"__wbg_is_010fdc0f4ab96916",(function(){return u.wf})),e.d(t,"__wbg_valueOf_a0b7c836f68a054b",(function(){return u.jk})),e.d(t,"__wbg_resolve_b0083a7967828ec8",(function(){return u.Ph})),e.d(t,"__wbg_catch_0260e338d10f79ae",(function(){return u.hb})),e.d(t,"__wbg_then_0c86a60e8fcfe9f6",(function(){return u.sj})),e.d(t,"__wbg_then_a73caa9a87991566",(function(){return u.tj})),e.d(t,"__wbg_buffer_12d079cc21e14bdb",(function(){return u.ab})),e.d(t,"__wbg_newwithbyteoffsetandlength_41559f654c4e743c",(function(){return u.Hg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4bea9f904a7e0aef",(function(){return u.Kg})),e.d(t,"__wbg_newwithbyteoffsetandlength_425360430a1c8206",(function(){return u.Ig})),e.d(t,"__wbg_newwithbyteoffsetandlength_aa4a17c33a06e5cb",(function(){return u.Mg})),e.d(t,"__wbg_new_63b92bc8671ed464",(function(){return u.Bg})),e.d(t,"__wbg_set_a47bac70306a19a7",(function(){return u.yi})),e.d(t,"__wbg_length_c20a40f15020d68a",(function(){return u.Af})),e.d(t,"__wbg_newwithbyteoffsetandlength_9fd64654bc0b0817",(function(){return u.Lg})),e.d(t,"__wbg_newwithbyteoffsetandlength_3125852e5a7fbcff",(function(){return u.Gg})),e.d(t,"__wbg_newwithbyteoffsetandlength_4a659d079a1650e0",(function(){return u.Jg})),e.d(t,"__wbg_buffer_dd7f74bc60f1faab",(function(){return u.bb})),e.d(t,"__wbg_has_0af94d20077affa2",(function(){return u.bf})),e.d(t,"__wbg_set_1f9b04f170055d33",(function(){return u.xi})),e.d(t,"__wbg_stringify_8887fe74e1c50d81",(function(){return u.Wi})),e.d(t,"__wbindgen_debug_string",(function(){return u.gl})),e.d(t,"__wbindgen_throw",(function(){return u.rl})),e.d(t,"__wbindgen_memory",(function(){return u.kl})),e.d(t,"__wbindgen_closure_wrapper631",(function(){return u.Zk})),e.d(t,"__wbindgen_closure_wrapper632",(function(){return u.al})),e.d(t,"__wbindgen_closure_wrapper633",(function(){return u.bl})),e.d(t,"__wbindgen_closure_wrapper634",(function(){return u.cl})),e.d(t,"__wbindgen_closure_wrapper635",(function(){return u.dl})),e.d(t,"__wbindgen_closure_wrapper636",(function(){return u.el})),e.d(t,"__wbindgen_closure_wrapper637",(function(){return u.fl})),e.d(t,"__wbindgen_closure_wrapper1182",(function(){return u.Ik})),e.d(t,"__wbindgen_closure_wrapper1183",(function(){return u.Jk})),e.d(t,"__wbindgen_closure_wrapper1184",(function(){return u.Kk})),e.d(t,"__wbindgen_closure_wrapper1185",(function(){return u.Lk})),e.d(t,"__wbindgen_closure_wrapper1186",(function(){return u.Mk})),e.d(t,"__wbindgen_closure_wrapper1187",(function(){return u.Nk})),e.d(t,"__wbindgen_closure_wrapper1188",(function(){return u.Ok})),e.d(t,"__wbindgen_closure_wrapper2489",(function(){return u.Pk})),e.d(t,"__wbindgen_closure_wrapper2490",(function(){return u.Qk})),e.d(t,"__wbindgen_closure_wrapper2491",(function(){return u.Rk})),e.d(t,"__wbindgen_closure_wrapper2492",(function(){return u.Sk})),e.d(t,"__wbindgen_closure_wrapper2493",(function(){return u.Tk})),e.d(t,"__wbindgen_closure_wrapper2494",(function(){return u.Uk})),e.d(t,"__wbindgen_closure_wrapper2495",(function(){return u.Vk})),e.d(t,"__wbindgen_closure_wrapper4513",(function(){return u.Wk})),e.d(t,"__wbindgen_closure_wrapper4515",(function(){return u.Xk})),e.d(t,"__wbindgen_closure_wrapper5286",(function(){return u.Yk})),Object(u.zi)(r),r.__wbindgen_start()},430:function(n,t,e){"use strict";var r=e.w[n.i];for(var u in e.r(t),r)"__webpack_init__"!=u&&(t[u]=r[u]);e(248);r.__webpack_init__()}}]); \ No newline at end of file diff --git a/assets/js/38.82c286c7.js b/assets/js/37.bb0cbfa1.js similarity index 67% rename from assets/js/38.82c286c7.js rename to assets/js/37.bb0cbfa1.js index 7aaa53d24..3a8be2890 100644 --- a/assets/js/38.82c286c7.js +++ b/assets/js/37.bb0cbfa1.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{304:function(t,e,n){},384:function(t,e,n){"use strict";n(304)},437:function(t,e,n){"use strict";n.r(e);var i={name:"AutoGithubLink",computed:{link(){return"https://github.com/sotrh/learn-wgpu/tree/master/code"+this.$page.path}}},r=(n(384),n(8)),u=Object(r.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"auto-github-link"},[t("a",{attrs:{href:this.link,target:"_blank",rel:"noopener noreferrer"}},[this._v("Check out the code!")]),this._v(" "),t("OutboundLink")],1)}),[],!1,null,null,null);e.default=u.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{303:function(t,e,n){},383:function(t,e,n){"use strict";n(303)},434:function(t,e,n){"use strict";n.r(e);var i={name:"AutoGithubLink",computed:{link(){return"https://github.com/sotrh/learn-wgpu/tree/master/code"+this.$page.path}}},r=(n(383),n(8)),u=Object(r.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"auto-github-link"},[t("a",{attrs:{href:this.link,target:"_blank",rel:"noopener noreferrer"}},[this._v("Check out the code!")]),this._v(" "),t("OutboundLink")],1)}),[],!1,null,null,null);e.default=u.exports}}]); \ No newline at end of file diff --git a/assets/js/39.ed02f6c0.js b/assets/js/38.05fe4b2e.js similarity index 77% rename from assets/js/39.ed02f6c0.js rename to assets/js/38.05fe4b2e.js index 876b9ba2a..af5e92d00 100644 --- a/assets/js/39.ed02f6c0.js +++ b/assets/js/38.05fe4b2e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{298:function(t,i,s){},316:function(t,i,s){"use strict";s(298)},434:function(t,i,s){"use strict";s.r(i);var a={props:["options"],mounted(){this.initialize(this.options,this.$lang)},methods:{initialize(t,i){Promise.all([Promise.all([s.e(0),s.e(8)]).then(s.t.bind(null,432,7)),Promise.all([s.e(0),s.e(8)]).then(s.t.bind(null,433,7))]).then(([s])=>{s=s.default;const{algoliaOptions:a={}}=t;s(Object.assign({},t,{inputSelector:"#algolia-search-input",algoliaOptions:Object.assign({facetFilters:["lang:"+i].concat(a.facetFilters||[])},a)}))})},update(t,i){this.$el.innerHTML='',this.initialize(t,i)}},watch:{$lang(t){this.update(this.options,t)},options(t){this.update(t,this.$lang)}}},e=(s(316),s(8)),n=Object(e.a)(a,(function(){this._self._c;return this._m(0)}),[function(){var t=this._self._c;return t("form",{staticClass:"algolia-search-wrapper search-box",attrs:{id:"search-form",role:"search"}},[t("input",{staticClass:"search-query",attrs:{id:"algolia-search-input"}})])}],!1,null,null,null);i.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{297:function(t,i,s){},315:function(t,i,s){"use strict";s(297)},431:function(t,i,s){"use strict";s.r(i);var a={props:["options"],mounted(){this.initialize(this.options,this.$lang)},methods:{initialize(t,i){Promise.all([Promise.all([s.e(0),s.e(8)]).then(s.t.bind(null,429,7)),Promise.all([s.e(0),s.e(8)]).then(s.t.bind(null,430,7))]).then(([s])=>{s=s.default;const{algoliaOptions:a={}}=t;s(Object.assign({},t,{inputSelector:"#algolia-search-input",algoliaOptions:Object.assign({facetFilters:["lang:"+i].concat(a.facetFilters||[])},a)}))})},update(t,i){this.$el.innerHTML='',this.initialize(t,i)}},watch:{$lang(t){this.update(this.options,t)},options(t){this.update(t,this.$lang)}}},e=(s(315),s(8)),n=Object(e.a)(a,(function(){this._self._c;return this._m(0)}),[function(){var t=this._self._c;return t("form",{staticClass:"algolia-search-wrapper search-box",attrs:{id:"search-form",role:"search"}},[t("input",{staticClass:"search-query",attrs:{id:"algolia-search-input"}})])}],!1,null,null,null);i.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/40.c0c4b7ba.js b/assets/js/39.ac196a21.js similarity index 57% rename from assets/js/40.c0c4b7ba.js rename to assets/js/39.ac196a21.js index e11b1708e..6e871fc1f 100644 --- a/assets/js/40.c0c4b7ba.js +++ b/assets/js/39.ac196a21.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{259:function(t,e,n){},273: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(274),n(8)),o=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=o.exports},274:function(t,e,n){"use strict";n(259)}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{258:function(t,e,n){},272: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(273),n(8)),o=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=o.exports},273:function(t,e,n){"use strict";n(258)}}]); \ No newline at end of file diff --git a/assets/js/4.6f3b7a64.js b/assets/js/4.563de1a9.js similarity index 86% rename from assets/js/4.6f3b7a64.js rename to assets/js/4.563de1a9.js index 194e1efa8..64c9663aa 100644 --- a/assets/js/4.6f3b7a64.js +++ b/assets/js/4.563de1a9.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[4,22,40],{258: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(91);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"})}},259:function(t,e,n){},273: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(274),n(8)),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},274:function(t,e,n){"use strict";n(259)},276:function(t,e,n){},278:function(t,e,n){},280:function(t,e,n){"use strict";n(276)},282:function(t,e,n){"use strict";n.r(e);var r=n(292),i=n(284),s=n(258);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(8),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},284:function(t,e,n){"use strict";n.r(e);var r=n(258);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(280),n(8)),l=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=l.exports},289:function(t,e,n){"use strict";n(278)},292:function(t,e,n){"use strict";n.r(e);var r=n(258),i={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:n(273).default},beforeCreate(){this.$options.components.SidebarLinks=n(282).default},methods:{isActive:r.e}},s=(n(289),n(8)),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([[4,22,39],{257: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(91);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"})}},258:function(t,e,n){},272: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(273),n(8)),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},273:function(t,e,n){"use strict";n(258)},275:function(t,e,n){},277:function(t,e,n){},279:function(t,e,n){"use strict";n(275)},281:function(t,e,n){"use strict";n.r(e);var r=n(291),i=n(283),s=n(257);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(8),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},283:function(t,e,n){"use strict";n.r(e);var r=n(257);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(279),n(8)),l=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=l.exports},288:function(t,e,n){"use strict";n(277)},291:function(t,e,n){"use strict";n.r(e);var r=n(257),i={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:n(272).default},beforeCreate(){this.$options.components.SidebarLinks=n(281).default},methods:{isActive:r.e}},s=(n(288),n(8)),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/41.e4b468ad.js b/assets/js/40.c296b49c.js similarity index 78% rename from assets/js/41.e4b468ad.js rename to assets/js/40.c296b49c.js index 08d9fb45f..844348529 100644 --- a/assets/js/41.e4b468ad.js +++ b/assets/js/40.c296b49c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{287:function(t,c,n){},294:function(t,c,n){"use strict";n(287)},315:function(t,c,n){"use strict";n.r(c);n(294);var i=n(8),s=Object(i.a)({},(function(){var t=this,c=t._self._c;return c("div",{staticClass:"sidebar-button",on:{click:function(c){return t.$emit("toggle-sidebar")}}},[c("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[c("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null);c.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{286:function(t,c,n){},293:function(t,c,n){"use strict";n(286)},314:function(t,c,n){"use strict";n.r(c);n(293);var i=n(8),s=Object(i.a)({},(function(){var t=this,c=t._self._c;return c("div",{staticClass:"sidebar-button",on:{click:function(c){return t.$emit("toggle-sidebar")}}},[c("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[c("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null);c.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/42.8462e504.js b/assets/js/41.5e92b6f9.js similarity index 99% rename from assets/js/42.8462e504.js rename to assets/js/41.5e92b6f9.js index edabfa6e3..92880ff60 100644 --- a/assets/js/42.8462e504.js +++ b/assets/js/41.5e92b6f9.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{322: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"},323:function(t,s,a){t.exports=a.p+"assets/img/no-clear.753f913f.png"},442:function(t,s,a){"use strict";a.r(s);var n=a(8),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")]),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 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 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(">")]),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 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("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")]),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 class-name"}},[t._v("State")]),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("// 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 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("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("State")]),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 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")]),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 class-name"}},[t._v("State")]),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("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 lifetime-annotation symbol"}},[t._v("'a")]),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("State")]),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("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 "),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 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 constant"}},[t._v("PRIMARY")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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 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 constant"}},[t._v("GL")]),s("span",{pre:!0,attrs:{class:"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 keyword"}},[t._v("let")]),t._v(" surface "),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("create_surface")]),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 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 required_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 required_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("find")]),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("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("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 desired_maximum_frame_latency"),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 "),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 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("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("State")]),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\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 been 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("(")]),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 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(" 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 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("KeyEvent")]),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 physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyCode")]),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(" control_flow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("}")]),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 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.29"')]),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('"rwh_05"')]),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("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.19"')]),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.19"')]),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("resize()")]),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 "),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 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(" 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 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("KeyEvent")]),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 physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyCode")]),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(" control_flow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("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 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("// ... with the other WindowEvents")]),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("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\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ... at the end of the WindowEvent block")]),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("AboutToWait")]),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(322),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("wgpu::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(323),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],{321: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"},322:function(t,s,a){t.exports=a.p+"assets/img/no-clear.753f913f.png"},440:function(t,s,a){"use strict";a.r(s);var n=a(8),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")]),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 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 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(">")]),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 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("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")]),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 class-name"}},[t._v("State")]),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("// 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 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("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("State")]),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 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")]),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 class-name"}},[t._v("State")]),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("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 lifetime-annotation symbol"}},[t._v("'a")]),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("State")]),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("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 "),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 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 constant"}},[t._v("PRIMARY")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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 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 constant"}},[t._v("GL")]),s("span",{pre:!0,attrs:{class:"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 keyword"}},[t._v("let")]),t._v(" surface "),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("create_surface")]),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 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 required_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 required_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("find")]),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("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("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 desired_maximum_frame_latency"),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 "),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 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("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("State")]),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\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 been 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("(")]),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 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(" 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 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("KeyEvent")]),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 physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyCode")]),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(" control_flow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("}")]),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 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.29"')]),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('"rwh_05"')]),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("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('"22.0"')]),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('"22.0"')]),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("resize()")]),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 "),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 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(" 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 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("KeyEvent")]),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 physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyCode")]),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(" control_flow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("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 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("// ... with the other WindowEvents")]),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("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\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ... at the end of the WindowEvent block")]),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("AboutToWait")]),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(321),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("wgpu::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(322),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/43.49a335ce.js b/assets/js/42.45eb724c.js similarity index 83% rename from assets/js/43.49a335ce.js rename to assets/js/42.45eb724c.js index 15d977e6e..706c2703c 100644 --- a/assets/js/43.49a335ce.js +++ b/assets/js/42.45eb724c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{324:function(t,s,a){t.exports=a.p+"assets/img/tutorial3-pipeline-vertices.5e39e8fc.png"},325: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=="},444:function(t,s,a){"use strict";a.r(s);var e=a(8),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(324)}}),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")]),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 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 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(">")]),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 compilation_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineCompilationOptions")]),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(",")]),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 compilation_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineCompilationOptions")]),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 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(325),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],{323:function(t,s,a){t.exports=a.p+"assets/img/tutorial3-pipeline-vertices.5e39e8fc.png"},324: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=="},441:function(t,s,a){"use strict";a.r(s);var e=a(8),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(323)}}),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")]),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 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 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(">")]),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 compilation_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineCompilationOptions")]),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(",")]),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 compilation_options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineCompilationOptions")]),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 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 cache"),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("// 6.")]),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("li",[s("code",[t._v("cache")]),t._v(" allows wgpu to cache shader compilation data. Only really useful for Android build targets.")])]),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(324),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/44.3d8a8fb5.js b/assets/js/43.2f85136c.js similarity index 99% rename from assets/js/44.3d8a8fb5.js rename to assets/js/43.2f85136c.js index a03e0c6b3..05bf4890e 100644 --- a/assets/js/44.3d8a8fb5.js +++ b/assets/js/43.2f85136c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{337:function(t,s,a){t.exports=a.p+"assets/img/depth_problems.fde54cff.png"},338:function(t,s,a){t.exports=a.p+"assets/img/forest_fixed.a77f70f6.png"},449:function(t,s,a){"use strict";a.r(s);var e=a(8),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-depth-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-depth-buffer"}},[t._v("#")]),t._v(" The Depth Buffer")]),t._v(" "),s("p",[t._v("Let's take a closer look at the last example from an angle.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(337),alt:"depth_problems.png"}})]),t._v(" "),s("p",[t._v("Models that should be in the back are getting rendered ahead of those in the front. This is caused by the draw order. By default, pixel data from a new object will replace old pixel data.")]),t._v(" "),s("p",[t._v("There are two ways to solve this: sort the data from back to front or use what's known as a depth buffer.")]),t._v(" "),s("h2",{attrs:{id:"sorting-from-back-to-front"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sorting-from-back-to-front"}},[t._v("#")]),t._v(" Sorting from back to front")]),t._v(" "),s("p",[t._v("This is the go-to method for 2D rendering as it's pretty easy to know what's supposed to go in front of what. You can just use the z-order. In 3d rendering, it gets a little trickier because the order of the objects changes based on the camera angle.")]),t._v(" "),s("p",[t._v("A simple way of doing this is to sort all the objects by their distance from the camera's position. There are flaws with this method, though, as when a large object is behind a small object, parts of the large object that should be in front of the small object will be rendered behind it. We'll also run into issues with objects that overlap "),s("em",[t._v("themselves")]),t._v(".")]),t._v(" "),s("p",[t._v("If we want to do this properly, we need to have pixel-level precision. That's where a "),s("em",[t._v("depth buffer")]),t._v(" comes in.")]),t._v(" "),s("h2",{attrs:{id:"a-pixels-depth"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-pixels-depth"}},[t._v("#")]),t._v(" A pixels depth")]),t._v(" "),s("p",[t._v("A depth buffer is a black and white texture that stores the z-coordinate of rendered pixels. Wgpu can use this when drawing new pixels to determine whether to replace or keep the data. This technique is called depth testing. This will fix our draw order problem without needing us to sort our objects!")]),t._v(" "),s("p",[t._v("Let's make a function to create the depth texture in "),s("code",[t._v("texture.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("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("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_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")]),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("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Depth32Float")]),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 \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("create_depth_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(" "),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(" config"),s("span",{pre:!0,attrs:{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("SurfaceConfiguration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 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(" "),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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n width"),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 punctuation"}},[t._v(",")]),t._v("\n height"),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 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(" 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 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("label"),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 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 keyword"}},[t._v("Self")]),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(",")]),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")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),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("TEXTURE_BINDING")]),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(";")]),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("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 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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),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("Linear")]),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 compare"),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("CompareFunction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LessEqual")]),s("span",{pre:!0,attrs:{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("// 5.")]),t._v("\n lod_min_clamp"),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 lod_max_clamp"),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 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 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("}")]),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("We need the DEPTH_FORMAT for creating the depth stage of the "),s("code",[t._v("render_pipeline")]),t._v(" and for creating the depth texture itself.")]),t._v(" "),s("li",[t._v("Our depth texture needs to be the same size as our screen if we want things to render correctly. We can use our "),s("code",[t._v("config")]),t._v(" to ensure our depth texture is the same size as our surface textures.")]),t._v(" "),s("li",[t._v("Since we are rendering to this texture, we need to add the "),s("code",[t._v("RENDER_ATTACHMENT")]),t._v(" flag to it.")]),t._v(" "),s("li",[t._v("We technically don't "),s("em",[t._v("need")]),t._v(" a sampler for a depth texture, but our "),s("code",[t._v("Texture")]),t._v(" struct requires it, and we need one if we ever want to sample it.")]),t._v(" "),s("li",[t._v("If we do decide to render our depth texture, we need to use "),s("code",[t._v("CompareFunction::LessEqual")]),t._v(". This is due to how the "),s("code",[t._v("sampler_comparison")]),t._v(" and "),s("code",[t._v("textureSampleCompare()")]),t._v(" interact with the "),s("code",[t._v("texture()")]),t._v(" function in GLSL.")])]),t._v(" "),s("p",[t._v("We create our "),s("code",[t._v("depth_texture")]),t._v(" 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(" depth_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("create_depth_texture")]),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(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"depth_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("p",[t._v("We need to modify our "),s("code",[t._v("render_pipeline")]),t._v(" to allow depth testing.")]),t._v(" "),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 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("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("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(" "),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(",")]),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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),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 "),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("ol",[s("li",[t._v("The "),s("code",[t._v("depth_compare")]),t._v(" function tells us when to discard a new pixel. Using "),s("code",[t._v("LESS")]),t._v(" means pixels will be drawn front to back. Here are the other possible values for a "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/enum.CompareFunction.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("CompareFunction"),s("OutboundLink")],1),t._v(" that you can use:")])]),t._v(" "),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, Hash, Eq, PartialEq)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg_attr(feature = "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"serde"')]),t._v(", derive(Serialize, Deserialize))]")]),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("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CompareFunction")]),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("Undefined")]),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")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Never")]),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 class-name"}},[t._v("Less")]),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(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Equal")]),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 class-name"}},[t._v("LessEqual")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 class-name"}},[t._v("Greater")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NotEqual")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GreaterEqual")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Always")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ol",{attrs:{start:"2"}},[s("li",[t._v("There's another type of buffer called a stencil buffer. It's common practice to store the stencil buffer and depth buffer in the same texture. These fields control values for stencil testing. We'll use default values since we aren't using a stencil buffer. We'll cover stencil buffers "),s("a",{attrs:{href:"../../todo"}},[t._v("later")]),t._v(".")])]),t._v(" "),s("p",[t._v("Don't forget to store the "),s("code",[t._v("depth_texture")]),t._v(" in "),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 depth_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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 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("// ...")]),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 depth_texture"),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("We need to remember to change the "),s("code",[t._v("resize()")]),t._v(" method to create a new "),s("code",[t._v("depth_texture")]),t._v(" and "),s("code",[t._v("depth_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 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 comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("depth_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("create_depth_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 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(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"depth_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 comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Make sure you update the "),s("code",[t._v("depth_texture")]),t._v(" "),s("em",[t._v("after")]),t._v(" you update "),s("code",[t._v("config")]),t._v(". If you don't, your program will crash as the "),s("code",[t._v("depth_texture")]),t._v(" will be a different size than the "),s("code",[t._v("surface")]),t._v(" texture.")]),t._v(" "),s("p",[t._v("The last change we need to make is in the "),s("code",[t._v("render()")]),t._v(" function. We've created the "),s("code",[t._v("depth_texture")]),t._v(", but we're not currently using it. We use it by attaching it to the "),s("code",[t._v("depth_stencil_attachment")]),t._v(" of a render pass.")]),t._v(" "),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(" 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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[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("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("RenderPassDepthStencilAttachment")]),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("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("depth_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("\n depth_ops"),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("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 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 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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n stencil_ops"),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("}")]),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("And that's all we have to do! No shader code is needed! If you run the application, the depth issues will be fixed.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(338),alt:"forest_fixed.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("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 "),s("code",[t._v("sampler_comparison")]),t._v(" uniform type and the "),s("code",[t._v("textureSampleCompare")]),t._v(" function instead of "),s("code",[t._v("sampler")]),t._v(" and "),s("code",[t._v("sampler2D")]),t._v(" respectively. Create a bind group for the depth texture (or reuse an existing one), and render it to the screen.")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial8_depth"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{336:function(t,s,a){t.exports=a.p+"assets/img/depth_problems.fde54cff.png"},337:function(t,s,a){t.exports=a.p+"assets/img/forest_fixed.a77f70f6.png"},446:function(t,s,a){"use strict";a.r(s);var e=a(8),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-depth-buffer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-depth-buffer"}},[t._v("#")]),t._v(" The Depth Buffer")]),t._v(" "),s("p",[t._v("Let's take a closer look at the last example from an angle.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(336),alt:"depth_problems.png"}})]),t._v(" "),s("p",[t._v("Models that should be in the back are getting rendered ahead of those in the front. This is caused by the draw order. By default, pixel data from a new object will replace old pixel data.")]),t._v(" "),s("p",[t._v("There are two ways to solve this: sort the data from back to front or use what's known as a depth buffer.")]),t._v(" "),s("h2",{attrs:{id:"sorting-from-back-to-front"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sorting-from-back-to-front"}},[t._v("#")]),t._v(" Sorting from back to front")]),t._v(" "),s("p",[t._v("This is the go-to method for 2D rendering as it's pretty easy to know what's supposed to go in front of what. You can just use the z-order. In 3d rendering, it gets a little trickier because the order of the objects changes based on the camera angle.")]),t._v(" "),s("p",[t._v("A simple way of doing this is to sort all the objects by their distance from the camera's position. There are flaws with this method, though, as when a large object is behind a small object, parts of the large object that should be in front of the small object will be rendered behind it. We'll also run into issues with objects that overlap "),s("em",[t._v("themselves")]),t._v(".")]),t._v(" "),s("p",[t._v("If we want to do this properly, we need to have pixel-level precision. That's where a "),s("em",[t._v("depth buffer")]),t._v(" comes in.")]),t._v(" "),s("h2",{attrs:{id:"a-pixels-depth"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-pixels-depth"}},[t._v("#")]),t._v(" A pixels depth")]),t._v(" "),s("p",[t._v("A depth buffer is a black and white texture that stores the z-coordinate of rendered pixels. Wgpu can use this when drawing new pixels to determine whether to replace or keep the data. This technique is called depth testing. This will fix our draw order problem without needing us to sort our objects!")]),t._v(" "),s("p",[t._v("Let's make a function to create the depth texture in "),s("code",[t._v("texture.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("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("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_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")]),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("TextureFormat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Depth32Float")]),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 \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("create_depth_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(" "),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(" config"),s("span",{pre:!0,attrs:{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("SurfaceConfiguration")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 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(" "),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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n width"),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 punctuation"}},[t._v(",")]),t._v("\n height"),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 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(" 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 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("label"),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 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 keyword"}},[t._v("Self")]),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(",")]),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")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),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("TEXTURE_BINDING")]),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(";")]),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("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 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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),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("Linear")]),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 compare"),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("CompareFunction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LessEqual")]),s("span",{pre:!0,attrs:{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("// 5.")]),t._v("\n lod_min_clamp"),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 lod_max_clamp"),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 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 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("}")]),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("We need the DEPTH_FORMAT for creating the depth stage of the "),s("code",[t._v("render_pipeline")]),t._v(" and for creating the depth texture itself.")]),t._v(" "),s("li",[t._v("Our depth texture needs to be the same size as our screen if we want things to render correctly. We can use our "),s("code",[t._v("config")]),t._v(" to ensure our depth texture is the same size as our surface textures.")]),t._v(" "),s("li",[t._v("Since we are rendering to this texture, we need to add the "),s("code",[t._v("RENDER_ATTACHMENT")]),t._v(" flag to it.")]),t._v(" "),s("li",[t._v("We technically don't "),s("em",[t._v("need")]),t._v(" a sampler for a depth texture, but our "),s("code",[t._v("Texture")]),t._v(" struct requires it, and we need one if we ever want to sample it.")]),t._v(" "),s("li",[t._v("If we do decide to render our depth texture, we need to use "),s("code",[t._v("CompareFunction::LessEqual")]),t._v(". This is due to how the "),s("code",[t._v("sampler_comparison")]),t._v(" and "),s("code",[t._v("textureSampleCompare()")]),t._v(" interact with the "),s("code",[t._v("texture()")]),t._v(" function in GLSL.")])]),t._v(" "),s("p",[t._v("We create our "),s("code",[t._v("depth_texture")]),t._v(" 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(" depth_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("create_depth_texture")]),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(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"depth_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("p",[t._v("We need to modify our "),s("code",[t._v("render_pipeline")]),t._v(" to allow depth testing.")]),t._v(" "),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 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("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("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(" "),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(",")]),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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),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(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),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 "),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("ol",[s("li",[t._v("The "),s("code",[t._v("depth_compare")]),t._v(" function tells us when to discard a new pixel. Using "),s("code",[t._v("LESS")]),t._v(" means pixels will be drawn front to back. Here are the other possible values for a "),s("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/enum.CompareFunction.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("CompareFunction"),s("OutboundLink")],1),t._v(" that you can use:")])]),t._v(" "),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, Hash, Eq, PartialEq)]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg_attr(feature = "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"serde"')]),t._v(", derive(Serialize, Deserialize))]")]),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("enum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CompareFunction")]),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("Undefined")]),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")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Never")]),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 class-name"}},[t._v("Less")]),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(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Equal")]),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 class-name"}},[t._v("LessEqual")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 class-name"}},[t._v("Greater")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NotEqual")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GreaterEqual")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Always")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ol",{attrs:{start:"2"}},[s("li",[t._v("There's another type of buffer called a stencil buffer. It's common practice to store the stencil buffer and depth buffer in the same texture. These fields control values for stencil testing. We'll use default values since we aren't using a stencil buffer. We'll cover stencil buffers "),s("a",{attrs:{href:"../../todo"}},[t._v("later")]),t._v(".")])]),t._v(" "),s("p",[t._v("Don't forget to store the "),s("code",[t._v("depth_texture")]),t._v(" in "),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 depth_texture"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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 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("// ...")]),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 depth_texture"),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("We need to remember to change the "),s("code",[t._v("resize()")]),t._v(" method to create a new "),s("code",[t._v("depth_texture")]),t._v(" and "),s("code",[t._v("depth_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 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 comment"}},[t._v("// ...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("depth_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("create_depth_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 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(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"depth_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 comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Make sure you update the "),s("code",[t._v("depth_texture")]),t._v(" "),s("em",[t._v("after")]),t._v(" you update "),s("code",[t._v("config")]),t._v(". If you don't, your program will crash as the "),s("code",[t._v("depth_texture")]),t._v(" will be a different size than the "),s("code",[t._v("surface")]),t._v(" texture.")]),t._v(" "),s("p",[t._v("The last change we need to make is in the "),s("code",[t._v("render()")]),t._v(" function. We've created the "),s("code",[t._v("depth_texture")]),t._v(", but we're not currently using it. We use it by attaching it to the "),s("code",[t._v("depth_stencil_attachment")]),t._v(" of a render pass.")]),t._v(" "),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(" 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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[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("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("RenderPassDepthStencilAttachment")]),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("&")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("depth_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("\n depth_ops"),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("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 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 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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n stencil_ops"),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("}")]),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("And that's all we have to do! No shader code is needed! If you run the application, the depth issues will be fixed.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(337),alt:"forest_fixed.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("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 "),s("code",[t._v("sampler_comparison")]),t._v(" uniform type and the "),s("code",[t._v("textureSampleCompare")]),t._v(" function instead of "),s("code",[t._v("sampler")]),t._v(" and "),s("code",[t._v("sampler2D")]),t._v(" respectively. Create a bind group for the depth texture (or reuse an existing one), and render it to the screen.")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial8_depth"}}),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.9301a295.js b/assets/js/44.1d899752.js similarity index 99% rename from assets/js/45.9301a295.js rename to assets/js/44.1d899752.js index d6ab4302f..94532c96e 100644 --- a/assets/js/45.9301a295.js +++ b/assets/js/44.1d899752.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{362:function(t,s,a){t.exports=a.p+"assets/img/left_right_hand.ccabf5d0.gif"},363:function(t,s,a){t.exports=a.p+"assets/img/screenshot.4f5740bc.png"},454:function(t,s,a){"use strict";a.r(s);var n=a(8),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:"a-better-camera"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-better-camera"}},[t._v("#")]),t._v(" A Better Camera")]),t._v(" "),s("p",[t._v("I've been putting this off for a while. Implementing a camera isn't specifically related to using WGPU properly, but it's been bugging me, so let's do it.")]),t._v(" "),s("p",[s("code",[t._v("lib.rs")]),t._v(" is getting a little crowded, so let's create a "),s("code",[t._v("camera.rs")]),t._v(" file to put our camera code. The first things we're going to put in it are some imports and our "),s("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),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("::")])]),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("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("event"),s("span",{pre:!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("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("PhysicalPosition")]),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("instant"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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("::")])]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("consts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAC_PI_2")]),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("#[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\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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 constant"}},[t._v("FRAC_PI_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("0.0001")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[s("code",[t._v("std::time::Instant")]),t._v(" panics on WASM, so we'll use the "),s("a",{attrs:{href:"https://docs.rs/instant",target:"_blank",rel:"noopener noreferrer"}},[t._v("instant crate"),s("OutboundLink")],1),t._v(". You'll want to include it in 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("# ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("instant")]),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"')]),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("instant")]),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.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(" "),s("span",{pre:!0,attrs:{class:"token string"}},[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 punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),s("h2",{attrs:{id:"the-camera"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-camera"}},[t._v("#")]),t._v(" The Camera")]),t._v(" "),s("p",[t._v("Next, we need to create a new "),s("code",[t._v("Camera")]),t._v(" struct. We're going to be using an FPS-style camera, so we'll store the position and the yaw (horizontal rotation), and pitch (vertical rotation). We'll have a "),s("code",[t._v("calc_matrix")]),t._v(" method to create our view 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("#[derive(Debug)]")]),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("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("pub")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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 yaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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 pitch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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("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("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 operator"}},[t._v("<")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),s("span",{pre:!0,attrs:{class:"token operator"}},[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 "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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 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("Into")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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 operator"}},[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 class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n yaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pitch"),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 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 position"),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 yaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" yaw"),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 pitch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pitch"),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("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("calc_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 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 keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sin_pitch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cos_pitch"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),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 function"}},[t._v("sin_cos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("sin_yaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cos_yaw"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),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 function"}},[t._v("sin_cos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("look_to_rh")]),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("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),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("(")]),t._v("\n cos_pitch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" cos_yaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sin_pitch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cos_pitch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" sin_yaw\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("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 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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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:"the-projection"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-projection"}},[t._v("#")]),t._v(" The Projection")]),t._v(" "),s("p",[t._v("I've decided to split the projection from the camera. The projection only needs to change if the window resizes, so let's create a "),s("code",[t._v("Projection")]),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("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Projection")]),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 class-name"}},[t._v("Rad")]),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 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("Projection")]),t._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 operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("F")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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 operator"}},[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(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),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(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),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 class-name"}},[t._v("F")]),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(" "),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 aspect"),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(" 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(" fovy"),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 znear"),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("\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("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(" width"),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(" height"),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(" "),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("aspect "),s("span",{pre:!0,attrs:{class:"token operator"}},[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(" 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 "),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("calc_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 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 constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),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 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(",")]),t._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(")")]),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("One thing to note: "),s("code",[t._v("cgmath")]),t._v(" currently returns a right-handed projection matrix from the "),s("code",[t._v("perspective")]),t._v(" function. This means that the z-axis points out of the screen. If you want the z-axis to be "),s("em",[t._v("into")]),t._v(" the screen (aka. a left-handed projection matrix), you'll have to code your own.")]),t._v(" "),s("p",[t._v("You can tell the difference between a right-handed coordinate system and a left-handed one by using your hands. Point your thumb to the right. This is the x-axis. Point your pointer finger up. This is the y-axis. Extend your middle finger. This is the z-axis. On your right hand, your middle finger should be pointing towards you. On your left hand, it should be pointing away.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(362),alt:"./left_right_hand.gif"}})]),t._v(" "),s("h1",{attrs:{id:"the-camera-controller"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-camera-controller"}},[t._v("#")]),t._v(" The Camera Controller")]),t._v(" "),s("p",[t._v("Our camera is different, so we'll need a new camera controller. Add the following to "),s("code",[t._v("camera.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("#[derive(Debug)]")]),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("CameraController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n amount_left"),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 amount_right"),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 amount_forward"),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 amount_backward"),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 amount_up"),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 amount_down"),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 rotate_horizontal"),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 rotate_vertical"),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 scroll"),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 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 sensitivity"),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("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("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("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(" sensitivity"),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 amount_left"),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 amount_right"),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 amount_forward"),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 amount_backward"),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 amount_up"),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 amount_down"),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 rotate_horizontal"),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 rotate_vertical"),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 scroll"),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 speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sensitivity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("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("process_keyboard")]),s("span",{pre:!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(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(",")]),t._v(" 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(")")]),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")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" amount "),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(" 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")]),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 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(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" key "),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("amount_forward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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("amount_backward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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("amount_left "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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("amount_right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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("Space")]),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("amount_up "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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("LShift")]),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("amount_down "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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\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("process_mouse")]),s("span",{pre:!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(" mouse_dx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mouse_dy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),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("rotate_horizontal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dx "),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dy "),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 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("process_scroll")]),s("span",{pre:!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(" delta"),s("span",{pre:!0,attrs:{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("MouseScrollDelta")]),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("scroll "),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("match")]),t._v(" delta "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// I'm assuming a line is about 100 pixels")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LineDelta")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" scroll"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" scroll "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 class-name"}},[t._v("MouseScrollDelta")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PixelDelta")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalPosition")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scroll"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("scroll "),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 punctuation"}},[t._v("}")]),s("span",{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("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(":")]),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(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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(" dt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_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 punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Move forward/backward and left/right")]),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("yaw_sin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_cos"),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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),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 function"}},[t._v("sin_cos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),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("(")]),t._v("yaw_cos"),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(" yaw_sin"),s("span",{pre:!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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\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(" "),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 operator"}},[t._v("-")]),t._v("yaw_sin"),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(" yaw_cos"),s("span",{pre:!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(")")]),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("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" forward "),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_forward "),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("amount_backward"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),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("position "),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 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("amount_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("amount_left"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Move in/out (aka. "zoom")')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Note: this isn't an actual zoom. The camera's position")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// changes when zooming. I've added this to make it easier")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to get closer to an object you want to focus on.")]),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("pitch_sin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos"),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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),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 function"}},[t._v("sin_cos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" scrollward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),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("(")]),t._v("pitch_cos "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_cos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_sin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_sin"),s("span",{pre:!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(")")]),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("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" scrollward "),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("scroll "),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 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("sensitivity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),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("scroll "),s("span",{pre:!0,attrs:{class:"token operator"}},[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\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Move up/down. Since we don't use roll, we can just")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// modify the y coordinate directly.")]),t._v("\n camera"),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("y "),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_up "),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("amount_down"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rotate")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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("rotate_horizontal"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),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("pitch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),s("span",{pre:!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("rotate_vertical"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If process_mouse isn't called every frame, these values")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// will not get set to zero, and the camera will rotate")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// when moving in a non-cardinal direction.")]),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("rotate_horizontal "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),s("span",{pre:!0,attrs:{class:"token operator"}},[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\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Keep the camera's angle from going too high/low.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),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 class-name"}},[t._v("Rad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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 camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),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 class-name"}},[t._v("Rad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_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("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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 camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_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("}")]),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:"cleaning-up-lib-rs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-up-lib-rs"}},[t._v("#")]),t._v(" Cleaning up "),s("code",[t._v("lib.rs")])]),t._v(" "),s("p",[t._v("First things first, we need to delete "),s("code",[t._v("Camera")]),t._v(" and "),s("code",[t._v("CameraController")]),t._v(", as well as the extra "),s("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" from "),s("code",[t._v("lib.rs")]),t._v(". Once you've done that, import "),s("code",[t._v("camera.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("model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),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("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("camera")]),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("p",[t._v("We need to update "),s("code",[t._v("update_view_proj")]),t._v(" to use our new "),s("code",[t._v("Camera")]),t._v(" and "),s("code",[t._v("Projection")]),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("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 comment"}},[t._v("// ...")]),t._v("\n\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("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 namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" projection"),s("span",{pre:!0,attrs:{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("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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_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("position"),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("(")]),t._v("projection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_matrix")]),s("span",{pre:!0,attrs:{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(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_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("We need to change our "),s("code",[t._v("State")]),t._v(" to use our "),s("code",[t._v("Camera")]),t._v(", "),s("code",[t._v("CameraProjection")]),t._v(" and "),s("code",[t._v("Projection")]),t._v(" as well. We'll also add a "),s("code",[t._v("mouse_pressed")]),t._v(" field to store whether the mouse was pressed.")]),t._v(" "),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 namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 comment"}},[t._v("// UPDATED!")]),t._v("\n projection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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 camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" "),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 comment"}},[t._v("// NEW!")]),t._v("\n mouse_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")])])]),s("p",[t._v("You'll need to import "),s("code",[t._v("winit::dpi::PhysicalPosition")]),t._v(" if you haven't already.")]),t._v(" "),s("p",[t._v("We need to update "),s("code",[t._v("new()")]),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")]),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 class-name"}},[t._v("State")]),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("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 lifetime-annotation symbol"}},[t._v("'a")]),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("State")]),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\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(" camera "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),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 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("5.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10.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 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 operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("90.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 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 operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("20.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(" projection "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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("config"),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(" config"),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(" "),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(" "),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("100.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(" camera_controller "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("4.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4")]),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 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("&")]),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("&")]),t._v("projection"),s("span",{pre:!0,attrs:{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\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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n projection"),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 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 mouse_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(" "),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("We also need to change our "),s("code",[t._v("projection")]),t._v(" in "),s("code",[t._v("resize")]),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("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 comment"}},[t._v("// UPDATED!")]),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("projection"),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("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(" 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(")")]),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",[s("code",[t._v("input()")]),t._v(" will need to be updated as well. Up to this point, we have been using "),s("code",[t._v("WindowEvent")]),t._v("s for our camera controls. While this works, it's not the best solution. The "),s("a",{attrs:{href:"https://docs.rs/winit/0.24.0/winit/event/enum.WindowEvent.html?search=#variant.CursorMoved",target:"_blank",rel:"noopener noreferrer"}},[t._v("winit docs"),s("OutboundLink")],1),t._v(" inform us that OS will often transform the data for the "),s("code",[t._v("CursorMoved")]),t._v(" event to allow effects such as cursor acceleration.")]),t._v(" "),s("p",[t._v("Now, to fix this, we could change the "),s("code",[t._v("input()")]),t._v(" function to process "),s("code",[t._v("DeviceEvent")]),t._v(" instead of "),s("code",[t._v("WindowEvent")]),t._v(", but keyboard and button presses don't get emitted as "),s("code",[t._v("DeviceEvent")]),t._v("s on MacOS and WASM. Instead, we'll just remove the "),s("code",[t._v("CursorMoved")]),t._v(" check in "),s("code",[t._v("input()")]),t._v(" and a manual call to "),s("code",[t._v("camera_controller.process_mouse()")]),t._v(" in the "),s("code",[t._v("run()")]),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("// UPDATED!")]),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 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 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("KeyEvent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 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_keyboard")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("key"),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 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("MouseWheel")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta"),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 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_scroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("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("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n button"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),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 "),s("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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_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 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("p",[t._v("Here are the changes to "),s("code",[t._v("run()")]),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("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 comment"}},[t._v("// ...")]),t._v("\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(" 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 comment"}},[t._v("// NEW!")]),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("DeviceEvent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseMotion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta"),s("span",{pre:!0,attrs:{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("..")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We're not using device_id currently")]),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 keyword"}},[t._v("if")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_pressed "),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("camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_mouse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delta"),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 "),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("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 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 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("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\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 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 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("KeyEvent")]),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 physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyCode")]),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(" control_flow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("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 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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("update")]),t._v(" function requires a bit more explanation. The "),s("code",[t._v("update_camera")]),t._v(" function on the "),s("code",[t._v("CameraController")]),t._v(" has a parameter "),s("code",[t._v("dt: Duration")]),t._v(", which is the delta time or time between frames. This is to help smooth out the camera movement so that it's not locked by the framerate. Currently, we aren't calculating "),s("code",[t._v("dt")]),t._v(", so I decided to pass it into "),s("code",[t._v("update")]),t._v(" as a parameter.")]),t._v(" "),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(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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("// UPDATED!")]),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(",")]),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("\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(",")]),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("projection"),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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("While we're at it, let's also use "),s("code",[t._v("dt")]),t._v(" for the light's rotation.")]),t._v(" "),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("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("60.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_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 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(")")]),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 comment"}},[t._v("// UPDATED!")]),t._v("\n")])])]),s("p",[t._v("We still need to calculate "),s("code",[t._v("dt")]),t._v(". Let's do that in the "),s("code",[t._v("main")]),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 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 comment"}},[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(" 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("(")]),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 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 "),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(" last_render_time "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("\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(" 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 comment"}},[t._v("// UPDATED!")]),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 "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" now "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" dt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" last_render_time"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n last_render_time "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now"),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("(")]),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("\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 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("With that, we should be able to move our camera wherever we want.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(363),alt:"./screenshot.png"}})]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial12_camera"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{361:function(t,s,a){t.exports=a.p+"assets/img/left_right_hand.ccabf5d0.gif"},362:function(t,s,a){t.exports=a.p+"assets/img/screenshot.4f5740bc.png"},451:function(t,s,a){"use strict";a.r(s);var n=a(8),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:"a-better-camera"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#a-better-camera"}},[t._v("#")]),t._v(" A Better Camera")]),t._v(" "),s("p",[t._v("I've been putting this off for a while. Implementing a camera isn't specifically related to using WGPU properly, but it's been bugging me, so let's do it.")]),t._v(" "),s("p",[s("code",[t._v("lib.rs")]),t._v(" is getting a little crowded, so let's create a "),s("code",[t._v("camera.rs")]),t._v(" file to put our camera code. The first things we're going to put in it are some imports and our "),s("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),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("::")])]),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("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("event"),s("span",{pre:!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("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("PhysicalPosition")]),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("instant"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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("::")])]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("consts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAC_PI_2")]),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("#[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\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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 constant"}},[t._v("FRAC_PI_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("0.0001")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"note"},[s("p",[s("code",[t._v("std::time::Instant")]),t._v(" panics on WASM, so we'll use the "),s("a",{attrs:{href:"https://docs.rs/instant",target:"_blank",rel:"noopener noreferrer"}},[t._v("instant crate"),s("OutboundLink")],1),t._v(". You'll want to include it in 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("# ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("instant")]),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"')]),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("instant")]),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.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(" "),s("span",{pre:!0,attrs:{class:"token string"}},[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 punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),s("h2",{attrs:{id:"the-camera"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-camera"}},[t._v("#")]),t._v(" The Camera")]),t._v(" "),s("p",[t._v("Next, we need to create a new "),s("code",[t._v("Camera")]),t._v(" struct. We're going to be using an FPS-style camera, so we'll store the position and the yaw (horizontal rotation), and pitch (vertical rotation). We'll have a "),s("code",[t._v("calc_matrix")]),t._v(" method to create our view 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("#[derive(Debug)]")]),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("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("pub")]),t._v(" position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),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 yaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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 pitch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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("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("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 operator"}},[t._v("<")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),s("span",{pre:!0,attrs:{class:"token operator"}},[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 "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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 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("Into")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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 operator"}},[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 class-name"}},[t._v("V")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n yaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pitch"),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 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 position"),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 yaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" yaw"),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 pitch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pitch"),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("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("calc_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 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 keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sin_pitch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cos_pitch"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),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 function"}},[t._v("sin_cos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("sin_yaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cos_yaw"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),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 function"}},[t._v("sin_cos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("Matrix4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("look_to_rh")]),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("position"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),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("(")]),t._v("\n cos_pitch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" cos_yaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sin_pitch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cos_pitch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" sin_yaw\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("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 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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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:"the-projection"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-projection"}},[t._v("#")]),t._v(" The Projection")]),t._v(" "),s("p",[t._v("I've decided to split the projection from the camera. The projection only needs to change if the window resizes, so let's create a "),s("code",[t._v("Projection")]),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("struct")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Projection")]),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 class-name"}},[t._v("Rad")]),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 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("Projection")]),t._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 operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("F")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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 operator"}},[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(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),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(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),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 class-name"}},[t._v("F")]),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(" "),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 aspect"),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(" 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(" fovy"),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 znear"),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("\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("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(" width"),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(" height"),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(" "),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("aspect "),s("span",{pre:!0,attrs:{class:"token operator"}},[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(" 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 "),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("calc_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 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 constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),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 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(",")]),t._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(")")]),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("One thing to note: "),s("code",[t._v("cgmath")]),t._v(" currently returns a right-handed projection matrix from the "),s("code",[t._v("perspective")]),t._v(" function. This means that the z-axis points out of the screen. If you want the z-axis to be "),s("em",[t._v("into")]),t._v(" the screen (aka. a left-handed projection matrix), you'll have to code your own.")]),t._v(" "),s("p",[t._v("You can tell the difference between a right-handed coordinate system and a left-handed one by using your hands. Point your thumb to the right. This is the x-axis. Point your pointer finger up. This is the y-axis. Extend your middle finger. This is the z-axis. On your right hand, your middle finger should be pointing towards you. On your left hand, it should be pointing away.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(361),alt:"./left_right_hand.gif"}})]),t._v(" "),s("h1",{attrs:{id:"the-camera-controller"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-camera-controller"}},[t._v("#")]),t._v(" The Camera Controller")]),t._v(" "),s("p",[t._v("Our camera is different, so we'll need a new camera controller. Add the following to "),s("code",[t._v("camera.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("#[derive(Debug)]")]),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("CameraController")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n amount_left"),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 amount_right"),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 amount_forward"),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 amount_backward"),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 amount_up"),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 amount_down"),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 rotate_horizontal"),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 rotate_vertical"),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 scroll"),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 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 sensitivity"),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("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("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("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(" sensitivity"),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 amount_left"),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 amount_right"),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 amount_forward"),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 amount_backward"),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 amount_up"),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 amount_down"),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 rotate_horizontal"),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 rotate_vertical"),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 scroll"),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 speed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sensitivity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("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("process_keyboard")]),s("span",{pre:!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(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(",")]),t._v(" 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(")")]),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")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" amount "),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(" 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")]),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 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(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" key "),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("amount_forward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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("amount_backward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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("amount_left "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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("amount_right "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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("Space")]),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("amount_up "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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("LShift")]),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("amount_down "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),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\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("process_mouse")]),s("span",{pre:!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(" mouse_dx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mouse_dy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),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("rotate_horizontal "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dx "),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dy "),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 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("process_scroll")]),s("span",{pre:!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(" delta"),s("span",{pre:!0,attrs:{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("MouseScrollDelta")]),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("scroll "),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("match")]),t._v(" delta "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// I'm assuming a line is about 100 pixels")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LineDelta")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" scroll"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" scroll "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 class-name"}},[t._v("MouseScrollDelta")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PixelDelta")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalPosition")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n y"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scroll"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("scroll "),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 punctuation"}},[t._v("}")]),s("span",{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("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(":")]),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(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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(" dt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_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 punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Move forward/backward and left/right")]),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("yaw_sin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_cos"),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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),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 function"}},[t._v("sin_cos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),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("(")]),t._v("yaw_cos"),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(" yaw_sin"),s("span",{pre:!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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\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(" "),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 operator"}},[t._v("-")]),t._v("yaw_sin"),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(" yaw_cos"),s("span",{pre:!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(")")]),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("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" forward "),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_forward "),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("amount_backward"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),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("position "),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 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("amount_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("amount_left"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Move in/out (aka. "zoom")')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Note: this isn't an actual zoom. The camera's position")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// changes when zooming. I've added this to make it easier")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to get closer to an object you want to focus on.")]),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("pitch_sin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos"),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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),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 function"}},[t._v("sin_cos")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" scrollward "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),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("(")]),t._v("pitch_cos "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_cos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_sin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_sin"),s("span",{pre:!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(")")]),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("position "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" scrollward "),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("scroll "),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 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("sensitivity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),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("scroll "),s("span",{pre:!0,attrs:{class:"token operator"}},[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\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Move up/down. Since we don't use roll, we can just")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// modify the y coordinate directly.")]),t._v("\n camera"),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("y "),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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_up "),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("amount_down"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rotate")]),t._v("\n camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),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("rotate_horizontal"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),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("pitch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),s("span",{pre:!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("rotate_vertical"),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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If process_mouse isn't called every frame, these values")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// will not get set to zero, and the camera will rotate")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// when moving in a non-cardinal direction.")]),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("rotate_horizontal "),s("span",{pre:!0,attrs:{class:"token operator"}},[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 keyword"}},[t._v("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),s("span",{pre:!0,attrs:{class:"token operator"}},[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\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Keep the camera's angle from going too high/low.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),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 class-name"}},[t._v("Rad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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 camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),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 class-name"}},[t._v("Rad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_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("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),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 camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_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("}")]),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:"cleaning-up-lib-rs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-up-lib-rs"}},[t._v("#")]),t._v(" Cleaning up "),s("code",[t._v("lib.rs")])]),t._v(" "),s("p",[t._v("First things first, we need to delete "),s("code",[t._v("Camera")]),t._v(" and "),s("code",[t._v("CameraController")]),t._v(", as well as the extra "),s("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" from "),s("code",[t._v("lib.rs")]),t._v(". Once you've done that, import "),s("code",[t._v("camera.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("model")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),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("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("camera")]),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("p",[t._v("We need to update "),s("code",[t._v("update_view_proj")]),t._v(" to use our new "),s("code",[t._v("Camera")]),t._v(" and "),s("code",[t._v("Projection")]),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("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 comment"}},[t._v("// ...")]),t._v("\n\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("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 namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" projection"),s("span",{pre:!0,attrs:{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("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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_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("position"),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("(")]),t._v("projection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_matrix")]),s("span",{pre:!0,attrs:{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(" camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_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("We need to change our "),s("code",[t._v("State")]),t._v(" to use our "),s("code",[t._v("Camera")]),t._v(", "),s("code",[t._v("CameraProjection")]),t._v(" and "),s("code",[t._v("Projection")]),t._v(" as well. We'll also add a "),s("code",[t._v("mouse_pressed")]),t._v(" field to store whether the mouse was pressed.")]),t._v(" "),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 namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 comment"}},[t._v("// UPDATED!")]),t._v("\n projection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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 camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" "),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 comment"}},[t._v("// NEW!")]),t._v("\n mouse_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")])])]),s("p",[t._v("You'll need to import "),s("code",[t._v("winit::dpi::PhysicalPosition")]),t._v(" if you haven't already.")]),t._v(" "),s("p",[t._v("We need to update "),s("code",[t._v("new()")]),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")]),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 class-name"}},[t._v("State")]),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("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 lifetime-annotation symbol"}},[t._v("'a")]),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("State")]),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\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(" camera "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),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 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("5.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10.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 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 operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("90.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 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 operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("20.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(" projection "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),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("config"),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(" config"),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(" "),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(" "),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("100.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(" camera_controller "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("4.0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4")]),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 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("&")]),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("&")]),t._v("projection"),s("span",{pre:!0,attrs:{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\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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n projection"),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 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 mouse_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(" "),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("We also need to change our "),s("code",[t._v("projection")]),t._v(" in "),s("code",[t._v("resize")]),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("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 comment"}},[t._v("// UPDATED!")]),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("projection"),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("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(" 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(")")]),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",[s("code",[t._v("input()")]),t._v(" will need to be updated as well. Up to this point, we have been using "),s("code",[t._v("WindowEvent")]),t._v("s for our camera controls. While this works, it's not the best solution. The "),s("a",{attrs:{href:"https://docs.rs/winit/0.24.0/winit/event/enum.WindowEvent.html?search=#variant.CursorMoved",target:"_blank",rel:"noopener noreferrer"}},[t._v("winit docs"),s("OutboundLink")],1),t._v(" inform us that OS will often transform the data for the "),s("code",[t._v("CursorMoved")]),t._v(" event to allow effects such as cursor acceleration.")]),t._v(" "),s("p",[t._v("Now, to fix this, we could change the "),s("code",[t._v("input()")]),t._v(" function to process "),s("code",[t._v("DeviceEvent")]),t._v(" instead of "),s("code",[t._v("WindowEvent")]),t._v(", but keyboard and button presses don't get emitted as "),s("code",[t._v("DeviceEvent")]),t._v("s on MacOS and WASM. Instead, we'll just remove the "),s("code",[t._v("CursorMoved")]),t._v(" check in "),s("code",[t._v("input()")]),t._v(" and a manual call to "),s("code",[t._v("camera_controller.process_mouse()")]),t._v(" in the "),s("code",[t._v("run()")]),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("// UPDATED!")]),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 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 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("KeyEvent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 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_keyboard")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("key"),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 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("MouseWheel")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta"),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 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_scroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("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("WindowEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseInput")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n button"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),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 "),s("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("self")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_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 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("p",[t._v("Here are the changes to "),s("code",[t._v("run()")]),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("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 comment"}},[t._v("// ...")]),t._v("\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(" 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 comment"}},[t._v("// NEW!")]),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("DeviceEvent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseMotion")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta"),s("span",{pre:!0,attrs:{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("..")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We're not using device_id currently")]),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 keyword"}},[t._v("if")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_pressed "),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("camera_controller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_mouse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),s("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delta"),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 "),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("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 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 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("match")]),t._v(" event "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\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 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 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("KeyEvent")]),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 physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyCode")]),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(" control_flow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("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 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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("The "),s("code",[t._v("update")]),t._v(" function requires a bit more explanation. The "),s("code",[t._v("update_camera")]),t._v(" function on the "),s("code",[t._v("CameraController")]),t._v(" has a parameter "),s("code",[t._v("dt: Duration")]),t._v(", which is the delta time or time between frames. This is to help smooth out the camera movement so that it's not locked by the framerate. Currently, we aren't calculating "),s("code",[t._v("dt")]),t._v(", so I decided to pass it into "),s("code",[t._v("update")]),t._v(" as a parameter.")]),t._v(" "),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(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),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("// UPDATED!")]),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(",")]),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("\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(",")]),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("projection"),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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("While we're at it, let's also use "),s("code",[t._v("dt")]),t._v(" for the light's rotation.")]),t._v(" "),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("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("60.0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_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 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(")")]),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 comment"}},[t._v("// UPDATED!")]),t._v("\n")])])]),s("p",[t._v("We still need to calculate "),s("code",[t._v("dt")]),t._v(". Let's do that in the "),s("code",[t._v("main")]),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 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 comment"}},[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(" 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("(")]),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 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 "),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(" last_render_time "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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("\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(" 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 comment"}},[t._v("// UPDATED!")]),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 "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" now "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" dt "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" last_render_time"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n last_render_time "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now"),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("(")]),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("\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 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("With that, we should be able to move our camera wherever we want.")]),t._v(" "),s("p",[s("img",{attrs:{src:a(362),alt:"./screenshot.png"}})]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial12_camera"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/46.28b6cc30.js b/assets/js/45.1237e485.js similarity index 96% rename from assets/js/46.28b6cc30.js rename to assets/js/45.1237e485.js index 37d010457..20eaf50d4 100644 --- a/assets/js/46.28b6cc30.js +++ b/assets/js/45.1237e485.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{258: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(91);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"})}},272:function(t,e,n){"use strict";n.r(e);var r=n(258),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(8),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],{257: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(91);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"})}},259:function(t,e,n){"use strict";n.r(e);var r=n(257),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(8),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/47.b2cc5f98.js b/assets/js/46.11403997.js similarity index 99% rename from assets/js/47.b2cc5f98.js rename to assets/js/46.11403997.js index 3796d665f..5f7128971 100644 --- a/assets/js/47.b2cc5f98.js +++ b/assets/js/46.11403997.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{335:function(t,s,a){t.exports=a.p+"assets/img/static-tree.17986854.png"},447:function(t,s,a){"use strict";a.r(s);var n=a(8),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(335),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 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("KeyEvent")]),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 physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),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("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyW")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArrowUp")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyA")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArrowLeft")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyS")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArrowDown")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyD")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArrowRight")]),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")]),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 class-name"}},[t._v("State")]),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("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 lifetime-annotation symbol"}},[t._v("'a")]),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("State")]),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("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],{334:function(t,s,a){t.exports=a.p+"assets/img/static-tree.17986854.png"},444:function(t,s,a){"use strict";a.r(s);var n=a(8),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(334),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 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("KeyEvent")]),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 physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),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("{")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyW")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArrowUp")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyA")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArrowLeft")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyS")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArrowDown")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyD")]),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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ArrowRight")]),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")]),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 class-name"}},[t._v("State")]),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("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 lifetime-annotation symbol"}},[t._v("'a")]),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("State")]),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("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/48.f0dd2dde.js b/assets/js/47.92d9fc16.js similarity index 99% rename from assets/js/48.f0dd2dde.js rename to assets/js/47.92d9fc16.js index 312d14b91..61d31d1a2 100644 --- a/assets/js/48.f0dd2dde.js +++ b/assets/js/47.92d9fc16.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{336:function(t,s,a){t.exports=a.p+"assets/img/forest.5c5cf3ad.png"},448:function(t,s,a){"use strict";a.r(s);var n=a(8),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")]),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 class-name"}},[t._v("State")]),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("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 lifetime-annotation symbol"}},[t._v("'a")]),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("State")]),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("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(336),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],{335:function(t,s,a){t.exports=a.p+"assets/img/forest.5c5cf3ad.png"},445:function(t,s,a){"use strict";a.r(s);var n=a(8),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")]),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 class-name"}},[t._v("State")]),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("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 lifetime-annotation symbol"}},[t._v("'a")]),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("State")]),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("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(335),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/49.a5085325.js b/assets/js/48.ab5db6e7.js similarity index 99% rename from assets/js/49.a5085325.js rename to assets/js/48.ab5db6e7.js index a0944e829..cf12ced7f 100644 --- a/assets/js/49.a5085325.js +++ b/assets/js/48.ab5db6e7.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{375:function(t,e,a){t.exports=a.p+"assets/img/normal_mapping_correct.2731b486.png"},465:function(t,e,a){"use strict";a.r(e);var s=a(8),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(375),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],{374:function(t,e,a){t.exports=a.p+"assets/img/normal_mapping_correct.2731b486.png"},462:function(t,e,a){"use strict";a.r(e);var s=a(8),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(374),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/50.e89dc9be.js b/assets/js/49.43f4819e.js similarity index 99% rename from assets/js/50.e89dc9be.js rename to assets/js/49.43f4819e.js index 6914c4c21..ef24326a9 100644 --- a/assets/js/50.e89dc9be.js +++ b/assets/js/49.43f4819e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{381:function(t,s,a){t.exports=a.p+"assets/img/output.5ed23d6e.gif"},469:function(t,s,a){"use strict";a.r(s);var n=a(8),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(381),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],{379:function(t,s,a){t.exports=a.p+"assets/img/output.5ed23d6e.gif"},466:function(t,s,a){"use strict";a.r(s);var n=a(8),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(379),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/5.42813bbd.js b/assets/js/5.48b6ae27.js similarity index 60% rename from assets/js/5.42813bbd.js rename to assets/js/5.48b6ae27.js index 0ce098dca..7f70da97e 100644 --- a/assets/js/5.42813bbd.js +++ b/assets/js/5.48b6ae27.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{301:function(t,e,n){},319:function(t,e,n){"use strict";n(301)},440:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:(t,{props:e,slots:n})=>t("span",{class:["badge",e.type],style:{verticalAlign:e.vertical}},e.text||n().default)},p=(n(319),n(8)),a=Object(p.a)(i,void 0,void 0,!1,null,"86b323a0",null);e.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{300:function(t,e,n){},318:function(t,e,n){"use strict";n(300)},437:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:(t,{props:e,slots:n})=>t("span",{class:["badge",e.type],style:{verticalAlign:e.vertical}},e.text||n().default)},p=(n(318),n(8)),a=Object(p.a)(i,void 0,void 0,!1,null,"86b323a0",null);e.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/51.b9af463e.js b/assets/js/50.e8385d6b.js similarity index 99% rename from assets/js/51.b9af463e.js rename to assets/js/50.e8385d6b.js index 351b4c89a..112059a99 100644 --- a/assets/js/51.b9af463e.js +++ b/assets/js/50.e8385d6b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{380:function(t,s,a){t.exports=a.p+"assets/img/screenshot.1f9dab62.png"},468:function(t,s,a){"use strict";a.r(s);var n=a(8),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.19"')]),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(380),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],{381:function(t,s,a){t.exports=a.p+"assets/img/screenshot.1f9dab62.png"},469:function(t,s,a){"use strict";a.r(s);var n=a(8),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('"22.0"')]),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(381),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.69cb549b.js b/assets/js/51.69cb549b.js new file mode 100644 index 000000000..5987c488b --- /dev/null +++ b/assets/js/51.69cb549b.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{380: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"},467:function(A,t,s){"use strict";s.r(t);var a=s(8),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(380),alt:"A screenshot of pong"}})]),A._v(" "),t("div",{staticClass:"warning"},[t("p",[A._v("This example is not working as of "),t("code",[A._v('wgpu = "22.0"')]),A._v(". If the crate updates to\nthe latest version I'll switch it over, but given that the crate maintainer\nis directing users to use "),t("a",{attrs:{href:"https://github.com/grovesNL/glyphon?tab=readme-ov-file",target:"_blank",rel:"noopener noreferrer"}},[A._v("glypon"),t("OutboundLink")],1),A._v("\nI'm considering either switching to using that, or writing my own text code.")])]),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 = { version = "0.29", features = ["rwh_05"] }\nanyhow = "1.0"\nbytemuck = { version = "1.16", features = [ "derive" ] }\ncgmath = "0.18"\npollster = "0.3"\nwgpu = { version = "22.0", features = ["spirv"]}\nwgpu_glyph = "0.19"\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"\nweb-sys = { version = "0.3", features = [\n "Document",\n "Window",\n "Element",\n]}\nwgpu = { version = "22.0", 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 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 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.")])])}),[],!1,null,null,null);t.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/52.5eb64622.js b/assets/js/52.5eb64622.js deleted file mode 100644 index 30ee1c770..000000000 --- a/assets/js/52.5eb64622.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{382: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"},471:function(A,t,s){"use strict";s.r(t);var a=s(8),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(382),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 = { version = "0.29", features = ["rwh_05"] }\nanyhow = "1.0"\nbytemuck = { version = "1.12", features = [ "derive" ] }\ncgmath = "0.18"\npollster = "0.3"\nwgpu = { version = "0.19", features = ["spirv"]}\nwgpu_glyph = "0.19"\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"\nweb-sys = { version = "0.3", features = [\n "Document",\n "Window",\n "Element",\n]}\nwgpu = { version = "0.19", 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 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 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/53.97298d29.js b/assets/js/52.d9436a1f.js similarity index 99% rename from assets/js/53.97298d29.js rename to assets/js/52.d9436a1f.js index f1dc90d4d..0d44bf33e 100644 --- a/assets/js/53.97298d29.js +++ b/assets/js/52.d9436a1f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{383: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="},472:function(t,s,a){"use strict";a.r(s);var n=a(8),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.19"')]),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(383),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],{382: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="},470:function(t,s,a){"use strict";a.r(s);var n=a(8),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('"22.0"')]),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(382),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/54.6fbf6ede.js b/assets/js/53.3d897957.js similarity index 90% rename from assets/js/54.6fbf6ede.js rename to assets/js/53.3d897957.js index 3c684e0df..4fe32b1e5 100644 --- a/assets/js/54.6fbf6ede.js +++ b/assets/js/53.3d897957.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{438:function(e,t,n){"use strict";n.r(t);var r={name:"RecentArticles",data:()=>({}),computed:{recentFiles(){return this.$site.pages.filter(e=>e.regularPath.includes("beginner")||e.regularPath.includes("intermediate")).sort((e,t)=>{let n=new Date(e.frontmatter.published).getTime()-new Date(t.frontmatter.published).getTime();return n<0?-1:n>0?1:0}).slice(0,5)}}},i=n(8),l=Object(i.a)(r,(function(){var e=this,t=e._self._c;return t("div",[t("ul",e._l(e.recentFiles,(function(n,r){return t("li",{key:n},[t("a",{attrs:{href:r.path}},[e._v(e._s(r.title))])])})),0)])}),[],!1,null,null,null);t.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{435:function(e,t,n){"use strict";n.r(t);var r={name:"RecentArticles",data:()=>({}),computed:{recentFiles(){return this.$site.pages.filter(e=>e.regularPath.includes("beginner")||e.regularPath.includes("intermediate")).sort((e,t)=>{let n=new Date(e.frontmatter.published).getTime()-new Date(t.frontmatter.published).getTime();return n<0?-1:n>0?1:0}).slice(0,5)}}},i=n(8),l=Object(i.a)(r,(function(){var e=this,t=e._self._c;return t("div",[t("ul",e._l(e.recentFiles,(function(n,r){return t("li",{key:n},[t("a",{attrs:{href:r.path}},[e._v(e._s(r.title))])])})),0)])}),[],!1,null,null,null);t.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/55.5eb9e278.js b/assets/js/54.90271138.js similarity index 69% rename from assets/js/55.5eb9e278.js rename to assets/js/54.90271138.js index a8c0d8c8d..8c715da18 100644 --- a/assets/js/55.5eb9e278.js +++ b/assets/js/54.90271138.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{441:function(t,e,a){"use strict";a.r(e);var r=a(8),n=Object(r.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"introduction"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#introduction"}},[t._v("#")]),t._v(" Introduction")]),t._v(" "),e("h2",{attrs:{id:"what-is-wgpu"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#what-is-wgpu"}},[t._v("#")]),t._v(" What is wgpu?")]),t._v(" "),e("p",[e("a",{attrs:{href:"https://github.com/gfx-rs/wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Wgpu"),e("OutboundLink")],1),t._v(" is a Rust implementation of the "),e("a",{attrs:{href:"https://gpuweb.github.io/gpuweb/",target:"_blank",rel:"noopener noreferrer"}},[t._v("WebGPU API spec"),e("OutboundLink")],1),t._v(". 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).")]),t._v(" "),e("p",[t._v("Wgpu is still in development, so some of this doc is subject to change.")]),t._v(" "),e("h2",{attrs:{id:"why-rust"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#why-rust"}},[t._v("#")]),t._v(" Why Rust?")]),t._v(" "),e("p",[t._v("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.")]),t._v(" "),e("p",[t._v("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 "),e("a",{attrs:{href:"https://www.rust-lang.org/learn",target:"_blank",rel:"noopener noreferrer"}},[t._v("Rust tutorial"),e("OutboundLink")],1),t._v(". You should also be familiar with "),e("a",{attrs:{href:"https://doc.rust-lang.org/cargo/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Cargo"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("p",[t._v("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.")]),t._v(" "),e("h2",{attrs:{id:"contribution-and-support"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#contribution-and-support"}},[t._v("#")]),t._v(" Contribution and Support")]),t._v(" "),e("ul",[e("li",[t._v("I accept pull requests ("),e("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("GitHub repo"),e("OutboundLink")],1),t._v(") for fixing issues with this tutorial such as typos, incorrect information, and other inconsistencies.")]),t._v(" "),e("li",[t._v("Due to wgpu's rapidly changing api, I'm not accepting any new pull requests for showcase demos.")]),t._v(" "),e("li",[t._v("If you want to support me directly, check out my "),e("a",{attrs:{href:"https://www.patreon.com/sotrh",target:"_blank",rel:"noopener noreferrer"}},[t._v("patreon"),e("OutboundLink")],1),t._v("!")])]),t._v(" "),e("h2",{attrs:{id:"translations"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#translations"}},[t._v("#")]),t._v(" Translations")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"https://jinleili.github.io/learn-wgpu-zh/",target:"_blank",rel:"noopener noreferrer"}},[t._v("中文版: 增加了与 App 的集成与调试系列章节"),e("OutboundLink")],1)])]),t._v(" "),e("h2",{attrs:{id:"special-thanks-to-these-patrons"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#special-thanks-to-these-patrons"}},[t._v("#")]),t._v(" Special thanks to these patrons!")]),t._v(" "),e("ul",[e("li",[t._v("David Laban")]),t._v(" "),e("li",[t._v("Lennart")]),t._v(" "),e("li",[t._v("Ian Gowen")]),t._v(" "),e("li",[t._v("Aron Granberg")]),t._v(" "),e("li",[t._v("Bernard Llanos")]),t._v(" "),e("li",[t._v("Jan Šipr")]),t._v(" "),e("li",[t._v("Zeh Fernando")]),t._v(" "),e("li",[t._v("Youngsuk Kim")]),t._v(" "),e("li",[t._v("オリトイツキ")]),t._v(" "),e("li",[t._v("Andrea Postal")]),t._v(" "),e("li",[t._v("Julius Liu")]),t._v(" "),e("li",[t._v("Feng Liang")]),t._v(" "),e("li",[t._v("Mattia Samiolo")]),t._v(" "),e("li",[t._v("Joris Willems")]),t._v(" "),e("li",[t._v("Jani Turkia")]),t._v(" "),e("li",[t._v("papyDoctor")]),t._v(" "),e("li",[t._v("Filip")])])])}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{438:function(t,e,a){"use strict";a.r(e);var i=a(8),n=Object(i.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"introduction"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#introduction"}},[t._v("#")]),t._v(" Introduction")]),t._v(" "),e("h2",{attrs:{id:"what-is-wgpu"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#what-is-wgpu"}},[t._v("#")]),t._v(" What is wgpu?")]),t._v(" "),e("p",[e("a",{attrs:{href:"https://github.com/gfx-rs/wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Wgpu"),e("OutboundLink")],1),t._v(" is a Rust implementation of the "),e("a",{attrs:{href:"https://gpuweb.github.io/gpuweb/",target:"_blank",rel:"noopener noreferrer"}},[t._v("WebGPU API spec"),e("OutboundLink")],1),t._v(". 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).")]),t._v(" "),e("p",[t._v("Wgpu is still in development, so some of this doc is subject to change.")]),t._v(" "),e("h2",{attrs:{id:"why-rust"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#why-rust"}},[t._v("#")]),t._v(" Why Rust?")]),t._v(" "),e("p",[t._v("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.")]),t._v(" "),e("p",[t._v("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 "),e("a",{attrs:{href:"https://www.rust-lang.org/learn",target:"_blank",rel:"noopener noreferrer"}},[t._v("Rust tutorial"),e("OutboundLink")],1),t._v(". You should also be familiar with "),e("a",{attrs:{href:"https://doc.rust-lang.org/cargo/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Cargo"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("p",[t._v("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.")]),t._v(" "),e("h2",{attrs:{id:"contribution-and-support"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#contribution-and-support"}},[t._v("#")]),t._v(" Contribution and Support")]),t._v(" "),e("ul",[e("li",[t._v("I accept pull requests ("),e("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("GitHub repo"),e("OutboundLink")],1),t._v(") for fixing issues with this tutorial such as typos, incorrect information, and other inconsistencies.")]),t._v(" "),e("li",[t._v("Due to wgpu's rapidly changing api, I'm not accepting any new pull requests for showcase demos.")]),t._v(" "),e("li",[t._v("If you want to support me directly, check out my "),e("a",{attrs:{href:"https://www.patreon.com/sotrh",target:"_blank",rel:"noopener noreferrer"}},[t._v("patreon"),e("OutboundLink")],1),t._v("!")])]),t._v(" "),e("h2",{attrs:{id:"translations"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#translations"}},[t._v("#")]),t._v(" Translations")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"https://jinleili.github.io/learn-wgpu-zh/",target:"_blank",rel:"noopener noreferrer"}},[t._v("中文版: 增加了与 App 的集成与调试系列章节"),e("OutboundLink")],1)])]),t._v(" "),e("h2",{attrs:{id:"special-thanks-to-these-patrons"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#special-thanks-to-these-patrons"}},[t._v("#")]),t._v(" Special thanks to these patrons")]),t._v(" "),e("ul",[e("li",[t._v("David Laban")]),t._v(" "),e("li",[t._v("yutani")]),t._v(" "),e("li",[t._v("Gunstein Vatnar")]),t._v(" "),e("li",[t._v("Lennart")]),t._v(" "),e("li",[t._v("Paul E Hansen")]),t._v(" "),e("li",[t._v("Eliot Bolduc")]),t._v(" "),e("li",[t._v("Ian Gowen")]),t._v(" "),e("li",[t._v("Ben Anderson")]),t._v(" "),e("li",[t._v("Aron Granberg")]),t._v(" "),e("li",[t._v("Ken K")]),t._v(" "),e("li",[t._v("Bernard Llanos")]),t._v(" "),e("li",[t._v("Danny McGee")]),t._v(" "),e("li",[t._v("Thunk")]),t._v(" "),e("li",[t._v("Zeh Fernando")]),t._v(" "),e("li",[t._v("Craft Links")]),t._v(" "),e("li",[t._v("Felix")]),t._v(" "),e("li",[t._v("Youngsuk Kim")]),t._v(" "),e("li",[t._v("Tema")]),t._v(" "),e("li",[t._v("オリトイツキ")]),t._v(" "),e("li",[t._v("Andrea Postal")]),t._v(" "),e("li",[t._v("Davide Prati")]),t._v(" "),e("li",[t._v("大典 加藤")]),t._v(" "),e("li",[t._v("charlesk")]),t._v(" "),e("li",[t._v("Julius Liu")]),t._v(" "),e("li",[t._v("Feng Liang")]),t._v(" "),e("li",[t._v("dadofboi")]),t._v(" "),e("li",[t._v("Mattia Samiolo")]),t._v(" "),e("li",[t._v("Jani Turkia")]),t._v(" "),e("li",[t._v("papyDoctor")]),t._v(" "),e("li",[t._v("Filip")]),t._v(" "),e("li",[t._v("Alexander Kabirov")]),t._v(" "),e("li",[t._v("Nico Arbogast")]),t._v(" "),e("li",[t._v("Dude")]),t._v(" "),e("li",[t._v("Georeth Zhow")]),t._v(" "),e("li",[t._v("Lions Heart")]),t._v(" "),e("li",[t._v("Ryan")])])])}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/55.e3dd1503.js b/assets/js/55.e3dd1503.js new file mode 100644 index 000000000..b062214cc --- /dev/null +++ b/assets/js/55.e3dd1503.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{439:function(t,s,a){"use strict";a.r(s);var n=a(8),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:"dependencies-and-the-window"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dependencies-and-the-window"}},[t._v("#")]),t._v(" Dependencies and the window")]),t._v(" "),s("h2",{attrs:{id:"boring-i-know"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#boring-i-know"}},[t._v("#")]),t._v(" Boring, I know")]),t._v(" "),s("p",[t._v("Some of you reading this are very experienced with opening up windows in Rust and probably have your favorite windowing library, but this guide is designed for everybody, so it's something that we need to cover. Luckily, you don't need to read this if you know what you're doing. One thing that you do need to know is that whatever windowing solution you use needs to support the "),s("a",{attrs:{href:"https://github.com/rust-windowing/raw-window-handle",target:"_blank",rel:"noopener noreferrer"}},[t._v("raw-window-handle"),s("OutboundLink")],1),t._v(" crate.")]),t._v(" "),s("h2",{attrs:{id:"what-crates-are-we-using"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-crates-are-we-using"}},[t._v("#")]),t._v(" What crates are we using?")]),t._v(" "),s("p",[t._v("For the beginner stuff, we're going to keep things very simple. We'll add things as we go, but I've listed the relevant "),s("code",[t._v("Cargo.toml")]),t._v(" bits below.")]),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("winit")]),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.29"')]),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('"rwh_05"')]),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("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('"22.0"')]),t._v("\n")])])]),s("div",{staticClass:"warning"},[s("p",[t._v("Note that we are using version "),s("code",[t._v("0.29")]),t._v(" of winit. This is not the most recent version.\nThe reason for this is version "),s("code",[t._v("0.30")]),t._v(" and beyond include breaking changes that will\nrequire a lot of code changes. I've created a local branch to mess around with it, but\nthere's a work around on the "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/issues/549",target:"_blank",rel:"noopener noreferrer"}},[t._v("tracking issue"),s("OutboundLink")],1),t._v("\nif you absolutely need the latest version of winit.")])]),t._v(" "),s("h2",{attrs:{id:"using-rust-s-new-resolver"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-rust-s-new-resolver"}},[t._v("#")]),t._v(" Using Rust's new resolver")]),t._v(" "),s("p",[t._v("As of version 0.10, wgpu requires Cargo's "),s("a",{attrs:{href:"https://doc.rust-lang.org/cargo/reference/resolver.html#feature-resolver-version-2",target:"_blank",rel:"noopener noreferrer"}},[t._v("newest feature resolver"),s("OutboundLink")],1),t._v(", which is the default in the 2021 edition (any new project started with Rust version 1.56.0 or newer). However, if you are still using the 2018 edition, you must include "),s("code",[t._v('resolver = "2"')]),t._v(" in either the "),s("code",[t._v("[package]")]),t._v(" section of "),s("code",[t._v("Cargo.toml")]),t._v(" if you are working on a single crate or the "),s("code",[t._v("[workspace]")]),t._v(" section of the root "),s("code",[t._v("Cargo.toml")]),t._v(" in a workspace.")]),t._v(" "),s("h2",{attrs:{id:"env-logger"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#env-logger"}},[t._v("#")]),t._v(" env_logger")]),t._v(" "),s("p",[t._v("It is very important to enable logging via "),s("code",[t._v("env_logger::init();")]),t._v(".\nWhen wgpu hits any error, it panics with a generic message, while logging the real error via the log crate.\nThis means if you don't include "),s("code",[t._v("env_logger::init()")]),t._v(", wgpu will fail silently, leaving you very confused!"),s("br"),t._v("\n(This has been done in the code below)")]),t._v(" "),s("h2",{attrs:{id:"create-a-new-project"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#create-a-new-project"}},[t._v("#")]),t._v(" Create a new project")]),t._v(" "),s("p",[t._v("run "),s("code",[t._v("cargo new project_name")]),t._v(" where project_name is the name of the project."),s("br"),t._v("\n(In the example below, I have used 'tutorial1_window')")]),t._v(" "),s("h2",{attrs:{id:"the-code"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-code"}},[t._v("#")]),t._v(" The code")]),t._v(" "),s("p",[t._v("There's not much going on here yet, so I'm just going to post the code in full. Just paste this into your "),s("code",[t._v("lib.rs")]),t._v(" or equivalent.")]),t._v(" "),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("winit"),s("span",{pre:!0,attrs:{class:"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("event"),s("span",{pre:!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 namespace"}},[t._v("event_loop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EventLoop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("keyboard"),s("span",{pre:!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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"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("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowBuilder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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("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("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 namespace"}},[t._v("env_logger"),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 punctuation"}},[t._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(" event_loop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EventLoop")]),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(" window "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowBuilder")]),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("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("event_loop"),s("span",{pre:!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 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(" control_flow"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[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("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(" window"),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 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("KeyEvent")]),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 physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyCode")]),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(" control_flow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("}")]),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(")")]),s("span",{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("All this does is create a window and keep it open until the user closes it or presses escape. Next, we'll need a "),s("code",[t._v("main.rs")]),t._v(" to run the code. It's quite simple. It just imports "),s("code",[t._v("run()")]),t._v(" and, well, runs 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("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tutorial1_window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("run"),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 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(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("(Where 'tutorial1_window' is the name of the project you created with Cargo earlier)")]),t._v(" "),s("p",[t._v("If you only want to support desktops, that's all you have to do! In the next tutorial, we'll start using wgpu!")]),t._v(" "),s("h2",{attrs:{id:"added-support-for-the-web"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#added-support-for-the-web"}},[t._v("#")]),t._v(" Added support for the web")]),t._v(" "),s("p",[t._v("If I go through this tutorial about WebGPU and never talk about using it on the web, then I'd hardly call this tutorial complete. Fortunately, getting a wgpu application running in a browser is not too difficult once you get things set up.")]),t._v(" "),s("p",[t._v("Let's start with the changes we need to make 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("lib")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("crate-type")]),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('"cdylib"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rlib"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("These lines tell Cargo that we want to allow our crate to build a native Rust static library (rlib) and a C/C++ compatible library (cdylib). We need rlib if we want to run wgpu in a desktop environment. We need cdylib to create the Web Assembly that the browser will run.")]),t._v(" "),s("div",{staticClass:"note"},[s("h2",{attrs:{id:"web-assembly"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#web-assembly"}},[t._v("#")]),t._v(" Web Assembly")]),t._v(" "),s("p",[t._v("Web Assembly, i.e. WASM, is a binary format supported by most modern browsers that allows lower-level languages such as Rust to run on a web page. This allows us to write the bulk of our application in Rust and use a few lines of Javascript to get it running in a web browser.")])]),t._v(" "),s("p",[t._v("Now, all we need are some more dependencies that are specific to running in WASM:")]),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 comment"}},[t._v("# the other regular dependencies...")]),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('"22.0"')]),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.30"')]),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("p",[t._v("The "),s("a",{attrs:{href:"https://docs.rs/cfg-if",target:"_blank",rel:"noopener noreferrer"}},[t._v("cfg-if"),s("OutboundLink")],1),t._v(" crate adds a macro that makes using platform-specific code more manageable.")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("[target.'cfg(target_arch = \"wasm32\")'.dependencies]")]),t._v(" line tells Cargo to only include these dependencies if we are targeting the "),s("code",[t._v("wasm32")]),t._v(" architecture. The next few dependencies just make interfacing with JavaScript a lot easier.")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://docs.rs/console_error_panic_hook",target:"_blank",rel:"noopener noreferrer"}},[t._v("console_error_panic_hook"),s("OutboundLink")],1),t._v(" configures the "),s("code",[t._v("panic!")]),t._v(" macro to send errors to the javascript console. Without this, when you encounter panics, you'll be left in the dark about what caused them.")]),t._v(" "),s("li",[s("a",{attrs:{href:"https://docs.rs/console_log",target:"_blank",rel:"noopener noreferrer"}},[t._v("console_log"),s("OutboundLink")],1),t._v(" implements the "),s("a",{attrs:{href:"https://docs.rs/log",target:"_blank",rel:"noopener noreferrer"}},[t._v("log"),s("OutboundLink")],1),t._v(" API. It sends all logs to the javascript console. It can be configured to only send logs of a particular log level. This is also great for debugging.")]),t._v(" "),s("li",[t._v("We need to enable the WebGL feature on wgpu if we want to run on most current browsers. Support is in the works for using the WebGPU api directly, but that is only possible on experimental versions of browsers such as Firefox Nightly and Chrome Canary."),s("br"),t._v("\nYou're welcome to test this code on these browsers (and the wgpu devs would appreciate it as well), but for the sake of simplicity, I'm going to stick to using the WebGL feature until the WebGPU api gets to a more stable state."),s("br"),t._v("\nIf you want more details, check out the guide for compiling for the web on "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/wiki/Running-on-the-Web-with-WebGPU-and-WebGL",target:"_blank",rel:"noopener noreferrer"}},[t._v("wgpu's repo"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://docs.rs/wasm-bindgen",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen"),s("OutboundLink")],1),t._v(" is the most important dependency in this list. It's responsible for generating the boilerplate code that will tell the browser how to use our crate. It also allows us to expose methods in Rust that can be used in JavaScript and vice-versa."),s("br"),t._v("\nI won't get into the specifics of wasm-bindgen, so if you need a primer (or just a refresher), check out "),s("a",{attrs:{href:"https://rustwasm.github.io/wasm-bindgen/",target:"_blank",rel:"noopener noreferrer"}},[t._v("this"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://docs.rs/web-sys",target:"_blank",rel:"noopener noreferrer"}},[t._v("web-sys"),s("OutboundLink")],1),t._v(" is a crate with many methods and structures available in a normal javascript application: "),s("code",[t._v("get_element_by_id")]),t._v(", "),s("code",[t._v("append_child")]),t._v(". The features listed are only the bare minimum of what we need currently.")])]),t._v(" "),s("h2",{attrs:{id:"more-code"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#more-code"}},[t._v("#")]),t._v(" More code")]),t._v(" "),s("p",[t._v("First, we need to import "),s("code",[t._v("wasm-bindgen")]),t._v(" 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 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("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wasm_bindgen"),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("Next, we need to tell wasm-bindgen to run our "),s("code",[t._v("run()")]),t._v(" function when the WASM is loaded:")]),t._v(" "),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("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("// same as above for now...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Then, we need to toggle what logger we are using based on whether we are in WASM land or not. Add the following to the top of the run function, replacing the "),s("code",[t._v("env_logger::init()")]),t._v(" line:")]),t._v(" "),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("cfg_if"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),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 namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("panic"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_hook")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Box")]),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("console_error_panic_hook"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("hook"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"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("console_log"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init_with_level")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("log"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Level")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Warn")]),s("span",{pre:!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("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Couldn\'t initialize logger"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("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("env_logger"),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 punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 will set up "),s("code",[t._v("console_log")]),t._v(" and "),s("code",[t._v("console_error_panic_hook")]),t._v(" in a web build and will initialize "),s("code",[t._v("env_logger")]),t._v(" in a normal build. This is important as "),s("code",[t._v("env_logger")]),t._v(" doesn't support Web Assembly at the moment.")]),t._v(" "),s("p",[t._v("Next, after we create our event loop and window, we need to add a canvas to the HTML document that we will host our application:")]),t._v(" "),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(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 punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Winit prevents sizing with CSS, so we have to set")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the size manually when on web.")]),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("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 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 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("request_inner_size")]),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 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("450")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("400")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("web"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowExtWebSys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),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(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("and_then")]),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("win"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" win"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("document")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"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("and_then")]),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("doc"),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(" dst "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" doc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_element_by_id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm-example"')]),s("span",{pre:!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(" canvas "),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 class-name"}},[t._v("Element")]),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("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("canvas")]),s("span",{pre:!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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n dst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("append_child")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("canvas"),s("span",{pre:!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("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 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("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"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('"Couldn\'t append canvas to document body."')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!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("The "),s("code",[t._v('"wasm-example"')]),t._v(" id is specific to my project (aka. this tutorial). You can substitute this for whatever id you're using in your HTML. Alternatively, you could add the canvas directly to the "),s("code",[t._v("")]),t._v(" as they do in the wgpu repo. This part is ultimately up to you.")])]),t._v(" "),s("p",[t._v("That's all the web-specific code we need for now. The next thing we need to do is build the Web Assembly itself.")]),t._v(" "),s("h2",{attrs:{id:"wasm-pack"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#wasm-pack"}},[t._v("#")]),t._v(" Wasm Pack")]),t._v(" "),s("p",[t._v("Now you can build a wgpu application with just wasm-bindgen, but I ran into some issues doing that. For one, you need to install wasm-bindgen on your computer as well as include it as a dependency. The version you install as a dependency "),s("strong",[t._v("needs")]),t._v(" to exactly match the version you installed. Otherwise, your build will fail.")]),t._v(" "),s("p",[t._v("To get around this shortcoming and to make the lives of everyone reading this easier, I opted to add "),s("a",{attrs:{href:"https://rustwasm.github.io/docs/wasm-pack/",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-pack"),s("OutboundLink")],1),t._v(" to the mix. Wasm-pack handles installing the correct version of wasm-bindgen for you, and it supports building for different types of web targets as well: browser, NodeJS, and bundlers such as webpack.")]),t._v(" "),s("p",[t._v("To use wasm-pack, first, you need to "),s("a",{attrs:{href:"https://rustwasm.github.io/wasm-pack/installer/",target:"_blank",rel:"noopener noreferrer"}},[t._v("install it"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("Once you've done that, we can use it to build our crate. If you only have one crate in your project, you can just use "),s("code",[t._v("wasm-pack build")]),t._v(". If you're using a workspace, you'll have to specify what crate you want to build. Imagine your crate is a directory called "),s("code",[t._v("game")]),t._v(". You would then use:")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[t._v("wasm-pack build game\n")])])]),s("p",[t._v("Once wasm-pack is done building, you'll have a "),s("code",[t._v("pkg")]),t._v(" directory in the same directory as your crate. This has all the javascript code needed to run the WASM code. You'd then import the WASM module in javascript:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" init "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./pkg/game.js'")]),s("span",{pre:!0,attrs:{class:"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("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!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("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WASM Loaded"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),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 site uses "),s("a",{attrs:{href:"https://vuepress.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vuepress"),s("OutboundLink")],1),t._v(", so I load the WASM in a Vue component. How you handle your WASM will depend on what you want to do. If you want to check out how I'm doing things, take a look at "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/blob/master/docs/.vuepress/components/WasmExample.vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("this"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("If you intend to use your WASM module in a plain HTML website, you'll need to tell wasm-pack to target the web:")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[t._v("wasm-pack build "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--target")]),t._v(" web\n")])])]),s("p",[t._v("You'll then need to run the WASM code in an ES6 Module:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token doctype"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),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 tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("charset")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("UTF-8"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("http-equiv")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("X-UA-Compatible"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("IE=edge"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("viewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("width=device-width, initial-scale=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 tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Learn WGPU"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("canvas")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n ")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wasm-example"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" init "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pkg/pong.js"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),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 punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WASM Loaded"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])]),t._v(" "),s("p",[t._v("Press the button below, and you will see the code running!")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial1_window"}}),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.e7aa9e7e.js b/assets/js/56.5678f2bf.js similarity index 90% rename from assets/js/57.e7aa9e7e.js rename to assets/js/56.5678f2bf.js index f1965161a..534f78ecd 100644 --- a/assets/js/57.e7aa9e7e.js +++ b/assets/js/56.5678f2bf.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{451:function(s,t,i){"use strict";i.r(t);var e=i(8),n=Object(e.a)({},(function(){var s=this._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"sources"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sources"}},[this._v("#")]),this._v(" Sources")]),this._v(" "),s("ul",[s("li",[this._v("https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading")]),this._v(" "),s("li",[this._v("http://jimmiejohnsson84.me/pages/rendering_pbr.html")])])])}),[],!1,null,null,null);t.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{448:function(s,t,i){"use strict";i.r(t);var e=i(8),n=Object(e.a)({},(function(){var s=this._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"sources"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sources"}},[this._v("#")]),this._v(" Sources")]),this._v(" "),s("ul",[s("li",[this._v("https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading")]),this._v(" "),s("li",[this._v("http://jimmiejohnsson84.me/pages/rendering_pbr.html")])])])}),[],!1,null,null,null);t.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/56.f02db95f.js b/assets/js/56.f02db95f.js deleted file mode 100644 index 6623706df..000000000 --- a/assets/js/56.f02db95f.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{443:function(t,s,a){"use strict";a.r(s);var n=a(8),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:"dependencies-and-the-window"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dependencies-and-the-window"}},[t._v("#")]),t._v(" Dependencies and the window")]),t._v(" "),s("h2",{attrs:{id:"boring-i-know"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#boring-i-know"}},[t._v("#")]),t._v(" Boring, I know")]),t._v(" "),s("p",[t._v("Some of you reading this are very experienced with opening up windows in Rust and probably have your favorite windowing library, but this guide is designed for everybody, so it's something that we need to cover. Luckily, you don't need to read this if you know what you're doing. One thing that you do need to know is that whatever windowing solution you use needs to support the "),s("a",{attrs:{href:"https://github.com/rust-windowing/raw-window-handle",target:"_blank",rel:"noopener noreferrer"}},[t._v("raw-window-handle"),s("OutboundLink")],1),t._v(" crate.")]),t._v(" "),s("h2",{attrs:{id:"what-crates-are-we-using"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#what-crates-are-we-using"}},[t._v("#")]),t._v(" What crates are we using?")]),t._v(" "),s("p",[t._v("For the beginner stuff, we're going to keep things very simple. We'll add things as we go, but I've listed the relevant "),s("code",[t._v("Cargo.toml")]),t._v(" bits below.")]),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("winit")]),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.29"')]),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('"rwh_05"')]),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("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.19.3"')]),t._v("\n")])])]),s("h2",{attrs:{id:"using-rust-s-new-resolver"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-rust-s-new-resolver"}},[t._v("#")]),t._v(" Using Rust's new resolver")]),t._v(" "),s("p",[t._v("As of version 0.10, wgpu requires Cargo's "),s("a",{attrs:{href:"https://doc.rust-lang.org/cargo/reference/resolver.html#feature-resolver-version-2",target:"_blank",rel:"noopener noreferrer"}},[t._v("newest feature resolver"),s("OutboundLink")],1),t._v(", which is the default in the 2021 edition (any new project started with Rust version 1.56.0 or newer). However, if you are still using the 2018 edition, you must include "),s("code",[t._v('resolver = "2"')]),t._v(" in either the "),s("code",[t._v("[package]")]),t._v(" section of "),s("code",[t._v("Cargo.toml")]),t._v(" if you are working on a single crate or the "),s("code",[t._v("[workspace]")]),t._v(" section of the root "),s("code",[t._v("Cargo.toml")]),t._v(" in a workspace.")]),t._v(" "),s("h2",{attrs:{id:"env-logger"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#env-logger"}},[t._v("#")]),t._v(" env_logger")]),t._v(" "),s("p",[t._v("It is very important to enable logging via "),s("code",[t._v("env_logger::init();")]),t._v(".\nWhen wgpu hits any error, it panics with a generic message, while logging the real error via the log crate.\nThis means if you don't include "),s("code",[t._v("env_logger::init()")]),t._v(", wgpu will fail silently, leaving you very confused!"),s("br"),t._v("\n(This has been done in the code below)")]),t._v(" "),s("h2",{attrs:{id:"create-a-new-project"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#create-a-new-project"}},[t._v("#")]),t._v(" Create a new project")]),t._v(" "),s("p",[t._v("run "),s("code",[t._v("cargo new project_name")]),t._v(" where project_name is the name of the project."),s("br"),t._v("\n(In the example below, I have used 'tutorial1_window')")]),t._v(" "),s("h2",{attrs:{id:"the-code"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-code"}},[t._v("#")]),t._v(" The code")]),t._v(" "),s("p",[t._v("There's not much going on here yet, so I'm just going to post the code in full. Just paste this into your "),s("code",[t._v("lib.rs")]),t._v(" or equivalent.")]),t._v(" "),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("winit"),s("span",{pre:!0,attrs:{class:"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("event"),s("span",{pre:!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 namespace"}},[t._v("event_loop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EventLoop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("keyboard"),s("span",{pre:!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("KeyCode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"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("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowBuilder")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\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("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("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 namespace"}},[t._v("env_logger"),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 punctuation"}},[t._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(" event_loop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EventLoop")]),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(" window "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowBuilder")]),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("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("event_loop"),s("span",{pre:!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 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(" control_flow"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[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("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(" window"),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 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("KeyEvent")]),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 physical_key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Code")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyCode")]),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(" control_flow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"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("}")]),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(")")]),s("span",{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("All this does is create a window and keep it open until the user closes it or presses escape. Next, we'll need a "),s("code",[t._v("main.rs")]),t._v(" to run the code. It's quite simple. It just imports "),s("code",[t._v("run()")]),t._v(" and, well, runs 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("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tutorial1_window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("run"),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 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(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("(Where 'tutorial1_window' is the name of the project you created with Cargo earlier)")]),t._v(" "),s("p",[t._v("If you only want to support desktops, that's all you have to do! In the next tutorial, we'll start using wgpu!")]),t._v(" "),s("h2",{attrs:{id:"added-support-for-the-web"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#added-support-for-the-web"}},[t._v("#")]),t._v(" Added support for the web")]),t._v(" "),s("p",[t._v("If I go through this tutorial about WebGPU and never talk about using it on the web, then I'd hardly call this tutorial complete. Fortunately, getting a wgpu application running in a browser is not too difficult once you get things set up.")]),t._v(" "),s("p",[t._v("Let's start with the changes we need to make 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("lib")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token key property"}},[t._v("crate-type")]),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('"cdylib"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rlib"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("These lines tell Cargo that we want to allow our crate to build a native Rust static library (rlib) and a C/C++ compatible library (cdylib). We need rlib if we want to run wgpu in a desktop environment. We need cdylib to create the Web Assembly that the browser will run.")]),t._v(" "),s("div",{staticClass:"note"},[s("h2",{attrs:{id:"web-assembly"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#web-assembly"}},[t._v("#")]),t._v(" Web Assembly")]),t._v(" "),s("p",[t._v("Web Assembly, i.e. WASM, is a binary format supported by most modern browsers that allows lower-level languages such as Rust to run on a web page. This allows us to write the bulk of our application in Rust and use a few lines of Javascript to get it running in a web browser.")])]),t._v(" "),s("p",[t._v("Now, all we need are some more dependencies that are specific to running in WASM:")]),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 comment"}},[t._v("# the other regular dependencies...")]),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.19"')]),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.30"')]),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("p",[t._v("The "),s("a",{attrs:{href:"https://docs.rs/cfg-if",target:"_blank",rel:"noopener noreferrer"}},[t._v("cfg-if"),s("OutboundLink")],1),t._v(" crate adds a macro that makes using platform-specific code more manageable.")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("[target.'cfg(target_arch = \"wasm32\")'.dependencies]")]),t._v(" line tells Cargo to only include these dependencies if we are targeting the "),s("code",[t._v("wasm32")]),t._v(" architecture. The next few dependencies just make interfacing with JavaScript a lot easier.")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://docs.rs/console_error_panic_hook",target:"_blank",rel:"noopener noreferrer"}},[t._v("console_error_panic_hook"),s("OutboundLink")],1),t._v(" configures the "),s("code",[t._v("panic!")]),t._v(" macro to send errors to the javascript console. Without this, when you encounter panics, you'll be left in the dark about what caused them.")]),t._v(" "),s("li",[s("a",{attrs:{href:"https://docs.rs/console_log",target:"_blank",rel:"noopener noreferrer"}},[t._v("console_log"),s("OutboundLink")],1),t._v(" implements the "),s("a",{attrs:{href:"https://docs.rs/log",target:"_blank",rel:"noopener noreferrer"}},[t._v("log"),s("OutboundLink")],1),t._v(" API. It sends all logs to the javascript console. It can be configured to only send logs of a particular log level. This is also great for debugging.")]),t._v(" "),s("li",[t._v("We need to enable the WebGL feature on wgpu if we want to run on most current browsers. Support is in the works for using the WebGPU api directly, but that is only possible on experimental versions of browsers such as Firefox Nightly and Chrome Canary."),s("br"),t._v("\nYou're welcome to test this code on these browsers (and the wgpu devs would appreciate it as well), but for the sake of simplicity, I'm going to stick to using the WebGL feature until the WebGPU api gets to a more stable state."),s("br"),t._v("\nIf you want more details, check out the guide for compiling for the web on "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/wiki/Running-on-the-Web-with-WebGPU-and-WebGL",target:"_blank",rel:"noopener noreferrer"}},[t._v("wgpu's repo"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://docs.rs/wasm-bindgen",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen"),s("OutboundLink")],1),t._v(" is the most important dependency in this list. It's responsible for generating the boilerplate code that will tell the browser how to use our crate. It also allows us to expose methods in Rust that can be used in JavaScript and vice-versa."),s("br"),t._v("\nI won't get into the specifics of wasm-bindgen, so if you need a primer (or just a refresher), check out "),s("a",{attrs:{href:"https://rustwasm.github.io/wasm-bindgen/",target:"_blank",rel:"noopener noreferrer"}},[t._v("this"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://docs.rs/web-sys",target:"_blank",rel:"noopener noreferrer"}},[t._v("web-sys"),s("OutboundLink")],1),t._v(" is a crate with many methods and structures available in a normal javascript application: "),s("code",[t._v("get_element_by_id")]),t._v(", "),s("code",[t._v("append_child")]),t._v(". The features listed are only the bare minimum of what we need currently.")])]),t._v(" "),s("h2",{attrs:{id:"more-code"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#more-code"}},[t._v("#")]),t._v(" More code")]),t._v(" "),s("p",[t._v("First, we need to import "),s("code",[t._v("wasm-bindgen")]),t._v(" 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 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("use")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wasm_bindgen"),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("Next, we need to tell wasm-bindgen to run our "),s("code",[t._v("run()")]),t._v(" function when the WASM is loaded:")]),t._v(" "),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("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("// same as above for now...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Then, we need to toggle what logger we are using based on whether we are in WASM land or not. Add the following to the top of the run function, replacing the "),s("code",[t._v("env_logger::init()")]),t._v(" line:")]),t._v(" "),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("cfg_if"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),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 namespace"}},[t._v("std"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("panic"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_hook")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Box")]),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("console_error_panic_hook"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("hook"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"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("console_log"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init_with_level")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("log"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Level")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Warn")]),s("span",{pre:!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("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Couldn\'t initialize logger"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("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("env_logger"),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 punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 will set up "),s("code",[t._v("console_log")]),t._v(" and "),s("code",[t._v("console_error_panic_hook")]),t._v(" in a web build and will initialize "),s("code",[t._v("env_logger")]),t._v(" in a normal build. This is important as "),s("code",[t._v("env_logger")]),t._v(" doesn't support Web Assembly at the moment.")]),t._v(" "),s("p",[t._v("Next, after we create our event loop and window, we need to add a canvas to the HTML document that we will host our application:")]),t._v(" "),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(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 punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Winit prevents sizing with CSS, so we have to set")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the size manually when on web.")]),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("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 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 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("request_inner_size")]),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 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("450")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("400")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("winit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("platform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("web"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowExtWebSys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),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(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("and_then")]),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("win"),s("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" win"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("document")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"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("and_then")]),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("doc"),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(" dst "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" doc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_element_by_id")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm-example"')]),s("span",{pre:!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(" canvas "),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 class-name"}},[t._v("Element")]),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("window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("canvas")]),s("span",{pre:!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(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n dst"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("append_child")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("canvas"),s("span",{pre:!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("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 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("Some")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"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('"Couldn\'t append canvas to document body."')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!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("The "),s("code",[t._v('"wasm-example"')]),t._v(" id is specific to my project (aka. this tutorial). You can substitute this for whatever id you're using in your HTML. Alternatively, you could add the canvas directly to the "),s("code",[t._v("")]),t._v(" as they do in the wgpu repo. This part is ultimately up to you.")])]),t._v(" "),s("p",[t._v("That's all the web-specific code we need for now. The next thing we need to do is build the Web Assembly itself.")]),t._v(" "),s("h2",{attrs:{id:"wasm-pack"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#wasm-pack"}},[t._v("#")]),t._v(" Wasm Pack")]),t._v(" "),s("p",[t._v("Now you can build a wgpu application with just wasm-bindgen, but I ran into some issues doing that. For one, you need to install wasm-bindgen on your computer as well as include it as a dependency. The version you install as a dependency "),s("strong",[t._v("needs")]),t._v(" to exactly match the version you installed. Otherwise, your build will fail.")]),t._v(" "),s("p",[t._v("To get around this shortcoming and to make the lives of everyone reading this easier, I opted to add "),s("a",{attrs:{href:"https://rustwasm.github.io/docs/wasm-pack/",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-pack"),s("OutboundLink")],1),t._v(" to the mix. Wasm-pack handles installing the correct version of wasm-bindgen for you, and it supports building for different types of web targets as well: browser, NodeJS, and bundlers such as webpack.")]),t._v(" "),s("p",[t._v("To use wasm-pack, first, you need to "),s("a",{attrs:{href:"https://rustwasm.github.io/wasm-pack/installer/",target:"_blank",rel:"noopener noreferrer"}},[t._v("install it"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("Once you've done that, we can use it to build our crate. If you only have one crate in your project, you can just use "),s("code",[t._v("wasm-pack build")]),t._v(". If you're using a workspace, you'll have to specify what crate you want to build. Imagine your crate is a directory called "),s("code",[t._v("game")]),t._v(". You would then use:")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[t._v("wasm-pack build game\n")])])]),s("p",[t._v("Once wasm-pack is done building, you'll have a "),s("code",[t._v("pkg")]),t._v(" directory in the same directory as your crate. This has all the javascript code needed to run the WASM code. You'd then import the WASM module in javascript:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" init "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./pkg/game.js'")]),s("span",{pre:!0,attrs:{class:"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("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!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("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WASM Loaded"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),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 site uses "),s("a",{attrs:{href:"https://vuepress.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vuepress"),s("OutboundLink")],1),t._v(", so I load the WASM in a Vue component. How you handle your WASM will depend on what you want to do. If you want to check out how I'm doing things, take a look at "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/blob/master/docs/.vuepress/components/WasmExample.vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("this"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("div",{staticClass:"note"},[s("p",[t._v("If you intend to use your WASM module in a plain HTML website, you'll need to tell wasm-pack to target the web:")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[t._v("wasm-pack build "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("--target")]),t._v(" web\n")])])]),s("p",[t._v("You'll then need to run the WASM code in an ES6 Module:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token doctype"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),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 tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("charset")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("UTF-8"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("http-equiv")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("X-UA-Compatible"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("IE=edge"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("viewport"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("width=device-width, initial-scale=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 tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Learn WGPU"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("canvas")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n ")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wasm-example"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" init "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pkg/pong.js"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),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 punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[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 console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WASM Loaded"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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 tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])]),t._v(" "),s("p",[t._v("Press the button below, and you will see the code running!")]),t._v(" "),s("WasmExample",{attrs:{example:"tutorial1_window"}}),t._v(" "),s("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/58.62fec77f.js b/assets/js/57.9b87d90a.js similarity index 99% rename from assets/js/58.62fec77f.js rename to assets/js/57.9b87d90a.js index b46586de9..fe9f6bb2a 100644 --- a/assets/js/58.62fec77f.js +++ b/assets/js/57.9b87d90a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{457:function(t,a,s){"use strict";s.r(a);var e=s(8),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],{455:function(t,a,s){"use strict";s.r(a);var e=s(8),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.8015b796.js b/assets/js/58.838d81bd.js similarity index 99% rename from assets/js/59.8015b796.js rename to assets/js/58.838d81bd.js index c13ed7375..8a7c9f2d7 100644 --- a/assets/js/59.8015b796.js +++ b/assets/js/58.838d81bd.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{458:function(t,a,s){"use strict";s.r(a);var n=s(8),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-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-13"}},[t._v("#")]),t._v(" Update to 0.13!")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/blob/master/CHANGELOG.md#wgpu-013-2022-06-30",target:"_blank",rel:"noopener noreferrer"}},[t._v("WGPU Change Log"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("The change log above contains most of the details about what has changed about WGPU and therefore the tutorial. I will make a special mention about how to use "),a("code",[t._v("map_async()")]),t._v(" as that has changed. Previously "),a("code",[t._v("map_async")]),t._v(" returned a promise that you had to await before you could access a buffers contents. It now expects a "),a("code",[t._v("'static")]),t._v(" callback that takes the "),a("code",[t._v("Result")]),t._v(" of the mapping attempt as a parameter. This means that if we want to save a buffers context to an image instead of doing the following:")]),t._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[t._v("\n"),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(" buffer_slice "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),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(")")]),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(" mapping "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("MapMode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("Maintain")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n mapping"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),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(" data "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),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("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),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 class-name"}},[t._v("ImageBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),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(" buffer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),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 class-name"}},[t._v("Rgba")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),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 punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_raw")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),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 function"}},[t._v("unwrap")]),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 buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("save")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"image.png"')]),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 function"}},[t._v("unwrap")]),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 punctuation"}},[t._v("}")]),t._v("\noutput_buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),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("p",[t._v("We would do the following:")]),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 punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_slice "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),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(")")]),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(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rx"),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 namespace"}},[t._v("futures_intrusive"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("channel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("shared"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("oneshot_channel")]),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 buffer_slice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("MapMode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("result"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("send")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),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 function"}},[t._v("unwrap")]),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 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 device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("Maintain")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("receive")]),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(".")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),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(" data "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),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("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),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 class-name"}},[t._v("ImageBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),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(" buffer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),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 class-name"}},[t._v("Rgba")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),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 punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_raw")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),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 function"}},[t._v("unwrap")]),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 buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("save")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"image.png"')]),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 function"}},[t._v("unwrap")]),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 punctuation"}},[t._v("}")]),t._v("\noutput_buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),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("p",[t._v("You can explore the reasoning for the change to "),a("code",[t._v("map_async")]),t._v(" in "),a("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/pull/2698",target:"_blank",rel:"noopener noreferrer"}},[t._v("this PR"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("Another thing to note is that presentation modes need to match what the surface supports. You can get a list of supported modes from "),a("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Surface.html#method.get_supported_modes",target:"_blank",rel:"noopener noreferrer"}},[t._v("Surface::get_surface_modes()"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("As always, let me know if I missed anything in the migration process. You can open an issue/submit a PR on the "),a("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn Wgpu repo"),a("OutboundLink")],1),t._v("!")])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{454:function(t,a,s){"use strict";s.r(a);var n=s(8),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-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-13"}},[t._v("#")]),t._v(" Update to 0.13!")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/blob/master/CHANGELOG.md#wgpu-013-2022-06-30",target:"_blank",rel:"noopener noreferrer"}},[t._v("WGPU Change Log"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("The change log above contains most of the details about what has changed about WGPU and therefore the tutorial. I will make a special mention about how to use "),a("code",[t._v("map_async()")]),t._v(" as that has changed. Previously "),a("code",[t._v("map_async")]),t._v(" returned a promise that you had to await before you could access a buffers contents. It now expects a "),a("code",[t._v("'static")]),t._v(" callback that takes the "),a("code",[t._v("Result")]),t._v(" of the mapping attempt as a parameter. This means that if we want to save a buffers context to an image instead of doing the following:")]),t._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[t._v("\n"),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(" buffer_slice "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),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(")")]),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(" mapping "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("MapMode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("Maintain")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n mapping"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),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(" data "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),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("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),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 class-name"}},[t._v("ImageBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),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(" buffer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),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 class-name"}},[t._v("Rgba")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),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 punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_raw")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),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 function"}},[t._v("unwrap")]),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 buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("save")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"image.png"')]),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 function"}},[t._v("unwrap")]),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 punctuation"}},[t._v("}")]),t._v("\noutput_buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),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("p",[t._v("We would do the following:")]),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 punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_slice "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),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(")")]),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(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rx"),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 namespace"}},[t._v("futures_intrusive"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("channel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("shared"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("oneshot_channel")]),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 buffer_slice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("MapMode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("result"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("send")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),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 function"}},[t._v("unwrap")]),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 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 device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("Maintain")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("receive")]),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(".")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),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(" data "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),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("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),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 class-name"}},[t._v("ImageBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),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(" buffer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),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 class-name"}},[t._v("Rgba")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),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 punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_raw")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),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 function"}},[t._v("unwrap")]),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 buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("save")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"image.png"')]),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 function"}},[t._v("unwrap")]),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 punctuation"}},[t._v("}")]),t._v("\noutput_buffer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),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("p",[t._v("You can explore the reasoning for the change to "),a("code",[t._v("map_async")]),t._v(" in "),a("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/pull/2698",target:"_blank",rel:"noopener noreferrer"}},[t._v("this PR"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("Another thing to note is that presentation modes need to match what the surface supports. You can get a list of supported modes from "),a("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Surface.html#method.get_supported_modes",target:"_blank",rel:"noopener noreferrer"}},[t._v("Surface::get_surface_modes()"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("As always, let me know if I missed anything in the migration process. You can open an issue/submit a PR on the "),a("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn Wgpu repo"),a("OutboundLink")],1),t._v("!")])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/60.cf694c42.js b/assets/js/59.ec244c79.js similarity index 98% rename from assets/js/60.cf694c42.js rename to assets/js/59.ec244c79.js index 294e595c0..d43065cba 100644 --- a/assets/js/60.cf694c42.js +++ b/assets/js/59.ec244c79.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{459:function(t,a,s){"use strict";s.r(a);var n=s(8),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],{457:function(t,a,s){"use strict";s.r(a);var n=s(8),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/6.4fe3cb8c.js b/assets/js/6.68c1c02b.js similarity index 90% rename from assets/js/6.4fe3cb8c.js rename to assets/js/6.68c1c02b.js index 2a2904514..53040bcb4 100644 --- a/assets/js/6.4fe3cb8c.js +++ b/assets/js/6.68c1c02b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{435:function(t,e,s){"use strict";s.r(e);const o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."];var n={methods:{getMsg:()=>o[Math.floor(Math.random()*o.length)]}},h=s(8),i=Object(h.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"theme-container"},[t("div",{staticClass:"theme-default-content"},[t("h1",[this._v("404")]),this._v(" "),t("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),t("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{432:function(t,e,s){"use strict";s.r(e);const o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."];var n={methods:{getMsg:()=>o[Math.floor(Math.random()*o.length)]}},h=s(8),i=Object(h.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"theme-container"},[t("div",{staticClass:"theme-default-content"},[t("h1",[this._v("404")]),this._v(" "),t("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),t("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/61.e7cba371.js b/assets/js/60.c5674b46.js similarity index 99% rename from assets/js/61.e7cba371.js rename to assets/js/60.c5674b46.js index ece8d1a97..13a326968 100644 --- a/assets/js/61.e7cba371.js +++ b/assets/js/60.c5674b46.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{461:function(t,s,a){"use strict";a.r(s);var n=a(8),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],{456:function(t,s,a){"use strict";a.r(s);var n=a(8),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/62.df1647f8.js b/assets/js/61.fba9ec10.js similarity index 98% rename from assets/js/62.df1647f8.js rename to assets/js/61.fba9ec10.js index 24c651026..6f07156cf 100644 --- a/assets/js/62.df1647f8.js +++ b/assets/js/61.fba9ec10.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{460:function(t,s,n){"use strict";n.r(s);var a=n(8),e=Object(a.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-16"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-16"}},[t._v("#")]),t._v(" Update to 0.16")]),t._v(" "),s("p",[t._v("Very few changes here! We no longer need to use "),s("code",[t._v("NonZeroU32")]),t._v(" and the like, instead it will be an "),s("code",[t._v("Option")]),t._v(". This is mostly used in dealing with textures.")]),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 namespace"}},[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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// bytes_per_row: NonZeroU32::new(4 * dimensions.0),")]),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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// rows_per_image: NonZeroU32::new(dimensions.1),")]),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")])])]),s("p",[t._v("In other news WebGPU has been added to Chrome 113 and up! Currently the Linux version of Chrome beta isn't working and while it's working in Firefox, I'm going to hold off on switching to using that instead of the WebGL compatibility mode. If you mess around with WebGPU in browser check "),s("a",{attrs:{href:"https://caniuse.com/webgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://caniuse.com/webgpu"),s("OutboundLink")],1),t._v(" to see if your browser is supported and then remove the extra "),s("code",[t._v("wgpu")]),t._v(" line from the "),s("code",[t._v("[target.'cfg(target_arch = \"wasm32\")'.dependencies]")]),t._v(" section of "),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 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("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"')]),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 comment"}},[t._v('# wgpu = { version = "0.19", features = ["webgl"]}')]),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 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("No other changes need to be made to switch to using WebGPU in browser, so once the WebGPU samples at "),s("a",{attrs:{href:"https://webgpu.github.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://webgpu.github.io/"),s("OutboundLink")],1),t._v(" work in Chrome on Linux, I'll look into removing the "),s("code",[t._v("webgl")]),t._v(" feature.")]),t._v(" "),s("p",[t._v("That's all! As always let me know if I missed anything!")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{458:function(t,s,n){"use strict";n.r(s);var a=n(8),e=Object(a.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-16"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-16"}},[t._v("#")]),t._v(" Update to 0.16")]),t._v(" "),s("p",[t._v("Very few changes here! We no longer need to use "),s("code",[t._v("NonZeroU32")]),t._v(" and the like, instead it will be an "),s("code",[t._v("Option")]),t._v(". This is mostly used in dealing with textures.")]),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 namespace"}},[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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// bytes_per_row: NonZeroU32::new(4 * dimensions.0),")]),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 "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// rows_per_image: NonZeroU32::new(dimensions.1),")]),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")])])]),s("p",[t._v("In other news WebGPU has been added to Chrome 113 and up! Currently the Linux version of Chrome beta isn't working and while it's working in Firefox, I'm going to hold off on switching to using that instead of the WebGL compatibility mode. If you mess around with WebGPU in browser check "),s("a",{attrs:{href:"https://caniuse.com/webgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://caniuse.com/webgpu"),s("OutboundLink")],1),t._v(" to see if your browser is supported and then remove the extra "),s("code",[t._v("wgpu")]),t._v(" line from the "),s("code",[t._v("[target.'cfg(target_arch = \"wasm32\")'.dependencies]")]),t._v(" section of "),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 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("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"')]),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 comment"}},[t._v('# wgpu = { version = "22.0", features = ["webgl"]}')]),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 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("No other changes need to be made to switch to using WebGPU in browser, so once the WebGPU samples at "),s("a",{attrs:{href:"https://webgpu.github.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://webgpu.github.io/"),s("OutboundLink")],1),t._v(" work in Chrome on Linux, I'll look into removing the "),s("code",[t._v("webgl")]),t._v(" feature.")]),t._v(" "),s("p",[t._v("That's all! As always let me know if I missed anything!")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/63.7d4f0349.js b/assets/js/62.bbe72741.js similarity index 87% rename from assets/js/63.7d4f0349.js rename to assets/js/62.bbe72741.js index 13fe3e4b5..c50f931f5 100644 --- a/assets/js/63.7d4f0349.js +++ b/assets/js/62.bbe72741.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{462:function(t,s,e){"use strict";e.r(s);var a=e(8),o=Object(a.a)({},(function(){var t=this._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("h1",{attrs:{id:"update-to-0-17"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-17"}},[this._v("#")]),this._v(" Update to 0.17")]),this._v(" "),t("p",[this._v("No changes needed to the tutorial!")])])}),[],!1,null,null,null);s.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{459:function(t,s,e){"use strict";e.r(s);var a=e(8),o=Object(a.a)({},(function(){var t=this._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("h1",{attrs:{id:"update-to-0-17"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-17"}},[this._v("#")]),this._v(" Update to 0.17")]),this._v(" "),t("p",[this._v("No changes needed to the tutorial!")])])}),[],!1,null,null,null);s.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/64.b23bd44f.js b/assets/js/63.8e492a74.js similarity index 96% rename from assets/js/64.b23bd44f.js rename to assets/js/63.8e492a74.js index 00e66046a..3143a7e89 100644 --- a/assets/js/64.b23bd44f.js +++ b/assets/js/63.8e492a74.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{463:function(t,e,o){"use strict";o.r(e);var a=o(8),r=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"update-to-0-18-and-hdr-tutorial"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-18-and-hdr-tutorial"}},[t._v("#")]),t._v(" Update to 0.18 and HDR tutorial")]),t._v(" "),e("p",[t._v("First let's go over some of the changes that occurred:")]),t._v(" "),e("ol",[e("li",[e("code",[t._v("RenderPassDescriptor")]),t._v(" now have 2 new fields:\n"),e("code",[t._v("occlusion_query_set")]),t._v(" and, "),e("code",[t._v("timestamp_writes")]),t._v(". I'm\nsetting both to "),e("code",[t._v("None")]),t._v(" for now.")]),t._v(" "),e("li",[e("code",[t._v("ComputePassDescriptor")]),t._v(" now has a "),e("code",[t._v("timestamp_writes")]),t._v("\nfield.")]),t._v(" "),e("li",[e("code",[t._v("InstanceDescriptor")]),t._v(" now has some more fields, but I\nopted to just use "),e("code",[t._v("..Default::default()")]),t._v(" for all the\nfields other than "),e("code",[t._v("backends")]),t._v(".")])]),t._v(" "),e("h2",{attrs:{id:"hdr-tutorial"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#hdr-tutorial"}},[t._v("#")]),t._v(" HDR tutorial")]),t._v(" "),e("p",[t._v("I've been unsure how best to introduce compute shaders\nas they are a big part of what makes WebGPU special, but\nmost browsers don't support them at the moment. With Chrome\nrolling out support for WebGPU, I felt more confident\nwriting a tutorial for them.")]),t._v(" "),e("p",[t._v("Also, I'm been interested learning how to load HDR images\nfrom places like Polyhaven, so I decided to introduce\ncompute shaders by creating one that will load an HDR and\nconvert it to a Cubemap to be rendered.")]),t._v(" "),e("p",[t._v("You can check it out "),e("a",{attrs:{href:"../../intermediate/tutorial13-hdr"}},[t._v("here")]),t._v("!")])])}),[],!1,null,null,null);e.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{460:function(t,e,o){"use strict";o.r(e);var a=o(8),r=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"update-to-0-18-and-hdr-tutorial"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-18-and-hdr-tutorial"}},[t._v("#")]),t._v(" Update to 0.18 and HDR tutorial")]),t._v(" "),e("p",[t._v("First let's go over some of the changes that occurred:")]),t._v(" "),e("ol",[e("li",[e("code",[t._v("RenderPassDescriptor")]),t._v(" now have 2 new fields:\n"),e("code",[t._v("occlusion_query_set")]),t._v(" and, "),e("code",[t._v("timestamp_writes")]),t._v(". I'm\nsetting both to "),e("code",[t._v("None")]),t._v(" for now.")]),t._v(" "),e("li",[e("code",[t._v("ComputePassDescriptor")]),t._v(" now has a "),e("code",[t._v("timestamp_writes")]),t._v("\nfield.")]),t._v(" "),e("li",[e("code",[t._v("InstanceDescriptor")]),t._v(" now has some more fields, but I\nopted to just use "),e("code",[t._v("..Default::default()")]),t._v(" for all the\nfields other than "),e("code",[t._v("backends")]),t._v(".")])]),t._v(" "),e("h2",{attrs:{id:"hdr-tutorial"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#hdr-tutorial"}},[t._v("#")]),t._v(" HDR tutorial")]),t._v(" "),e("p",[t._v("I've been unsure how best to introduce compute shaders\nas they are a big part of what makes WebGPU special, but\nmost browsers don't support them at the moment. With Chrome\nrolling out support for WebGPU, I felt more confident\nwriting a tutorial for them.")]),t._v(" "),e("p",[t._v("Also, I'm been interested learning how to load HDR images\nfrom places like Polyhaven, so I decided to introduce\ncompute shaders by creating one that will load an HDR and\nconvert it to a Cubemap to be rendered.")]),t._v(" "),e("p",[t._v("You can check it out "),e("a",{attrs:{href:"../../intermediate/tutorial13-hdr"}},[t._v("here")]),t._v("!")])])}),[],!1,null,null,null);e.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/64.b63a8087.js b/assets/js/64.b63a8087.js new file mode 100644 index 000000000..5c38a7894 --- /dev/null +++ b/assets/js/64.b63a8087.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{461:function(e,o,t){"use strict";t.r(o);var s=t(8),i=Object(s.a)({},(function(){var e=this,o=e._self._c;return o("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[o("h1",{attrs:{id:"first-major-version-22-0"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#first-major-version-22-0"}},[e._v("#")]),e._v(" First Major Version! (22.0)")]),e._v(" "),o("p",[e._v("Theres only a few things here. First all the shader related config\nstructs now have a "),o("code",[e._v("compilation_options")]),e._v(" field. For now I'm just leaving\nit as "),o("code",[e._v("Default::default()")]),e._v(", but if you have specific compilation\nneeds it's there for you.")]),e._v(" "),o("p",[e._v("The next thing is "),o("code",[e._v("RenderPipelineDescriptor")]),e._v(" and "),o("code",[e._v("ComputePipelineDescriptor")]),e._v("\nnow have a "),o("code",[e._v("cache")]),e._v(" field. This allows you to supply a cache to use during\nshader compilation. This is only really useful for Android devices as most\ndesktop hardware/drivers provide caching. I've left it as "),o("code",[e._v("None")]),e._v(" for now.")]),e._v(" "),o("p",[o("code",[e._v("DeviceDescriptor")]),e._v(" now has a "),o("code",[e._v("memory_hint")]),e._v(" field. You can use this to ask\nthe gpu to prioritize performance, memory usage, or allow you to request\na custom memory block size. These are just hints though and the hardware\nhas the final say in how to do things. I've left this as "),o("code",[e._v("Default::default()")]),e._v("\nfor now.")])])}),[],!1,null,null,null);o.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/65.6a397c3e.js b/assets/js/65.18d6ab1e.js similarity index 92% rename from assets/js/65.6a397c3e.js rename to assets/js/65.18d6ab1e.js index dff20de5d..a2727423d 100644 --- a/assets/js/65.6a397c3e.js +++ b/assets/js/65.18d6ab1e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[65],{464:function(e,t,o){"use strict";o.r(t);var s=o(8),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([[65],{463:function(e,t,o){"use strict";o.r(t);var s=o(8),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.6a7583a2.js b/assets/js/66.d9e6c10a.js similarity index 99% rename from assets/js/66.6a7583a2.js rename to assets/js/66.d9e6c10a.js index bdd74819d..20cea81b1 100644 --- a/assets/js/66.6a7583a2.js +++ b/assets/js/66.d9e6c10a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{466:function(t,e,s){"use strict";s.r(e);var a=s(8),n=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"memory-layout-in-wgsl"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#memory-layout-in-wgsl"}},[t._v("#")]),t._v(" Memory Layout in WGSL")]),t._v(" "),e("div",{staticClass:"warn"},[e("p",[t._v("This page is currently being reworked. I want to understand the topics a bit better, but as 0.12 is out I want to release what I have for now.")])]),t._v(" "),e("h2",{attrs:{id:"alignment-of-vertex-and-index-buffers"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#alignment-of-vertex-and-index-buffers"}},[t._v("#")]),t._v(" Alignment of vertex and index buffers")]),t._v(" "),e("p",[t._v("Vertex buffers require defining a "),e("code",[t._v("VertexBufferLayout")]),t._v(", so the memory alignment is whatever you tell WebGPU it should be. This can be really convenient for keeping down memory usage on the GPU.")]),t._v(" "),e("p",[t._v("The Index Buffer uses the alignment of whatever primitive type you specify via the "),e("code",[t._v("IndexFormat")]),t._v(" you pass into "),e("code",[t._v("RenderEncoder::set_index_buffer()")]),t._v(".")]),t._v(" "),e("h2",{attrs:{id:"alignment-of-uniform-and-storage-buffers"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#alignment-of-uniform-and-storage-buffers"}},[t._v("#")]),t._v(" Alignment of Uniform and Storage buffers")]),t._v(" "),e("p",[t._v("GPUs are designed to process thousands of pixels in parallel. In order to achieve this, some sacrifices had to be made. Graphics hardware likes to have all the bytes you intend on processing aligned by powers of 2. The exact specifics of why this is are beyond my level of knowledge, but it's important to know so that you can troubleshoot why your shaders aren't working.")]),t._v(" "),e("p",[t._v("Let's take a look at the following table:")]),t._v(" "),e("hr"),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Alignment in Bytes")]),t._v(" "),e("th",[t._v("Size in Bytes")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("scalar (i32, u32, f32)")]),t._v(" "),e("td",[t._v("4")]),t._v(" "),e("td",[t._v("4")])]),t._v(" "),e("tr",[e("td",[t._v("vec2")]),t._v(" "),e("td",[t._v("8")]),t._v(" "),e("td",[t._v("8")])]),t._v(" "),e("tr",[e("td",[t._v("vec3")]),t._v(" "),e("td",[e("strong",[t._v("16")])]),t._v(" "),e("td",[t._v("12")])]),t._v(" "),e("tr",[e("td",[t._v("vec4")]),t._v(" "),e("td",[t._v("16")]),t._v(" "),e("td",[t._v("16")])])])]),t._v(" "),e("p",[t._v("You can see for "),e("code",[t._v("vec3")]),t._v(" the alignment is the next power of 2 from the size, 16. This can catch beginners (and even veterans) off guard as it's not the most intuitive. This becomes especially important when we start laying out structs. Take the light struct from the "),e("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/#seeing-the-light"}},[t._v("lighting tutorial")]),t._v(":")],1),t._v(" "),e("p",[t._v("You can see the full table of the alignments in section "),e("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#alignment-and-size",target:"_blank",rel:"noopener noreferrer"}},[t._v("4.3.7.1 of the WGSL spec"),e("OutboundLink")],1)]),t._v(" "),e("div",{staticClass:"language-wgsl extra-class"},[e("pre",{pre:!0,attrs:{class:"language-wgsl"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Light")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),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("So what's the alignment of this struct? Your first guess would be that it's the sum of the alignments of the individual fields. That might make sense if we were in Rust-land, but in shader-land, it's a little more involved. The alignment for a given struct is given by the following equation:")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("// S is the struct in question\n// M is a member of the struct\nAlignOf(S) = max(AlignOfMember(S, M1), ... , AlignOfMember(S, Mn))\n")])])]),e("p",[t._v("Basically, the alignment of the struct is the maximum of the alignments of the members of the struct. This means that:")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("AlignOf(Light) \n = max(AlignOfMember(Light, position), AlignOfMember(Light, color))\n = max(16, 16)\n = 16\n")])])]),e("p",[t._v("This is why the "),e("code",[t._v("LightUniform")]),t._v(" has those padding fields. WGPU won't accept it if the data is not aligned correctly.")]),t._v(" "),e("h2",{attrs:{id:"how-to-deal-with-alignment-issues"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#how-to-deal-with-alignment-issues"}},[t._v("#")]),t._v(" How to deal with alignment issues")]),t._v(" "),e("p",[t._v("In general, 16 is the max alignment you'll see. In that case, you might think that we should be able to do something like the following:")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C, align(16))]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("LightUniform")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),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("But this won't compile. The "),e("a",{attrs:{href:"https://docs.rs/bytemuck/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck crate"),e("OutboundLink")],1),t._v(" doesn't work with structs with implicit padding bytes. Rust can't guarantee that the memory between the fields has been initialized properly. This gave me an error when I tried it:")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("error[E0512]: cannot transmute between types of different sizes, or dependently-sized types\n --\x3e code/intermediate/tutorial10-lighting/src/main.rs:246:8\n |\n246 | struct LightUniform {\n | ^^^^^^^^^^^^\n |\n = note: source type: `LightUniform` (256 bits)\n = note: target type: `_::{closure#0}::TypeWithoutPadding` (192 bits)\n")])])]),e("h2",{attrs:{id:"additional-resources"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#additional-resources"}},[t._v("#")]),t._v(" Additional resources")]),t._v(" "),e("p",[t._v("If you're looking for more information check out the "),e("a",{attrs:{href:"https://gist.github.com/teoxoy/936891c16c2a3d1c3c5e7204ac6cd76c",target:"_blank",rel:"noopener noreferrer"}},[t._v("write-up"),e("OutboundLink")],1),t._v(" by @teoxoy.")])])}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{465:function(t,e,s){"use strict";s.r(e);var a=s(8),n=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"memory-layout-in-wgsl"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#memory-layout-in-wgsl"}},[t._v("#")]),t._v(" Memory Layout in WGSL")]),t._v(" "),e("div",{staticClass:"warn"},[e("p",[t._v("This page is currently being reworked. I want to understand the topics a bit better, but as 0.12 is out I want to release what I have for now.")])]),t._v(" "),e("h2",{attrs:{id:"alignment-of-vertex-and-index-buffers"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#alignment-of-vertex-and-index-buffers"}},[t._v("#")]),t._v(" Alignment of vertex and index buffers")]),t._v(" "),e("p",[t._v("Vertex buffers require defining a "),e("code",[t._v("VertexBufferLayout")]),t._v(", so the memory alignment is whatever you tell WebGPU it should be. This can be really convenient for keeping down memory usage on the GPU.")]),t._v(" "),e("p",[t._v("The Index Buffer uses the alignment of whatever primitive type you specify via the "),e("code",[t._v("IndexFormat")]),t._v(" you pass into "),e("code",[t._v("RenderEncoder::set_index_buffer()")]),t._v(".")]),t._v(" "),e("h2",{attrs:{id:"alignment-of-uniform-and-storage-buffers"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#alignment-of-uniform-and-storage-buffers"}},[t._v("#")]),t._v(" Alignment of Uniform and Storage buffers")]),t._v(" "),e("p",[t._v("GPUs are designed to process thousands of pixels in parallel. In order to achieve this, some sacrifices had to be made. Graphics hardware likes to have all the bytes you intend on processing aligned by powers of 2. The exact specifics of why this is are beyond my level of knowledge, but it's important to know so that you can troubleshoot why your shaders aren't working.")]),t._v(" "),e("p",[t._v("Let's take a look at the following table:")]),t._v(" "),e("hr"),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Type")]),t._v(" "),e("th",[t._v("Alignment in Bytes")]),t._v(" "),e("th",[t._v("Size in Bytes")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("scalar (i32, u32, f32)")]),t._v(" "),e("td",[t._v("4")]),t._v(" "),e("td",[t._v("4")])]),t._v(" "),e("tr",[e("td",[t._v("vec2")]),t._v(" "),e("td",[t._v("8")]),t._v(" "),e("td",[t._v("8")])]),t._v(" "),e("tr",[e("td",[t._v("vec3")]),t._v(" "),e("td",[e("strong",[t._v("16")])]),t._v(" "),e("td",[t._v("12")])]),t._v(" "),e("tr",[e("td",[t._v("vec4")]),t._v(" "),e("td",[t._v("16")]),t._v(" "),e("td",[t._v("16")])])])]),t._v(" "),e("p",[t._v("You can see for "),e("code",[t._v("vec3")]),t._v(" the alignment is the next power of 2 from the size, 16. This can catch beginners (and even veterans) off guard as it's not the most intuitive. This becomes especially important when we start laying out structs. Take the light struct from the "),e("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/#seeing-the-light"}},[t._v("lighting tutorial")]),t._v(":")],1),t._v(" "),e("p",[t._v("You can see the full table of the alignments in section "),e("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#alignment-and-size",target:"_blank",rel:"noopener noreferrer"}},[t._v("4.3.7.1 of the WGSL spec"),e("OutboundLink")],1)]),t._v(" "),e("div",{staticClass:"language-wgsl extra-class"},[e("pre",{pre:!0,attrs:{class:"language-wgsl"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Light")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("vec3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("f32")]),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("So what's the alignment of this struct? Your first guess would be that it's the sum of the alignments of the individual fields. That might make sense if we were in Rust-land, but in shader-land, it's a little more involved. The alignment for a given struct is given by the following equation:")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("// S is the struct in question\n// M is a member of the struct\nAlignOf(S) = max(AlignOfMember(S, M1), ... , AlignOfMember(S, Mn))\n")])])]),e("p",[t._v("Basically, the alignment of the struct is the maximum of the alignments of the members of the struct. This means that:")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("AlignOf(Light) \n = max(AlignOfMember(Light, position), AlignOfMember(Light, color))\n = max(16, 16)\n = 16\n")])])]),e("p",[t._v("This is why the "),e("code",[t._v("LightUniform")]),t._v(" has those padding fields. WGPU won't accept it if the data is not aligned correctly.")]),t._v(" "),e("h2",{attrs:{id:"how-to-deal-with-alignment-issues"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#how-to-deal-with-alignment-issues"}},[t._v("#")]),t._v(" How to deal with alignment issues")]),t._v(" "),e("p",[t._v("In general, 16 is the max alignment you'll see. In that case, you might think that we should be able to do something like the following:")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C, align(16))]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("LightUniform")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),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("But this won't compile. The "),e("a",{attrs:{href:"https://docs.rs/bytemuck/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck crate"),e("OutboundLink")],1),t._v(" doesn't work with structs with implicit padding bytes. Rust can't guarantee that the memory between the fields has been initialized properly. This gave me an error when I tried it:")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("error[E0512]: cannot transmute between types of different sizes, or dependently-sized types\n --\x3e code/intermediate/tutorial10-lighting/src/main.rs:246:8\n |\n246 | struct LightUniform {\n | ^^^^^^^^^^^^\n |\n = note: source type: `LightUniform` (256 bits)\n = note: target type: `_::{closure#0}::TypeWithoutPadding` (192 bits)\n")])])]),e("h2",{attrs:{id:"additional-resources"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#additional-resources"}},[t._v("#")]),t._v(" Additional resources")]),t._v(" "),e("p",[t._v("If you're looking for more information check out the "),e("a",{attrs:{href:"https://gist.github.com/teoxoy/936891c16c2a3d1c3c5e7204ac6cd76c",target:"_blank",rel:"noopener noreferrer"}},[t._v("write-up"),e("OutboundLink")],1),t._v(" by @teoxoy.")])])}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/67.3403ab6a.js b/assets/js/67.3b39d5e4.js similarity index 99% rename from assets/js/67.3403ab6a.js rename to assets/js/67.3b39d5e4.js index cc7e0d102..8a035fa91 100644 --- a/assets/js/67.3403ab6a.js +++ b/assets/js/67.3b39d5e4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[67],{470:function(t,s,a){"use strict";a.r(s);var n=a(8),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([[67],{468:function(t,s,a){"use strict";a.r(s);var n=a(8),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/68.19d956bf.js b/assets/js/68.7496eb73.js similarity index 87% rename from assets/js/68.19d956bf.js rename to assets/js/68.7496eb73.js index 982d50d87..0ad21511c 100644 --- a/assets/js/68.19d956bf.js +++ b/assets/js/68.7496eb73.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[68],{474:function(t,s,n){"use strict";n.r(s);var o=n(8),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([[68],{471:function(t,s,n){"use strict";n.r(s);var o=n(8),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/69.efbcae63.js b/assets/js/69.868e8c91.js similarity index 96% rename from assets/js/69.efbcae63.js rename to assets/js/69.868e8c91.js index ff1322841..c37848775 100644 --- a/assets/js/69.efbcae63.js +++ b/assets/js/69.868e8c91.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{473:function(t,r,i){"use strict";i.r(r);var e=i(8),a=Object(e.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"topics-covered"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#topics-covered"}},[t._v("#")]),t._v(" Topics Covered")]),t._v(" "),r("p",[t._v("Here's a list of all the topics covered in this tutorial for people\nwho are looking for a specific thing!")]),t._v(" "),r("h2",{attrs:{id:"basics"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#basics"}},[t._v("#")]),t._v(" Basics")]),t._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"/beginner/tutorial3-pipeline"}},[t._v("Render Pipelines")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial4-buffer"}},[t._v("Vertex Buffers")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial5-textures"}},[t._v("Texturing")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial6-uniforms"}},[t._v("Uniforms")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial8-depth"}},[t._v("Depth Buffer")])])]),t._v(" "),r("h2",{attrs:{id:"lighting"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#lighting"}},[t._v("#")]),t._v(" Lighting")]),t._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"/intermediate/tutorial10-lighting"}},[t._v("Blinn Phong")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/intermediate/tutorial11-normals"}},[t._v("Normal Mapping")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/intermediate/tutorial13-hdr"}},[t._v("High Dynamic Range (HDR)")])])]),t._v(" "),r("h2",{attrs:{id:"misc"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#misc"}},[t._v("#")]),t._v(" Misc")]),t._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"/todo"}},[t._v("Mipmapping")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial7-instancing"}},[t._v("Instancing")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial9-models"}},[t._v("OBJ Loading")])])])])}),[],!1,null,null,null);r.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{472:function(t,r,i){"use strict";i.r(r);var e=i(8),a=Object(e.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"topics-covered"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#topics-covered"}},[t._v("#")]),t._v(" Topics Covered")]),t._v(" "),r("p",[t._v("Here's a list of all the topics covered in this tutorial for people\nwho are looking for a specific thing!")]),t._v(" "),r("h2",{attrs:{id:"basics"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#basics"}},[t._v("#")]),t._v(" Basics")]),t._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"/beginner/tutorial3-pipeline"}},[t._v("Render Pipelines")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial4-buffer"}},[t._v("Vertex Buffers")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial5-textures"}},[t._v("Texturing")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial6-uniforms"}},[t._v("Uniforms")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial8-depth"}},[t._v("Depth Buffer")])])]),t._v(" "),r("h2",{attrs:{id:"lighting"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#lighting"}},[t._v("#")]),t._v(" Lighting")]),t._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"/intermediate/tutorial10-lighting"}},[t._v("Blinn Phong")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/intermediate/tutorial11-normals"}},[t._v("Normal Mapping")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/intermediate/tutorial13-hdr"}},[t._v("High Dynamic Range (HDR)")])])]),t._v(" "),r("h2",{attrs:{id:"misc"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#misc"}},[t._v("#")]),t._v(" Misc")]),t._v(" "),r("ul",[r("li",[r("a",{attrs:{href:"/todo"}},[t._v("Mipmapping")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial7-instancing"}},[t._v("Instancing")])]),t._v(" "),r("li",[r("a",{attrs:{href:"/beginner/tutorial9-models"}},[t._v("OBJ Loading")])])])])}),[],!1,null,null,null);r.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/9.a663a9a2.js b/assets/js/9.8d522d7b.js similarity index 84% rename from assets/js/9.a663a9a2.js rename to assets/js/9.8d522d7b.js index b93f16024..5508817af 100644 --- a/assets/js/9.a663a9a2.js +++ b/assets/js/9.8d522d7b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[9,4,11,12,22,40,46],{258:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return r})),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 m}));n(91);const i=/#.*$/,s=/\.(md|html)$/,r=/\/$/,a=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function o(t){return decodeURI(t).replace(i,"").replace(s,"")}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(i),n=e?e[0]:"",s=o(t);return r.test(s)?t:s+".html"+n}function h(t,e){const n=t.hash,s=function(t){const e=t.match(i);if(e)return e[0]}(e);if(s&&n!==s)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 i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const s=e.split("/");n&&s[s.length-1]||s.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 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"})}},259:function(t,e,n){},272:function(t,e,n){"use strict";n.r(e);var i=n(258),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(8),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},273: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(274),n(8)),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},274:function(t,e,n){"use strict";n(259)},275:function(t,e,n){},276:function(t,e,n){},277:function(t,e,n){},278:function(t,e,n){},279:function(t,e,n){"use strict";n(275)},280:function(t,e,n){"use strict";n(276)},282:function(t,e,n){"use strict";n.r(e);var i=n(292),s=n(284),r=n(258);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(8),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},283:function(t,e,n){"use strict";n.r(e);var i=n(272),s=n(273),r={components:{NavLink:i.default,DropdownTransition:s.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},a=(n(279),n(8)),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},284:function(t,e,n){"use strict";n.r(e);var i=n(258);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(280),n(8)),l=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=l.exports},286:function(t,e,n){"use strict";n(277)},289:function(t,e,n){"use strict";n(278)},290:function(t,e,n){},291:function(t,e,n){"use strict";n.r(e);var i=n(283),s=n(258),r={components:{NavLink:n(272).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"})}},258:function(t,e,n){},259:function(t,e,n){"use strict";n.r(e);var i=n(257),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(8),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},272: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(273),n(8)),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},273:function(t,e,n){"use strict";n(258)},274:function(t,e,n){},275:function(t,e,n){},276:function(t,e,n){},277:function(t,e,n){},278:function(t,e,n){"use strict";n(274)},279:function(t,e,n){"use strict";n(275)},281:function(t,e,n){"use strict";n.r(e);var i=n(291),s=n(283),r=n(257);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(8),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},282:function(t,e,n){"use strict";n.r(e);var i=n(259),s=n(272),r={components:{NavLink:i.default,DropdownTransition:s.default},data:()=>({open:!1}),props:{item:{required:!0}},methods:{toggle(){this.open=!this.open}}},a=(n(278),n(8)),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},283:function(t,e,n){"use strict";n.r(e);var i=n(257);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(279),n(8)),l=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=l.exports},285:function(t,e,n){"use strict";n(276)},288:function(t,e,n){"use strict";n(277)},289:function(t,e,n){},290:function(t,e,n){"use strict";n.r(e);var i=n(282),s=n(257),r={components:{NavLink:n(259).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||r<0||x&&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 x?s(r,o-(e-i)):r}(e))}function y(e){return f=void 0,w&&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(x)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=(x="maxWait"in r)?b(g(r.maxWait)||0,t):o,w="trailing"in r?!!r.trailing:w),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(102);e.exports=function(e){return n(e.length)}},function(e,t,r){"use strict";var n=r(0),_=r(52).f,o=r(12),u=r(98),f=r(36),c=r(63),i=r(123);e.exports=function(e,t){var r,a,b,s,d,p=e.target,g=e.global,x=e.stat;if(r=g?n:x?n[p]||f(p,{}):n[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+(x?".":"#")+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(33),_=Object;e.exports=function(e){return _(n(e))}},function(e,t,r){"use strict";var n=r(1),_=r(97),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(29),_=Function.prototype.call;e.exports=n?_.bind(_):function(){return _.apply(_,arguments)}},function(e,t,r){"use strict";var n=r(3);e.exports=!n((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")}))},function(e,t,r){"use strict";var n=r(0),_=r(58),o=r(9),u=r(50),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";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(33);e.exports=function(e){return n(_(e))}},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";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(59),_=r(0),o=r(36),u=e.exports=_["__core-js_shared__"]||o("__core-js_shared__",{});(u.versions||(u.versions=[])).push({version:"3.37.1",mode:n?"pure":"global",copyright:"© 2014-2024 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.37.1/LICENSE",source:"https://github.com/zloirock/core-js"})},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){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(6),"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(7),_=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(120);e.exports=function(e){var t=+e;return t!=t||0===t?0:n(t)}},function(e,t,r){"use strict";var n=r(2),_=r(3),o=r(15),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(2);e.exports=n({}.isPrototypeOf)},function(e,t,r){"use strict";var n,_,o=r(0),u=r(107),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(2),_=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(94),_=r(5),o=r(33),u=r(128);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 o(r),u(n),_(r)?(t?e(r,n):r.__proto__=n,r):r}}():void 0)},function(e,t,r){"use strict";var n=r(4),_=r(28),o=r(106),u=r(31),f=r(32),c=r(54),i=r(9),a=r(60),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";e.exports=function(e){return null==e}},function(e,t,r){"use strict";var n=r(96),_=r(55);e.exports=function(e){var t=n(e,"string");return _(t)?t:t+""}},function(e,t,r){"use strict";var n=r(34),_=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(49),_=r(3),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=r(35);e.exports=function(e,t){return n[e]||(n[e]=t||{})}},function(e,t,r){"use strict";e.exports=!1},function(e,t,r){"use strict";var n=r(4),_=r(3),o=r(110);e.exports=!n&&!_((function(){return 7!==Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}))},function(e,t,r){"use strict";var n=r(5),_=String,o=TypeError;e.exports=function(e){if(n(e))return e;throw new o(_(e)+" is not an object")}},function(e,t,r){"use strict";e.exports={}},function(e,t,r){"use strict";var n=r(9),_=r(115),o=r(52),u=r(16);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,x=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;u0?_(t,9007199254740991):0}},function(e,t,r){var n=r(83);e.exports=function(e,t,r){var _=null==e?void 0:n(e,t);return void 0===_?r:_}},function(e,t,r){e.exports=r(243)},function(e,t,r){"use strict";var n=r(25),_=r(124).left,o=r(125),u=r(49);n({target:"Array",proto:!0,forced:!r(93)&&u>79&&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(28),_=r(1),o=r(5),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(5),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(3);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(9),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(2),_=r(1),o=r(35),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(34),_=r(2),o=r(116),u=r(122),f=r(61),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(117),_=r(121).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,_)}},function(e,t,r){"use strict";var n=r(2),_=r(9),o=r(32),u=r(118).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(119),o=r(24),u=function(e){return function(t,r,u){var f=n(t),c=o(f);if(0===c)return!e&&-1;var i,a=_(u,c);if(e&&r!=r){for(;c>a;)if((i=f[a++])!=i)return!0}else for(;c>a;a++)if((e||a in f)&&f[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";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(3),_=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(26),o=r(47),u=r(24),f=TypeError,c="Reduce of empty array with no initial value",i=function(e){return function(t,r,i,a){var b=_(t),s=o(b),d=u(b);if(n(r),0===d&&i<2)throw new f(c);var p=e?d-1:0,g=e?-1:1;if(i<2)for(;;){if(p in s){a=s[p],p+=g;break}if(p+=g,e?p<0:d<=p)throw new f(c)}for(;e?p>=0:d>p;p+=g)p in s&&(a=r(a,s[p],p,b));return a}};e.exports={left:i(!1),right:i(!0)}},function(e,t,r){"use strict";var n=r(3);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(29),_=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(34),_=r(9),o=r(12),u=r(48),f=r(51),c=r(63),i=r(130),a=r(131),b=r(132),s=r(135),d=r(136),p=r(4),g=r(59);e.exports=function(e,t,r,x){var w=x?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(x?t:e,void 0),n=x?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>w&&s(n,arguments[w]),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(129),_=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(5);e.exports=function(e){return n(e)||null===e}},function(e,t,r){"use strict";var n=r(16).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(5),o=r(51);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(133);e.exports=function(e,t){return void 0===e?arguments.length<2?"":t:n(e)}},function(e,t,r){"use strict";var n=r(95),_=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(30)("toStringTag")]="z",e.exports="[object z]"===String(n)},function(e,t,r){"use strict";var n=r(5),_=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(137),o=r(138),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(2),_=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(3),_=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){"use strict";var n=r(4),_=r(140),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(15);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){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(7),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(7),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(6)["__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 x(e){return null==e?"":Array.isArray(e)||s(e)&&e.toString===b?JSON.stringify(e,w,2):String(e)}function w(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 k(e){var t=Object.create(null);return function(r){return t[r]||(t[r]=e(r))}}var P=/-(\w)/g,j=k((function(e){return e.replace(P,(function(e,t){return t?t.toUpperCase():""}))})),T=k((function(e){return e.charAt(0).toUpperCase()+e.slice(1)})),B=/\B([A-Z])/g,I=k((function(e){return e.replace(B,"-$1").toLowerCase()}));var C=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 A(e,t){t=t||0;for(var r=e.length-t,n=new Array(r);r--;)n[r]=e[r+t];return n}function D(e,t){for(var r in t)e[r]=t[r];return e}function E(e){for(var t={},r=0;r0,Z=X&&X.indexOf("edge/")>0;X&&X.indexOf("android");var ee=X&&/iphone|ipad|ipod|ios/.test(X);X&&/chrome\/\d+/.test(X),X&&/phantomjs/.test(X);var te,re=X&&X.match(/firefox\/(\d+)/),ne={}.watch,_e=!1;if(H)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=!H&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),te},fe=H&&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 xe(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 we=0,le=[],he=function(){function e(){this._pending=!1,this.id=we++,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&&(Xe((i=e(i,"".concat(r||"","_").concat(n)))[0])&&Xe(b)&&(s[a]=ge(b.text+i[0].text),i.shift()),s.push.apply(s,i)):c(i)?Xe(b)?s[a]=ge(b.text+i):""!==i&&s.push(ge(i)):Xe(i)&&Xe(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 Xe(e){return u(e)&&u(e.text)&&!1===e.isComment}function Ye(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]=xt(e,r,i,t[i]))}else o={};for(var a in r)a in o||(o[a]=wt(r,a));return t&&Object.isExtensible(t)&&(t._normalized=o),N(o,"$stable",f),N(o,"$key",c),N(o,"$hasNormal",u),o}function xt(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]:He(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 wt(e,t){return function(){return e[t]}}function lt(e){return{get attrs(){if(!e._attrsProxy){var t=e._attrsProxy={};N(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:C(e.$emit,e),expose:function(t){t&&Object.keys(t).forEach((function(r){return Ge(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 kt(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,Vt(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===I(e)){var c=Or(String,_.type);(c<0||f-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!d(e)&&e.test(t)}function Xr(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)&&Yr(r,u,n,_)}}o.componentOptions.children=void 0}function Yr(e,t,r,n){var _=e[t];!_||n&&_.tag===n.tag||_.componentInstance.$destroy(),e[t]=null,v(r,t)}Nr.prototype._init=function(e){var t=this;t._uid=$r++,t._isVue=!0,t.__v_skip=!0,t._scope=new We(!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=Ir(zr(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&&Ht(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 Pt(e,t,r,n,_,!1)},e.$createElement=function(t,r,n,_){return Pt(e,t,r,n,_,!0)};var o=r&&r.data;De(e,"$attrs",o&&o.attrs||n,null,!0),De(e,"$listeners",t._parentListeners||n,null,!0)}(t),er(t,"beforeCreate",void 0,!1),function(e){var t=dr(e.$options.inject,e);t&&(Be(!1),Object.keys(t).forEach((function(r){De(e,r,t[r])})),Be(!0))}(t),Fr(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=Ue(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=Ee,e.prototype.$delete=Me,e.prototype.$watch=function(e,t,r){if(s(t))return Ur(this,e,t,r);(r=r||{}).user=!0;var n=new zt(this,e,t,r);if(r.immediate){var _='callback for immediate watcher "'.concat(n.expression,'"');ve(),Tt(t,this,[n.value],this,_),ye()}return function(){n.teardown()}}}(Nr),function(e){var t=/^hook:/;e.prototype.$on=function(e,r){var n=this;if(_(e))for(var o=0,u=e.length;o1?A(r):r;for(var n=A(arguments,1),_='event handler for "'.concat(e,'"'),o=0,u=r.length;oparseInt(this.max)&&Yr(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)Yr(this.cache,e,this.keys)},mounted:function(){var e=this;this.cacheVNode(),this.$watch("include",(function(t){Xr(e,(function(e){return Hr(t,e)}))})),this.$watch("exclude",(function(t){Xr(e,(function(e){return!Hr(t,e)}))}))},updated:function(){this.cacheVNode()},render:function(){var e=this.$slots.default,t=kt(e),r=t&&t.componentOptions;if(r){var n=Qr(r),_=this.include,o=this.exclude;if(_&&(!n||!Hr(_,n))||o&&n&&Hr(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 U}};Object.defineProperty(e,"config",t),e.util={warn:yr,extend:D,mergeOptions:Ir,defineReactive:De},e.set=Ee,e.delete=Me,e.nextTick=Vt,e.observable=function(e){return Ae(e),e},e.options=Object.create(null),q.forEach((function(t){e.options[t+"s"]=Object.create(null)})),e.options._base=e,D(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=A(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=Ir(this.options,e),this}}(e),Kr(e),function(e){q.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)}(Nr),Object.defineProperty(Nr.prototype,"$isServer",{get:ue}),Object.defineProperty(Nr.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Nr,"FunctionalRenderContext",{value:pr}),Nr.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"),xn=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),wn=function(e){return gn(e)||xn(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))Tt(r,n,[f],n,"template ref function");else{var a=e.data.refInFor,b="string"==typeof r||"number"==typeof r,s=Ve(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)&&(Ve(n[t])?n[t].value=r:n[t]=r)}var kn=new de("",{},[]),Pn=["create","activate","update","remove","destroy"];function jn(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 Tn(e,t,r){var n,_,o={};for(n=t;n<=r;++n)u(_=e[n].key)&&(o[_]=n);return o}var Bn={create:In,update:In,destroy:function(e){In(e,kn)}};function In(e,t){(e.data.directives||t.data.directives)&&function(e,t){var r,n,_,o=e===kn,u=t===kn,f=An(e.data.directives,e.context),c=An(t.data.directives,t.context),i=[],a=[];for(r in c)n=f[r],_=c[r],n?(_.oldValue=n.value,_.oldArg=n.arg,En(_,"update",t,e),_.def&&_.def.componentUpdated&&a.push(_)):(En(_,"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(Y&&!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 Fn={create:On,update:On};function Vn(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 Gn,qn={create:Vn,update:Vn};function Wn(e,t,r){var n=Gn;return function _(){var o=t.apply(null,arguments);null!==o&&zn(e,_,r,n)}}var Un=At&&!(re&&Number(re[1])<=53);function $n(e,t,r,n){if(Un){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)}}Gn.addEventListener(e,t,_e?{capture:r,passive:n}:r)}function zn(e,t,r,n){(n||Gn).removeEventListener(e,t._wrapper||t,r)}function Nn(e,t){if(!o(e.data.on)||!o(t.data.on)){var r=t.data.on||{},n=e.data.on||{};Gn=t.elm||e.elm,function(e){if(u(e.__r)){var t=Y?"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),Ne(r,n,$n,zn,Wn,t.context),Gn=void 0}}var Kn,Qn={create:Nn,update:Nn,destroy:function(e){return Nn(e,kn)}};function Hn(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=D({},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);Xn(_,a)&&(_.value=a)}else if("innerHTML"===r&&xn(_.tagName)&&o(_.innerHTML)){(Kn=Kn||document.createElement("div")).innerHTML="".concat(n,"");for(var b=Kn.firstChild;_.firstChild;)_.removeChild(_.firstChild);for(;b.firstChild;)_.appendChild(b.firstChild)}else if(n!==c[r])try{_[r]=n}catch(e){}}}}function Xn(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 Yn={create:Hn,update:Hn},Jn=k((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?D(e.staticStyle,t):t}function e_(e){return Array.isArray(e)?E(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(I(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&&D(t,d_(e.name||"v")),D(t,e),t}return"string"==typeof e?d_(e):void 0}}var d_=k((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_=H&&!J,g_="transition",x_="transitionend",w_="animation",l_="animationend";p_&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(g_="WebkitTransition",x_="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(w_="WebkitAnimation",l_="webkitAnimationEnd"));var h_=H?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=P_(e,t),_=n.type,o=n.timeout,u=n.propCount;if(!_)return r();var f="transition"===_?x_: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&&k_.test(n[g_+"Property"])}}function j_(e,t){for(;e.length1}function D_(e,t){!0!==t.data.show&&B_(t)}var E_=function(e){var t,r,n={},i=e.modules,a=e.nodeOps;for(t=0;tp?m(e,o(r[w+1])?null:r[w+1].elm,r,d,w,n):d>w&&y(t,b,p)}(b,g,w,r,i):u(w)?(u(e.text)&&a.setTextContent(b,""),m(b,null,w,0,w.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 j(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(F_(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 F_(e){return"_value"in e?e._value:e.value}function V_(e){e.target.composing=!0}function G_(e){e.target.composing&&(e.target.composing=!1,q_(e.target,"input"))}function q_(e,t){var r=document.createEvent("HTMLEvents");r.initEvent(t,!0,!0),e.dispatchEvent(r)}function W_(e){return!e.componentInstance||e.data&&e.data.transition?e:W_(e.componentInstance._vnode)}var U_={model:M_,show:{bind:function(e,t,r){var n=t.value,_=(r=W_(r)).data&&r.data.transition,o=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;n&&_?(r.data.show=!0,B_(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=W_(r)).data&&r.data.transition?(r.data.show=!0,n?B_(r,(function(){e.style.display=e.__vOriginalDisplay})):I_(r,(function(){e.style.display="none"}))):e.style.display=n?e.__vOriginalDisplay:"none")},unbind:function(e,t,r,n,_){_||(e.style.display=e.__vOriginalDisplay)}}},$_={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 z_(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?z_(kt(t.children)):e}function N_(e){var t={},r=e.$options;for(var n in r.propsData)t[n]=e[n];var _=r._parentListeners;for(var n in _)t[j(n)]=_[n];return t}function K_(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var Q_=function(e){return e.tag||pt(e)},H_=function(e){return"show"===e.name},X_={name:"transition",props:$_,abstract:!0,render:function(e){var t=this,r=this.$slots.default;if(r&&(r=r.filter(Q_)).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=z_(_);if(!o)return _;if(this._leaving)return K_(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=N_(this),i=this._vnode,a=z_(i);if(o.data.directives&&o.data.directives.some(H_)&&(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=D({},f);if("out-in"===n)return this._leaving=!0,Ke(b,"afterLeave",(function(){t._leaving=!1,t.$forceUpdate()})),K_(e,_);if("in-out"===n){if(pt(o))return i;var s,d=function(){s()};Ke(f,"afterEnter",d),Ke(f,"enterCancelled",d),Ke(b,"delayLeave",(function(e){s=e}))}}return _}}},Y_=D({tag:String,moveClass:String},$_);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 Y_.mode;var to={Transition:X_,TransitionGroup:{props:Y_,beforeMount:function(){var e=this,t=this._update;this._update=function(r,n){var _=Yt(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=N_(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())},D(Nr.options.directives,U_),D(Nr.options.components,to),Nr.prototype.__patch__=H?E_:M,Nr.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 zt(e,n,M,{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&&H?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},H&&setTimeout((function(){U.devtools&&fe&&fe.emit("init",Nr)}),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:wo(t,_),matched:e?xo(e):[]};return r&&(u.redirectedFrom=wo(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 xo(e){for(var t=[];e;)t.unshift(e),e=e.parent;return t}function wo(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 $o,zo=function(){},No={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,Uo(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 x=c[p]?this.ariaCurrentValue:null,w=function(e){Ko(e)&&(t.replace?r.replace(o,zo):r.push(o,zo))},l={click:Ko};Array.isArray(this.event)?this.event.forEach((function(e){l[e]=w})):l[this.event]=w;var h={class:c},m=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:f,route:u,navigate:w,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":x};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=Wo(a.path,f.params),c(a,f,u)}if(f.path){f.params={};for(var d=0;d-1}function ku(e,t){return Su(e)&&e._isRouter&&(null==t||e.type===t)}function Pu(e,t,r){var n=function(_){_>=e.length?r():e[_]?t(e[_],(function(){n(_+1)})):n(_+1)};n(0)}function ju(e){return function(t,r,n){var _=!1,o=0,u=null;Tu(e,(function(e,t,r,f){if("function"==typeof e&&void 0===e.cid){_=!0,o++;var c,i=Cu((function(t){var _;((_=t).__esModule||Iu&&"Module"===_[Symbol.toStringTag])&&(t=t.default),e.resolved="function"==typeof t?t:$o.extend(t),r.components[f]=t,--o<=0&&n()})),a=Cu((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 Tu(e,t){return Bu(e.map((function(e){return Object.keys(e.components).map((function(r){return t(e.components[r],e.instances[r],e,r)}))})))}function Bu(e){return Array.prototype.concat.apply([],e)}var Iu="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Cu(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 Au=function(e,t){this.router=e,this.base=function(e){if(!e)if(Qo){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 Du(e,t,r,n){var _=Tu(e,(function(e,n,_,o){var u=function(e,t){"function"!=typeof e&&(e=$o.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 Bu(n?_.reverse():_)}function Eu(e,t){if(t)return function(){return e.apply(t,arguments)}}Au.prototype.listen=function(e){this.cb=e},Au.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},Au.prototype.onError=function(e){this.errorCbs.push(e)},Au.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&&(ku(e,lu.redirected)&&o===go||(_.ready=!0,_.readyErrorCbs.forEach((function(t){t(e)}))))}))},Au.prototype.confirmTransition=function(e,t,r){var n=this,_=this.current;this.pending=e;var o,u,f=function(e){!ku(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,_=Ou(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){xu(ko(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){wu(ko(n.base+e.fullPath)),uu(n.router,e,_,!1),t&&t(e)}),r)},t.prototype.ensureURL=function(e){if(Ou(this.base)!==this.current.fullPath){var t=ko(this.base+this.current.fullPath);e?xu(t):wu(t)}},t.prototype.getCurrentLocation=function(){return Ou(this.base)},t}(Au);function Ou(e){var t=window.location.pathname,r=t.toLowerCase(),n=e.toLowerCase();return!e||r!==n&&0!==r.indexOf(ko(n+"/"))||(t=t.slice(e.length)),(t||"/")+window.location.search+window.location.hash}var Lu=function(e){function t(t,r,n){e.call(this,t,r),n&&function(e){var t=Ou(e);if(!/^\/#/.test(t))return window.location.replace(ko(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(Fu(),(function(n){r&&uu(e.router,n,t,!0),gu||qu(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){Gu(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){qu(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;Fu()!==t&&(e?Gu(t):qu(t))},t.prototype.getCurrentLocation=function(){return Fu()},t}(Au);function Ru(){var e=Fu();return"/"===e.charAt(0)||(qu("/"+e),!1)}function Fu(){var e=window.location.href,t=e.indexOf("#");return t<0?"":e=e.slice(t+1)}function Vu(e){var t=window.location.href,r=t.indexOf("#");return(r>=0?t.slice(0,r):t)+"#"+e}function Gu(e){gu?xu(Vu(e)):window.location.hash=e}function qu(e){gu?wu(Vu(e)):window.location.replace(Vu(e))}var Wu=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){ku(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}(Au),Uu=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Yo(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!gu&&!1!==e.fallback,this.fallback&&(t="hash"),Qo||(t="abstract"),this.mode=t,t){case"history":this.history=new Mu(this,e.base);break;case"hash":this.history=new Lu(this,e.base,this.fallback);break;case"abstract":this.history=new Wu(this,e.base);break;default:0}},$u={currentRoute:{configurable:!0}};Uu.prototype.match=function(e,t,r){return this.matcher.match(e,t,r)},$u.currentRoute.get=function(){return this.history&&this.history.current},Uu.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 Mu||r instanceof Lu){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}))}))}},Uu.prototype.beforeEach=function(e){return Nu(this.beforeHooks,e)},Uu.prototype.beforeResolve=function(e){return Nu(this.resolveHooks,e)},Uu.prototype.afterEach=function(e){return Nu(this.afterHooks,e)},Uu.prototype.onReady=function(e,t){this.history.onReady(e,t)},Uu.prototype.onError=function(e){this.history.onError(e)},Uu.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)},Uu.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)},Uu.prototype.go=function(e){this.history.go(e)},Uu.prototype.back=function(){this.go(-1)},Uu.prototype.forward=function(){this.go(1)},Uu.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]}))}))):[]},Uu.prototype.resolve=function(e,t,r){var n=Uo(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?ko(e+"/"+n):n}(this.history.base,o,this.mode),normalizedTo:n,resolved:_}},Uu.prototype.getRoutes=function(){return this.matcher.getRoutes()},Uu.prototype.addRoute=function(e,t){this.matcher.addRoute(e,t),this.history.current!==go&&this.history.transitionTo(this.history.getCurrentLocation())},Uu.prototype.addRoutes=function(e){this.matcher.addRoutes(e),this.history.current!==go&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(Uu.prototype,$u);var zu=Uu;function Nu(e,t){return e.push(t),function(){var r=e.indexOf(t);r>-1&&e.splice(r,1)}}Uu.install=function e(t){if(!e.installed||$o!==t){e.installed=!0,$o=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",No);var _=t.config.optionMergeStrategies;_.beforeRouteEnter=_.beforeRouteLeave=_.beforeRouteUpdate=_.created}},Uu.version="3.6.5",Uu.isNavigationFailure=ku,Uu.NavigationFailureType=lu,Uu.START_LOCATION=go,Qo&&window.Vue&&window.Vue.use(Uu);r(105);r(92),r(91);var Ku={"components/AlgoliaSearchBox":()=>Promise.all([r.e(0),r.e(39)]).then(r.bind(null,434)),"components/DropdownLink":()=>Promise.all([r.e(0),r.e(12)]).then(r.bind(null,283)),"components/DropdownTransition":()=>Promise.all([r.e(0),r.e(40)]).then(r.bind(null,273)),"components/Home":()=>Promise.all([r.e(0),r.e(16)]).then(r.bind(null,312)),"components/NavLink":()=>r.e(46).then(r.bind(null,272)),"components/NavLinks":()=>Promise.all([r.e(0),r.e(11)]).then(r.bind(null,291)),"components/Navbar":()=>Promise.all([r.e(0),r.e(2)]).then(r.bind(null,431)),"components/Page":()=>Promise.all([r.e(0),r.e(21)]).then(r.bind(null,313)),"components/Sidebar":()=>Promise.all([r.e(0),r.e(9)]).then(r.bind(null,314)),"components/SidebarButton":()=>Promise.all([r.e(0),r.e(41)]).then(r.bind(null,315)),"components/SidebarGroup":()=>Promise.all([r.e(0),r.e(4)]).then(r.bind(null,292)),"components/SidebarLink":()=>Promise.all([r.e(0),r.e(22)]).then(r.bind(null,284)),"components/SidebarLinks":()=>Promise.all([r.e(0),r.e(4)]).then(r.bind(null,282)),"global-components/Badge":()=>Promise.all([r.e(0),r.e(5)]).then(r.bind(null,440)),"layouts/404":()=>r.e(6).then(r.bind(null,435)),"layouts/Layout":()=>Promise.all([r.e(0),r.e(2),r.e(3)]).then(r.bind(null,436)),NotFound:()=>r.e(6).then(r.bind(null,435)),Layout:()=>Promise.all([r.e(0),r.e(2),r.e(3)]).then(r.bind(null,436))},Qu={"v-07f576f6":()=>r.e(55).then(r.bind(null,441)),"v-71235e06":()=>r.e(42).then(r.bind(null,442)),"v-55ea2f06":()=>r.e(56).then(r.bind(null,443)),"v-7458dcb4":()=>r.e(43).then(r.bind(null,444)),"v-9a956228":()=>r.e(17).then(r.bind(null,445)),"v-935ace04":()=>r.e(15).then(r.bind(null,446)),"v-c7f0409c":()=>r.e(47).then(r.bind(null,447)),"v-3d85f24e":()=>r.e(48).then(r.bind(null,448)),"v-c24b02f4":()=>r.e(44).then(r.bind(null,449)),"v-13b45cbc":()=>r.e(23).then(r.bind(null,450)),"v-085c52d5":()=>r.e(57).then(r.bind(null,451)),"v-77b18c66":()=>r.e(10).then(r.bind(null,452)),"v-77ecefa4":()=>r.e(13).then(r.bind(null,453)),"v-5dc20574":()=>r.e(45).then(r.bind(null,454)),"v-6dbdf7a6":()=>r.e(18).then(r.bind(null,455)),"v-7f8ace16":()=>r.e(14).then(r.bind(null,456)),"v-0578da5e":()=>r.e(58).then(r.bind(null,457)),"v-e802d5c8":()=>r.e(59).then(r.bind(null,458)),"v-12844fda":()=>r.e(60).then(r.bind(null,459)),"v-1f8fc556":()=>r.e(62).then(r.bind(null,460)),"v-cdebead0":()=>r.e(61).then(r.bind(null,461)),"v-b3d4ffd8":()=>r.e(63).then(r.bind(null,462)),"v-38c220fe":()=>r.e(64).then(r.bind(null,463)),"v-548430c6":()=>r.e(65).then(r.bind(null,464)),"v-5959fdec":()=>r.e(49).then(r.bind(null,465)),"v-73b54474":()=>r.e(66).then(r.bind(null,466)),"v-41e63074":()=>r.e(19).then(r.bind(null,467)),"v-87b76dc4":()=>r.e(51).then(r.bind(null,468)),"v-0d6f29f2":()=>r.e(50).then(r.bind(null,469)),"v-739629a6":()=>r.e(67).then(r.bind(null,470)),"v-4a02acc0":()=>r.e(52).then(r.bind(null,471)),"v-a9b07284":()=>r.e(53).then(r.bind(null,472)),"v-0de8b466":()=>r.e(69).then(r.bind(null,473)),"v-5f93f1f6":()=>r.e(68).then(r.bind(null,474))};function Hu(e){const t=Object.create(null);return function(r){return t[r]||(t[r]=e(r))}}const Xu=/-(\w)/g,Yu=Hu(e=>e.replace(Xu,(e,t)=>t?t.toUpperCase():"")),Ju=/\B([A-Z])/g,Zu=Hu(e=>e.replace(Ju,"-$1").toLowerCase()),ef=Hu(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(Yu(t))):e(ef(t))||e(Zu(t))}const rf=Object.assign({},Ku,Qu),nf=e=>rf[e],_f=e=>Qu[e],of=e=>Ku[e],uf=e=>Nr.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)();Nr.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),xf=r(90),wf=r.n(xf),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}="${wf()(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),kf=r.n(Sf),Pf={mounted(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:kf()((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)}},jf=r(23),Tf=r.n(jf),Bf={mounted(){Tf.a.configure({showSpinner:!1}),this.$router.beforeEach((e,t,r)=>{e.path===t.path||Nr.component(e.name)||Tf.a.start(),r()}),this.$router.afterEach(()=>{Tf.a.done(),this.isSidebarOpen=!1})}},If={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)}}},Cf=(r(236),r(8)),Af=Object(Cf.a)(If,(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,Df=(r(237),[lf,Pf,Bf,{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(Nr.extend(Af));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)}}}]),Ef={name:"GlobalLayout",computed:{layout(){const e=this.getLayout();return df("layout",e),Nr.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"}}},Mf=Object(Cf.a)(Ef,(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.")}}(Mf,"mixins",Df);const Of=[{name:"v-07f576f6",path:"/",component:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-07f576f6").then(r)}},{path:"/index.html",redirect:"/"},{name:"v-71235e06",path:"/beginner/tutorial2-surface/",component:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-71235e06").then(r)}},{path:"/beginner/tutorial2-surface/index.html",redirect:"/beginner/tutorial2-surface/"},{name:"v-55ea2f06",path:"/beginner/tutorial1-window/",component:Mf,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:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-7458dcb4").then(r)}},{path:"/beginner/tutorial3-pipeline/index.html",redirect:"/beginner/tutorial3-pipeline/"},{name:"v-9a956228",path:"/beginner/tutorial4-buffer/",component:Mf,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:Mf,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:Mf,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:Mf,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:Mf,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:Mf,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:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-085c52d5").then(r)}},{name:"v-77b18c66",path:"/intermediate/tutorial10-lighting/",component:Mf,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:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-77ecefa4").then(r)}},{path:"/intermediate/tutorial11-normals/index.html",redirect:"/intermediate/tutorial11-normals/"},{name:"v-5dc20574",path:"/intermediate/tutorial12-camera/",component:Mf,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:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-6dbdf7a6").then(r)}},{path:"/intermediate/wip-terrain/index.html",redirect:"/intermediate/wip-terrain/"},{name:"v-7f8ace16",path:"/intermediate/tutorial13-hdr/",component:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-7f8ace16").then(r)}},{path:"/intermediate/tutorial13-hdr/index.html",redirect:"/intermediate/tutorial13-hdr/"},{name:"v-0578da5e",path:"/news/0.12/",component:Mf,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:Mf,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:Mf,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:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-1f8fc556").then(r)}},{path:"/news/0.16/index.html",redirect:"/news/0.16/"},{name:"v-cdebead0",path:"/news/0.15/",component:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-cdebead0").then(r)}},{path:"/news/0.15/index.html",redirect:"/news/0.15/"},{name:"v-b3d4ffd8",path:"/news/0.17/",component:Mf,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:Mf,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:Mf,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:Mf,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:Mf,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:Mf,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:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-87b76dc4").then(r)}},{path:"/showcase/imgui-demo/index.html",redirect:"/showcase/imgui-demo/"},{name:"v-0d6f29f2",path:"/showcase/gifs/",component:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-0d6f29f2").then(r)}},{path:"/showcase/gifs/index.html",redirect:"/showcase/gifs/"},{name:"v-739629a6",path:"/showcase/threading/",component:Mf,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:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-4a02acc0").then(r)}},{path:"/showcase/pong/index.html",redirect:"/showcase/pong/"},{name:"v-a9b07284",path:"/showcase/windowless/",component:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-a9b07284").then(r)}},{path:"/showcase/windowless/index.html",redirect:"/showcase/windowless/"},{name:"v-0de8b466",path:"/topics/",component:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-0de8b466").then(r)}},{path:"/topics/index.html",redirect:"/topics/"},{name:"v-5f93f1f6",path:"/todo.html",component:Mf,beforeEnter:(e,t,r)=>{sf("Layout","v-5f93f1f6").then(r)}},{path:"*",component:Mf}],Lf={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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{title:"Sources",frontmatter:{},regularPath:"/intermediate/pbr-notes.html",relativePath:"intermediate/pbr-notes.md",key:"v-085c52d5",path:"/intermediate/pbr-notes.html",lastUpdated:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"Output too dark on WebGPU?",slug:"output-too-dark-on-webgpu"},{level:2,title:"Demo",slug:"demo"}],lastUpdated:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{title:"Update to 0.13!",frontmatter:{},regularPath:"/news/0.13/",relativePath:"news/0.13/readme.md",key:"v-e802d5c8",path:"/news/0.13/",lastUpdated:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{title:"Update to 0.16",frontmatter:{},regularPath:"/news/0.16/",relativePath:"news/0.16/readme.md",key:"v-1f8fc556",path:"/news/0.16/",lastUpdated:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{title:"Update to 0.15!",frontmatter:{},regularPath:"/news/0.15/",relativePath:"news/0.15/readme.md",key:"v-cdebead0",path:"/news/0.15/",lastUpdated:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{title:"Update to 0.17",frontmatter:{},regularPath:"/news/0.17/",relativePath:"news/0.17/readme.md",key:"v-b3d4ffd8",path:"/news/0.17/",lastUpdated:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{title:"Foreword",frontmatter:{},regularPath:"/showcase/",relativePath:"showcase/README.md",key:"v-548430c6",path:"/showcase/",lastUpdated:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{title:"Basic Imgui Demo",frontmatter:{},regularPath:"/showcase/imgui-demo/",relativePath:"showcase/imgui-demo/README.md",key:"v-87b76dc4",path:"/showcase/imgui-demo/",lastUpdated:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{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:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4},{title:"Coming Soon!",frontmatter:{},regularPath:"/todo.html",relativePath:"todo.md",key:"v-5f93f1f6",path:"/todo.html",lastUpdated:"7/2/2024, 3:21:30 PM",lastUpdatedTimestamp:171993369e4}],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);Nr.component("AutoGithubLink",()=>Promise.all([r.e(0),r.e(38)]).then(r.bind(null,437))),Nr.component("RecentArticles",()=>r.e(54).then(r.bind(null,438))),Nr.component("WasmExample",()=>Promise.all([r.e(0),r.e(20)]).then(r.bind(null,439))),Nr.component("Badge",()=>Promise.all([r.e(0),r.e(5)]).then(r.bind(null,440)));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",kf()(()=>{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}}},Ff=(r(240),Object(Cf.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),Vf=[{},({Vue:e})=>{e.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{},({Vue:e})=>{e.component("CodeCopy",Af)},({Vue:e})=>{e.component("BackToTop",Ff)}],Gf=["BackToTop"];class qf extends class{constructor(){this.store=new Nr({data:{state:{}}})}$get(e){return this.store.state[e]}$set(e,t){Nr.set(this.store.state,e,t)}$emit(...e){this.store.$emit(...e)}$on(...e){this.store.$on(...e)}}{}Object.assign(qf.prototype,{getPageAsyncComponent:ff,getLayoutAsyncComponent:cf,getAsyncComponent:af,getVueComponent:bf});var Wf={install(e){const t=new qf;e.$vuepress=t,e.prototype.$vuepress=t}};function Uf(e,t){const r=t.toLowerCase();return e.options.routes.some(e=>e.path.toLowerCase()===r)}var $f={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(e){const t=this.pageKey||this.$parent.$page.key;return df("pageKey",t),Nr.component(t)||Nr.component(t,ff(t)),Nr.component(t)?e(t):e("")}},zf={functional:!0,props:{slotKey:String,required:!0},render:(e,{props:t,slots:r})=>e("div",{class:["content__"+t.slotKey]},r()[t.slotKey])},Nf={computed:{openInNewWindowTitle(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},Kf=(r(241),r(242),Object(Cf.a)(Nf,(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),Qf={functional:!0,render(e,{parent:t,children:r}){if(t._isMounted)return r;t.$once("hook:mounted",()=>{t.$forceUpdate()})}};Nr.config.productionTip=!1,Nr.use(zu),Nr.use(Wf),Nr.mixin(function(e,t,r=Nr){!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?!Nr.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(e.hash)}:{x:0,y:0})});!function(e){e.beforeEach((t,r,n)=>{if(Uf(e,t.path))n();else if(/(\/|\.html)$/.test(t.path))if(/\/$/.test(t.path)){const r=t.path.replace(/\/$/,"")+".html";Uf(e,r)?n(r):n()}else n();else{const r=t.path+"/",_=t.path+".html";Uf(e,_)?n(_):Uf(e,r)?n(r):n()}})}(r);const n={};try{await Promise.all(Vf.filter(e=>"function"==typeof e).map(t=>t({Vue:Nr,options:n,router:r,siteData:Lf,isServer:e})))}catch(e){console.error(e)}return{app:new Nr(Object.assign(n,{router:r,render:e=>e("div",{attrs:{id:"app"}},[e("RouterView",{ref:"layout"}),e("div",{class:"global-ui"},Gf.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.fd888fd4.js b/assets/js/app.fd888fd4.js new file mode 100644 index 000000000..a3e5830d7 --- /dev/null +++ b/assets/js/app.fd888fd4.js @@ -0,0 +1,16 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(e){function t(t){for(var n,u,c=t[0],f=t[1],i=t[2],a=0,b=[];a=t||r<0||x&&e-i>=o}function v(){var e=d();if(m(e))return y(e);c=setTimeout(v,function(e){var r=t-(e-f);return x?s(r,o-(e-i)):r}(e))}function y(e){return c=void 0,w&&n?l(e):(n=_=void 0,u)}function S(){var e=d(),r=m(e);if(n=arguments,_=this,f=e,r){if(void 0===c)return h(f);if(x)return c=setTimeout(v,t),l(f)}return void 0===c&&(c=setTimeout(v,t)),u}return t=g(t)||0,p(r)&&(a=!!r.leading,o=(x="maxWait"in r)?b(g(r.maxWait)||0,t):o,w="trailing"in r?!!r.trailing:w),S.cancel=function(){void 0!==c&&clearTimeout(c),i=0,n=f=_=c=void 0},S.flush=function(){return void 0===c?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 f=r.render(!t),i=f.querySelector(n.barSelector),a=n.speed,b=n.easing;return f.offsetWidth,u((function(t){""===n.positionUsing&&(n.positionUsing=r.getPositioningCSS()),c(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?(c(f,{transition:"none",opacity:1}),f.offsetWidth,setTimeout((function(){c(f,{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),f=e?"-100":o(r.status||0),a=document.querySelector(n.parent);return c(u,{transition:"all 0 linear",transform:"translate3d("+f+"%,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()}}(),c=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 f(e,t){return("string"==typeof e?e:b(e)).indexOf(" "+t+" ")>=0}function i(e,t){var r=b(e),n=r+t;f(r,t)||(e.className=n.substring(1))}function a(e,t){var r,n=b(e);f(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(102);e.exports=function(e){return n(e.length)}},function(e,t,r){"use strict";var n=r(0),_=r(52).f,o=r(12),u=r(98),c=r(36),f=r(63),i=r(123);e.exports=function(e,t){var r,a,b,s,d,p=e.target,g=e.global,x=e.stat;if(r=g?n:x?n[p]||c(p,{}):n[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+(x?".":"#")+a,e.forced)&&void 0!==b){if(typeof s==typeof b)continue;f(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(33),_=Object;e.exports=function(e){return _(n(e))}},function(e,t,r){"use strict";var n=r(1),_=r(97),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(29),_=Function.prototype.call;e.exports=n?_.bind(_):function(){return _.apply(_,arguments)}},function(e,t,r){"use strict";var n=r(3);e.exports=!n((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")}))},function(e,t,r){"use strict";var n=r(0),_=r(58),o=r(9),u=r(50),c=r(57),f=r(56),i=n.Symbol,a=_("wks"),b=f?i.for||i:i&&i.withoutSetter||u;e.exports=function(e){return o(a,e)||(a[e]=c&&o(i,e)?i[e]:b("Symbol."+e)),a[e]}},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(33);e.exports=function(e){return n(_(e))}},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";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(59),_=r(0),o=r(36),u=e.exports=_["__core-js_shared__"]||o("__core-js_shared__",{});(u.versions||(u.versions=[])).push({version:"3.37.1",mode:n?"pure":"global",copyright:"© 2014-2024 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.37.1/LICENSE",source:"https://github.com/zloirock/core-js"})},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){var n=r(144),_=r(11),o=Object.prototype,u=o.hasOwnProperty,c=o.propertyIsEnumerable,f=n(function(){return arguments}())?n:function(e){return _(e)&&u.call(e,"callee")&&!c.call(e,"callee")};e.exports=f},function(e,t,r){var n=r(10)(r(6),"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),c=r(175);function f(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(7),_=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(120);e.exports=function(e){var t=+e;return t!=t||0===t?0:n(t)}},function(e,t,r){"use strict";var n=r(2),_=r(3),o=r(15),u=Object,c=n("".split);e.exports=_((function(){return!u("z").propertyIsEnumerable(0)}))?function(e){return"String"===o(e)?c(e,""):u(e)}:u},function(e,t,r){"use strict";var n=r(2);e.exports=n({}.isPrototypeOf)},function(e,t,r){"use strict";var n,_,o=r(0),u=r(107),c=o.process,f=o.Deno,i=c&&c.versions||f&&f.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(2),_=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(94),_=r(5),o=r(33),u=r(128);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 o(r),u(n),_(r)?(t?e(r,n):r.__proto__=n,r):r}}():void 0)},function(e,t,r){"use strict";var n=r(4),_=r(28),o=r(106),u=r(31),c=r(32),f=r(54),i=r(9),a=r(60),b=Object.getOwnPropertyDescriptor;t.f=n?b:function(e,t){if(e=c(e),t=f(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";e.exports=function(e){return null==e}},function(e,t,r){"use strict";var n=r(96),_=r(55);e.exports=function(e){var t=n(e,"string");return _(t)?t:t+""}},function(e,t,r){"use strict";var n=r(34),_=r(1),o=r(48),u=r(56),c=Object;e.exports=u?function(e){return"symbol"==typeof e}:function(e){var t=n("Symbol");return _(t)&&o(t.prototype,c(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(49),_=r(3),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=r(35);e.exports=function(e,t){return n[e]||(n[e]=t||{})}},function(e,t,r){"use strict";e.exports=!1},function(e,t,r){"use strict";var n=r(4),_=r(3),o=r(110);e.exports=!n&&!_((function(){return 7!==Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}))},function(e,t,r){"use strict";var n=r(5),_=String,o=TypeError;e.exports=function(e){if(n(e))return e;throw new o(_(e)+" is not an object")}},function(e,t,r){"use strict";e.exports={}},function(e,t,r){"use strict";var n=r(9),_=r(115),o=r(52),u=r(16);e.exports=function(e,t,r){for(var c=_(t),f=u.f,i=o.f,a=0;aa))return!1;var s=f.get(e),d=f.get(t);if(s&&d)return s==t&&d==e;var p=-1,g=!0,x=2&r?new n:void 0;for(f.set(e,t),f.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,c=0;for(u=_.index;u0?_(t,9007199254740991):0}},function(e,t,r){var n=r(83);e.exports=function(e,t,r){var _=null==e?void 0:n(e,t);return void 0===_?r:_}},function(e,t,r){e.exports=r(243)},function(e,t,r){"use strict";var n=r(25),_=r(124).left,o=r(125),u=r(49);n({target:"Array",proto:!0,forced:!r(93)&&u>79&&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(28),_=r(1),o=r(5),u=TypeError;e.exports=function(e,t){var r,c;if("string"===t&&_(r=e.toString)&&!o(c=n(r,e)))return c;if(_(r=e.valueOf)&&!o(c=n(r,e)))return c;if("string"!==t&&_(r=e.toString)&&!o(c=n(r,e)))return c;throw new u("Can't convert object to primitive value")}},function(e,t,r){"use strict";var n=r(0),_=r(5),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(3);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(9),o=Function.prototype,u=n&&Object.getOwnPropertyDescriptor,c=_(o,"name"),f=c&&"something"===function(){}.name,i=c&&(!n||n&&u(o,"name").configurable);e.exports={EXISTS:c,PROPER:f,CONFIGURABLE:i}},function(e,t,r){"use strict";var n=r(2),_=r(1),o=r(35),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(34),_=r(2),o=r(116),u=r(122),c=r(61),f=_([].concat);e.exports=n("Reflect","ownKeys")||function(e){var t=o.f(c(e)),r=u.f;return r?f(t,r(e)):t}},function(e,t,r){"use strict";var n=r(117),_=r(121).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,_)}},function(e,t,r){"use strict";var n=r(2),_=r(9),o=r(32),u=r(118).indexOf,c=r(62),f=n([].push);e.exports=function(e,t){var r,n=o(e),i=0,a=[];for(r in n)!_(c,r)&&_(n,r)&&f(a,r);for(;t.length>i;)_(n,r=t[i++])&&(~u(a,r)||f(a,r));return a}},function(e,t,r){"use strict";var n=r(32),_=r(119),o=r(24),u=function(e){return function(t,r,u){var c=n(t),f=o(c);if(0===f)return!e&&-1;var i,a=_(u,f);if(e&&r!=r){for(;f>a;)if((i=c[a++])!=i)return!0}else for(;f>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";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(3),_=r(1),o=/#|\.prototype\./,u=function(e,t){var r=f[c(e)];return r===a||r!==i&&(_(t)?n(t):!!t)},c=u.normalize=function(e){return String(e).replace(o,".").toLowerCase()},f=u.data={},i=u.NATIVE="N",a=u.POLYFILL="P";e.exports=u},function(e,t,r){"use strict";var n=r(27),_=r(26),o=r(47),u=r(24),c=TypeError,f="Reduce of empty array with no initial value",i=function(e){return function(t,r,i,a){var b=_(t),s=o(b),d=u(b);if(n(r),0===d&&i<2)throw new c(f);var p=e?d-1:0,g=e?-1:1;if(i<2)for(;;){if(p in s){a=s[p],p+=g;break}if(p+=g,e?p<0:d<=p)throw new c(f)}for(;e?p>=0:d>p;p+=g)p in s&&(a=r(a,s[p],p,b));return a}};e.exports={left:i(!1),right:i(!0)}},function(e,t,r){"use strict";var n=r(3);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(29),_=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(34),_=r(9),o=r(12),u=r(48),c=r(51),f=r(63),i=r(130),a=r(131),b=r(132),s=r(135),d=r(136),p=r(4),g=r(59);e.exports=function(e,t,r,x){var w=x?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(x?t:e,void 0),n=x?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>w&&s(n,arguments[w]),n}));if(S.prototype=v,"Error"!==h?c?c(S,y):f(S,y,{name:!0}):p&&"stackTraceLimit"in m&&(i(S,m,"stackTraceLimit"),i(S,m,"prepareStackTrace")),f(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(129),_=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(5);e.exports=function(e){return n(e)||null===e}},function(e,t,r){"use strict";var n=r(16).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(5),o=r(51);e.exports=function(e,t,r){var u,c;return o&&n(u=t.constructor)&&u!==r&&_(c=u.prototype)&&c!==r.prototype&&o(e,c),e}},function(e,t,r){"use strict";var n=r(133);e.exports=function(e,t){return void 0===e?arguments.length<2?"":t:n(e)}},function(e,t,r){"use strict";var n=r(95),_=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(30)("toStringTag")]="z",e.exports="[object z]"===String(n)},function(e,t,r){"use strict";var n=r(5),_=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(137),o=r(138),u=Error.captureStackTrace;e.exports=function(e,t,r,c){o&&(u?u(e,t):n(e,"stack",_(r,c)))}},function(e,t,r){"use strict";var n=r(2),_=Error,o=n("".replace),u=String(new _("zxcasd").stack),c=/\n\s*at [^:]*:[^\n]*/,f=c.test(u);e.exports=function(e,t){if(f&&"string"==typeof e&&!_.prepareStackTrace)for(;t--;)e=o(e,c,"");return e}},function(e,t,r){"use strict";var n=r(3),_=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){"use strict";var n=r(4),_=r(140),o=TypeError,u=Object.getOwnPropertyDescriptor,c=n&&!function(){if(void 0!==this)return!0;try{Object.defineProperty([],"length",{writable:!1}).length=1}catch(e){return e instanceof TypeError}}();e.exports=c?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(15);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){var n=r(64),_=r(143);e.exports=function e(t,r,o,u,c){var f=-1,i=t.length;for(o||(o=_),c||(c=[]);++f0&&o(a)?r>1?e(a,r-1,o,u,c):n(c,a):u||(c[c.length]=a)}return c}},function(e,t,r){var n=r(13),_=r(37),o=r(7),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,c=n?n.toStringTag:void 0;e.exports=function(e){var t=o.call(e,c),r=e[c];try{e[c]=void 0;var n=!0}catch(e){}var _=u.call(e);return n&&(t?e[c]=r:delete e[c]),_}},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(7),c=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):c(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,c=u,f=!o;if(null==e)return!c;for(e=Object(e);u--;){var i=r[u];if(f&&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),c=/^\[object .+?Constructor\]$/,f=Function.prototype,i=Object.prototype,a=f.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:c).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(6)["__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),c=r(170);function f(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),c=r(232),f=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:c(e);if(g)return f(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 c(e){return!0===e}function f(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 x(e){return null==e?"":Array.isArray(e)||s(e)&&e.toString===b?JSON.stringify(e,w,2):String(e)}function w(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 k(e){var t=Object.create(null);return function(r){return t[r]||(t[r]=e(r))}}var P=/-(\w)/g,j=k((function(e){return e.replace(P,(function(e,t){return t?t.toUpperCase():""}))})),B=k((function(e){return e.charAt(0).toUpperCase()+e.slice(1)})),T=/\B([A-Z])/g,I=k((function(e){return e.replace(T,"-$1").toLowerCase()}));var C=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 A(e,t){t=t||0;for(var r=e.length-t,n=new Array(r);r--;)n[r]=e[r+t];return n}function D(e,t){for(var r in t)e[r]=t[r];return e}function E(e){for(var t={},r=0;r0,J=X&&X.indexOf("edge/")>0;X&&X.indexOf("android");var ee=X&&/iphone|ipad|ipod|ios/.test(X);X&&/chrome\/\d+/.test(X),X&&/phantomjs/.test(X);var te,re=X&&X.match(/firefox\/(\d+)/),ne={}.watch,_e=!1;if(H)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=!H&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),te},ce=H&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function fe(e){return"function"==typeof e&&/native code/.test(e.toString())}var ie,ae="undefined"!=typeof Symbol&&fe(Symbol)&&"undefined"!=typeof Reflect&&fe(Reflect.ownKeys);ie="undefined"!=typeof Set&&fe(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,c){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=c,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 xe(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 we=0,le=[],he=function(){function e(){this._pending=!1,this.id=we++,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&&(Xe((i=e(i,"".concat(r||"","_").concat(n)))[0])&&Xe(b)&&(s[a]=ge(b.text+i[0].text),i.shift()),s.push.apply(s,i)):f(i)?Xe(b)?s[a]=ge(b.text+i):""!==i&&s.push(ge(i)):Xe(i)&&Xe(b)?s[a]=ge(b.text+i.text):(c(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 Xe(e){return u(e)&&u(e.text)&&!1===e.isComment}function Ye(e,t){var r,n,o,c,f=null;if(_(e)||"string"==typeof e)for(f=new Array(e.length),r=0,n=e.length;r0,c=t?!!t.$stable:!u,f=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(c&&_&&_!==n&&f===_.$key&&!u&&!_.$hasNormal)return _;for(var i in o={},t)t[i]&&"$"!==i[0]&&(o[i]=xt(e,r,i,t[i]))}else o={};for(var a in r)a in o||(o[a]=wt(r,a));return t&&Object.isExtensible(t)&&(t._normalized=o),N(o,"$stable",c),N(o,"$key",f),N(o,"$hasNormal",u),o}function xt(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]:He(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 wt(e,t){return function(){return e[t]}}function lt(e){return{get attrs(){if(!e._attrsProxy){var t=e._attrsProxy={};N(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:C(e.$emit,e),expose:function(t){t&&Object.keys(t).forEach((function(r){return Ge(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 kt(e){if(_(e))for(var t=0;tdocument.createEvent("Event").timeStamp&&(fr=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(cr=fr(),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,Vt(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===I(e)){var f=Or(String,_.type);(f<0||c-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!d(e)&&e.test(t)}function Xr(e,t){var r=e.cache,n=e.keys,_=e._vnode,o=e.$vnode;for(var u in r){var c=r[u];if(c){var f=c.name;f&&!t(f)&&Yr(r,u,n,_)}}o.componentOptions.children=void 0}function Yr(e,t,r,n){var _=e[t];!_||n&&_.tag===n.tag||_.componentInstance.$destroy(),e[t]=null,v(r,t)}Nr.prototype._init=function(e){var t=this;t._uid=zr++,t._isVue=!0,t.__v_skip=!0,t._scope=new We(!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=Ir($r(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&&Ht(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 Pt(e,t,r,n,_,!1)},e.$createElement=function(t,r,n,_){return Pt(e,t,r,n,_,!0)};var o=r&&r.data;De(e,"$attrs",o&&o.attrs||n,null,!0),De(e,"$listeners",t._parentListeners||n,null,!0)}(t),er(t,"beforeCreate",void 0,!1),function(e){var t=dr(e.$options.inject,e);t&&(Te(!1),Object.keys(t).forEach((function(r){De(e,r,t[r])})),Te(!0))}(t),Fr(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=Ue(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=Ee,e.prototype.$delete=Me,e.prototype.$watch=function(e,t,r){if(s(t))return Ur(this,e,t,r);(r=r||{}).user=!0;var n=new $t(this,e,t,r);if(r.immediate){var _='callback for immediate watcher "'.concat(n.expression,'"');ve(),Bt(t,this,[n.value],this,_),ye()}return function(){n.teardown()}}}(Nr),function(e){var t=/^hook:/;e.prototype.$on=function(e,r){var n=this;if(_(e))for(var o=0,u=e.length;o1?A(r):r;for(var n=A(arguments,1),_='event handler for "'.concat(e,'"'),o=0,u=r.length;oparseInt(this.max)&&Yr(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)Yr(this.cache,e,this.keys)},mounted:function(){var e=this;this.cacheVNode(),this.$watch("include",(function(t){Xr(e,(function(e){return Hr(t,e)}))})),this.$watch("exclude",(function(t){Xr(e,(function(e){return!Hr(t,e)}))}))},updated:function(){this.cacheVNode()},render:function(){var e=this.$slots.default,t=kt(e),r=t&&t.componentOptions;if(r){var n=Qr(r),_=this.include,o=this.exclude;if(_&&(!n||!Hr(_,n))||o&&n&&Hr(o,n))return t;var u=this.cache,c=this.keys,f=null==t.key?r.Ctor.cid+(r.tag?"::".concat(r.tag):""):t.key;u[f]?(t.componentInstance=u[f].componentInstance,v(c,f),c.push(f)):(this.vnodeToCache=t,this.keyToCache=f),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return U}};Object.defineProperty(e,"config",t),e.util={warn:yr,extend:D,mergeOptions:Ir,defineReactive:De},e.set=Ee,e.delete=Me,e.nextTick=Vt,e.observable=function(e){return Ae(e),e},e.options=Object.create(null),q.forEach((function(t){e.options[t+"s"]=Object.create(null)})),e.options._base=e,D(e.options.components,Jr),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var r=A(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=Ir(this.options,e),this}}(e),Kr(e),function(e){q.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)}(Nr),Object.defineProperty(Nr.prototype,"$isServer",{get:ue}),Object.defineProperty(Nr.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Nr,"FunctionalRenderContext",{value:pr}),Nr.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)},cn=function(e){return un(e)?e.slice(6,e.length):""},fn=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"),xn=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),wn=function(e){return gn(e)||xn(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,c=t?null:o,f=t?void 0:o;if(i(r))Bt(r,n,[c],n,"template ref function");else{var a=e.data.refInFor,b="string"==typeof r||"number"==typeof r,s=Ve(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]=f,Sn(n,r,c)}else if(s){if(t&&r.value!==o)return;r.value=c}else 0}}}function Sn(e,t,r){var n=e._setupState;n&&S(n,t)&&(Ve(n[t])?n[t].value=r:n[t]=r)}var kn=new de("",{},[]),Pn=["create","activate","update","remove","destroy"];function jn(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)||c(e.isAsyncPlaceholder)&&o(t.asyncFactory.error))}function Bn(e,t,r){var n,_,o={};for(n=t;n<=r;++n)u(_=e[n].key)&&(o[_]=n);return o}var Tn={create:In,update:In,destroy:function(e){In(e,kn)}};function In(e,t){(e.data.directives||t.data.directives)&&function(e,t){var r,n,_,o=e===kn,u=t===kn,c=An(e.data.directives,e.context),f=An(t.data.directives,t.context),i=[],a=[];for(r in f)n=c[r],_=f[r],n?(_.oldValue=n.value,_.oldArg=n.arg,En(_,"update",t,e),_.def&&_.def.componentUpdated&&a.push(_)):(En(_,"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)?fn(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 fn(t)||"false"===t?"false":"contenteditable"===e&&nn(t)?t:"true"}(t,r)):un(t)?fn(r)?e.removeAttributeNS(on,cn(t)):e.setAttributeNS(on,t,r):Rn(e,t,r)}function Rn(e,t,r){if(fn(r))e.removeAttribute(t);else{if(Y&&!Z&&"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 Fn={create:On,update:On};function Vn(e,t){var r=t.elm,n=t.data,_=e.data;if(!(o(n.staticClass)&&o(n.class)&&(o(_)||o(_.staticClass)&&o(_.class)))){var c=an(t),f=r._transitionClasses;u(f)&&(c=sn(c,dn(f))),c!==r._prevClass&&(r.setAttribute("class",c),r._prevClass=c)}}var Gn,qn={create:Vn,update:Vn};function Wn(e,t,r){var n=Gn;return function _(){var o=t.apply(null,arguments);null!==o&&$n(e,_,r,n)}}var Un=At&&!(re&&Number(re[1])<=53);function zn(e,t,r,n){if(Un){var _=cr,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)}}Gn.addEventListener(e,t,_e?{capture:r,passive:n}:r)}function $n(e,t,r,n){(n||Gn).removeEventListener(e,t._wrapper||t,r)}function Nn(e,t){if(!o(e.data.on)||!o(t.data.on)){var r=t.data.on||{},n=e.data.on||{};Gn=t.elm||e.elm,function(e){if(u(e.__r)){var t=Y?"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),Ne(r,n,zn,$n,Wn,t.context),Gn=void 0}}var Kn,Qn={create:Nn,update:Nn,destroy:function(e){return Nn(e,kn)}};function Hn(e,t){if(!o(e.data.domProps)||!o(t.data.domProps)){var r,n,_=t.elm,f=e.data.domProps||{},i=t.data.domProps||{};for(r in(u(i.__ob__)||c(i._v_attr_proxy))&&(i=t.data.domProps=D({},i)),f)r in i||(_[r]="");for(r in i){if(n=i[r],"textContent"===r||"innerHTML"===r){if(t.children&&(t.children.length=0),n===f[r])continue;1===_.childNodes.length&&_.removeChild(_.childNodes[0])}if("value"===r&&"PROGRESS"!==_.tagName){_._value=n;var a=o(n)?"":String(n);Xn(_,a)&&(_.value=a)}else if("innerHTML"===r&&xn(_.tagName)&&o(_.innerHTML)){(Kn=Kn||document.createElement("div")).innerHTML="".concat(n,"");for(var b=Kn.firstChild;_.firstChild;)_.removeChild(_.firstChild);for(;b.firstChild;)_.appendChild(b.firstChild)}else if(n!==f[r])try{_[r]=n}catch(e){}}}}function Xn(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 Yn={create:Hn,update:Hn},Zn=k((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 Jn(e){var t=e_(e.style);return e.staticStyle?D(e.staticStyle,t):t}function e_(e){return Array.isArray(e)?E(e):"string"==typeof e?Zn(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(I(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&&D(t,d_(e.name||"v")),D(t,e),t}return"string"==typeof e?d_(e):void 0}}var d_=k((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_=H&&!Z,g_="transition",x_="transitionend",w_="animation",l_="animationend";p_&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(g_="WebkitTransition",x_="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(w_="WebkitAnimation",l_="webkitAnimationEnd"));var h_=H?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=P_(e,t),_=n.type,o=n.timeout,u=n.propCount;if(!_)return r();var c="transition"===_?x_:l_,f=0,i=function(){e.removeEventListener(c,a),r()},a=function(t){t.target===e&&++f>=u&&i()};setTimeout((function(){f0&&(r="transition",a=u,b=o.length):"animation"===t?i>0&&(r="animation",a=i,b=f.length):b=(r=(a=Math.max(u,i))>0?u>i?"transition":"animation":null)?"transition"===r?o.length:f.length:0,{type:r,timeout:a,propCount:b,hasTransform:"transition"===r&&k_.test(n[g_+"Property"])}}function j_(e,t){for(;e.length1}function D_(e,t){!0!==t.data.show&&T_(t)}var E_=function(e){var t,r,n={},i=e.modules,a=e.nodeOps;for(t=0;tp?m(e,o(r[w+1])?null:r[w+1].elm,r,d,w,n):d>w&&y(t,b,p)}(b,g,w,r,i):u(w)?(u(e.text)&&a.setTextContent(b,""),m(b,null,w,0,w.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 j(e,t,r){if(c(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(F_(u),n))return void(e.selectedIndex!==c&&(e.selectedIndex=c));_||(e.selectedIndex=-1)}}function R_(e,t){return t.every((function(t){return!R(t,e)}))}function F_(e){return"_value"in e?e._value:e.value}function V_(e){e.target.composing=!0}function G_(e){e.target.composing&&(e.target.composing=!1,q_(e.target,"input"))}function q_(e,t){var r=document.createEvent("HTMLEvents");r.initEvent(t,!0,!0),e.dispatchEvent(r)}function W_(e){return!e.componentInstance||e.data&&e.data.transition?e:W_(e.componentInstance._vnode)}var U_={model:M_,show:{bind:function(e,t,r){var n=t.value,_=(r=W_(r)).data&&r.data.transition,o=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;n&&_?(r.data.show=!0,T_(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=W_(r)).data&&r.data.transition?(r.data.show=!0,n?T_(r,(function(){e.style.display=e.__vOriginalDisplay})):I_(r,(function(){e.style.display="none"}))):e.style.display=n?e.__vOriginalDisplay:"none")},unbind:function(e,t,r,n,_){_||(e.style.display=e.__vOriginalDisplay)}}},z_={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 $_(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?$_(kt(t.children)):e}function N_(e){var t={},r=e.$options;for(var n in r.propsData)t[n]=e[n];var _=r._parentListeners;for(var n in _)t[j(n)]=_[n];return t}function K_(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var Q_=function(e){return e.tag||pt(e)},H_=function(e){return"show"===e.name},X_={name:"transition",props:z_,abstract:!0,render:function(e){var t=this,r=this.$slots.default;if(r&&(r=r.filter(Q_)).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=$_(_);if(!o)return _;if(this._leaving)return K_(e,_);var u="__transition-".concat(this._uid,"-");o.key=null==o.key?o.isComment?u+"comment":u+o.tag:f(o.key)?0===String(o.key).indexOf(u)?o.key:u+o.key:o.key;var c=(o.data||(o.data={})).transition=N_(this),i=this._vnode,a=$_(i);if(o.data.directives&&o.data.directives.some(H_)&&(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=D({},c);if("out-in"===n)return this._leaving=!0,Ke(b,"afterLeave",(function(){t._leaving=!1,t.$forceUpdate()})),K_(e,_);if("in-out"===n){if(pt(o))return i;var s,d=function(){s()};Ke(c,"afterEnter",d),Ke(c,"enterCancelled",d),Ke(b,"delayLeave",(function(e){s=e}))}}return _}}},Y_=D({tag:String,moveClass:String},z_);function Z_(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function J_(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 Y_.mode;var to={Transition:X_,TransitionGroup:{props:Y_,beforeMount:function(){var e=this,t=this._update;this._update=function(r,n){var _=Yt(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=N_(this),c=0;c<_.length;c++){if((a=_[c]).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 f=[],i=[];for(c=0;c-1?ln[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:ln[e]=/HTMLUnknownElement/.test(t.toString())},D(Nr.options.directives,U_),D(Nr.options.components,to),Nr.prototype.__patch__=H?E_:M,Nr.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 $t(e,n,M,{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&&H?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},H&&setTimeout((function(){U.devtools&&ce&&ce.emit("init",Nr)}),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 co(e){try{return decodeURIComponent(e)}catch(e){0}return e}var fo=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=co(r.shift()),_=r.length>0?co(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:wo(t,_),matched:e?xo(e):[]};return r&&(u.redirectedFrom=wo(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 xo(e){for(var t=[];e;)t.unshift(e),e=e.parent;return t}function wo(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=f.path?So(f.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(fo):fo(u)}return n}(f.query,_.query,n&&n.options.parseQuery),s=_.hash||f.hash;return s&&"#"!==s.charAt(0)&&(s="#"+s),{_normalized:!0,path:a,query:b,hash:s}}var zo,$o=function(){},No={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,c=_.href,f={},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,Uo(u.redirectedFrom),null,r):u;f[p]=lo(n,g,this.exactPath),f[d]=this.exact||this.exactPath?f[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 x=f[p]?this.ariaCurrentValue:null,w=function(e){Ko(e)&&(t.replace?r.replace(o,$o):r.push(o,$o))},l={click:Ko};Array.isArray(this.event)?this.event.forEach((function(e){l[e]=w})):l[this.event]=w;var h={class:f},m=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:c,route:u,navigate:w,isActive:f[d],isExactActive:f[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:c,"aria-current":x};else{var v=function e(t){var r;if(t)for(var n=0;n-1&&(c.params[s]=r.params[s]);return c.path=Wo(a.path,c.params),f(a,c,u)}if(c.path){c.params={};for(var d=0;d-1}function ku(e,t){return Su(e)&&e._isRouter&&(null==t||e.type===t)}function Pu(e,t,r){var n=function(_){_>=e.length?r():e[_]?t(e[_],(function(){n(_+1)})):n(_+1)};n(0)}function ju(e){return function(t,r,n){var _=!1,o=0,u=null;Bu(e,(function(e,t,r,c){if("function"==typeof e&&void 0===e.cid){_=!0,o++;var f,i=Cu((function(t){var _;((_=t).__esModule||Iu&&"Module"===_[Symbol.toStringTag])&&(t=t.default),e.resolved="function"==typeof t?t:zo.extend(t),r.components[c]=t,--o<=0&&n()})),a=Cu((function(e){var t="Failed to resolve async component "+c+": "+e;u||(u=Su(e)?e:new Error(t),n(u))}));try{f=e(i,a)}catch(e){a(e)}if(f)if("function"==typeof f.then)f.then(i,a);else{var b=f.component;b&&"function"==typeof b.then&&b.then(i,a)}}})),_||n()}}function Bu(e,t){return Tu(e.map((function(e){return Object.keys(e.components).map((function(r){return t(e.components[r],e.instances[r],e,r)}))})))}function Tu(e){return Array.prototype.concat.apply([],e)}var Iu="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Cu(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 Au=function(e,t){this.router=e,this.base=function(e){if(!e)if(Qo){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 Du(e,t,r,n){var _=Bu(e,(function(e,n,_,o){var u=function(e,t){"function"!=typeof e&&(e=zo.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 Tu(n?_.reverse():_)}function Eu(e,t){if(t)return function(){return e.apply(t,arguments)}}Au.prototype.listen=function(e){this.cb=e},Au.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},Au.prototype.onError=function(e){this.errorCbs.push(e)},Au.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&&(ku(e,lu.redirected)&&o===go||(_.ready=!0,_.readyErrorCbs.forEach((function(t){t(e)}))))}))},Au.prototype.confirmTransition=function(e,t,r){var n=this,_=this.current;this.pending=e;var o,u,c=function(e){!ku(e)&&Su(e)&&(n.errorCbs.length?n.errorCbs.forEach((function(t){t(e)})):console.error(e)),r&&r(e)},f=e.matched.length-1,i=_.matched.length-1;if(lo(e,_)&&f===i&&e.matched[f]===_.matched[i])return this.ensureURL(),e.hash&&uu(this.router,_,e,!1),c(((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,_=Ou(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){xu(ko(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){wu(ko(n.base+e.fullPath)),uu(n.router,e,_,!1),t&&t(e)}),r)},t.prototype.ensureURL=function(e){if(Ou(this.base)!==this.current.fullPath){var t=ko(this.base+this.current.fullPath);e?xu(t):wu(t)}},t.prototype.getCurrentLocation=function(){return Ou(this.base)},t}(Au);function Ou(e){var t=window.location.pathname,r=t.toLowerCase(),n=e.toLowerCase();return!e||r!==n&&0!==r.indexOf(ko(n+"/"))||(t=t.slice(e.length)),(t||"/")+window.location.search+window.location.hash}var Lu=function(e){function t(t,r,n){e.call(this,t,r),n&&function(e){var t=Ou(e);if(!/^\/#/.test(t))return window.location.replace(ko(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(Fu(),(function(n){r&&uu(e.router,n,t,!0),gu||qu(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){Gu(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){qu(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;Fu()!==t&&(e?Gu(t):qu(t))},t.prototype.getCurrentLocation=function(){return Fu()},t}(Au);function Ru(){var e=Fu();return"/"===e.charAt(0)||(qu("/"+e),!1)}function Fu(){var e=window.location.href,t=e.indexOf("#");return t<0?"":e=e.slice(t+1)}function Vu(e){var t=window.location.href,r=t.indexOf("#");return(r>=0?t.slice(0,r):t)+"#"+e}function Gu(e){gu?xu(Vu(e)):window.location.hash=e}function qu(e){gu?wu(Vu(e)):window.location.replace(Vu(e))}var Wu=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){ku(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}(Au),Uu=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Yo(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!gu&&!1!==e.fallback,this.fallback&&(t="hash"),Qo||(t="abstract"),this.mode=t,t){case"history":this.history=new Mu(this,e.base);break;case"hash":this.history=new Lu(this,e.base,this.fallback);break;case"abstract":this.history=new Wu(this,e.base);break;default:0}},zu={currentRoute:{configurable:!0}};Uu.prototype.match=function(e,t,r){return this.matcher.match(e,t,r)},zu.currentRoute.get=function(){return this.history&&this.history.current},Uu.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 Mu||r instanceof Lu){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}))}))}},Uu.prototype.beforeEach=function(e){return Nu(this.beforeHooks,e)},Uu.prototype.beforeResolve=function(e){return Nu(this.resolveHooks,e)},Uu.prototype.afterEach=function(e){return Nu(this.afterHooks,e)},Uu.prototype.onReady=function(e,t){this.history.onReady(e,t)},Uu.prototype.onError=function(e){this.history.onError(e)},Uu.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)},Uu.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)},Uu.prototype.go=function(e){this.history.go(e)},Uu.prototype.back=function(){this.go(-1)},Uu.prototype.forward=function(){this.go(1)},Uu.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]}))}))):[]},Uu.prototype.resolve=function(e,t,r){var n=Uo(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?ko(e+"/"+n):n}(this.history.base,o,this.mode),normalizedTo:n,resolved:_}},Uu.prototype.getRoutes=function(){return this.matcher.getRoutes()},Uu.prototype.addRoute=function(e,t){this.matcher.addRoute(e,t),this.history.current!==go&&this.history.transitionTo(this.history.getCurrentLocation())},Uu.prototype.addRoutes=function(e){this.matcher.addRoutes(e),this.history.current!==go&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(Uu.prototype,zu);var $u=Uu;function Nu(e,t){return e.push(t),function(){var r=e.indexOf(t);r>-1&&e.splice(r,1)}}Uu.install=function e(t){if(!e.installed||zo!==t){e.installed=!0,zo=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",No);var _=t.config.optionMergeStrategies;_.beforeRouteEnter=_.beforeRouteLeave=_.beforeRouteUpdate=_.created}},Uu.version="3.6.5",Uu.isNavigationFailure=ku,Uu.NavigationFailureType=lu,Uu.START_LOCATION=go,Qo&&window.Vue&&window.Vue.use(Uu);r(105);r(92),r(91);var Ku={"components/AlgoliaSearchBox":()=>Promise.all([r.e(0),r.e(38)]).then(r.bind(null,431)),"components/DropdownLink":()=>Promise.all([r.e(0),r.e(12)]).then(r.bind(null,282)),"components/DropdownTransition":()=>Promise.all([r.e(0),r.e(39)]).then(r.bind(null,272)),"components/Home":()=>Promise.all([r.e(0),r.e(16)]).then(r.bind(null,311)),"components/NavLink":()=>r.e(45).then(r.bind(null,259)),"components/NavLinks":()=>Promise.all([r.e(0),r.e(11)]).then(r.bind(null,290)),"components/Navbar":()=>Promise.all([r.e(0),r.e(2)]).then(r.bind(null,428)),"components/Page":()=>Promise.all([r.e(0),r.e(21)]).then(r.bind(null,312)),"components/Sidebar":()=>Promise.all([r.e(0),r.e(9)]).then(r.bind(null,313)),"components/SidebarButton":()=>Promise.all([r.e(0),r.e(40)]).then(r.bind(null,314)),"components/SidebarGroup":()=>Promise.all([r.e(0),r.e(4)]).then(r.bind(null,291)),"components/SidebarLink":()=>Promise.all([r.e(0),r.e(22)]).then(r.bind(null,283)),"components/SidebarLinks":()=>Promise.all([r.e(0),r.e(4)]).then(r.bind(null,281)),"global-components/Badge":()=>Promise.all([r.e(0),r.e(5)]).then(r.bind(null,437)),"layouts/404":()=>r.e(6).then(r.bind(null,432)),"layouts/Layout":()=>Promise.all([r.e(0),r.e(2),r.e(3)]).then(r.bind(null,433)),NotFound:()=>r.e(6).then(r.bind(null,432)),Layout:()=>Promise.all([r.e(0),r.e(2),r.e(3)]).then(r.bind(null,433))},Qu={"v-07f576f6":()=>r.e(54).then(r.bind(null,438)),"v-55ea2f06":()=>r.e(55).then(r.bind(null,439)),"v-71235e06":()=>r.e(41).then(r.bind(null,440)),"v-7458dcb4":()=>r.e(42).then(r.bind(null,441)),"v-9a956228":()=>r.e(17).then(r.bind(null,442)),"v-935ace04":()=>r.e(15).then(r.bind(null,443)),"v-c7f0409c":()=>r.e(46).then(r.bind(null,444)),"v-3d85f24e":()=>r.e(47).then(r.bind(null,445)),"v-c24b02f4":()=>r.e(43).then(r.bind(null,446)),"v-13b45cbc":()=>r.e(23).then(r.bind(null,447)),"v-085c52d5":()=>r.e(56).then(r.bind(null,448)),"v-77b18c66":()=>r.e(10).then(r.bind(null,449)),"v-77ecefa4":()=>r.e(13).then(r.bind(null,450)),"v-5dc20574":()=>r.e(44).then(r.bind(null,451)),"v-7f8ace16":()=>r.e(14).then(r.bind(null,452)),"v-6dbdf7a6":()=>r.e(18).then(r.bind(null,453)),"v-e802d5c8":()=>r.e(58).then(r.bind(null,454)),"v-0578da5e":()=>r.e(57).then(r.bind(null,455)),"v-cdebead0":()=>r.e(60).then(r.bind(null,456)),"v-12844fda":()=>r.e(59).then(r.bind(null,457)),"v-1f8fc556":()=>r.e(61).then(r.bind(null,458)),"v-b3d4ffd8":()=>r.e(62).then(r.bind(null,459)),"v-38c220fe":()=>r.e(63).then(r.bind(null,460)),"v-125d63d8":()=>r.e(64).then(r.bind(null,461)),"v-5959fdec":()=>r.e(48).then(r.bind(null,462)),"v-548430c6":()=>r.e(65).then(r.bind(null,463)),"v-41e63074":()=>r.e(19).then(r.bind(null,464)),"v-73b54474":()=>r.e(66).then(r.bind(null,465)),"v-0d6f29f2":()=>r.e(49).then(r.bind(null,466)),"v-4a02acc0":()=>r.e(51).then(r.bind(null,467)),"v-739629a6":()=>r.e(67).then(r.bind(null,468)),"v-87b76dc4":()=>r.e(50).then(r.bind(null,469)),"v-a9b07284":()=>r.e(52).then(r.bind(null,470)),"v-5f93f1f6":()=>r.e(68).then(r.bind(null,471)),"v-0de8b466":()=>r.e(69).then(r.bind(null,472))};function Hu(e){const t=Object.create(null);return function(r){return t[r]||(t[r]=e(r))}}const Xu=/-(\w)/g,Yu=Hu(e=>e.replace(Xu,(e,t)=>t?t.toUpperCase():"")),Zu=/\B([A-Z])/g,Ju=Hu(e=>e.replace(Zu,"-$1").toLowerCase()),ec=Hu(e=>e.charAt(0).toUpperCase()+e.slice(1));function tc(e,t){if(!t)return;if(e(t))return e(t);return t.includes("-")?e(ec(Yu(t))):e(ec(t))||e(Ju(t))}const rc=Object.assign({},Ku,Qu),nc=e=>rc[e],_c=e=>Qu[e],oc=e=>Ku[e],uc=e=>Nr.component(e);function cc(e){return tc(_c,e)}function fc(e){return tc(oc,e)}function ic(e){return tc(nc,e)}function ac(e){return tc(uc,e)}function bc(...e){return Promise.all(e.filter(e=>e).map(async e=>{if(!ac(e)&&ic(e)){const t=await ic(e)();Nr.component(e,t.default)}}))}function sc(e,t){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[e]=t)}var dc=r(89),pc=r.n(dc),gc=r(90),xc=r.n(gc),wc={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}="${xc()(e[r])}"`}),t+">"}).join("\n "):"",this.$ssrContext.canonicalLink=hc(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=mc(e,this.currentMetaTags)},getMergedMetaTags(){const e=this.$page.frontmatter.meta||[];return pc()([{name:"description",content:this.$description}],e,this.siteMeta,vc)},updateCanonicalLink(){lc(),this.$canonicalUrl&&document.head.insertAdjacentHTML("beforeend",hc(this.$canonicalUrl))}},watch:{$page(){this.updateMeta(),this.updateCanonicalLink()}},beforeDestroy(){mc(null,this.currentMetaTags),lc()}};function lc(){const e=document.querySelector("link[rel='canonical']");e&&e.remove()}function hc(e=""){return e?``:""}function mc(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 vc(e){for(const t of["name","property","itemprop"])if(e.hasOwnProperty(t))return e[t]+t;return JSON.stringify(e)}var yc=r(22),Sc=r.n(yc),kc={mounted(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:Sc()((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)}},Pc=r(23),jc=r.n(Pc),Bc={mounted(){jc.a.configure({showSpinner:!1}),this.$router.beforeEach((e,t,r)=>{e.path===t.path||Nr.component(e.name)||jc.a.start(),r()}),this.$router.afterEach(()=>{jc.a.done(),this.isSidebarOpen=!1})}},Tc={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)}}},Ic=(r(236),r(8)),Cc=Object(Ic.a)(Tc,(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,Ac=(r(237),[wc,kc,Bc,{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(Nr.extend(Cc));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)}}}]),Dc={name:"GlobalLayout",computed:{layout(){const e=this.getLayout();return sc("layout",e),Nr.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"}}},Ec=Object(Ic.a)(Dc,(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.")}}(Ec,"mixins",Ac);const Mc=[{name:"v-07f576f6",path:"/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-07f576f6").then(r)}},{path:"/index.html",redirect:"/"},{name:"v-55ea2f06",path:"/beginner/tutorial1-window/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-55ea2f06").then(r)}},{path:"/beginner/tutorial1-window/index.html",redirect:"/beginner/tutorial1-window/"},{name:"v-71235e06",path:"/beginner/tutorial2-surface/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-71235e06").then(r)}},{path:"/beginner/tutorial2-surface/index.html",redirect:"/beginner/tutorial2-surface/"},{name:"v-7458dcb4",path:"/beginner/tutorial3-pipeline/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-7458dcb4").then(r)}},{path:"/beginner/tutorial3-pipeline/index.html",redirect:"/beginner/tutorial3-pipeline/"},{name:"v-9a956228",path:"/beginner/tutorial4-buffer/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-9a956228").then(r)}},{path:"/beginner/tutorial4-buffer/index.html",redirect:"/beginner/tutorial4-buffer/"},{name:"v-935ace04",path:"/beginner/tutorial5-textures/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-935ace04").then(r)}},{path:"/beginner/tutorial5-textures/index.html",redirect:"/beginner/tutorial5-textures/"},{name:"v-c7f0409c",path:"/beginner/tutorial6-uniforms/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-c7f0409c").then(r)}},{path:"/beginner/tutorial6-uniforms/index.html",redirect:"/beginner/tutorial6-uniforms/"},{name:"v-3d85f24e",path:"/beginner/tutorial7-instancing/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-3d85f24e").then(r)}},{path:"/beginner/tutorial7-instancing/index.html",redirect:"/beginner/tutorial7-instancing/"},{name:"v-c24b02f4",path:"/beginner/tutorial8-depth/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-c24b02f4").then(r)}},{path:"/beginner/tutorial8-depth/index.html",redirect:"/beginner/tutorial8-depth/"},{name:"v-13b45cbc",path:"/beginner/tutorial9-models/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-13b45cbc").then(r)}},{path:"/beginner/tutorial9-models/index.html",redirect:"/beginner/tutorial9-models/"},{name:"v-085c52d5",path:"/intermediate/pbr-notes.html",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-085c52d5").then(r)}},{name:"v-77b18c66",path:"/intermediate/tutorial10-lighting/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-77b18c66").then(r)}},{path:"/intermediate/tutorial10-lighting/index.html",redirect:"/intermediate/tutorial10-lighting/"},{name:"v-77ecefa4",path:"/intermediate/tutorial11-normals/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-77ecefa4").then(r)}},{path:"/intermediate/tutorial11-normals/index.html",redirect:"/intermediate/tutorial11-normals/"},{name:"v-5dc20574",path:"/intermediate/tutorial12-camera/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-5dc20574").then(r)}},{path:"/intermediate/tutorial12-camera/index.html",redirect:"/intermediate/tutorial12-camera/"},{name:"v-7f8ace16",path:"/intermediate/tutorial13-hdr/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-7f8ace16").then(r)}},{path:"/intermediate/tutorial13-hdr/index.html",redirect:"/intermediate/tutorial13-hdr/"},{name:"v-6dbdf7a6",path:"/intermediate/wip-terrain/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-6dbdf7a6").then(r)}},{path:"/intermediate/wip-terrain/index.html",redirect:"/intermediate/wip-terrain/"},{name:"v-e802d5c8",path:"/news/0.13/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-e802d5c8").then(r)}},{path:"/news/0.13/index.html",redirect:"/news/0.13/"},{name:"v-0578da5e",path:"/news/0.12/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-0578da5e").then(r)}},{path:"/news/0.12/index.html",redirect:"/news/0.12/"},{name:"v-cdebead0",path:"/news/0.15/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-cdebead0").then(r)}},{path:"/news/0.15/index.html",redirect:"/news/0.15/"},{name:"v-12844fda",path:"/news/0.14/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-12844fda").then(r)}},{path:"/news/0.14/index.html",redirect:"/news/0.14/"},{name:"v-1f8fc556",path:"/news/0.16/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-1f8fc556").then(r)}},{path:"/news/0.16/index.html",redirect:"/news/0.16/"},{name:"v-b3d4ffd8",path:"/news/0.17/",component:Ec,beforeEnter:(e,t,r)=>{bc("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:Ec,beforeEnter:(e,t,r)=>{bc("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-125d63d8",path:"/news/22.0/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-125d63d8").then(r)}},{path:"/news/22.0/index.html",redirect:"/news/22.0/"},{name:"v-5959fdec",path:"/news/pre-0.12/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-5959fdec").then(r)}},{path:"/news/pre-0.12/index.html",redirect:"/news/pre-0.12/"},{name:"v-548430c6",path:"/showcase/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-548430c6").then(r)}},{path:"/showcase/index.html",redirect:"/showcase/"},{name:"v-41e63074",path:"/showcase/compute/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-41e63074").then(r)}},{path:"/showcase/compute/index.html",redirect:"/showcase/compute/"},{name:"v-73b54474",path:"/showcase/alignment/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-73b54474").then(r)}},{path:"/showcase/alignment/index.html",redirect:"/showcase/alignment/"},{name:"v-0d6f29f2",path:"/showcase/gifs/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-0d6f29f2").then(r)}},{path:"/showcase/gifs/index.html",redirect:"/showcase/gifs/"},{name:"v-4a02acc0",path:"/showcase/pong/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-4a02acc0").then(r)}},{path:"/showcase/pong/index.html",redirect:"/showcase/pong/"},{name:"v-739629a6",path:"/showcase/threading/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-739629a6").then(r)}},{path:"/showcase/threading/index.html",redirect:"/showcase/threading/"},{name:"v-87b76dc4",path:"/showcase/imgui-demo/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-87b76dc4").then(r)}},{path:"/showcase/imgui-demo/index.html",redirect:"/showcase/imgui-demo/"},{name:"v-a9b07284",path:"/showcase/windowless/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-a9b07284").then(r)}},{path:"/showcase/windowless/index.html",redirect:"/showcase/windowless/"},{name:"v-5f93f1f6",path:"/todo.html",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-5f93f1f6").then(r)}},{name:"v-0de8b466",path:"/topics/",component:Ec,beforeEnter:(e,t,r)=>{bc("Layout","v-0de8b466").then(r)}},{path:"/topics/index.html",redirect:"/topics/"},{path:"*",component:Ec}],Oc={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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{title:"Sources",frontmatter:{},regularPath:"/intermediate/pbr-notes.html",relativePath:"intermediate/pbr-notes.md",key:"v-085c52d5",path:"/intermediate/pbr-notes.html",lastUpdated:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"Output too dark on WebGPU?",slug:"output-too-dark-on-webgpu"},{level:2,title:"Demo",slug:"demo"}],lastUpdated:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{title:"Update to 0.13!",frontmatter:{},regularPath:"/news/0.13/",relativePath:"news/0.13/readme.md",key:"v-e802d5c8",path:"/news/0.13/",lastUpdated:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{title:"Update to 0.15!",frontmatter:{},regularPath:"/news/0.15/",relativePath:"news/0.15/readme.md",key:"v-cdebead0",path:"/news/0.15/",lastUpdated:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{title:"Update to 0.16",frontmatter:{},regularPath:"/news/0.16/",relativePath:"news/0.16/readme.md",key:"v-1f8fc556",path:"/news/0.16/",lastUpdated:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{title:"Update to 0.17",frontmatter:{},regularPath:"/news/0.17/",relativePath:"news/0.17/readme.md",key:"v-b3d4ffd8",path:"/news/0.17/",lastUpdated:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{title:"First Major Version! (22.0)",frontmatter:{},regularPath:"/news/22.0/",relativePath:"news/22.0/readme.md",key:"v-125d63d8",path:"/news/22.0/",lastUpdated:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{title:"Foreword",frontmatter:{},regularPath:"/showcase/",relativePath:"showcase/README.md",key:"v-548430c6",path:"/showcase/",lastUpdated:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{title:"Basic Imgui Demo",frontmatter:{},regularPath:"/showcase/imgui-demo/",relativePath:"showcase/imgui-demo/README.md",key:"v-87b76dc4",path:"/showcase/imgui-demo/",lastUpdated:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{title:"Coming Soon!",frontmatter:{},regularPath:"/todo.html",relativePath:"todo.md",key:"v-5f93f1f6",path:"/todo.html",lastUpdated:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3},{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:"7/20/2024, 7:09:31 PM",lastUpdatedTimestamp:1721502571e3}],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);Nr.component("AutoGithubLink",()=>Promise.all([r.e(0),r.e(37)]).then(r.bind(null,434))),Nr.component("RecentArticles",()=>r.e(53).then(r.bind(null,435))),Nr.component("WasmExample",()=>Promise.all([r.e(0),r.e(20)]).then(r.bind(null,436))),Nr.component("Badge",()=>Promise.all([r.e(0),r.e(5)]).then(r.bind(null,437)));r(239);var Lc={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",Sc()(()=>{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}}},Rc=(r(240),Object(Ic.a)(Lc,(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),Fc=[{},({Vue:e})=>{e.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{},({Vue:e})=>{e.component("CodeCopy",Cc)},({Vue:e})=>{e.component("BackToTop",Rc)}],Vc=["BackToTop"];class Gc extends class{constructor(){this.store=new Nr({data:{state:{}}})}$get(e){return this.store.state[e]}$set(e,t){Nr.set(this.store.state,e,t)}$emit(...e){this.store.$emit(...e)}$on(...e){this.store.$on(...e)}}{}Object.assign(Gc.prototype,{getPageAsyncComponent:cc,getLayoutAsyncComponent:fc,getAsyncComponent:ic,getVueComponent:ac});var qc={install(e){const t=new Gc;e.$vuepress=t,e.prototype.$vuepress=t}};function Wc(e,t){const r=t.toLowerCase();return e.options.routes.some(e=>e.path.toLowerCase()===r)}var Uc={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(e){const t=this.pageKey||this.$parent.$page.key;return sc("pageKey",t),Nr.component(t)||Nr.component(t,cc(t)),Nr.component(t)?e(t):e("")}},zc={functional:!0,props:{slotKey:String,required:!0},render:(e,{props:t,slots:r})=>e("div",{class:["content__"+t.slotKey]},r()[t.slotKey])},$c={computed:{openInNewWindowTitle(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},Nc=(r(241),r(242),Object(Ic.a)($c,(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),Kc={functional:!0,render(e,{parent:t,children:r}){if(t._isMounted)return r;t.$once("hook:mounted",()=>{t.$forceUpdate()})}};Nr.config.productionTip=!1,Nr.use($u),Nr.use(qc),Nr.mixin(function(e,t,r=Nr){!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?!Nr.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(e.hash)}:{x:0,y:0})});!function(e){e.beforeEach((t,r,n)=>{if(Wc(e,t.path))n();else if(/(\/|\.html)$/.test(t.path))if(/\/$/.test(t.path)){const r=t.path.replace(/\/$/,"")+".html";Wc(e,r)?n(r):n()}else n();else{const r=t.path+"/",_=t.path+".html";Wc(e,_)?n(_):Wc(e,r)?n(r):n()}})}(r);const n={};try{await Promise.all(Fc.filter(e=>"function"==typeof e).map(t=>t({Vue:Nr,options:n,router:r,siteData:Oc,isServer:e})))}catch(e){console.error(e)}return{app:new Nr(Object.assign(n,{router:r,render:e=>e("div",{attrs:{id:"app"}},[e("RouterView",{ref:"layout"}),e("div",{class:"global-ui"},Vc.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/vendors~docsearch.c367c814.js b/assets/js/vendors~docsearch.94892a89.js similarity index 99% rename from assets/js/vendors~docsearch.c367c814.js rename to assets/js/vendors~docsearch.94892a89.js index cb8179d0e..57d4021cd 100644 --- a/assets/js/vendors~docsearch.c367c814.js +++ b/assets/js/vendors~docsearch.94892a89.js @@ -1,3 +1,3 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{432:function(t,e,n){ +(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{429:function(t,e,n){ /*! docsearch 2.6.3 | © Algolia | github.com/algolia/docsearch */ -var r;"undefined"!=typeof self&&self,r=function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=22)}([function(t,e,n){"use strict";var r,i=n(1);function s(t){return t.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}t.exports={isArray:null,isFunction:null,isObject:null,bind:null,each:null,map:null,mixin:null,isMsie:function(t){if(void 0===t&&(t=navigator.userAgent),/(msie|trident)/i.test(t)){var e=t.match(/(msie |rv:)(\d+(.\d+)?)/i);if(e)return e[2]}return!1},escapeRegExChars:function(t){return t.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")},isNumber:function(t){return"number"==typeof t},toStr:function(t){return null==t?"":t+""},cloneDeep:function(t){var e=this.mixin({},t),n=this;return this.each(e,(function(t,r){t&&(n.isArray(t)?e[r]=[].concat(t):n.isObject(t)&&(e[r]=n.cloneDeep(t)))})),e},error:function(t){throw new Error(t)},every:function(t,e){var n=!0;return t?(this.each(t,(function(r,i){n&&(n=e.call(null,r,i,t)&&n)})),!!n):n},any:function(t,e){var n=!1;return t?(this.each(t,(function(r,i){if(e.call(null,r,i,t))return n=!0,!1})),n):n},getUniqueId:(r=0,function(){return r++}),templatify:function(t){if(this.isFunction(t))return t;var e=i.element(t);return"SCRIPT"===e.prop("tagName")?function(){return e.text()}:function(){return String(t)}},defer:function(t){setTimeout(t,0)},noop:function(){},formatPrefix:function(t,e){return e?"":t+"-"},className:function(t,e,n){return(n?"":".")+t+e},escapeHighlightedString:function(t,e,n){e=e||"";var r=document.createElement("div");r.appendChild(document.createTextNode(e)),n=n||"";var i=document.createElement("div");i.appendChild(document.createTextNode(n));var o=document.createElement("div");return o.appendChild(document.createTextNode(t)),o.innerHTML.replace(RegExp(s(r.innerHTML),"g"),e).replace(RegExp(s(i.innerHTML),"g"),n)}}},function(t,e,n){"use strict";t.exports={element:null}},function(t,e){var n=Object.prototype.hasOwnProperty,r=Object.prototype.toString;t.exports=function(t,e,i){if("[object Function]"!==r.call(e))throw new TypeError("iterator must be a function");var s=t.length;if(s===+s)for(var o=0;o was loaded but did not call our provided callback"),JSONPScriptError:s("JSONPScriptError"," + diff --git a/beginner/tutorial2-surface/index.html b/beginner/tutorial2-surface/index.html index f6fe3f2b2..1ab1da1e1 100644 --- a/beginner/tutorial2-surface/index.html +++ b/beginner/tutorial2-surface/index.html @@ -8,7 +8,7 @@ - + @@ -173,13 +173,13 @@ winit = { version = "0.29", features = ["rwh_05"] } env_logger = "0.10" log = "0.4" -wgpu = "0.19" +wgpu = "22.0" pollster = "0.3" [target.'cfg(target_arch = "wasm32")'.dependencies] console_error_panic_hook = "0.1.6" console_log = "1.0" -wgpu = { version = "0.19", features = ["webgl"]} +wgpu = { version = "22.0", features = ["webgl"]} wasm-bindgen = "0.2" wasm-bindgen-futures = "0.4" web-sys = { version = "0.3", features = [ @@ -325,7 +325,7 @@ 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 wgpu::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: 7/2/2024, 3:21:30 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 wgpu::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: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/beginner/tutorial3-pipeline/index.html b/beginner/tutorial3-pipeline/index.html index 871d60c8c..321f47621 100644 --- a/beginner/tutorial3-pipeline/index.html +++ b/beginner/tutorial3-pipeline/index.html @@ -8,7 +8,7 @@ - + @@ -120,8 +120,9 @@ alpha_to_coverage_enabled: false, // 4. }, multiview: None, // 5. + cache: None, // 6. }); -

The rest of the method is pretty simple:

  1. We're not using a depth/stencil buffer currently, so we leave depth_stencil as None. This will change later.
  2. count determines how many samples the pipeline will use. Multisampling is a complex topic, so we won't get into it here.
  3. mask specifies which samples should be active. In this case, we are using all of them.
  4. alpha_to_coverage_enabled has to do with anti-aliasing. We're not covering anti-aliasing here, so we'll leave this as false now.
  5. multiview indicates how many array layers the render attachments can have. We won't be rendering to array textures, so we can set this to None.

Now, all we have to do is add the render_pipeline to State, and then we can use it!

// new()
+

The rest of the method is pretty simple:

  1. We're not using a depth/stencil buffer currently, so we leave depth_stencil as None. This will change later.
  2. count determines how many samples the pipeline will use. Multisampling is a complex topic, so we won't get into it here.
  3. mask specifies which samples should be active. In this case, we are using all of them.
  4. alpha_to_coverage_enabled has to do with anti-aliasing. We're not covering anti-aliasing here, so we'll leave this as false now.
  5. multiview indicates how many array layers the render attachments can have. We won't be rendering to array textures, so we can set this to None.
  6. cache allows wgpu to cache shader compilation data. Only really useful for Android build targets.

Now, all we have to do is add the render_pipeline to State, and then we can use it!

// new()
 Self {
     surface,
     device,
@@ -164,7 +165,7 @@
     render_pass.draw(0..3, 0..1); // 3.
 }
 // ...
-

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

  1. We renamed _render_pass to render_pass and made it mutable.
  2. We set the pipeline on the render_pass using the one we just created.
  3. We tell wgpu to draw something with 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/beginner/tutorial4-buffer/index.html b/beginner/tutorial4-buffer/index.html index 468cd0a01..2430429d8 100644 --- a/beginner/tutorial4-buffer/index.html +++ b/beginner/tutorial4-buffer/index.html @@ -8,7 +8,7 @@ - + @@ -44,7 +44,7 @@ } );

To access the create_buffer_init method on wgpu::Device, we'll have to import the DeviceExt (opens new window) extension trait. For more information on extension traits, check out this article (opens new window).

To import the extension trait, put this line somewhere near the top of lib.rs.

use wgpu::util::DeviceExt;
-

You'll note that we're using bytemuck (opens new window) to cast our VERTICES as a &[u8]. The create_buffer_init() method expects a &[u8], and bytemuck::cast_slice does that for us. Add the following to your Cargo.toml.

bytemuck = { version = "1.12", features = [ "derive" ] }
+

You'll note that we're using bytemuck (opens new window) to cast our VERTICES as a &[u8]. The create_buffer_init() method expects a &[u8], and bytemuck::cast_slice does that for us. Add the following to your Cargo.toml.

bytemuck = { version = "1.16", features = [ "derive" ] }

We're also going to need to implement two traits to get bytemuck to work. These are bytemuck::Pod (opens new window) and bytemuck::Zeroable (opens new window). Pod indicates that our Vertex is "Plain Old Data", and thus can be interpreted as a &[u8]. Zeroable indicates that we can use std::mem::zeroed(). We can modify our Vertex struct to derive these methods.

#[repr(C)]
 #[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]
 struct Vertex {
@@ -259,7 +259,7 @@
 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.

Most software that uses colors stores them in sRGB format (or a similar proprietary one). Wgpu expects values in linear color space, so we have to convert the values.

You get the correct color using the following formula: rgb_color = ((srgb_color / 255 + 0.055) / 1.055) ^ 2.4. Doing this with an sRGB 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 if they are store in an sRGB texture, the conversion to linear will happen automatically. 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: 7/2/2024, 3:21:30 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.

Most software that uses colors stores them in sRGB format (or a similar proprietary one). Wgpu expects values in linear color space, so we have to convert the values.

You get the correct color using the following formula: rgb_color = ((srgb_color / 255 + 0.055) / 1.055) ^ 2.4. Doing this with an sRGB 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 if they are store in an sRGB texture, the conversion to linear will happen automatically. 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: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/beginner/tutorial5-textures/index.html b/beginner/tutorial5-textures/index.html index 319db1d5e..e9c0bba9b 100644 --- a/beginner/tutorial5-textures/index.html +++ b/beginner/tutorial5-textures/index.html @@ -8,7 +8,7 @@ - + @@ -284,13 +284,14 @@ env_logger = "0.10" log = "0.4" pollster = "0.3" -wgpu = "0.19" -bytemuck = { version = "1.12", features = [ "derive" ] } +wgpu = "22.0" +bytemuck = { version = "1.16", features = [ "derive" ] } anyhow = "1.0" # NEW!

Then, in a new file called src/texture.rs, add the following:

use image::GenericImageView;
 use anyhow::*;
 
 pub struct Texture {
+    #[allow(unused)]
     pub texture: wgpu::Texture,
     pub view: wgpu::TextureView,
     pub sampler: wgpu::Sampler,
@@ -404,7 +405,7 @@
         }
     }
 }
-

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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/beginner/tutorial6-uniforms/index.html b/beginner/tutorial6-uniforms/index.html index abb3a0956..185a00012 100644 --- a/beginner/tutorial6-uniforms/index.html +++ b/beginner/tutorial6-uniforms/index.html @@ -8,7 +8,7 @@ - + @@ -312,7 +312,7 @@ 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/beginner/tutorial7-instancing/index.html b/beginner/tutorial7-instancing/index.html index 406210cab..587c2399f 100644 --- a/beginner/tutorial7-instancing/index.html +++ b/beginner/tutorial7-instancing/index.html @@ -8,7 +8,7 @@ - + @@ -171,7 +171,7 @@ 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/beginner/tutorial8-depth/index.html b/beginner/tutorial8-depth/index.html index 306c085cd..d2e8c5f31 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/beginner/tutorial9-models/index.html b/beginner/tutorial9-models/index.html index ba44bd1a3..cddee753c 100644 --- a/beginner/tutorial9-models/index.html +++ b/beginner/tutorial9-models/index.html @@ -8,7 +8,7 @@ - + @@ -425,7 +425,7 @@

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: 7/2/2024, 3:21:30 PM

+

Check out the code! (opens new window)
Last Updated: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/c81a3eda199ddc6e6d52.module.wasm b/c81a3eda199ddc6e6d52.module.wasm new file mode 100644 index 000000000..88878522c Binary files /dev/null and b/c81a3eda199ddc6e6d52.module.wasm differ diff --git a/23d19c049a86118e3eb7.module.wasm b/d2f6dd374021f16deff0.module.wasm similarity index 75% rename from 23d19c049a86118e3eb7.module.wasm rename to d2f6dd374021f16deff0.module.wasm index d69b90bd3..9ad323041 100644 Binary files a/23d19c049a86118e3eb7.module.wasm and b/d2f6dd374021f16deff0.module.wasm differ diff --git a/e9164ff828998a9902a1.module.wasm b/e9164ff828998a9902a1.module.wasm deleted file mode 100644 index 361d8e944..000000000 Binary files a/e9164ff828998a9902a1.module.wasm and /dev/null differ diff --git a/fdb8f3af1a96e63cc9b1.module.wasm b/fdb8f3af1a96e63cc9b1.module.wasm deleted file mode 100644 index 76da2cb81..000000000 Binary files a/fdb8f3af1a96e63cc9b1.module.wasm and /dev/null differ diff --git a/index.html b/index.html index c9734ee93..0625b5c9c 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: 7/2/2024, 3:21:30 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
  • yutani
  • Gunstein Vatnar
  • Lennart
  • Paul E Hansen
  • Eliot Bolduc
  • Ian Gowen
  • Ben Anderson
  • Aron Granberg
  • Ken K
  • Bernard Llanos
  • Danny McGee
  • Thunk
  • Zeh Fernando
  • Craft Links
  • Felix
  • Youngsuk Kim
  • Tema
  • オリトイツキ
  • Andrea Postal
  • Davide Prati
  • 大典 加藤
  • charlesk
  • Julius Liu
  • Feng Liang
  • dadofboi
  • Mattia Samiolo
  • Jani Turkia
  • papyDoctor
  • Filip
  • Alexander Kabirov
  • Nico Arbogast
  • Dude
  • Georeth Zhow
  • Lions Heart
  • Ryan
Last Updated: 7/20/2024, 7:09:31 PM

Dependencies and the window →

- + diff --git a/intermediate/pbr-notes.html b/intermediate/pbr-notes.html index f75b985c8..3ab69f239 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM
+ diff --git a/intermediate/tutorial10-lighting/index.html b/intermediate/tutorial10-lighting/index.html index f683793e0..d25b6a9ff 100644 --- a/intermediate/tutorial10-lighting/index.html +++ b/intermediate/tutorial10-lighting/index.html @@ -8,7 +8,7 @@ - + @@ -93,6 +93,7 @@ module: &shader, entry_point: "vs_main", buffers: vertex_layouts, + compilation_options: Default::default(), }, fragment: Some(wgpu::FragmentState { module: &shader, @@ -105,6 +106,7 @@ }), write_mask: wgpu::ColorWrites::ALL, })], + compilation_options: Default::default(), }), primitive: wgpu::PrimitiveState { topology: wgpu::PrimitiveTopology::TriangleList, @@ -625,7 +627,7 @@ 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/intermediate/tutorial11-normals/index.html b/intermediate/tutorial11-normals/index.html index 97b4e176f..246883d09 100644 --- a/intermediate/tutorial11-normals/index.html +++ b/intermediate/tutorial11-normals/index.html @@ -8,7 +8,7 @@ - + @@ -475,7 +475,7 @@ &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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/intermediate/tutorial12-camera/index.html b/intermediate/tutorial12-camera/index.html index a328b978d..0f9aa6e12 100644 --- a/intermediate/tutorial12-camera/index.html +++ b/intermediate/tutorial12-camera/index.html @@ -8,7 +8,7 @@ - + @@ -373,7 +373,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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/intermediate/tutorial13-hdr/index.html b/intermediate/tutorial13-hdr/index.html index 4d76c6f03..3f2bc4771 100644 --- a/intermediate/tutorial13-hdr/index.html +++ b/intermediate/tutorial13-hdr/index.html @@ -8,7 +8,7 @@ - + @@ -384,7 +384,7 @@ ) .await .unwrap(); -

You may have noted that we have switched from downlevel_webgl2_defaults() to downlevel_defaults(). This means that we are dropping support for WebGL2. The reason for this is that WebGL2 doesn't support the compute shaders. WebGPU was built with compute shaders in mind. As of writing, the only browser that supports WebGPU is Chrome and some experimental browsers such as Firefox Nightly.

Consequently, we are going to remove the WebGL feature from Cargo.toml. This line in particular:

wgpu = { version = "0.19", features = ["webgl"]}
+

You may have noted that we have switched from downlevel_webgl2_defaults() to downlevel_defaults(). This means that we are dropping support for WebGL2. The reason for this is that WebGL2 doesn't support the compute shaders. WebGPU was built with compute shaders in mind. As of writing, the only browser that supports WebGPU is Chrome and some experimental browsers such as Firefox Nightly.

Consequently, we are going to remove the WebGL feature from Cargo.toml. This line in particular:

wgpu = { version = "22.0", features = ["webgl"]}

Now that we've told wgpu that we want to use the compute shaders, let's create a struct in resource.rs that we'll use to load the HDR image into our cube map.

pub struct HdrLoader {
     texture_format: wgpu::TextureFormat,
     equirect_layout: wgpu::BindGroupLayout,
@@ -433,6 +433,8 @@
                 layout: Some(&pipeline_layout),
                 module: &module,
                 entry_point: "compute_equirect_to_cubemap",
+                compilation_options: Default::default(),
+                cache: None,
             });
 
         Self {
@@ -1004,7 +1006,7 @@
 we use config.format.add_srgb_suffix() when creating
 the render pipeline. This is required as if we don't
 the sRGB enabled TextureView won't work with the
-render pipeline.
 
With that you should get the sRGB output as expected.
 
# Demo
 
If your browser doesn't support WebGPU, this example won't work for you.
 
 
 
Check out the code!  (opens new window)
Last Updated: 7/2/2024, 3:21:30 PM

+render pipeline.

With that you should get the sRGB output as expected.

# Demo

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

Check out the code! (opens new window)
Last Updated: 7/20/2024, 7:09:31 PM

← →

- + diff --git a/intermediate/wip-terrain/index.html b/intermediate/wip-terrain/index.html index 111f88c22..df7c8e294 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: 7/2/2024, 3:21:30 PM
- +
  • Maybe make a diagram in Blender?
  • Change to camera movement speed
    • Last Updated: 7/20/2024, 7:09:31 PM
    + diff --git a/news/0.12/index.html b/news/0.12/index.html index bae4de21e..dd99745f3 100644 --- a/news/0.12/index.html +++ b/news/0.12/index.html @@ -8,7 +8,7 @@ - + @@ -50,7 +50,7 @@ breaks glob imports (aka. use anyhow::*), I had to switch qualified imports and uses (ie. anyhow::Result). This was mostly an issue on my build scripts for some of the showcase examples.

    The main tutorial examples weren't affected, and the changes are minor, so -if you're curious feel free to look at the repo.

    Last Updated: 7/2/2024, 3:21:30 PM

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

    Last Updated: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/news/0.13/index.html b/news/0.13/index.html index f89688792..987b90f00 100644 --- a/news/0.13/index.html +++ b/news/0.13/index.html @@ -8,7 +8,7 @@ - + @@ -47,7 +47,7 @@ } output_buffer.unmap(); -

    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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/news/0.14/index.html b/news/0.14/index.html index 54d5552b1..cab0455cc 100644 --- a/news/0.14/index.html +++ b/news/0.14/index.html @@ -8,7 +8,7 @@ - + @@ -21,7 +21,7 @@ alpha_mode: wgpu::CompositeAlphaMode::Auto, // NEW! };

    # 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: 7/2/2024, 3:21:30 PM

    +

    Last Updated: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/news/0.15/index.html b/news/0.15/index.html index e0281947b..89ca72013 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/news/0.16/index.html b/news/0.16/index.html index dc67f350f..926b7599c 100644 --- a/news/0.16/index.html +++ b/news/0.16/index.html @@ -8,7 +8,7 @@ - + @@ -33,7 +33,7 @@ reqwest = { version = "0.11" } console_error_panic_hook = "0.1" console_log = "1.0" -# wgpu = { version = "0.19", features = ["webgl"]} +# wgpu = { version = "22.0", features = ["webgl"]} wasm-bindgen = "0.2" wasm-bindgen-futures = "0.4" web-sys = { version = "0.3", features = [ @@ -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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/news/0.17/index.html b/news/0.17/index.html index 24e87b294..80e98b54f 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: 7/2/2024, 3:21:30 PM

    +

    - + diff --git a/news/0.18 and hdr/index.html b/news/0.18 and hdr/index.html index 0b7d249b6..eef7050cb 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 @@ 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: 7/2/2024, 3:21:30 PM
    - +convert it to a Cubemap to be rendered.

    You can check it out here!

    Last Updated: 7/20/2024, 7:09:31 PM
    + diff --git a/news/22.0/index.html b/news/22.0/index.html new file mode 100644 index 000000000..8ce3bce2c --- /dev/null +++ b/news/22.0/index.html @@ -0,0 +1,28 @@ + + + + + + First Major Version! (22.0) | Learn Wgpu + + + + + + + + +
    Learn Wgpu

    # First Major Version! (22.0)

    Theres only a few things here. First all the shader related config +structs now have a compilation_options field. For now I'm just leaving +it as Default::default(), but if you have specific compilation +needs it's there for you.

    The next thing is RenderPipelineDescriptor and ComputePipelineDescriptor +now have a cache field. This allows you to supply a cache to use during +shader compilation. This is only really useful for Android devices as most +desktop hardware/drivers provide caching. I've left it as None for now.

    DeviceDescriptor now has a memory_hint field. You can use this to ask +the gpu to prioritize performance, memory usage, or allow you to request +a custom memory block size. These are just hints though and the hardware +has the final say in how to do things. I've left this as Default::default() +for now.

    Last Updated: 7/20/2024, 7:09:31 PM
    + + + diff --git a/news/pre-0.12/index.html b/news/pre-0.12/index.html index a0e50dd52..7ee5b6f2d 100644 --- a/news/pre-0.12/index.html +++ b/news/pre-0.12/index.html @@ -8,7 +8,7 @@ - + @@ -43,11 +43,11 @@
    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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

    ←

    - + diff --git a/showcase/alignment/index.html b/showcase/alignment/index.html index 3a6238286..2748b35f7 100644 --- a/showcase/alignment/index.html +++ b/showcase/alignment/index.html @@ -8,7 +8,7 @@ - + @@ -37,7 +37,7 @@ | = 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: 7/2/2024, 3:21:30 PM

    +

    # Additional resources

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

    Last Updated: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/showcase/compute/index.html b/showcase/compute/index.html index 0ec851e7c..b24cf8acd 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/showcase/gifs/index.html b/showcase/gifs/index.html index e6d9106cf..36b0e5bc0 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/showcase/imgui-demo/index.html b/showcase/imgui-demo/index.html index 7f543bf64..f1b2308a2 100644 --- a/showcase/imgui-demo/index.html +++ b/showcase/imgui-demo/index.html @@ -8,12 +8,12 @@ - +
    Learn Wgpu

    # Basic Imgui Demo

    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.

    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.

    For the 0.10 migration, I'll keep this example in and keep the showcase code excluded.

    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 imgui-rs (opens new window), imgui-wgpu (opens new window), and imgui-winit-support (opens new window).

    imgui = "0.7"
-imgui-wgpu = "0.19"
+imgui-wgpu = "22.0"
 imgui-winit-support = "0.7"

    I've excluded some dependencies for brevity. I'm also using the framework crate (opens new window) I've created for showcases to simplify setup. If you see a display variable in code, it's from the framework. Display is where the device, queue, swap_chain, and other basic wgpu objects are stored.

    We need to set up imgui and a WinitPlatform to get started. Do this after creating you're winit::Window.

    let mut imgui = imgui::Context::create();
 let mut platform = imgui_winit_support::WinitPlatform::init(&mut imgui);
@@ -106,7 +106,7 @@
 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM
    + diff --git a/showcase/index.html b/showcase/index.html index 00ca91097..92a4108ce 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/showcase/pong/index.html b/showcase/pong/index.html index 2058279ab..97926a046 100644 --- a/showcase/pong/index.html +++ b/showcase/pong/index.html @@ -8,11 +8,14 @@ - + -
    Learn Wgpu

    # Pong

    A screenshot of pong

    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.

    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.

    # The Architecture

    I was messing around with separating state from the render code. It ended up similar to an Entity Component System model.

    I had a State 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. State also included a game_state field of type GameState.

    #[derive(Debug, Copy, Clone, Eq, PartialEq)]
+    
      Learn Wgpu 
     
     
     
     
     
     
    # Pong
     
    A screenshot of pong
     
    This example is not working as of wgpu = "22.0". If the crate updates to
+the latest version I'll switch it over, but given that the crate maintainer
+is directing users to use glypon (opens new window)
+I'm considering either switching to using that, or writing my own text code.
     
    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.
     
    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.
     
    # The Architecture
     
    I was messing around with separating state from the render code. It ended up similar to an Entity Component System model.
     
    I had a State 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. State also included a game_state field of type GameState.
     
    #[derive(Debug, Copy, Clone, Eq, PartialEq)]
 pub enum GameState {
     MainMenu,
     Serving,
@@ -200,10 +203,10 @@
 env_logger = "0.10"
 winit = { version = "0.29", features = ["rwh_05"] }
 anyhow = "1.0"
-bytemuck = { version = "1.12", features = [ "derive" ] }
+bytemuck = { version = "1.16", features = [ "derive" ] }
 cgmath = "0.18"
 pollster = "0.3"
-wgpu = { version = "0.19", features = ["spirv"]}
+wgpu = { version = "22.0", features = ["spirv"]}
 wgpu_glyph = "0.19"
 rand = "0.8"
 rodio = { version = "0.15", default-features = false, features = ["wav"] }
@@ -222,7 +225,7 @@
     "Window",
     "Element",
 ]}
-wgpu = { version = "0.19", features = ["spirv", "webgl"]}
+wgpu = { version = "22.0", features = ["spirv", "webgl"]}
 
 [build-dependencies]
 anyhow = "1.0"
@@ -282,7 +285,7 @@
         })
         .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:  7/2/2024, 3:21:30 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.

    Last Updated: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/showcase/threading/index.html b/showcase/threading/index.html index 008b15322..f06f34091 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: 7/2/2024, 3:21:30 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: 7/20/2024, 7:09:31 PM
    + diff --git a/showcase/windowless/index.html b/showcase/windowless/index.html index 03c7651e8..0486a5415 100644 --- a/showcase/windowless/index.html +++ b/showcase/windowless/index.html @@ -8,7 +8,7 @@ - + @@ -78,7 +78,7 @@

    Update dependencies to support SPIR-V module.

    [dependencies]
 image = "0.23"
 shaderc = "0.7"
-wgpu = { version = "0.19", features = ["spirv"] }
+wgpu = { version = "22.0", features = ["spirv"] }
 pollster = "0.3"

    Using that we'll create a simple RenderPipeline.

    let vs_src = include_str!("shader.vert");
 let fs_src = include_str!("shader.frag");
@@ -229,7 +229,7 @@
 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: 7/2/2024, 3:21:30 PM

    +

    With all that you should have an image like this.

    a brown triangle

    Check out the code! (opens new window)
    Last Updated: 7/20/2024, 7:09:31 PM

    ← →

    - + diff --git a/todo.html b/todo.html index 6b288b078..f9824a7c6 100644 --- a/todo.html +++ b/todo.html @@ -8,11 +8,11 @@ - + - - + + diff --git a/topics/index.html b/topics/index.html index 88fe60215..74772670a 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: 7/20/2024, 7:09:31 PM
    +