diff --git a/c08bc2b03b8d3e04b219.module.wasm b/1db3f3e277c8bb8e2678.module.wasm similarity index 100% rename from c08bc2b03b8d3e04b219.module.wasm rename to 1db3f3e277c8bb8e2678.module.wasm diff --git a/4990b22e54352a411963.module.wasm b/291ba1cb2cb695cd4493.module.wasm similarity index 100% rename from 4990b22e54352a411963.module.wasm rename to 291ba1cb2cb695cd4493.module.wasm diff --git a/f17c9658c519731bd14c.module.wasm b/356a700c8969e0d40e37.module.wasm similarity index 100% rename from f17c9658c519731bd14c.module.wasm rename to 356a700c8969e0d40e37.module.wasm diff --git a/977d39e542f7d0bbbb2d.module.wasm b/37e3fb59595933fdfacc.module.wasm similarity index 100% rename from 977d39e542f7d0bbbb2d.module.wasm rename to 37e3fb59595933fdfacc.module.wasm diff --git a/404.html b/404.html index 99eee110..05e02feb 100644 --- a/404.html +++ b/404.html @@ -8,11 +8,11 @@ - + -

404

There's nothing here.
Take me home.
- +

404

How did we get here?
Take me home.
+ diff --git a/4abfc984666a72694b14.module.wasm b/4abfc984666a72694b14.module.wasm new file mode 100644 index 00000000..67bc1782 Binary files /dev/null and b/4abfc984666a72694b14.module.wasm differ diff --git a/7c980d823ab629cfbe16.module.wasm b/6ac46d296fd0634f4653.module.wasm similarity index 100% rename from 7c980d823ab629cfbe16.module.wasm rename to 6ac46d296fd0634f4653.module.wasm diff --git a/e2e90f9a081e427c377d.module.wasm b/82bd2cb18b12b84dd8da.module.wasm similarity index 100% rename from e2e90f9a081e427c377d.module.wasm rename to 82bd2cb18b12b84dd8da.module.wasm diff --git a/29b74b0fc1d7cfc885f7.module.wasm b/83240ac5cdfa3e30ae71.module.wasm similarity index 100% rename from 29b74b0fc1d7cfc885f7.module.wasm rename to 83240ac5cdfa3e30ae71.module.wasm diff --git a/assets/js/0.5a1994c5.js b/assets/js/0.5a1994c5.js new file mode 100644 index 00000000..e608bb27 --- /dev/null +++ b/assets/js/0.5a1994c5.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{375:function(t,r,n){"use strict";var e=n(1),o=n(0),i=n(11),u=n(6),f=n(549),a=n(376),c=n(448),s=n(206),y=n(39),h=n(19),p=n(550),d=n(92),v=n(450),l=n(451),g=n(69),A=n(10),T=n(67),w=n(7),b=n(70),x=n(28),E=n(33),R=n(46),M=n(45).f,I=n(552),O=n(43).forEach,_=n(205),U=n(12),m=n(26),L=n(37),S=n(128),B=L.get,P=L.set,Y=U.f,N=m.f,F=Math.round,C=o.RangeError,W=c.ArrayBuffer,V=W.prototype,D=c.DataView,j=a.NATIVE_ARRAY_BUFFER_VIEWS,k=a.TYPED_ARRAY_CONSTRUCTOR,G=a.TYPED_ARRAY_TAG,J=a.TypedArray,K=a.TypedArrayPrototype,$=a.aTypedArrayConstructor,q=a.isTypedArray,z=function(t,r){$(t);for(var n=0,e=r.length,o=new t(e);e>n;)o[n]=r[n++];return o},H=function(t,r){Y(t,r,{get:function(){return B(this)[r]}})},Q=function(t){var r;return E(V,t)||"ArrayBuffer"==(r=T(t))||"SharedArrayBuffer"==r},X=function(t,r){return q(t)&&!b(r)&&r in t&&p(+r)&&r>=0},Z=function(t,r){return r=g(r),X(t,r)?y(2,t[r]):N(t,r)},tt=function(t,r,n){return r=g(r),!(X(t,r)&&w(n)&&A(n,"value"))||A(n,"get")||A(n,"set")||n.configurable||A(n,"writable")&&!n.writable||A(n,"enumerable")&&!n.enumerable?Y(t,r,n):(t[r]=n.value,t)};u?(j||(m.f=Z,U.f=tt,H(K,"buffer"),H(K,"byteOffset"),H(K,"byteLength"),H(K,"length")),e({target:"Object",stat:!0,forced:!j},{getOwnPropertyDescriptor:Z,defineProperty:tt}),t.exports=function(t,r,n){var u=t.match(/\d+$/)[0]/8,a=t+(n?"Clamped":"")+"Array",c="get"+t,y="set"+t,p=o[a],g=p,A=g&&g.prototype,T={},b=function(t,r){Y(t,r,{get:function(){return function(t,r){var n=B(t);return n.view[c](r*u+n.byteOffset,!0)}(this,r)},set:function(t){return function(t,r,e){var o=B(t);n&&(e=(e=F(e))<0?0:e>255?255:255&e),o.view[y](r*u+o.byteOffset,e,!0)}(this,r,t)},enumerable:!0})};j?f&&(g=r((function(t,r,n,e){return s(t,A),S(w(r)?Q(r)?void 0!==e?new p(r,l(n,u),e):void 0!==n?new p(r,l(n,u)):new p(r):q(r)?z(g,r):i(I,g,r):new p(v(r)),t,g)})),R&&R(g,J),O(M(p),(function(t){t in g||h(g,t,p[t])})),g.prototype=A):(g=r((function(t,r,n,e){s(t,A);var o,f,a,c=0,y=0;if(w(r)){if(!Q(r))return q(r)?z(g,r):i(I,g,r);o=r,y=l(n,u);var h=r.byteLength;if(void 0===e){if(h%u)throw C("Wrong length");if((f=h-y)<0)throw C("Wrong length")}else if((f=d(e)*u)+y>h)throw C("Wrong length");a=f/u}else a=v(r),o=new W(f=a*u);for(P(t,{buffer:o,byteOffset:y,byteLength:f,length:a,view:new D(o)});c=0?e:n+e;return f<0||f>=n?void 0:r[f]}))},388:function(t,r,n){"use strict";var e=n(2),o=n(376),i=e(n(553)),u=o.aTypedArray;(0,o.exportTypedArrayMethod)("copyWithin",(function(t,r){return i(u(this),t,r,arguments.length>2?arguments[2]:void 0)}))},389:function(t,r,n){"use strict";var e=n(376),o=n(43).every,i=e.aTypedArray;(0,e.exportTypedArrayMethod)("every",(function(t){return o(i(this),t,arguments.length>1?arguments[1]:void 0)}))},390:function(t,r,n){"use strict";var e=n(376),o=n(11),i=n(425),u=e.aTypedArray;(0,e.exportTypedArrayMethod)("fill",(function(t){var r=arguments.length;return o(i,u(this),t,r>1?arguments[1]:void 0,r>2?arguments[2]:void 0)}))},391:function(t,r,n){"use strict";var e=n(376),o=n(43).filter,i=n(554),u=e.aTypedArray;(0,e.exportTypedArrayMethod)("filter",(function(t){var r=o(u(this),t,arguments.length>1?arguments[1]:void 0);return i(this,r)}))},392:function(t,r,n){"use strict";var e=n(376),o=n(43).find,i=e.aTypedArray;(0,e.exportTypedArrayMethod)("find",(function(t){return o(i(this),t,arguments.length>1?arguments[1]:void 0)}))},393:function(t,r,n){"use strict";var e=n(376),o=n(43).findIndex,i=e.aTypedArray;(0,e.exportTypedArrayMethod)("findIndex",(function(t){return o(i(this),t,arguments.length>1?arguments[1]:void 0)}))},394:function(t,r,n){"use strict";var e=n(376),o=n(43).forEach,i=e.aTypedArray;(0,e.exportTypedArrayMethod)("forEach",(function(t){o(i(this),t,arguments.length>1?arguments[1]:void 0)}))},395:function(t,r,n){"use strict";var e=n(376),o=n(99).includes,i=e.aTypedArray;(0,e.exportTypedArrayMethod)("includes",(function(t){return o(i(this),t,arguments.length>1?arguments[1]:void 0)}))},396:function(t,r,n){"use strict";var e=n(376),o=n(99).indexOf,i=e.aTypedArray;(0,e.exportTypedArrayMethod)("indexOf",(function(t){return o(i(this),t,arguments.length>1?arguments[1]:void 0)}))},397:function(t,r,n){"use strict";var e=n(0),o=n(3),i=n(2),u=n(376),f=n(129),a=n(5)("iterator"),c=e.Uint8Array,s=i(f.values),y=i(f.keys),h=i(f.entries),p=u.aTypedArray,d=u.exportTypedArrayMethod,v=c&&c.prototype,l=!o((function(){v[a].call([1])})),g=!!v&&v.values&&v[a]===v.values&&"values"===v.values.name,A=function(){return s(p(this))};d("entries",(function(){return h(p(this))}),l),d("keys",(function(){return y(p(this))}),l),d("values",A,l||!g,{name:"values"}),d(a,A,l||!g,{name:"values"})},398:function(t,r,n){"use strict";var e=n(376),o=n(2),i=e.aTypedArray,u=e.exportTypedArrayMethod,f=o([].join);u("join",(function(t){return f(i(this),t)}))},399:function(t,r,n){"use strict";var e=n(376),o=n(34),i=n(556),u=e.aTypedArray;(0,e.exportTypedArrayMethod)("lastIndexOf",(function(t){var r=arguments.length;return o(i,u(this),r>1?[t,arguments[1]]:[t])}))},400:function(t,r,n){"use strict";var e=n(376),o=n(43).map,i=n(419),u=e.aTypedArray;(0,e.exportTypedArrayMethod)("map",(function(t){return o(u(this),t,arguments.length>1?arguments[1]:void 0,(function(t,r){return new(i(t))(r)}))}))},401:function(t,r,n){"use strict";var e=n(376),o=n(207).left,i=e.aTypedArray;(0,e.exportTypedArrayMethod)("reduce",(function(t){var r=arguments.length;return o(i(this),t,r,r>1?arguments[1]:void 0)}))},402:function(t,r,n){"use strict";var e=n(376),o=n(207).right,i=e.aTypedArray;(0,e.exportTypedArrayMethod)("reduceRight",(function(t){var r=arguments.length;return o(i(this),t,r,r>1?arguments[1]:void 0)}))},403:function(t,r,n){"use strict";var e=n(376),o=e.aTypedArray,i=e.exportTypedArrayMethod,u=Math.floor;i("reverse",(function(){for(var t,r=o(this).length,n=u(r/2),e=0;e1?arguments[1]:void 0,1),n=a(t);if(l)return o(p,this,n,r);var e=this.length,i=u(n),c=0;if(i+r>e)throw s("Wrong length");for(;ci;)c[i]=n[i++];return c}),i((function(){new Int8Array(1).slice()})))},406:function(t,r,n){"use strict";var e=n(376),o=n(43).some,i=e.aTypedArray;(0,e.exportTypedArrayMethod)("some",(function(t){return o(i(this),t,arguments.length>1?arguments[1]:void 0)}))},407:function(t,r,n){"use strict";var e=n(0),o=n(2),i=n(3),u=n(35),f=n(421),a=n(376),c=n(422),s=n(423),y=n(47),h=n(424),p=e.Array,d=a.aTypedArray,v=a.exportTypedArrayMethod,l=e.Uint16Array,g=l&&o(l.prototype.sort),A=!(!g||i((function(){g(new l(2),null)}))&&i((function(){g(new l(2),{})}))),T=!!g&&!i((function(){if(y)return y<74;if(c)return c<67;if(s)return!0;if(h)return h<602;var t,r,n=new l(516),e=p(516);for(t=0;t<516;t++)r=t%4,n[t]=515-t,e[t]=t-2*r+3;for(g(n,(function(t,r){return(t/4|0)-(r/4|0)})),t=0;t<516;t++)if(n[t]!==e[t])return!0}));v("sort",(function(t){return void 0!==t&&u(t),T?g(this,t):f(d(this),function(t){return function(r,n){return void 0!==t?+t(r,n)||0:n!=n?-1:r!=r?1:0===r&&0===n?1/r>0&&1/n<0?1:-1:r>n}}(t))}),!T||A)},408:function(t,r,n){"use strict";var e=n(376),o=n(92),i=n(94),u=n(419),f=e.aTypedArray;(0,e.exportTypedArrayMethod)("subarray",(function(t,r){var n=f(this),e=n.length,a=i(t,e);return new(u(n))(n.buffer,n.byteOffset+a*n.BYTES_PER_ELEMENT,o((void 0===r?e:i(r,e))-a))}))},409:function(t,r,n){"use strict";var e=n(0),o=n(34),i=n(376),u=n(3),f=n(48),a=e.Int8Array,c=i.aTypedArray,s=i.exportTypedArrayMethod,y=[].toLocaleString,h=!!a&&u((function(){y.call(new a(1))}));s("toLocaleString",(function(){return o(y,h?f(c(this)):c(this),f(arguments))}),u((function(){return[1,2].toLocaleString()!=new a([1,2]).toLocaleString()}))||!u((function(){a.prototype.toLocaleString.call([1,2])})))},410:function(t,r,n){"use strict";var e=n(376).exportTypedArrayMethod,o=n(3),i=n(0),u=n(2),f=i.Uint8Array,a=f&&f.prototype||{},c=[].toString,s=u([].join);o((function(){c.call({})}))&&(c=function(){return s(this)});var y=a.toString!=c;e("toString",c,y)},411:function(t,r,n){n(375)("Int32",(function(t){return function(r,n,e){return t(this,r,n,e)}}))},412:function(t,r,n){n(375)("Float64",(function(t){return function(r,n,e){return t(this,r,n,e)}}))},413:function(t,r,n){var e=n(1),o=n(11),i=n(7),u=n(9),f=n(452),a=n(26),c=n(95);e({target:"Reflect",stat:!0},{get:function t(r,n){var e,s,y=arguments.length<3?r:arguments[2];return u(r)===y?r[n]:(e=a.f(r,n))?f(e)?e.value:void 0===e.get?void 0:o(e.get,y):i(s=c(r))?t(s,n,y):void 0}})},414:function(t,r,n){n(1)({global:!0},{globalThis:n(0)})},415:function(t,r,n){n(1)({target:"Object",stat:!0},{is:n(557)})},416:function(t,r,n){var e=n(1),o=n(11),i=n(9),u=n(7),f=n(452),a=n(3),c=n(12),s=n(26),y=n(95),h=n(39);e({target:"Reflect",stat:!0,forced:a((function(){var t=function(){},r=c.f(new t,"a",{configurable:!0});return!1!==Reflect.set(t.prototype,"a",1,r)}))},{set:function t(r,n,e){var a,p,d,v=arguments.length<4?r:arguments[3],l=s.f(i(r),n);if(!l){if(u(p=y(r)))return t(p,n,e,v);l=h(0)}if(f(l)){if(!1===l.writable||!u(v))return!1;if(a=s.f(v,n)){if(a.get||a.set||!1===a.writable)return!1;a.value=e,c.f(v,n,a)}else c.f(v,n,h(0,e))}else{if(void 0===(d=l.set))return!1;o(d,v,e)}return!0}})},419:function(t,r,n){var e=n(376),o=n(127),i=e.TYPED_ARRAY_CONSTRUCTOR,u=e.aTypedArrayConstructor;t.exports=function(t){return u(o(t,t[i]))}},421:function(t,r,n){var e=n(202),o=Math.floor,i=function(t,r){var n=t.length,a=o(n/2);return n<8?u(t,r):f(t,i(e(t,0,a),r),i(e(t,a),r),r)},u=function(t,r){for(var n,e,o=t.length,i=1;i0;)t[e]=t[--e];e!==i++&&(t[e]=n)}return t},f=function(t,r,n,e){for(var o=r.length,i=n.length,u=0,f=0;u1?arguments[1]:void 0,n),a=u>2?arguments[2]:void 0,c=void 0===a?n:o(a,n);c>f;)r[f++]=t;return r}},448:function(t,r,n){"use strict";var e=n(0),o=n(2),i=n(6),u=n(449),f=n(98),a=n(19),c=n(217),s=n(3),y=n(206),h=n(65),p=n(92),d=n(450),v=n(548),l=n(95),g=n(46),A=n(45).f,T=n(12).f,w=n(425),b=n(202),x=n(50),E=n(37),R=f.PROPER,M=f.CONFIGURABLE,I=E.get,O=E.set,_=e.ArrayBuffer,U=_,m=U&&U.prototype,L=e.DataView,S=L&&L.prototype,B=Object.prototype,P=e.Array,Y=e.RangeError,N=o(w),F=o([].reverse),C=v.pack,W=v.unpack,V=function(t){return[255&t]},D=function(t){return[255&t,t>>8&255]},j=function(t){return[255&t,t>>8&255,t>>16&255,t>>24&255]},k=function(t){return t[3]<<24|t[2]<<16|t[1]<<8|t[0]},G=function(t){return C(t,23,4)},J=function(t){return C(t,52,8)},K=function(t,r){T(t.prototype,r,{get:function(){return I(this)[r]}})},$=function(t,r,n,e){var o=d(n),i=I(t);if(o+r>i.byteLength)throw Y("Wrong index");var u=I(i.buffer).bytes,f=o+i.byteOffset,a=b(u,f,f+r);return e?a:F(a)},q=function(t,r,n,e,o,i){var u=d(n),f=I(t);if(u+r>f.byteLength)throw Y("Wrong index");for(var a=I(f.buffer).bytes,c=u+f.byteOffset,s=e(+o),y=0;yX;)(H=Q[X++])in U||a(U,H,_[H]);m.constructor=U}g&&l(S)!==B&&g(S,B);var Z=new L(new U(2)),tt=o(S.setInt8);Z.setInt8(0,2147483648),Z.setInt8(1,2147483649),!Z.getInt8(0)&&Z.getInt8(1)||c(S,{setInt8:function(t,r){tt(this,t,r<<24>>24)},setUint8:function(t,r){tt(this,t,r<<24>>24)}},{unsafe:!0})}else m=(U=function(t){y(this,m);var r=d(t);O(this,{bytes:N(P(r),0),byteLength:r}),i||(this.byteLength=r)}).prototype,S=(L=function(t,r,n){y(this,S),y(t,m);var e=I(t).byteLength,o=h(r);if(o<0||o>e)throw Y("Wrong offset");if(o+(n=void 0===n?e-o:p(n))>e)throw Y("Wrong length");O(this,{buffer:t,byteLength:n,byteOffset:o}),i||(this.buffer=t,this.byteLength=n,this.byteOffset=o)}).prototype,i&&(K(U,"byteLength"),K(L,"buffer"),K(L,"byteLength"),K(L,"byteOffset")),c(S,{getInt8:function(t){return $(this,1,t)[0]<<24>>24},getUint8:function(t){return $(this,1,t)[0]},getInt16:function(t){var r=$(this,2,t,arguments.length>1?arguments[1]:void 0);return(r[1]<<8|r[0])<<16>>16},getUint16:function(t){var r=$(this,2,t,arguments.length>1?arguments[1]:void 0);return r[1]<<8|r[0]},getInt32:function(t){return k($(this,4,t,arguments.length>1?arguments[1]:void 0))},getUint32:function(t){return k($(this,4,t,arguments.length>1?arguments[1]:void 0))>>>0},getFloat32:function(t){return W($(this,4,t,arguments.length>1?arguments[1]:void 0),23)},getFloat64:function(t){return W($(this,8,t,arguments.length>1?arguments[1]:void 0),52)},setInt8:function(t,r){q(this,1,t,V,r)},setUint8:function(t,r){q(this,1,t,V,r)},setInt16:function(t,r){q(this,2,t,D,r,arguments.length>2?arguments[2]:void 0)},setUint16:function(t,r){q(this,2,t,D,r,arguments.length>2?arguments[2]:void 0)},setInt32:function(t,r){q(this,4,t,j,r,arguments.length>2?arguments[2]:void 0)},setUint32:function(t,r){q(this,4,t,j,r,arguments.length>2?arguments[2]:void 0)},setFloat32:function(t,r){q(this,4,t,G,r,arguments.length>2?arguments[2]:void 0)},setFloat64:function(t,r){q(this,8,t,J,r,arguments.length>2?arguments[2]:void 0)}});x(U,"ArrayBuffer"),x(L,"DataView"),t.exports={ArrayBuffer:U,DataView:L}},449:function(t,r){t.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},450:function(t,r,n){var e=n(0),o=n(65),i=n(92),u=e.RangeError;t.exports=function(t){if(void 0===t)return 0;var r=o(t),n=i(r);if(r!==n)throw u("Wrong length or index");return n}},451:function(t,r,n){var e=n(0),o=n(551),i=e.RangeError;t.exports=function(t,r){var n=o(t);if(n%r)throw i("Wrong offset");return n}},452:function(t,r,n){var e=n(10);t.exports=function(t){return void 0!==t&&(e(t,"value")||e(t,"writable"))}},548:function(t,r,n){var e=n(0).Array,o=Math.abs,i=Math.pow,u=Math.floor,f=Math.log,a=Math.LN2;t.exports={pack:function(t,r,n){var c,s,y,h=e(n),p=8*n-r-1,d=(1<>1,l=23===r?i(2,-24)-i(2,-77):0,g=t<0||0===t&&1/t<0?1:0,A=0;for((t=o(t))!=t||t===1/0?(s=t!=t?1:0,c=d):(c=u(f(t)/a),t*(y=i(2,-c))<1&&(c--,y*=2),(t+=c+v>=1?l/y:l*i(2,1-v))*y>=2&&(c++,y/=2),c+v>=d?(s=0,c=d):c+v>=1?(s=(t*y-1)*i(2,r),c+=v):(s=t*i(2,v-1)*i(2,r),c=0));r>=8;)h[A++]=255&s,s/=256,r-=8;for(c=c<0;)h[A++]=255&c,c/=256,p-=8;return h[--A]|=128*g,h},unpack:function(t,r){var n,e=t.length,o=8*e-r-1,u=(1<>1,a=o-7,c=e-1,s=t[c--],y=127&s;for(s>>=7;a>0;)y=256*y+t[c--],a-=8;for(n=y&(1<<-a)-1,y>>=-a,a+=r;a>0;)n=256*n+t[c--],a-=8;if(0===y)y=1-f;else{if(y===u)return n?NaN:s?-1/0:1/0;n+=i(2,r),y-=f}return(s?-1:1)*n*i(2,y-r)}}},549:function(t,r,n){var e=n(0),o=n(3),i=n(133),u=n(376).NATIVE_ARRAY_BUFFER_VIEWS,f=e.ArrayBuffer,a=e.Int8Array;t.exports=!u||!o((function(){a(1)}))||!o((function(){new a(-1)}))||!i((function(t){new a,new a(null),new a(1.5),new a(t)}),!0)||o((function(){return 1!==new a(new f(2),1,void 0).length}))},550:function(t,r,n){var e=n(7),o=Math.floor;t.exports=Number.isInteger||function(t){return!e(t)&&isFinite(t)&&o(t)===t}},551:function(t,r,n){var e=n(0),o=n(65),i=e.RangeError;t.exports=function(t){var r=o(t);if(r<0)throw i("The argument can't be less than 0");return r}},552:function(t,r,n){var e=n(51),o=n(11),i=n(134),u=n(15),f=n(24),a=n(132),c=n(102),s=n(131),y=n(376).aTypedArrayConstructor;t.exports=function(t){var r,n,h,p,d,v,l=i(this),g=u(t),A=arguments.length,T=A>1?arguments[1]:void 0,w=void 0!==T,b=c(g);if(b&&!s(b))for(v=(d=a(g,b)).next,g=[];!(p=o(v,d)).done;)g.push(p.value);for(w&&A>2&&(T=e(T,arguments[2])),n=f(g),h=new(y(l))(n),r=0;n>r;r++)h[r]=w?T(g[r],r):g[r];return h}},553:function(t,r,n){"use strict";var e=n(15),o=n(94),i=n(24),u=Math.min;t.exports=[].copyWithin||function(t,r){var n=e(this),f=i(n),a=o(t,f),c=o(r,f),s=arguments.length>2?arguments[2]:void 0,y=u((void 0===s?f:o(s,f))-c,f-a),h=1;for(c0;)c in n?n[a]=n[c]:delete n[a],a+=h,c+=h;return n}},554:function(t,r,n){var e=n(555),o=n(419);t.exports=function(t,r){return e(o(t),r)}},555:function(t,r,n){var e=n(24);t.exports=function(t,r){for(var n=0,o=e(r),i=new t(o);o>n;)i[n]=r[n++];return i}},556:function(t,r,n){"use strict";var e=n(34),o=n(17),i=n(65),u=n(24),f=n(49),a=Math.min,c=[].lastIndexOf,s=!!c&&1/[1].lastIndexOf(1,-0)<0,y=f("lastIndexOf"),h=s||!y;t.exports=h?function(t){if(s)return e(c,this,arguments)||0;var r=o(this),n=u(r),f=n-1;for(arguments.length>1&&(f=a(f,i(arguments[1]))),f<0&&(f=n+f);f>=0;f--)if(f in r&&r[f]===t)return f||0;return-1}:c},557:function(t,r){t.exports=Object.is||function(t,r){return t===r?0!==t||1/t==1/r:t!=t&&r!=r}}}]); \ No newline at end of file diff --git a/assets/js/0.ca1c2622.js b/assets/js/0.ca1c2622.js deleted file mode 100644 index 01204c26..00000000 --- a/assets/js/0.ca1c2622.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{374:function(t,r,n){"use strict";var e,i,o,u=n(448),f=n(6),a=n(0),c=n(4),s=n(7),y=n(10),h=n(66),p=n(70),d=n(19),v=n(16),l=n(12).f,g=n(33),A=n(95),T=n(45),w=n(5),b=n(67),x=a.Int8Array,E=x&&x.prototype,R=a.Uint8ClampedArray,M=R&&R.prototype,I=x&&A(x),O=E&&A(E),_=Object.prototype,U=a.TypeError,m=w("toStringTag"),L=b("TYPED_ARRAY_TAG"),S=b("TYPED_ARRAY_CONSTRUCTOR"),B=u&&!!T&&"Opera"!==h(a.opera),P=!1,Y={Int8Array:1,Uint8Array:1,Uint8ClampedArray:1,Int16Array:2,Uint16Array:2,Int32Array:4,Uint32Array:4,Float32Array:4,Float64Array:8},N={BigInt64Array:8,BigUint64Array:8},F=function(t){if(!s(t))return!1;var r=h(t);return y(Y,r)||y(N,r)};for(e in Y)(o=(i=a[e])&&i.prototype)?d(o,S,i):B=!1;for(e in N)(o=(i=a[e])&&i.prototype)&&d(o,S,i);if((!B||!c(I)||I===Function.prototype)&&(I=function(){throw U("Incorrect invocation")},B))for(e in Y)a[e]&&T(a[e],I);if((!B||!O||O===_)&&(O=I.prototype,B))for(e in Y)a[e]&&T(a[e].prototype,O);if(B&&A(M)!==O&&T(M,O),f&&!y(O,m))for(e in P=!0,l(O,m,{get:function(){return s(this)?this[L]:void 0}}),Y)a[e]&&d(a[e],L,e);t.exports={NATIVE_ARRAY_BUFFER_VIEWS:B,TYPED_ARRAY_CONSTRUCTOR:S,TYPED_ARRAY_TAG:P&&L,aTypedArray:function(t){if(F(t))return t;throw U("Target is not a typed array")},aTypedArrayConstructor:function(t){if(c(t)&&(!T||g(I,t)))return t;throw U(p(t)+" is not a typed array constructor")},exportTypedArrayMethod:function(t,r,n,e){if(f){if(n)for(var i in Y){var o=a[i];if(o&&y(o.prototype,t))try{delete o.prototype[t]}catch(n){try{o.prototype[t]=r}catch(t){}}}O[t]&&!n||v(O,t,n?r:B&&E[t]||r,e)}},exportTypedArrayStaticMethod:function(t,r,n){var e,i;if(f){if(T){if(n)for(e in Y)if((i=a[e])&&y(i,t))try{delete i[t]}catch(t){}if(I[t]&&!n)return;try{return v(I,t,n?r:B&&I[t]||r)}catch(t){}}for(e in Y)!(i=a[e])||i[t]&&!n||v(i,t,r)}},isView:function(t){if(!s(t))return!1;var r=h(t);return"DataView"===r||y(Y,r)||y(N,r)},isTypedArray:F,TypedArray:I,TypedArrayPrototype:O}},375:function(t,r){t.exports=function(t){if(!t.webpackPolyfill){var r=Object.create(t);r.children||(r.children=[]),Object.defineProperty(r,"loaded",{enumerable:!0,get:function(){return r.l}}),Object.defineProperty(r,"id",{enumerable:!0,get:function(){return r.i}}),Object.defineProperty(r,"exports",{enumerable:!0}),r.webpackPolyfill=1}return r}},376:function(t,r,n){var e=n(1),i=n(424),o=n(130);e({target:"Array",proto:!0},{fill:i}),o("fill")},377:function(t,r,n){"use strict";var e=n(1),i=n(2),o=n(3),u=n(447),f=n(9),a=n(94),c=n(92),s=n(127),y=u.ArrayBuffer,h=u.DataView,p=h.prototype,d=i(y.prototype.slice),v=i(p.getUint8),l=i(p.setUint8);e({target:"ArrayBuffer",proto:!0,unsafe:!0,forced:o((function(){return!new y(2).slice(1,void 0).byteLength}))},{slice:function(t,r){if(d&&void 0===r)return d(f(this),t);for(var n=f(this).byteLength,e=a(t,n),i=a(void 0===r?n:r,n),o=new(s(this,y))(c(i-e)),u=new h(this),p=new h(o),g=0;e=0?e:n+e;return f<0||f>=n?void 0:r[f]}))},380:function(t,r,n){"use strict";var e=n(2),i=n(374),o=e(n(551)),u=i.aTypedArray;(0,i.exportTypedArrayMethod)("copyWithin",(function(t,r){return o(u(this),t,r,arguments.length>2?arguments[2]:void 0)}))},381:function(t,r,n){"use strict";var e=n(374),i=n(42).every,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("every",(function(t){return i(o(this),t,arguments.length>1?arguments[1]:void 0)}))},382:function(t,r,n){"use strict";var e=n(374),i=n(11),o=n(424),u=e.aTypedArray;(0,e.exportTypedArrayMethod)("fill",(function(t){var r=arguments.length;return i(o,u(this),t,r>1?arguments[1]:void 0,r>2?arguments[2]:void 0)}))},383:function(t,r,n){"use strict";var e=n(374),i=n(42).filter,o=n(552),u=e.aTypedArray;(0,e.exportTypedArrayMethod)("filter",(function(t){var r=i(u(this),t,arguments.length>1?arguments[1]:void 0);return o(this,r)}))},384:function(t,r,n){"use strict";var e=n(374),i=n(42).find,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("find",(function(t){return i(o(this),t,arguments.length>1?arguments[1]:void 0)}))},385:function(t,r,n){"use strict";var e=n(374),i=n(42).findIndex,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("findIndex",(function(t){return i(o(this),t,arguments.length>1?arguments[1]:void 0)}))},386:function(t,r,n){"use strict";var e=n(374),i=n(42).forEach,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("forEach",(function(t){i(o(this),t,arguments.length>1?arguments[1]:void 0)}))},387:function(t,r,n){"use strict";var e=n(374),i=n(99).includes,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("includes",(function(t){return i(o(this),t,arguments.length>1?arguments[1]:void 0)}))},388:function(t,r,n){"use strict";var e=n(374),i=n(99).indexOf,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("indexOf",(function(t){return i(o(this),t,arguments.length>1?arguments[1]:void 0)}))},389:function(t,r,n){"use strict";var e=n(0),i=n(3),o=n(2),u=n(374),f=n(129),a=n(5)("iterator"),c=e.Uint8Array,s=o(f.values),y=o(f.keys),h=o(f.entries),p=u.aTypedArray,d=u.exportTypedArrayMethod,v=c&&c.prototype,l=!i((function(){v[a].call([1])})),g=!!v&&v.values&&v[a]===v.values&&"values"===v.values.name,A=function(){return s(p(this))};d("entries",(function(){return h(p(this))}),l),d("keys",(function(){return y(p(this))}),l),d("values",A,l||!g,{name:"values"}),d(a,A,l||!g,{name:"values"})},390:function(t,r,n){"use strict";var e=n(374),i=n(2),o=e.aTypedArray,u=e.exportTypedArrayMethod,f=i([].join);u("join",(function(t){return f(o(this),t)}))},391:function(t,r,n){"use strict";var e=n(374),i=n(34),o=n(554),u=e.aTypedArray;(0,e.exportTypedArrayMethod)("lastIndexOf",(function(t){var r=arguments.length;return i(o,u(this),r>1?[t,arguments[1]]:[t])}))},392:function(t,r,n){"use strict";var e=n(374),i=n(42).map,o=n(418),u=e.aTypedArray;(0,e.exportTypedArrayMethod)("map",(function(t){return i(u(this),t,arguments.length>1?arguments[1]:void 0,(function(t,r){return new(o(t))(r)}))}))},393:function(t,r,n){"use strict";var e=n(374),i=n(207).left,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("reduce",(function(t){var r=arguments.length;return i(o(this),t,r,r>1?arguments[1]:void 0)}))},394:function(t,r,n){"use strict";var e=n(374),i=n(207).right,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("reduceRight",(function(t){var r=arguments.length;return i(o(this),t,r,r>1?arguments[1]:void 0)}))},395:function(t,r,n){"use strict";var e=n(374),i=e.aTypedArray,o=e.exportTypedArrayMethod,u=Math.floor;o("reverse",(function(){for(var t,r=i(this).length,n=u(r/2),e=0;e1?arguments[1]:void 0,1),n=a(t);if(l)return i(p,this,n,r);var e=this.length,o=u(n),c=0;if(o+r>e)throw s("Wrong length");for(;co;)c[o]=n[o++];return c}),o((function(){new Int8Array(1).slice()})))},398:function(t,r,n){"use strict";var e=n(374),i=n(42).some,o=e.aTypedArray;(0,e.exportTypedArrayMethod)("some",(function(t){return i(o(this),t,arguments.length>1?arguments[1]:void 0)}))},399:function(t,r,n){"use strict";var e=n(0),i=n(2),o=n(3),u=n(35),f=n(420),a=n(374),c=n(421),s=n(422),y=n(46),h=n(423),p=e.Array,d=a.aTypedArray,v=a.exportTypedArrayMethod,l=e.Uint16Array,g=l&&i(l.prototype.sort),A=!(!g||o((function(){g(new l(2),null)}))&&o((function(){g(new l(2),{})}))),T=!!g&&!o((function(){if(y)return y<74;if(c)return c<67;if(s)return!0;if(h)return h<602;var t,r,n=new l(516),e=p(516);for(t=0;t<516;t++)r=t%4,n[t]=515-t,e[t]=t-2*r+3;for(g(n,(function(t,r){return(t/4|0)-(r/4|0)})),t=0;t<516;t++)if(n[t]!==e[t])return!0}));v("sort",(function(t){return void 0!==t&&u(t),T?g(this,t):f(d(this),function(t){return function(r,n){return void 0!==t?+t(r,n)||0:n!=n?-1:r!=r?1:0===r&&0===n?1/r>0&&1/n<0?1:-1:r>n}}(t))}),!T||A)},400:function(t,r,n){"use strict";var e=n(374),i=n(92),o=n(94),u=n(418),f=e.aTypedArray;(0,e.exportTypedArrayMethod)("subarray",(function(t,r){var n=f(this),e=n.length,a=o(t,e);return new(u(n))(n.buffer,n.byteOffset+a*n.BYTES_PER_ELEMENT,i((void 0===r?e:o(r,e))-a))}))},401:function(t,r,n){"use strict";var e=n(0),i=n(34),o=n(374),u=n(3),f=n(47),a=e.Int8Array,c=o.aTypedArray,s=o.exportTypedArrayMethod,y=[].toLocaleString,h=!!a&&u((function(){y.call(new a(1))}));s("toLocaleString",(function(){return i(y,h?f(c(this)):c(this),f(arguments))}),u((function(){return[1,2].toLocaleString()!=new a([1,2]).toLocaleString()}))||!u((function(){a.prototype.toLocaleString.call([1,2])})))},402:function(t,r,n){"use strict";var e=n(374).exportTypedArrayMethod,i=n(3),o=n(0),u=n(2),f=o.Uint8Array,a=f&&f.prototype||{},c=[].toString,s=u([].join);i((function(){c.call({})}))&&(c=function(){return s(this)});var y=a.toString!=c;e("toString",c,y)},403:function(t,r,n){n(415)("Int32",(function(t){return function(r,n,e){return t(this,r,n,e)}}))},404:function(t,r,n){n(415)("Float64",(function(t){return function(r,n,e){return t(this,r,n,e)}}))},405:function(t,r,n){n(415)("Float32",(function(t){return function(r,n,e){return t(this,r,n,e)}}))},406:function(t,r,n){n(415)("Uint32",(function(t){return function(r,n,e){return t(this,r,n,e)}}))},407:function(t,r,n){var e=n(1),i=n(11),o=n(7),u=n(9),f=n(451),a=n(26),c=n(95);e({target:"Reflect",stat:!0},{get:function t(r,n){var e,s,y=arguments.length<3?r:arguments[2];return u(r)===y?r[n]:(e=a.f(r,n))?f(e)?e.value:void 0===e.get?void 0:i(e.get,y):o(s=c(r))?t(s,n,y):void 0}})},408:function(t,r,n){n(1)({global:!0},{globalThis:n(0)})},409:function(t,r,n){"use strict";var e=n(1),i=n(0),o=n(3),u=n(71),f=n(51),a=i.Array;e({target:"Array",stat:!0,forced:o((function(){function t(){}return!(a.of.call(t)instanceof t)}))},{of:function(){for(var t=0,r=arguments.length,n=new(u(this)?this:a)(r);r>t;)f(n,t,arguments[t++]);return n.length=r,n}})},410:function(t,r,n){n(1)({target:"Object",stat:!0},{is:n(555)})},411:function(t,r,n){n(415)("Int8",(function(t){return function(r,n,e){return t(this,r,n,e)}}))},412:function(t,r,n){n(415)("Int16",(function(t){return function(r,n,e){return t(this,r,n,e)}}))},413:function(t,r,n){n(415)("Uint16",(function(t){return function(r,n,e){return t(this,r,n,e)}}))},414:function(t,r,n){var e=n(1),i=n(11),o=n(9),u=n(7),f=n(451),a=n(3),c=n(12),s=n(26),y=n(95),h=n(39);e({target:"Reflect",stat:!0,forced:a((function(){var t=function(){},r=c.f(new t,"a",{configurable:!0});return!1!==Reflect.set(t.prototype,"a",1,r)}))},{set:function t(r,n,e){var a,p,d,v=arguments.length<4?r:arguments[3],l=s.f(o(r),n);if(!l){if(u(p=y(r)))return t(p,n,e,v);l=h(0)}if(f(l)){if(!1===l.writable||!u(v))return!1;if(a=s.f(v,n)){if(a.get||a.set||!1===a.writable)return!1;a.value=e,c.f(v,n,a)}else c.f(v,n,h(0,e))}else{if(void 0===(d=l.set))return!1;i(d,v,e)}return!0}})},415:function(t,r,n){"use strict";var e=n(1),i=n(0),o=n(11),u=n(6),f=n(547),a=n(374),c=n(447),s=n(206),y=n(39),h=n(19),p=n(548),d=n(92),v=n(449),l=n(450),g=n(68),A=n(10),T=n(66),w=n(7),b=n(69),x=n(28),E=n(33),R=n(45),M=n(44).f,I=n(550),O=n(42).forEach,_=n(205),U=n(12),m=n(26),L=n(37),S=n(128),B=L.get,P=L.set,Y=U.f,N=m.f,F=Math.round,C=i.RangeError,W=c.ArrayBuffer,V=W.prototype,D=c.DataView,j=a.NATIVE_ARRAY_BUFFER_VIEWS,k=a.TYPED_ARRAY_CONSTRUCTOR,G=a.TYPED_ARRAY_TAG,J=a.TypedArray,K=a.TypedArrayPrototype,$=a.aTypedArrayConstructor,q=a.isTypedArray,z=function(t,r){$(t);for(var n=0,e=r.length,i=new t(e);e>n;)i[n]=r[n++];return i},H=function(t,r){Y(t,r,{get:function(){return B(this)[r]}})},Q=function(t){var r;return E(V,t)||"ArrayBuffer"==(r=T(t))||"SharedArrayBuffer"==r},X=function(t,r){return q(t)&&!b(r)&&r in t&&p(+r)&&r>=0},Z=function(t,r){return r=g(r),X(t,r)?y(2,t[r]):N(t,r)},tt=function(t,r,n){return r=g(r),!(X(t,r)&&w(n)&&A(n,"value"))||A(n,"get")||A(n,"set")||n.configurable||A(n,"writable")&&!n.writable||A(n,"enumerable")&&!n.enumerable?Y(t,r,n):(t[r]=n.value,t)};u?(j||(m.f=Z,U.f=tt,H(K,"buffer"),H(K,"byteOffset"),H(K,"byteLength"),H(K,"length")),e({target:"Object",stat:!0,forced:!j},{getOwnPropertyDescriptor:Z,defineProperty:tt}),t.exports=function(t,r,n){var u=t.match(/\d+$/)[0]/8,a=t+(n?"Clamped":"")+"Array",c="get"+t,y="set"+t,p=i[a],g=p,A=g&&g.prototype,T={},b=function(t,r){Y(t,r,{get:function(){return function(t,r){var n=B(t);return n.view[c](r*u+n.byteOffset,!0)}(this,r)},set:function(t){return function(t,r,e){var i=B(t);n&&(e=(e=F(e))<0?0:e>255?255:255&e),i.view[y](r*u+i.byteOffset,e,!0)}(this,r,t)},enumerable:!0})};j?f&&(g=r((function(t,r,n,e){return s(t,A),S(w(r)?Q(r)?void 0!==e?new p(r,l(n,u),e):void 0!==n?new p(r,l(n,u)):new p(r):q(r)?z(g,r):o(I,g,r):new p(v(r)),t,g)})),R&&R(g,J),O(M(p),(function(t){t in g||h(g,t,p[t])})),g.prototype=A):(g=r((function(t,r,n,e){s(t,A);var i,f,a,c=0,y=0;if(w(r)){if(!Q(r))return q(r)?z(g,r):o(I,g,r);i=r,y=l(n,u);var h=r.byteLength;if(void 0===e){if(h%u)throw C("Wrong length");if((f=h-y)<0)throw C("Wrong length")}else if((f=d(e)*u)+y>h)throw C("Wrong length");a=f/u}else a=v(r),i=new W(f=a*u);for(P(t,{buffer:i,byteOffset:y,byteLength:f,length:a,view:new D(i)});c0;)t[e]=t[--e];e!==o++&&(t[e]=n)}return t},f=function(t,r,n,e){for(var i=r.length,o=n.length,u=0,f=0;u1?arguments[1]:void 0,n),a=u>2?arguments[2]:void 0,c=void 0===a?n:i(a,n);c>f;)r[f++]=t;return r}},447:function(t,r,n){"use strict";var e=n(0),i=n(2),o=n(6),u=n(448),f=n(98),a=n(19),c=n(217),s=n(3),y=n(206),h=n(64),p=n(92),d=n(449),v=n(546),l=n(95),g=n(45),A=n(44).f,T=n(12).f,w=n(424),b=n(202),x=n(49),E=n(37),R=f.PROPER,M=f.CONFIGURABLE,I=E.get,O=E.set,_=e.ArrayBuffer,U=_,m=U&&U.prototype,L=e.DataView,S=L&&L.prototype,B=Object.prototype,P=e.Array,Y=e.RangeError,N=i(w),F=i([].reverse),C=v.pack,W=v.unpack,V=function(t){return[255&t]},D=function(t){return[255&t,t>>8&255]},j=function(t){return[255&t,t>>8&255,t>>16&255,t>>24&255]},k=function(t){return t[3]<<24|t[2]<<16|t[1]<<8|t[0]},G=function(t){return C(t,23,4)},J=function(t){return C(t,52,8)},K=function(t,r){T(t.prototype,r,{get:function(){return I(this)[r]}})},$=function(t,r,n,e){var i=d(n),o=I(t);if(i+r>o.byteLength)throw Y("Wrong index");var u=I(o.buffer).bytes,f=i+o.byteOffset,a=b(u,f,f+r);return e?a:F(a)},q=function(t,r,n,e,i,o){var u=d(n),f=I(t);if(u+r>f.byteLength)throw Y("Wrong index");for(var a=I(f.buffer).bytes,c=u+f.byteOffset,s=e(+i),y=0;yX;)(H=Q[X++])in U||a(U,H,_[H]);m.constructor=U}g&&l(S)!==B&&g(S,B);var Z=new L(new U(2)),tt=i(S.setInt8);Z.setInt8(0,2147483648),Z.setInt8(1,2147483649),!Z.getInt8(0)&&Z.getInt8(1)||c(S,{setInt8:function(t,r){tt(this,t,r<<24>>24)},setUint8:function(t,r){tt(this,t,r<<24>>24)}},{unsafe:!0})}else m=(U=function(t){y(this,m);var r=d(t);O(this,{bytes:N(P(r),0),byteLength:r}),o||(this.byteLength=r)}).prototype,S=(L=function(t,r,n){y(this,S),y(t,m);var e=I(t).byteLength,i=h(r);if(i<0||i>e)throw Y("Wrong offset");if(i+(n=void 0===n?e-i:p(n))>e)throw Y("Wrong length");O(this,{buffer:t,byteLength:n,byteOffset:i}),o||(this.buffer=t,this.byteLength=n,this.byteOffset=i)}).prototype,o&&(K(U,"byteLength"),K(L,"buffer"),K(L,"byteLength"),K(L,"byteOffset")),c(S,{getInt8:function(t){return $(this,1,t)[0]<<24>>24},getUint8:function(t){return $(this,1,t)[0]},getInt16:function(t){var r=$(this,2,t,arguments.length>1?arguments[1]:void 0);return(r[1]<<8|r[0])<<16>>16},getUint16:function(t){var r=$(this,2,t,arguments.length>1?arguments[1]:void 0);return r[1]<<8|r[0]},getInt32:function(t){return k($(this,4,t,arguments.length>1?arguments[1]:void 0))},getUint32:function(t){return k($(this,4,t,arguments.length>1?arguments[1]:void 0))>>>0},getFloat32:function(t){return W($(this,4,t,arguments.length>1?arguments[1]:void 0),23)},getFloat64:function(t){return W($(this,8,t,arguments.length>1?arguments[1]:void 0),52)},setInt8:function(t,r){q(this,1,t,V,r)},setUint8:function(t,r){q(this,1,t,V,r)},setInt16:function(t,r){q(this,2,t,D,r,arguments.length>2?arguments[2]:void 0)},setUint16:function(t,r){q(this,2,t,D,r,arguments.length>2?arguments[2]:void 0)},setInt32:function(t,r){q(this,4,t,j,r,arguments.length>2?arguments[2]:void 0)},setUint32:function(t,r){q(this,4,t,j,r,arguments.length>2?arguments[2]:void 0)},setFloat32:function(t,r){q(this,4,t,G,r,arguments.length>2?arguments[2]:void 0)},setFloat64:function(t,r){q(this,8,t,J,r,arguments.length>2?arguments[2]:void 0)}});x(U,"ArrayBuffer"),x(L,"DataView"),t.exports={ArrayBuffer:U,DataView:L}},448:function(t,r){t.exports="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof DataView},449:function(t,r,n){var e=n(0),i=n(64),o=n(92),u=e.RangeError;t.exports=function(t){if(void 0===t)return 0;var r=i(t),n=o(r);if(r!==n)throw u("Wrong length or index");return n}},450:function(t,r,n){var e=n(0),i=n(549),o=e.RangeError;t.exports=function(t,r){var n=i(t);if(n%r)throw o("Wrong offset");return n}},451:function(t,r,n){var e=n(10);t.exports=function(t){return void 0!==t&&(e(t,"value")||e(t,"writable"))}},546:function(t,r,n){var e=n(0).Array,i=Math.abs,o=Math.pow,u=Math.floor,f=Math.log,a=Math.LN2;t.exports={pack:function(t,r,n){var c,s,y,h=e(n),p=8*n-r-1,d=(1<>1,l=23===r?o(2,-24)-o(2,-77):0,g=t<0||0===t&&1/t<0?1:0,A=0;for((t=i(t))!=t||t===1/0?(s=t!=t?1:0,c=d):(c=u(f(t)/a),t*(y=o(2,-c))<1&&(c--,y*=2),(t+=c+v>=1?l/y:l*o(2,1-v))*y>=2&&(c++,y/=2),c+v>=d?(s=0,c=d):c+v>=1?(s=(t*y-1)*o(2,r),c+=v):(s=t*o(2,v-1)*o(2,r),c=0));r>=8;)h[A++]=255&s,s/=256,r-=8;for(c=c<0;)h[A++]=255&c,c/=256,p-=8;return h[--A]|=128*g,h},unpack:function(t,r){var n,e=t.length,i=8*e-r-1,u=(1<>1,a=i-7,c=e-1,s=t[c--],y=127&s;for(s>>=7;a>0;)y=256*y+t[c--],a-=8;for(n=y&(1<<-a)-1,y>>=-a,a+=r;a>0;)n=256*n+t[c--],a-=8;if(0===y)y=1-f;else{if(y===u)return n?NaN:s?-1/0:1/0;n+=o(2,r),y-=f}return(s?-1:1)*n*o(2,y-r)}}},547:function(t,r,n){var e=n(0),i=n(3),o=n(133),u=n(374).NATIVE_ARRAY_BUFFER_VIEWS,f=e.ArrayBuffer,a=e.Int8Array;t.exports=!u||!i((function(){a(1)}))||!i((function(){new a(-1)}))||!o((function(t){new a,new a(null),new a(1.5),new a(t)}),!0)||i((function(){return 1!==new a(new f(2),1,void 0).length}))},548:function(t,r,n){var e=n(7),i=Math.floor;t.exports=Number.isInteger||function(t){return!e(t)&&isFinite(t)&&i(t)===t}},549:function(t,r,n){var e=n(0),i=n(64),o=e.RangeError;t.exports=function(t){var r=i(t);if(r<0)throw o("The argument can't be less than 0");return r}},550:function(t,r,n){var e=n(50),i=n(11),o=n(134),u=n(15),f=n(24),a=n(132),c=n(102),s=n(131),y=n(374).aTypedArrayConstructor;t.exports=function(t){var r,n,h,p,d,v,l=o(this),g=u(t),A=arguments.length,T=A>1?arguments[1]:void 0,w=void 0!==T,b=c(g);if(b&&!s(b))for(v=(d=a(g,b)).next,g=[];!(p=i(v,d)).done;)g.push(p.value);for(w&&A>2&&(T=e(T,arguments[2])),n=f(g),h=new(y(l))(n),r=0;n>r;r++)h[r]=w?T(g[r],r):g[r];return h}},551:function(t,r,n){"use strict";var e=n(15),i=n(94),o=n(24),u=Math.min;t.exports=[].copyWithin||function(t,r){var n=e(this),f=o(n),a=i(t,f),c=i(r,f),s=arguments.length>2?arguments[2]:void 0,y=u((void 0===s?f:i(s,f))-c,f-a),h=1;for(c0;)c in n?n[a]=n[c]:delete n[a],a+=h,c+=h;return n}},552:function(t,r,n){var e=n(553),i=n(418);t.exports=function(t,r){return e(i(t),r)}},553:function(t,r,n){var e=n(24);t.exports=function(t,r){for(var n=0,i=e(r),o=new t(i);i>n;)o[n]=r[n++];return o}},554:function(t,r,n){"use strict";var e=n(34),i=n(17),o=n(64),u=n(24),f=n(48),a=Math.min,c=[].lastIndexOf,s=!!c&&1/[1].lastIndexOf(1,-0)<0,y=f("lastIndexOf"),h=s||!y;t.exports=h?function(t){if(s)return e(c,this,arguments)||0;var r=i(this),n=u(r),f=n-1;for(arguments.length>1&&(f=a(f,o(arguments[1]))),f<0&&(f=n+f);f>=0;f--)if(f in r&&r[f]===t)return f||0;return-1}:c},555:function(t,r){t.exports=Object.is||function(t,r){return t===r?0!==t||1/t==1/r:t!=t&&r!=r}}}]); \ No newline at end of file diff --git a/assets/js/10.283e1aeb.js b/assets/js/10.283e1aeb.js new file mode 100644 index 00000000..df3455ba --- /dev/null +++ b/assets/js/10.283e1aeb.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{368:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_object_clone_ref",(function(){return k})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbindgen_string_new",(function(){return O})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_number_get",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return _n})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return dn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return bn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return gn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return wn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return ln})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return sn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return mn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return vn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return yn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return pn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return hn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return xn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return Sn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return An})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Pn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return In})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return Dn})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Fn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return En})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Tn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Bn})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Ln})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return Mn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return kn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Rn})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return On})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return jn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Gn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Wn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Nn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Jn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Zn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return $n})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ne})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return ee})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return te})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return re})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return ue})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return fe})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ce})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return _e})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return ie})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return oe})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return de})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return be})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return ge})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return we})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return le})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return se})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return me})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ve})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return ye})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return pe})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return he})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return xe})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Ae})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Pe})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return Ie})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return De})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Fe})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Ee})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Te})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Be})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Le})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Me})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return ke})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Re})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Oe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ce})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return je})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Ge})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return We})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ne})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return He})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return Je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return Ze})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return $e})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return nt})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return et})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return tt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return rt})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ut})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ft})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return ct})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return _t})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return it})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return ot})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return dt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return bt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return gt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return wt})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return lt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return st})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return mt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return vt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return yt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return pt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return ht})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return xt})),t.d(e,"__wbg_name_2473476082bed625",(function(){return St})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return At})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return Pt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return It})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Dt})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Ft})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Et})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return Tt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return Bt})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return Lt})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Mt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return kt})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Rt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Ot})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Ct})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Vt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Ut})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return qt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Kt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return jt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Gt})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Wt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Qt})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Xt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Yt})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Nt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Ht})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return zt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Zt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return $t})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return nr})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return er})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return tr})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return rr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return ur})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return fr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return cr})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return _r})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return ir})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return or})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return ar})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return dr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return br})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return gr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return wr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return lr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return sr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return mr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return vr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return yr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return pr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return hr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return xr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Sr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ar})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Pr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Dr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Fr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Er})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Tr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Br})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return Lr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Mr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return kr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Rr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Or})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Cr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Vr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Ur})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return qr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Kr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return jr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Gr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Wr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Qr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Xr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Yr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Nr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Hr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Jr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return zr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return Zr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return $r})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return nu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return eu})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return tu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return ru})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return uu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return fu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return cu})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return _u})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return iu})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return ou})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return au})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return du})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return bu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return gu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return wu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return lu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return su})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return mu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return vu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return yu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return pu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return hu})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return xu})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Su})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Au})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Pu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Iu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Du})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Fu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Eu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Tu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Bu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return Lu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Mu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return ku})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Ru})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Ou})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Cu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Vu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Uu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return qu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Ku})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return ju})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Gu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Wu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Qu})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Xu})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Yu})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Nu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Hu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Ju})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return zu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Zu})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return $u})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return nf})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return ef})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return tf})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return rf})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return uf})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return ff})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return cf})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return _f})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return of})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return af})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return df})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return bf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return gf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return wf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return lf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return sf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return mf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return yf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return pf})),t.d(e,"__wbindgen_is_undefined",(function(){return hf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return xf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Sf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Af})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Pf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return If})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Df})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Ff})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Ef})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return Tf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Bf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return Lf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return Mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return kf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Rf})),t.d(e,"__wbindgen_debug_string",(function(){return Of})),t.d(e,"__wbindgen_throw",(function(){return Cf})),t.d(e,"__wbindgen_memory",(function(){return Vf})),t.d(e,"__wbindgen_closure_wrapper577",(function(){return Uf})),t.d(e,"__wbindgen_closure_wrapper579",(function(){return qf})),t.d(e,"__wbindgen_closure_wrapper581",(function(){return Kf})),t.d(e,"__wbindgen_closure_wrapper583",(function(){return jf})),t.d(e,"__wbindgen_closure_wrapper585",(function(){return Gf})),t.d(e,"__wbindgen_closure_wrapper587",(function(){return Wf})),t.d(e,"__wbindgen_closure_wrapper589",(function(){return Qf})),t.d(e,"__wbindgen_closure_wrapper591",(function(){return Xf})),t.d(e,"__wbindgen_closure_wrapper593",(function(){return Yf})),t.d(e,"__wbindgen_closure_wrapper817",(function(){return Nf}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(412),t(411),t(61),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(416),t(461)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}function o(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var a=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});a.decode();var d=new Uint8Array;function b(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function g(n,e){return a.decode(b().subarray(n,n+e))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function m(){return 0===s.byteLength&&(s=new Int32Array(u.j.buffer)),s}var v=0,y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof y.encodeInto?function(n,e){return y.encodeInto(n,e)}:function(n,e){var t=y.encode(n);return e.set(t),{read:n.length,written:t.length}};function h(n,e,t){if(void 0===t){var r=y.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),v=r.length,u}for(var f=n.length,c=e(f),_=b(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var a=b().subarray(c+i,c+f);i+=p(n,a).written}return v=i,c}function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function N(n,e){c(n).bindVertexArray(c(e))}function H(n,e,t,r,u,f,_,i,o,a,d){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,a>>>0,d>>>0)}function J(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function Z(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function $(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,F(r,u))}function en(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,E(r,u))}function tn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,_,i,o,a){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,a)}function fn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function cn(n,e,t,r,u,f,_,i,o,a,d,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d,b)}function _n(n,e,t,r,u,f,_,i,o,a,d){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,c(d))}function on(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,a){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a)}function dn(n){var e=c(n).createSampler();return w(e)?0:o(e)}function bn(n){var e=c(n).createVertexArray();return w(e)?0:o(e)}function gn(n,e){c(n).deleteQuery(c(e))}function wn(n,e){c(n).deleteSampler(c(e))}function ln(n,e){c(n).deleteSync(c(e))}function sn(n,e){c(n).deleteVertexArray(c(e))}function mn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function vn(n,e){c(n).drawBuffers(c(e))}function yn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function pn(n,e){c(n).endQuery(e>>>0)}function hn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return w(r)?0:o(r)}function xn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function Sn(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function An(){return L((function(n,e,t){return o(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Pn(n,e,t){return o(c(n).getQueryParameter(c(e),t>>>0))}function In(n,e,t){return o(c(n).getSyncParameter(c(e),t>>>0))}function Dn(n,e,t,r){return c(n).getUniformBlockIndex(c(e),g(t,r))}function Fn(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function En(n,e){c(n).readBuffer(e>>>0)}function Tn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Bn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Ln(n,e,t,r,u,f){c(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function Mn(n,e,t,r){c(n).samplerParameterf(c(e),t>>>0,r)}function kn(n,e,t,r){c(n).samplerParameteri(c(e),t>>>0,r)}function Rn(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function On(n,e,t,r,u,f,_){c(n).texStorage3D(e>>>0,t,r>>>0,u,f,_)}function Cn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,a)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,c(b))}),arguments)}function Kn(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function jn(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Gn(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Wn(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Qn(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Xn(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Yn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Nn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Hn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Jn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function zn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function Zn(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function $n(n,e){c(n).activeTexture(e>>>0)}function ne(n,e,t){c(n).attachShader(c(e),c(t))}function ee(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function te(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function re(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function ue(n,e,t){c(n).bindTexture(e>>>0,c(t))}function fe(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function ce(n,e){c(n).blendEquation(e>>>0)}function _e(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function ie(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function oe(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function de(n,e){c(n).compileShader(c(e))}function be(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function ge(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function we(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function le(n){var e=c(n).createProgram();return w(e)?0:o(e)}function se(n){var e=c(n).createRenderbuffer();return w(e)?0:o(e)}function me(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function ve(n){var e=c(n).createTexture();return w(e)?0:o(e)}function ye(n,e){c(n).cullFace(e>>>0)}function pe(n,e){c(n).deleteBuffer(c(e))}function he(n,e){c(n).deleteFramebuffer(c(e))}function xe(n,e){c(n).deleteProgram(c(e))}function Se(n,e){c(n).deleteRenderbuffer(c(e))}function Ae(n,e){c(n).deleteShader(c(e))}function Pe(n,e){c(n).deleteTexture(c(e))}function Ie(n,e){c(n).depthFunc(e>>>0)}function De(n,e){c(n).depthMask(0!==e)}function Fe(n,e,t){c(n).depthRange(e,t)}function Ee(n,e){c(n).disable(e>>>0)}function Te(n,e){c(n).disableVertexAttribArray(e>>>0)}function Be(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Le(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Me(n,e){c(n).enable(e>>>0)}function ke(n,e){c(n).enableVertexAttribArray(e>>>0)}function Re(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Oe(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Ce(n,e){c(n).frontFace(e>>>0)}function Ve(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function Ue(){return L((function(n,e,t){var r=c(n).getExtension(g(e,t));return w(r)?0:o(r)}),arguments)}function qe(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function je(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function Ge(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function We(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function Qe(n){var e=c(n).getSupportedExtensions();return w(e)?0:o(e)}function Xe(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function Ye(n,e){c(n).linkProgram(c(e))}function Ne(n,e,t){c(n).pixelStorei(e>>>0,t)}function He(n,e,t){c(n).polygonOffset(e,t)}function Je(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function ze(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Ze(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function $e(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function nt(n,e){c(n).stencilMask(e>>>0)}function et(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function tt(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function rt(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function ut(n,e,t){c(n).uniform1f(c(e),t)}function ft(n,e,t){c(n).uniform1i(c(e),t)}function ct(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function _t(n,e){c(n).useProgram(c(e))}function it(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function ot(n,e,t,r,u){c(n).viewport(e,t,r,u)}function at(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function dt(n){var e=c(n).document;return w(e)?0:o(e)}function bt(){return L((function(n){return o(c(n).innerWidth)}),arguments)}function gt(){return L((function(n){return o(c(n).innerHeight)}),arguments)}function wt(n){return c(n).devicePixelRatio}function lt(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function st(){return L((function(n,e,t){var r=c(n).matchMedia(g(e,t));return w(r)?0:o(r)}),arguments)}function mt(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function vt(n,e,t){var r=c(n)[g(e,t)];return w(r)?0:o(r)}function yt(n,e){c(n).clearTimeout(e)}function pt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function ht(n){return c(n).size}function xt(n){return c(n).type}function St(n,e){var t=h(c(e).name,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function At(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function Pt(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function It(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function Dt(){return L((function(n,e,t,r,u){c(n).setProperty(g(e,t),g(r,u))}),arguments)}function Ft(n){return c(n).x}function Et(n){return c(n).y}function Tt(n){return c(n).clientX}function Bt(n){return c(n).clientY}function Lt(n){return c(n).offsetX}function Mt(n){return c(n).offsetY}function kt(n){return c(n).ctrlKey}function Rt(n){return c(n).shiftKey}function Ot(n){return c(n).altKey}function Ct(n){return c(n).metaKey}function Vt(n){return c(n).button}function Ut(n){return c(n).buttons}function qt(n){return c(n).movementX}function Kt(n){return c(n).movementY}function jt(n,e){c(n).bindVertexArrayOES(c(e))}function Gt(n){var e=c(n).createVertexArrayOES();return w(e)?0:o(e)}function Wt(n,e){c(n).deleteVertexArrayOES(c(e))}function Qt(n){return c(n).pointerId}function Xt(n){return c(n).deltaX}function Yt(n){return c(n).deltaY}function Nt(n){return c(n).deltaMode}function Ht(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Jt(n){return c(n).width}function zt(n,e){c(n).width=e>>>0}function Zt(n){return c(n).height}function $t(n,e){c(n).height=e>>>0}function nr(){return L((function(n,e,t,r){var u=c(n).getContext(g(e,t),c(r));return w(u)?0:o(u)}),arguments)}function er(n){return c(n).matches}function tr(n){return c(n).now()}function rr(n,e){c(n).drawBuffersWEBGL(c(e))}function ur(n){var e=c(n).fullscreenElement;return w(e)?0:o(e)}function fr(){return L((function(n,e,t){return o(c(n).createElement(g(e,t)))}),arguments)}function cr(n,e,t){var r=c(n).getElementById(g(e,t));return w(r)?0:o(r)}function _r(){return L((function(n,e,t){var r=c(n).querySelector(g(e,t));return w(r)?0:o(r)}),arguments)}function ir(n){return o(c(n).getBoundingClientRect())}function or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function ar(){return L((function(n,e,t,r,u){c(n).setAttribute(g(e,t),g(r,u))}),arguments)}function dr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function br(n){return o(c(n).style)}function gr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function wr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function lr(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function sr(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function mr(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function vr(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function yr(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function pr(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function hr(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function xr(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Sr(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Ar(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Pr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Ir(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Dr(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Fr(n,e){c(n).activeTexture(e>>>0)}function Er(n,e,t){c(n).attachShader(c(e),c(t))}function Tr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Br(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Lr(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function Mr(n,e,t){c(n).bindTexture(e>>>0,c(t))}function kr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Rr(n,e){c(n).blendEquation(e>>>0)}function Or(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Cr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function Vr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Ur(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function qr(n,e){c(n).compileShader(c(e))}function Kr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function jr(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function Gr(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function Wr(n){var e=c(n).createProgram();return w(e)?0:o(e)}function Qr(n){var e=c(n).createRenderbuffer();return w(e)?0:o(e)}function Xr(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function Yr(n){var e=c(n).createTexture();return w(e)?0:o(e)}function Nr(n,e){c(n).cullFace(e>>>0)}function Hr(n,e){c(n).deleteBuffer(c(e))}function Jr(n,e){c(n).deleteFramebuffer(c(e))}function zr(n,e){c(n).deleteProgram(c(e))}function Zr(n,e){c(n).deleteRenderbuffer(c(e))}function $r(n,e){c(n).deleteShader(c(e))}function nu(n,e){c(n).deleteTexture(c(e))}function eu(n,e){c(n).depthFunc(e>>>0)}function tu(n,e){c(n).depthMask(0!==e)}function ru(n,e,t){c(n).depthRange(e,t)}function uu(n,e){c(n).disable(e>>>0)}function fu(n,e){c(n).disableVertexAttribArray(e>>>0)}function cu(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function _u(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function iu(n,e){c(n).enable(e>>>0)}function ou(n,e){c(n).enableVertexAttribArray(e>>>0)}function au(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function du(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function bu(n,e){c(n).frontFace(e>>>0)}function gu(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function wu(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function lu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function su(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function mu(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function vu(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function yu(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function pu(n,e){c(n).linkProgram(c(e))}function hu(n,e,t){c(n).pixelStorei(e>>>0,t)}function xu(n,e,t){c(n).polygonOffset(e,t)}function Su(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Au(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Pu(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function Iu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Du(n,e){c(n).stencilMask(e>>>0)}function Fu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Eu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Bu(n,e,t){c(n).uniform1f(c(e),t)}function Lu(n,e,t){c(n).uniform1i(c(e),t)}function Mu(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function ku(n,e){c(n).useProgram(c(e))}function Ru(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Ou(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Cu(n){console.debug(c(n))}function Vu(n){console.error(c(n))}function Uu(n,e){console.error(c(n),c(e))}function qu(n){console.info(c(n))}function Ku(n){console.log(c(n))}function ju(n){console.warn(c(n))}function Gu(){return L((function(n,e,t,r){c(n).addEventListener(g(e,t),c(r))}),arguments)}function Wu(){return L((function(n,e,t,r,u){c(n).addEventListener(g(e,t),c(r),c(u))}),arguments)}function Qu(){return L((function(n,e,t,r){c(n).removeEventListener(g(e,t),c(r))}),arguments)}function Xu(n){return c(n).charCode}function Yu(n){return c(n).keyCode}function Nu(n){return c(n).altKey}function Hu(n){return c(n).ctrlKey}function Ju(n){return c(n).shiftKey}function zu(n){return c(n).metaKey}function Zu(n,e){var t=h(c(e).key,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function $u(n,e){var t=h(c(e).code,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function nf(n,e,t){return c(n).getModifierState(g(e,t))}function ef(n){return c(n).matches}function tf(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function rf(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function uf(){return L((function(n,e){return o(c(n).appendChild(c(e)))}),arguments)}function ff(n){var e=c(n).target;return w(e)?0:o(e)}function cf(n){return c(n).cancelBubble}function _f(n){c(n).preventDefault()}function of(n){c(n).stopPropagation()}function af(n,e){return o(c(n)[e>>>0])}function df(n){return c(n).length}function bf(){return o(new Array)}function gf(n,e){return o(new Function(g(n,e)))}function wf(){return L((function(n,e){return o(Reflect.get(c(n),c(e)))}),arguments)}function lf(){return L((function(n,e){return o(c(n).call(c(e)))}),arguments)}function sf(){return o(new Object)}function mf(){return L((function(){return o(self.self)}),arguments)}function vf(){return L((function(){return o(window.window)}),arguments)}function yf(){return L((function(){return o(globalThis.globalThis)}),arguments)}function pf(){return L((function(){return o(global.global)}),arguments)}function hf(n){return void 0===c(n)}function xf(n){return o(Array.of(c(n)))}function Sf(n,e){return c(n).push(c(e))}function Af(n,e){return Object.is(c(n),c(e))}function Pf(n){return o(Promise.resolve(c(n)))}function If(n,e){return o(c(n).then(c(e)))}function Df(n){return o(c(n).buffer)}function Ff(n,e,t){return o(new Int8Array(c(n),e>>>0,t>>>0))}function Ef(n,e,t){return o(new Int16Array(c(n),e>>>0,t>>>0))}function Tf(n,e,t){return o(new Int32Array(c(n),e>>>0,t>>>0))}function Bf(n,e,t){return o(new Uint8Array(c(n),e>>>0,t>>>0))}function Lf(n,e,t){return o(new Uint16Array(c(n),e>>>0,t>>>0))}function Mf(n,e,t){return o(new Uint32Array(c(n),e>>>0,t>>>0))}function kf(n,e,t){return o(new Float32Array(c(n),e>>>0,t>>>0))}function Rf(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function Of(n,e){var t=h(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=v;m()[n/4+1]=f,m()[n/4+0]=t}function Cf(n,e){throw new Error(g(n,e))}function Vf(){return o(u.j)}function Uf(n,e,t){return o(x(n,e,126,S))}function qf(n,e,t){return o(x(n,e,126,S))}function Kf(n,e,t){return o(x(n,e,126,S))}function jf(n,e,t){return o(x(n,e,126,S))}function Gf(n,e,t){return o(x(n,e,126,S))}function Wf(n,e,t){return o(x(n,e,126,S))}function Qf(n,e,t){return o(x(n,e,126,S))}function Xf(n,e,t){return o(x(n,e,126,A))}function Yf(n,e,t){return o(x(n,e,126,S))}function Nf(n,e,t){return o(x(n,e,203,P))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},461:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(368);r.l()}}]); \ No newline at end of file diff --git a/assets/js/10.befdcc6e.js b/assets/js/10.befdcc6e.js deleted file mode 100644 index 6aba20eb..00000000 --- a/assets/js/10.befdcc6e.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{368:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return D})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_object_clone_ref",(function(){return k})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbindgen_string_new",(function(){return O})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_number_get",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return cn})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return dn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return bn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return gn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return wn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return ln})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return sn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return mn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return vn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return yn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return pn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return hn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return Sn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return An})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Pn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Dn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return In})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return En})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Fn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Tn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Bn})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Ln})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return Mn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return kn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Rn})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return On})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return jn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Gn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Wn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Nn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Jn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Zn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return $n})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ne})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return ee})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return te})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return re})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return ue})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return fe})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return _e})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ce})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return ie})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return oe})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return de})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return be})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return ge})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return we})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return le})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return se})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return me})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ve})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return ye})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return pe})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return he})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Ae})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Pe})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return De})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Ie})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Ee})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Fe})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Te})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Be})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Le})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Me})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return ke})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Re})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Oe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ce})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return je})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Ge})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return We})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ne})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return He})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return Je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return Ze})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return $e})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return nt})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return et})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return tt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return rt})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ut})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ft})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return _t})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return ct})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return it})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return ot})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return dt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return bt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return gt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return wt})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return lt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return st})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return mt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return vt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return yt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return pt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return xt})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ht})),t.d(e,"__wbg_name_2473476082bed625",(function(){return St})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return At})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return Pt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return Dt})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return It})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Et})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Ft})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return Tt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return Bt})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return Lt})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Mt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return kt})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Rt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Ot})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Ct})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Vt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Ut})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return qt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Kt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return jt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Gt})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Wt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Qt})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Xt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Yt})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Nt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Ht})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return zt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Zt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return $t})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return nr})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return er})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return tr})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return rr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return ur})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return fr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return _r})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return cr})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return ir})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return or})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return ar})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return dr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return br})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return gr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return wr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return lr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return sr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return mr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return vr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return yr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return pr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return xr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return hr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Sr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ar})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Pr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Ir})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Er})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Fr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Tr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Br})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return Lr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Mr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return kr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Rr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Or})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Cr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Vr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Ur})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return qr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Kr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return jr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Gr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Wr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Qr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Xr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Yr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Nr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Hr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Jr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return zr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return Zr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return $r})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return nu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return eu})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return tu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return ru})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return uu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return fu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return _u})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return cu})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return iu})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return ou})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return au})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return du})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return bu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return gu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return wu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return lu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return su})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return mu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return vu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return yu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return pu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return xu})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return hu})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Su})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Au})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Pu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Du})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Iu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Eu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Fu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Tu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Bu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return Lu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Mu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return ku})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Ru})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Ou})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Cu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Vu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Uu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return qu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Ku})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return ju})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Gu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Wu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Qu})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Xu})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Yu})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Nu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Hu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Ju})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return zu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Zu})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return $u})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return nf})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return ef})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return tf})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return rf})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return uf})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return ff})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return _f})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return cf})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return of})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return af})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return df})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return bf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return gf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return wf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return lf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return sf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return mf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return yf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return pf})),t.d(e,"__wbindgen_is_undefined",(function(){return xf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return hf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Sf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Af})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Pf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Df})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return If})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Ef})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Ff})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return Tf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Bf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return Lf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return Mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return kf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Rf})),t.d(e,"__wbindgen_debug_string",(function(){return Of})),t.d(e,"__wbindgen_throw",(function(){return Cf})),t.d(e,"__wbindgen_memory",(function(){return Vf})),t.d(e,"__wbindgen_closure_wrapper577",(function(){return Uf})),t.d(e,"__wbindgen_closure_wrapper579",(function(){return qf})),t.d(e,"__wbindgen_closure_wrapper581",(function(){return Kf})),t.d(e,"__wbindgen_closure_wrapper583",(function(){return jf})),t.d(e,"__wbindgen_closure_wrapper585",(function(){return Gf})),t.d(e,"__wbindgen_closure_wrapper587",(function(){return Wf})),t.d(e,"__wbindgen_closure_wrapper589",(function(){return Qf})),t.d(e,"__wbindgen_closure_wrapper591",(function(){return Xf})),t.d(e,"__wbindgen_closure_wrapper593",(function(){return Yf})),t.d(e,"__wbindgen_closure_wrapper817",(function(){return Nf}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(404),t(403),t(61),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(414),t(459)),f=new Array(32).fill(void 0);function _(n){return f[n]}f.push(void 0,null,!0,!1);var c=f.length;function i(n){var e=_(n);return function(n){n<36||(f[n]=c,c=n)}(n),e}function o(n){c===f.length&&f.push(f.length+1);var e=c;return c=f[e],f[e]=n,e}var a=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});a.decode();var d=new Uint8Array;function b(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function g(n,e){return a.decode(b().subarray(n,n+e))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function m(){return 0===s.byteLength&&(s=new Int32Array(u.j.buffer)),s}var v=0,y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof y.encodeInto?function(n,e){return y.encodeInto(n,e)}:function(n,e){var t=y.encode(n);return e.set(t),{read:n.length,written:t.length}};function x(n,e,t){if(void 0===t){var r=y.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),v=r.length,u}for(var f=n.length,_=e(f),c=b(),i=0;i127)break;c[_+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),_=t(_,f,f=i+3*n.length);var a=b().subarray(_+i,_+f);i+=p(n,a).written}return v=i,_}function h(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},_=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),_=0;_>>0,_(t))}function X(n,e,t,r,u,f){_(n).bindBufferRange(e>>>0,t>>>0,_(r),u,f)}function Y(n,e,t){_(n).bindSampler(e>>>0,_(t))}function N(n,e){_(n).bindVertexArray(_(e))}function H(n,e,t,r,u,f,c,i,o,a,d){_(n).blitFramebuffer(e,t,r,u,f,c,i,o,a>>>0,d>>>0)}function J(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function Z(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function $(n,e,t,r,u){_(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){_(n).clearBufferfv(e>>>0,t,E(r,u))}function en(n,e,t,r,u){_(n).clearBufferiv(e>>>0,t,F(r,u))}function tn(n,e,t,r,u){_(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return _(n).clientWaitSync(_(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,c,i,o,a){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o,a)}function fn(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function _n(n,e,t,r,u,f,c,i,o,a,d,b){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d,b)}function cn(n,e,t,r,u,f,c,i,o,a,d){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,_(d))}function on(n,e,t,r,u,f){_(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,c,i,o,a){_(n).copyTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a)}function dn(n){var e=_(n).createSampler();return w(e)?0:o(e)}function bn(n){var e=_(n).createVertexArray();return w(e)?0:o(e)}function gn(n,e){_(n).deleteQuery(_(e))}function wn(n,e){_(n).deleteSampler(_(e))}function ln(n,e){_(n).deleteSync(_(e))}function sn(n,e){_(n).deleteVertexArray(_(e))}function mn(n,e,t,r,u){_(n).drawArraysInstanced(e>>>0,t,r,u)}function vn(n,e){_(n).drawBuffers(_(e))}function yn(n,e,t,r,u,f){_(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function pn(n,e){_(n).endQuery(e>>>0)}function xn(n,e,t){var r=_(n).fenceSync(e>>>0,t>>>0);return w(r)?0:o(r)}function hn(n,e,t,r,u,f){_(n).framebufferTextureLayer(e>>>0,t>>>0,_(r),u,f)}function Sn(n,e,t,r){_(n).getBufferSubData(e>>>0,t,_(r))}function An(){return L((function(n,e,t){return o(_(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Pn(n,e,t){return o(_(n).getQueryParameter(_(e),t>>>0))}function Dn(n,e,t){return o(_(n).getSyncParameter(_(e),t>>>0))}function In(n,e,t,r){return _(n).getUniformBlockIndex(_(e),g(t,r))}function En(){return L((function(n,e,t){_(n).invalidateFramebuffer(e>>>0,_(t))}),arguments)}function Fn(n,e){_(n).readBuffer(e>>>0)}function Tn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function Bn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,i)}),arguments)}function Ln(n,e,t,r,u,f){_(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function Mn(n,e,t,r){_(n).samplerParameterf(_(e),t>>>0,r)}function kn(n,e,t,r){_(n).samplerParameteri(_(e),t>>>0,r)}function Rn(n,e,t,r,u,f){_(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function On(n,e,t,r,u,f,c){_(n).texStorage3D(e>>>0,t,r>>>0,u,f,c)}function Cn(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(a))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,a)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,c,i,o,a,d,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,c,i,o,a,d,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d>>>0,_(b))}),arguments)}function Kn(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function jn(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Gn(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Wn(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Qn(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Xn(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Yn(n,e,t,r){_(n).uniformBlockBinding(_(e),t>>>0,r>>>0)}function Nn(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Hn(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Jn(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function zn(n,e,t){_(n).vertexAttribDivisor(e>>>0,t>>>0)}function Zn(n,e,t,r,u,f){_(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function $n(n,e){_(n).activeTexture(e>>>0)}function ne(n,e,t){_(n).attachShader(_(e),_(t))}function ee(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function te(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function re(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function ue(n,e,t){_(n).bindTexture(e>>>0,_(t))}function fe(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function _e(n,e){_(n).blendEquation(e>>>0)}function ce(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function ie(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function oe(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function de(n,e){_(n).compileShader(_(e))}function be(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function ge(n){var e=_(n).createBuffer();return w(e)?0:o(e)}function we(n){var e=_(n).createFramebuffer();return w(e)?0:o(e)}function le(n){var e=_(n).createProgram();return w(e)?0:o(e)}function se(n){var e=_(n).createRenderbuffer();return w(e)?0:o(e)}function me(n,e){var t=_(n).createShader(e>>>0);return w(t)?0:o(t)}function ve(n){var e=_(n).createTexture();return w(e)?0:o(e)}function ye(n,e){_(n).cullFace(e>>>0)}function pe(n,e){_(n).deleteBuffer(_(e))}function xe(n,e){_(n).deleteFramebuffer(_(e))}function he(n,e){_(n).deleteProgram(_(e))}function Se(n,e){_(n).deleteRenderbuffer(_(e))}function Ae(n,e){_(n).deleteShader(_(e))}function Pe(n,e){_(n).deleteTexture(_(e))}function De(n,e){_(n).depthFunc(e>>>0)}function Ie(n,e){_(n).depthMask(0!==e)}function Ee(n,e,t){_(n).depthRange(e,t)}function Fe(n,e){_(n).disable(e>>>0)}function Te(n,e){_(n).disableVertexAttribArray(e>>>0)}function Be(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function Le(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function Me(n,e){_(n).enable(e>>>0)}function ke(n,e){_(n).enableVertexAttribArray(e>>>0)}function Re(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function Oe(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function Ce(n,e){_(n).frontFace(e>>>0)}function Ve(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return w(r)?0:o(r)}function Ue(){return L((function(n,e,t){var r=_(n).getExtension(g(e,t));return w(r)?0:o(r)}),arguments)}function qe(){return L((function(n,e){return o(_(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function je(n,e,t){return o(_(n).getProgramParameter(_(e),t>>>0))}function Ge(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function We(n,e,t){return o(_(n).getShaderParameter(_(e),t>>>0))}function Qe(n){var e=_(n).getSupportedExtensions();return w(e)?0:o(e)}function Xe(n,e,t,r){var u=_(n).getUniformLocation(_(e),g(t,r));return w(u)?0:o(u)}function Ye(n,e){_(n).linkProgram(_(e))}function Ne(n,e,t){_(n).pixelStorei(e>>>0,t)}function He(n,e,t){_(n).polygonOffset(e,t)}function Je(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function ze(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Ze(n,e,t,r){_(n).shaderSource(_(e),g(t,r))}function $e(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function nt(n,e){_(n).stencilMask(e>>>0)}function et(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function tt(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function rt(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function ut(n,e,t){_(n).uniform1f(_(e),t)}function ft(n,e,t){_(n).uniform1i(_(e),t)}function _t(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function ct(n,e){_(n).useProgram(_(e))}function it(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function ot(n,e,t,r,u){_(n).viewport(e,t,r,u)}function at(n){var e;try{e=_(n)instanceof Window}catch(n){e=!1}return e}function dt(n){var e=_(n).document;return w(e)?0:o(e)}function bt(){return L((function(n){return o(_(n).innerWidth)}),arguments)}function gt(){return L((function(n){return o(_(n).innerHeight)}),arguments)}function wt(n){return _(n).devicePixelRatio}function lt(){return L((function(n,e){_(n).cancelAnimationFrame(e)}),arguments)}function st(){return L((function(n,e,t){var r=_(n).matchMedia(g(e,t));return w(r)?0:o(r)}),arguments)}function mt(){return L((function(n,e){return _(n).requestAnimationFrame(_(e))}),arguments)}function vt(n,e,t){var r=_(n)[g(e,t)];return w(r)?0:o(r)}function yt(n,e){_(n).clearTimeout(e)}function pt(){return L((function(n,e,t){return _(n).setTimeout(_(e),t)}),arguments)}function xt(n){return _(n).size}function ht(n){return _(n).type}function St(n,e){var t=x(_(e).name,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function At(n,e,t,r,u){_(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function Pt(n,e,t,r,u,f){_(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function Dt(n,e,t){_(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function It(){return L((function(n,e,t,r,u){_(n).setProperty(g(e,t),g(r,u))}),arguments)}function Et(n){return _(n).x}function Ft(n){return _(n).y}function Tt(n){return _(n).clientX}function Bt(n){return _(n).clientY}function Lt(n){return _(n).offsetX}function Mt(n){return _(n).offsetY}function kt(n){return _(n).ctrlKey}function Rt(n){return _(n).shiftKey}function Ot(n){return _(n).altKey}function Ct(n){return _(n).metaKey}function Vt(n){return _(n).button}function Ut(n){return _(n).buttons}function qt(n){return _(n).movementX}function Kt(n){return _(n).movementY}function jt(n,e){_(n).bindVertexArrayOES(_(e))}function Gt(n){var e=_(n).createVertexArrayOES();return w(e)?0:o(e)}function Wt(n,e){_(n).deleteVertexArrayOES(_(e))}function Qt(n){return _(n).pointerId}function Xt(n){return _(n).deltaX}function Yt(n){return _(n).deltaY}function Nt(n){return _(n).deltaMode}function Ht(n){var e;try{e=_(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Jt(n){return _(n).width}function zt(n,e){_(n).width=e>>>0}function Zt(n){return _(n).height}function $t(n,e){_(n).height=e>>>0}function nr(){return L((function(n,e,t,r){var u=_(n).getContext(g(e,t),_(r));return w(u)?0:o(u)}),arguments)}function er(n){return _(n).matches}function tr(n){return _(n).now()}function rr(n,e){_(n).drawBuffersWEBGL(_(e))}function ur(n){var e=_(n).fullscreenElement;return w(e)?0:o(e)}function fr(){return L((function(n,e,t){return o(_(n).createElement(g(e,t)))}),arguments)}function _r(n,e,t){var r=_(n).getElementById(g(e,t));return w(r)?0:o(r)}function cr(){return L((function(n,e,t){var r=_(n).querySelector(g(e,t));return w(r)?0:o(r)}),arguments)}function ir(n){return o(_(n).getBoundingClientRect())}function or(){return L((function(n){_(n).requestFullscreen()}),arguments)}function ar(){return L((function(n,e,t,r,u){_(n).setAttribute(g(e,t),g(r,u))}),arguments)}function dr(){return L((function(n,e){_(n).setPointerCapture(e)}),arguments)}function br(n){return o(_(n).style)}function gr(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function wr(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function lr(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function sr(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function mr(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function vr(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(a))}),arguments)}function yr(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function pr(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function xr(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function hr(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Sr(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Ar(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Pr(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Dr(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Ir(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Er(n,e){_(n).activeTexture(e>>>0)}function Fr(n,e,t){_(n).attachShader(_(e),_(t))}function Tr(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function Br(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function Lr(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function Mr(n,e,t){_(n).bindTexture(e>>>0,_(t))}function kr(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function Rr(n,e){_(n).blendEquation(e>>>0)}function Or(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function Cr(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function Vr(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Ur(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function qr(n,e){_(n).compileShader(_(e))}function Kr(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function jr(n){var e=_(n).createBuffer();return w(e)?0:o(e)}function Gr(n){var e=_(n).createFramebuffer();return w(e)?0:o(e)}function Wr(n){var e=_(n).createProgram();return w(e)?0:o(e)}function Qr(n){var e=_(n).createRenderbuffer();return w(e)?0:o(e)}function Xr(n,e){var t=_(n).createShader(e>>>0);return w(t)?0:o(t)}function Yr(n){var e=_(n).createTexture();return w(e)?0:o(e)}function Nr(n,e){_(n).cullFace(e>>>0)}function Hr(n,e){_(n).deleteBuffer(_(e))}function Jr(n,e){_(n).deleteFramebuffer(_(e))}function zr(n,e){_(n).deleteProgram(_(e))}function Zr(n,e){_(n).deleteRenderbuffer(_(e))}function $r(n,e){_(n).deleteShader(_(e))}function nu(n,e){_(n).deleteTexture(_(e))}function eu(n,e){_(n).depthFunc(e>>>0)}function tu(n,e){_(n).depthMask(0!==e)}function ru(n,e,t){_(n).depthRange(e,t)}function uu(n,e){_(n).disable(e>>>0)}function fu(n,e){_(n).disableVertexAttribArray(e>>>0)}function _u(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function cu(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function iu(n,e){_(n).enable(e>>>0)}function ou(n,e){_(n).enableVertexAttribArray(e>>>0)}function au(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function du(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function bu(n,e){_(n).frontFace(e>>>0)}function gu(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return w(r)?0:o(r)}function wu(){return L((function(n,e){return o(_(n).getParameter(e>>>0))}),arguments)}function lu(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function su(n,e,t){return o(_(n).getProgramParameter(_(e),t>>>0))}function mu(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function vu(n,e,t){return o(_(n).getShaderParameter(_(e),t>>>0))}function yu(n,e,t,r){var u=_(n).getUniformLocation(_(e),g(t,r));return w(u)?0:o(u)}function pu(n,e){_(n).linkProgram(_(e))}function xu(n,e,t){_(n).pixelStorei(e>>>0,t)}function hu(n,e,t){_(n).polygonOffset(e,t)}function Su(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Au(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Pu(n,e,t,r){_(n).shaderSource(_(e),g(t,r))}function Du(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Iu(n,e){_(n).stencilMask(e>>>0)}function Eu(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function Fu(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tu(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function Bu(n,e,t){_(n).uniform1f(_(e),t)}function Lu(n,e,t){_(n).uniform1i(_(e),t)}function Mu(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function ku(n,e){_(n).useProgram(_(e))}function Ru(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function Ou(n,e,t,r,u){_(n).viewport(e,t,r,u)}function Cu(n){console.debug(_(n))}function Vu(n){console.error(_(n))}function Uu(n,e){console.error(_(n),_(e))}function qu(n){console.info(_(n))}function Ku(n){console.log(_(n))}function ju(n){console.warn(_(n))}function Gu(){return L((function(n,e,t,r){_(n).addEventListener(g(e,t),_(r))}),arguments)}function Wu(){return L((function(n,e,t,r,u){_(n).addEventListener(g(e,t),_(r),_(u))}),arguments)}function Qu(){return L((function(n,e,t,r){_(n).removeEventListener(g(e,t),_(r))}),arguments)}function Xu(n){return _(n).charCode}function Yu(n){return _(n).keyCode}function Nu(n){return _(n).altKey}function Hu(n){return _(n).ctrlKey}function Ju(n){return _(n).shiftKey}function zu(n){return _(n).metaKey}function Zu(n,e){var t=x(_(e).key,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function $u(n,e){var t=x(_(e).code,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function nf(n,e,t){return _(n).getModifierState(g(e,t))}function ef(n){return _(n).matches}function tf(){return L((function(n,e){_(n).addListener(_(e))}),arguments)}function rf(){return L((function(n,e){_(n).removeListener(_(e))}),arguments)}function uf(){return L((function(n,e){return o(_(n).appendChild(_(e)))}),arguments)}function ff(n){var e=_(n).target;return w(e)?0:o(e)}function _f(n){return _(n).cancelBubble}function cf(n){_(n).preventDefault()}function of(n){_(n).stopPropagation()}function af(n,e){return o(_(n)[e>>>0])}function df(n){return _(n).length}function bf(){return o(new Array)}function gf(n,e){return o(new Function(g(n,e)))}function wf(){return L((function(n,e){return o(Reflect.get(_(n),_(e)))}),arguments)}function lf(){return L((function(n,e){return o(_(n).call(_(e)))}),arguments)}function sf(){return o(new Object)}function mf(){return L((function(){return o(self.self)}),arguments)}function vf(){return L((function(){return o(window.window)}),arguments)}function yf(){return L((function(){return o(globalThis.globalThis)}),arguments)}function pf(){return L((function(){return o(global.global)}),arguments)}function xf(n){return void 0===_(n)}function hf(n){return o(Array.of(_(n)))}function Sf(n,e){return _(n).push(_(e))}function Af(n,e){return Object.is(_(n),_(e))}function Pf(n){return o(Promise.resolve(_(n)))}function Df(n,e){return o(_(n).then(_(e)))}function If(n){return o(_(n).buffer)}function Ef(n,e,t){return o(new Int8Array(_(n),e>>>0,t>>>0))}function Ff(n,e,t){return o(new Int16Array(_(n),e>>>0,t>>>0))}function Tf(n,e,t){return o(new Int32Array(_(n),e>>>0,t>>>0))}function Bf(n,e,t){return o(new Uint8Array(_(n),e>>>0,t>>>0))}function Lf(n,e,t){return o(new Uint16Array(_(n),e>>>0,t>>>0))}function Mf(n,e,t){return o(new Uint32Array(_(n),e>>>0,t>>>0))}function kf(n,e,t){return o(new Float32Array(_(n),e>>>0,t>>>0))}function Rf(){return L((function(n,e,t){return Reflect.set(_(n),_(e),_(t))}),arguments)}function Of(n,e){var t=x(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var _=e.length,c="[";_>0&&(c+=n(e[0]));for(var i=1;i<_;i++)c+=", "+n(e[i]);return c+="]"}var o,a=/\[object ([^\]]+)\]/.exec(toString.call(e));if(!(a.length>1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(_(e)),u.d,u.e),f=v;m()[n/4+1]=f,m()[n/4+0]=t}function Cf(n,e){throw new Error(g(n,e))}function Vf(){return o(u.j)}function Uf(n,e,t){return o(h(n,e,126,S))}function qf(n,e,t){return o(h(n,e,126,S))}function Kf(n,e,t){return o(h(n,e,126,S))}function jf(n,e,t){return o(h(n,e,126,S))}function Gf(n,e,t){return o(h(n,e,126,S))}function Wf(n,e,t){return o(h(n,e,126,S))}function Qf(n,e,t){return o(h(n,e,126,S))}function Xf(n,e,t){return o(h(n,e,126,A))}function Yf(n,e,t){return o(h(n,e,126,S))}function Nf(n,e,t){return o(h(n,e,203,P))}}.call(this,t(375)(n))},459:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(368);r.l()}}]); \ No newline at end of file diff --git a/assets/js/11.063ca119.js b/assets/js/11.063ca119.js deleted file mode 100644 index e75840d3..00000000 --- a/assets/js/11.063ca119.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{369:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return D})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_object_clone_ref",(function(){return k})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbindgen_string_new",(function(){return O})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_number_get",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return cn})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return dn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return bn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return gn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return wn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return ln})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return sn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return mn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return vn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return yn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return pn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return hn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return Sn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return An})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Pn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Dn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return In})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return En})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Fn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Tn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Bn})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Ln})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return Mn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return kn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Rn})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return On})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return jn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Gn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Wn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Nn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Jn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Zn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return $n})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ne})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return ee})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return te})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return re})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return ue})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return fe})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return _e})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ce})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return ie})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return oe})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return de})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return be})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return ge})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return we})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return le})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return se})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return me})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ve})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return ye})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return pe})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return he})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Ae})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Pe})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return De})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Ie})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Ee})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Fe})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Te})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Be})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Le})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Me})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return ke})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Re})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Oe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ce})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return je})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Ge})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return We})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ne})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return He})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return Je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return Ze})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return $e})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return nt})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return et})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return tt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return rt})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ut})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ft})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return _t})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return ct})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return it})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return ot})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return dt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return bt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return gt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return wt})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return lt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return st})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return mt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return vt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return yt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return pt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return xt})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ht})),t.d(e,"__wbg_name_2473476082bed625",(function(){return St})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return At})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return Pt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return Dt})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return It})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Et})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Ft})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return Tt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return Bt})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return Lt})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Mt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return kt})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Rt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Ot})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Ct})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Vt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Ut})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return qt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Kt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return jt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Gt})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Wt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Qt})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Xt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Yt})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Nt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Ht})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return zt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Zt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return $t})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return nr})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return er})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return tr})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return rr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return ur})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return fr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return _r})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return cr})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return ir})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return or})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return ar})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return dr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return br})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return gr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return wr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return lr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return sr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return mr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return vr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return yr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return pr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return xr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return hr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Sr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ar})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Pr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Ir})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Er})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Fr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Tr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Br})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return Lr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Mr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return kr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Rr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Or})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Cr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Vr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Ur})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return qr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Kr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return jr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Gr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Wr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Qr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Xr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Yr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Nr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Hr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Jr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return zr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return Zr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return $r})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return nu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return eu})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return tu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return ru})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return uu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return fu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return _u})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return cu})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return iu})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return ou})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return au})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return du})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return bu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return gu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return wu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return lu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return su})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return mu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return vu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return yu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return pu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return xu})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return hu})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Su})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Au})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Pu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Du})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Iu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Eu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Fu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Tu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Bu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return Lu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Mu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return ku})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Ru})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Ou})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Cu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Vu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Uu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return qu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Ku})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return ju})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Gu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Wu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Qu})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Xu})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Yu})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Nu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Hu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Ju})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return zu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Zu})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return $u})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return nf})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return ef})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return tf})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return rf})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return uf})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return ff})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return _f})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return cf})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return of})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return af})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return df})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return bf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return gf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return wf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return lf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return sf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return mf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return yf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return pf})),t.d(e,"__wbindgen_is_undefined",(function(){return xf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return hf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Sf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Af})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Pf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Df})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return If})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Ef})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Ff})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return Tf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Bf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return Lf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return Mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return kf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Rf})),t.d(e,"__wbindgen_debug_string",(function(){return Of})),t.d(e,"__wbindgen_throw",(function(){return Cf})),t.d(e,"__wbindgen_memory",(function(){return Vf})),t.d(e,"__wbindgen_closure_wrapper578",(function(){return Uf})),t.d(e,"__wbindgen_closure_wrapper580",(function(){return qf})),t.d(e,"__wbindgen_closure_wrapper582",(function(){return Kf})),t.d(e,"__wbindgen_closure_wrapper584",(function(){return jf})),t.d(e,"__wbindgen_closure_wrapper586",(function(){return Gf})),t.d(e,"__wbindgen_closure_wrapper588",(function(){return Wf})),t.d(e,"__wbindgen_closure_wrapper590",(function(){return Qf})),t.d(e,"__wbindgen_closure_wrapper592",(function(){return Xf})),t.d(e,"__wbindgen_closure_wrapper594",(function(){return Yf})),t.d(e,"__wbindgen_closure_wrapper821",(function(){return Nf}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(404),t(403),t(61),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(414),t(460)),f=new Array(32).fill(void 0);function _(n){return f[n]}f.push(void 0,null,!0,!1);var c=f.length;function i(n){var e=_(n);return function(n){n<36||(f[n]=c,c=n)}(n),e}function o(n){c===f.length&&f.push(f.length+1);var e=c;return c=f[e],f[e]=n,e}var a=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});a.decode();var d=new Uint8Array;function b(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function g(n,e){return a.decode(b().subarray(n,n+e))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function m(){return 0===s.byteLength&&(s=new Int32Array(u.j.buffer)),s}var v=0,y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof y.encodeInto?function(n,e){return y.encodeInto(n,e)}:function(n,e){var t=y.encode(n);return e.set(t),{read:n.length,written:t.length}};function x(n,e,t){if(void 0===t){var r=y.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),v=r.length,u}for(var f=n.length,_=e(f),c=b(),i=0;i127)break;c[_+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),_=t(_,f,f=i+3*n.length);var a=b().subarray(_+i,_+f);i+=p(n,a).written}return v=i,_}function h(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},_=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),_=0;_>>0,_(t))}function X(n,e,t,r,u,f){_(n).bindBufferRange(e>>>0,t>>>0,_(r),u,f)}function Y(n,e,t){_(n).bindSampler(e>>>0,_(t))}function N(n,e){_(n).bindVertexArray(_(e))}function H(n,e,t,r,u,f,c,i,o,a,d){_(n).blitFramebuffer(e,t,r,u,f,c,i,o,a>>>0,d>>>0)}function J(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function Z(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function $(n,e,t,r,u){_(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){_(n).clearBufferfv(e>>>0,t,E(r,u))}function en(n,e,t,r,u){_(n).clearBufferiv(e>>>0,t,F(r,u))}function tn(n,e,t,r,u){_(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return _(n).clientWaitSync(_(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,c,i,o,a){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o,a)}function fn(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function _n(n,e,t,r,u,f,c,i,o,a,d,b){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d,b)}function cn(n,e,t,r,u,f,c,i,o,a,d){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,_(d))}function on(n,e,t,r,u,f){_(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,c,i,o,a){_(n).copyTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a)}function dn(n){var e=_(n).createSampler();return w(e)?0:o(e)}function bn(n){var e=_(n).createVertexArray();return w(e)?0:o(e)}function gn(n,e){_(n).deleteQuery(_(e))}function wn(n,e){_(n).deleteSampler(_(e))}function ln(n,e){_(n).deleteSync(_(e))}function sn(n,e){_(n).deleteVertexArray(_(e))}function mn(n,e,t,r,u){_(n).drawArraysInstanced(e>>>0,t,r,u)}function vn(n,e){_(n).drawBuffers(_(e))}function yn(n,e,t,r,u,f){_(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function pn(n,e){_(n).endQuery(e>>>0)}function xn(n,e,t){var r=_(n).fenceSync(e>>>0,t>>>0);return w(r)?0:o(r)}function hn(n,e,t,r,u,f){_(n).framebufferTextureLayer(e>>>0,t>>>0,_(r),u,f)}function Sn(n,e,t,r){_(n).getBufferSubData(e>>>0,t,_(r))}function An(){return L((function(n,e,t){return o(_(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Pn(n,e,t){return o(_(n).getQueryParameter(_(e),t>>>0))}function Dn(n,e,t){return o(_(n).getSyncParameter(_(e),t>>>0))}function In(n,e,t,r){return _(n).getUniformBlockIndex(_(e),g(t,r))}function En(){return L((function(n,e,t){_(n).invalidateFramebuffer(e>>>0,_(t))}),arguments)}function Fn(n,e){_(n).readBuffer(e>>>0)}function Tn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function Bn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,i)}),arguments)}function Ln(n,e,t,r,u,f){_(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function Mn(n,e,t,r){_(n).samplerParameterf(_(e),t>>>0,r)}function kn(n,e,t,r){_(n).samplerParameteri(_(e),t>>>0,r)}function Rn(n,e,t,r,u,f){_(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function On(n,e,t,r,u,f,c){_(n).texStorage3D(e>>>0,t,r>>>0,u,f,c)}function Cn(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(a))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,a)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,c,i,o,a,d,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,c,i,o,a,d,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d>>>0,_(b))}),arguments)}function Kn(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function jn(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Gn(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Wn(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Qn(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Xn(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Yn(n,e,t,r){_(n).uniformBlockBinding(_(e),t>>>0,r>>>0)}function Nn(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Hn(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Jn(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function zn(n,e,t){_(n).vertexAttribDivisor(e>>>0,t>>>0)}function Zn(n,e,t,r,u,f){_(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function $n(n,e){_(n).activeTexture(e>>>0)}function ne(n,e,t){_(n).attachShader(_(e),_(t))}function ee(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function te(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function re(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function ue(n,e,t){_(n).bindTexture(e>>>0,_(t))}function fe(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function _e(n,e){_(n).blendEquation(e>>>0)}function ce(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function ie(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function oe(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function de(n,e){_(n).compileShader(_(e))}function be(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function ge(n){var e=_(n).createBuffer();return w(e)?0:o(e)}function we(n){var e=_(n).createFramebuffer();return w(e)?0:o(e)}function le(n){var e=_(n).createProgram();return w(e)?0:o(e)}function se(n){var e=_(n).createRenderbuffer();return w(e)?0:o(e)}function me(n,e){var t=_(n).createShader(e>>>0);return w(t)?0:o(t)}function ve(n){var e=_(n).createTexture();return w(e)?0:o(e)}function ye(n,e){_(n).cullFace(e>>>0)}function pe(n,e){_(n).deleteBuffer(_(e))}function xe(n,e){_(n).deleteFramebuffer(_(e))}function he(n,e){_(n).deleteProgram(_(e))}function Se(n,e){_(n).deleteRenderbuffer(_(e))}function Ae(n,e){_(n).deleteShader(_(e))}function Pe(n,e){_(n).deleteTexture(_(e))}function De(n,e){_(n).depthFunc(e>>>0)}function Ie(n,e){_(n).depthMask(0!==e)}function Ee(n,e,t){_(n).depthRange(e,t)}function Fe(n,e){_(n).disable(e>>>0)}function Te(n,e){_(n).disableVertexAttribArray(e>>>0)}function Be(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function Le(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function Me(n,e){_(n).enable(e>>>0)}function ke(n,e){_(n).enableVertexAttribArray(e>>>0)}function Re(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function Oe(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function Ce(n,e){_(n).frontFace(e>>>0)}function Ve(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return w(r)?0:o(r)}function Ue(){return L((function(n,e,t){var r=_(n).getExtension(g(e,t));return w(r)?0:o(r)}),arguments)}function qe(){return L((function(n,e){return o(_(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function je(n,e,t){return o(_(n).getProgramParameter(_(e),t>>>0))}function Ge(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function We(n,e,t){return o(_(n).getShaderParameter(_(e),t>>>0))}function Qe(n){var e=_(n).getSupportedExtensions();return w(e)?0:o(e)}function Xe(n,e,t,r){var u=_(n).getUniformLocation(_(e),g(t,r));return w(u)?0:o(u)}function Ye(n,e){_(n).linkProgram(_(e))}function Ne(n,e,t){_(n).pixelStorei(e>>>0,t)}function He(n,e,t){_(n).polygonOffset(e,t)}function Je(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function ze(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Ze(n,e,t,r){_(n).shaderSource(_(e),g(t,r))}function $e(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function nt(n,e){_(n).stencilMask(e>>>0)}function et(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function tt(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function rt(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function ut(n,e,t){_(n).uniform1f(_(e),t)}function ft(n,e,t){_(n).uniform1i(_(e),t)}function _t(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function ct(n,e){_(n).useProgram(_(e))}function it(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function ot(n,e,t,r,u){_(n).viewport(e,t,r,u)}function at(n){var e;try{e=_(n)instanceof Window}catch(n){e=!1}return e}function dt(n){var e=_(n).document;return w(e)?0:o(e)}function bt(){return L((function(n){return o(_(n).innerWidth)}),arguments)}function gt(){return L((function(n){return o(_(n).innerHeight)}),arguments)}function wt(n){return _(n).devicePixelRatio}function lt(){return L((function(n,e){_(n).cancelAnimationFrame(e)}),arguments)}function st(){return L((function(n,e,t){var r=_(n).matchMedia(g(e,t));return w(r)?0:o(r)}),arguments)}function mt(){return L((function(n,e){return _(n).requestAnimationFrame(_(e))}),arguments)}function vt(n,e,t){var r=_(n)[g(e,t)];return w(r)?0:o(r)}function yt(n,e){_(n).clearTimeout(e)}function pt(){return L((function(n,e,t){return _(n).setTimeout(_(e),t)}),arguments)}function xt(n){return _(n).size}function ht(n){return _(n).type}function St(n,e){var t=x(_(e).name,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function At(n,e,t,r,u){_(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function Pt(n,e,t,r,u,f){_(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function Dt(n,e,t){_(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function It(){return L((function(n,e,t,r,u){_(n).setProperty(g(e,t),g(r,u))}),arguments)}function Et(n){return _(n).x}function Ft(n){return _(n).y}function Tt(n){return _(n).clientX}function Bt(n){return _(n).clientY}function Lt(n){return _(n).offsetX}function Mt(n){return _(n).offsetY}function kt(n){return _(n).ctrlKey}function Rt(n){return _(n).shiftKey}function Ot(n){return _(n).altKey}function Ct(n){return _(n).metaKey}function Vt(n){return _(n).button}function Ut(n){return _(n).buttons}function qt(n){return _(n).movementX}function Kt(n){return _(n).movementY}function jt(n,e){_(n).bindVertexArrayOES(_(e))}function Gt(n){var e=_(n).createVertexArrayOES();return w(e)?0:o(e)}function Wt(n,e){_(n).deleteVertexArrayOES(_(e))}function Qt(n){return _(n).pointerId}function Xt(n){return _(n).deltaX}function Yt(n){return _(n).deltaY}function Nt(n){return _(n).deltaMode}function Ht(n){var e;try{e=_(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Jt(n){return _(n).width}function zt(n,e){_(n).width=e>>>0}function Zt(n){return _(n).height}function $t(n,e){_(n).height=e>>>0}function nr(){return L((function(n,e,t,r){var u=_(n).getContext(g(e,t),_(r));return w(u)?0:o(u)}),arguments)}function er(n){return _(n).matches}function tr(n){return _(n).now()}function rr(n,e){_(n).drawBuffersWEBGL(_(e))}function ur(n){var e=_(n).fullscreenElement;return w(e)?0:o(e)}function fr(){return L((function(n,e,t){return o(_(n).createElement(g(e,t)))}),arguments)}function _r(n,e,t){var r=_(n).getElementById(g(e,t));return w(r)?0:o(r)}function cr(){return L((function(n,e,t){var r=_(n).querySelector(g(e,t));return w(r)?0:o(r)}),arguments)}function ir(n){return o(_(n).getBoundingClientRect())}function or(){return L((function(n){_(n).requestFullscreen()}),arguments)}function ar(){return L((function(n,e,t,r,u){_(n).setAttribute(g(e,t),g(r,u))}),arguments)}function dr(){return L((function(n,e){_(n).setPointerCapture(e)}),arguments)}function br(n){return o(_(n).style)}function gr(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function wr(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function lr(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function sr(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function mr(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function vr(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(a))}),arguments)}function yr(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function pr(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function xr(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function hr(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Sr(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Ar(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Pr(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Dr(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Ir(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Er(n,e){_(n).activeTexture(e>>>0)}function Fr(n,e,t){_(n).attachShader(_(e),_(t))}function Tr(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function Br(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function Lr(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function Mr(n,e,t){_(n).bindTexture(e>>>0,_(t))}function kr(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function Rr(n,e){_(n).blendEquation(e>>>0)}function Or(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function Cr(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function Vr(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Ur(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function qr(n,e){_(n).compileShader(_(e))}function Kr(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function jr(n){var e=_(n).createBuffer();return w(e)?0:o(e)}function Gr(n){var e=_(n).createFramebuffer();return w(e)?0:o(e)}function Wr(n){var e=_(n).createProgram();return w(e)?0:o(e)}function Qr(n){var e=_(n).createRenderbuffer();return w(e)?0:o(e)}function Xr(n,e){var t=_(n).createShader(e>>>0);return w(t)?0:o(t)}function Yr(n){var e=_(n).createTexture();return w(e)?0:o(e)}function Nr(n,e){_(n).cullFace(e>>>0)}function Hr(n,e){_(n).deleteBuffer(_(e))}function Jr(n,e){_(n).deleteFramebuffer(_(e))}function zr(n,e){_(n).deleteProgram(_(e))}function Zr(n,e){_(n).deleteRenderbuffer(_(e))}function $r(n,e){_(n).deleteShader(_(e))}function nu(n,e){_(n).deleteTexture(_(e))}function eu(n,e){_(n).depthFunc(e>>>0)}function tu(n,e){_(n).depthMask(0!==e)}function ru(n,e,t){_(n).depthRange(e,t)}function uu(n,e){_(n).disable(e>>>0)}function fu(n,e){_(n).disableVertexAttribArray(e>>>0)}function _u(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function cu(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function iu(n,e){_(n).enable(e>>>0)}function ou(n,e){_(n).enableVertexAttribArray(e>>>0)}function au(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function du(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function bu(n,e){_(n).frontFace(e>>>0)}function gu(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return w(r)?0:o(r)}function wu(){return L((function(n,e){return o(_(n).getParameter(e>>>0))}),arguments)}function lu(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function su(n,e,t){return o(_(n).getProgramParameter(_(e),t>>>0))}function mu(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function vu(n,e,t){return o(_(n).getShaderParameter(_(e),t>>>0))}function yu(n,e,t,r){var u=_(n).getUniformLocation(_(e),g(t,r));return w(u)?0:o(u)}function pu(n,e){_(n).linkProgram(_(e))}function xu(n,e,t){_(n).pixelStorei(e>>>0,t)}function hu(n,e,t){_(n).polygonOffset(e,t)}function Su(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Au(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Pu(n,e,t,r){_(n).shaderSource(_(e),g(t,r))}function Du(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Iu(n,e){_(n).stencilMask(e>>>0)}function Eu(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function Fu(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tu(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function Bu(n,e,t){_(n).uniform1f(_(e),t)}function Lu(n,e,t){_(n).uniform1i(_(e),t)}function Mu(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function ku(n,e){_(n).useProgram(_(e))}function Ru(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function Ou(n,e,t,r,u){_(n).viewport(e,t,r,u)}function Cu(n){console.debug(_(n))}function Vu(n){console.error(_(n))}function Uu(n,e){console.error(_(n),_(e))}function qu(n){console.info(_(n))}function Ku(n){console.log(_(n))}function ju(n){console.warn(_(n))}function Gu(){return L((function(n,e,t,r){_(n).addEventListener(g(e,t),_(r))}),arguments)}function Wu(){return L((function(n,e,t,r,u){_(n).addEventListener(g(e,t),_(r),_(u))}),arguments)}function Qu(){return L((function(n,e,t,r){_(n).removeEventListener(g(e,t),_(r))}),arguments)}function Xu(n){return _(n).charCode}function Yu(n){return _(n).keyCode}function Nu(n){return _(n).altKey}function Hu(n){return _(n).ctrlKey}function Ju(n){return _(n).shiftKey}function zu(n){return _(n).metaKey}function Zu(n,e){var t=x(_(e).key,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function $u(n,e){var t=x(_(e).code,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function nf(n,e,t){return _(n).getModifierState(g(e,t))}function ef(n){return _(n).matches}function tf(){return L((function(n,e){_(n).addListener(_(e))}),arguments)}function rf(){return L((function(n,e){_(n).removeListener(_(e))}),arguments)}function uf(){return L((function(n,e){return o(_(n).appendChild(_(e)))}),arguments)}function ff(n){var e=_(n).target;return w(e)?0:o(e)}function _f(n){return _(n).cancelBubble}function cf(n){_(n).preventDefault()}function of(n){_(n).stopPropagation()}function af(n,e){return o(_(n)[e>>>0])}function df(n){return _(n).length}function bf(){return o(new Array)}function gf(n,e){return o(new Function(g(n,e)))}function wf(){return L((function(n,e){return o(Reflect.get(_(n),_(e)))}),arguments)}function lf(){return L((function(n,e){return o(_(n).call(_(e)))}),arguments)}function sf(){return o(new Object)}function mf(){return L((function(){return o(self.self)}),arguments)}function vf(){return L((function(){return o(window.window)}),arguments)}function yf(){return L((function(){return o(globalThis.globalThis)}),arguments)}function pf(){return L((function(){return o(global.global)}),arguments)}function xf(n){return void 0===_(n)}function hf(n){return o(Array.of(_(n)))}function Sf(n,e){return _(n).push(_(e))}function Af(n,e){return Object.is(_(n),_(e))}function Pf(n){return o(Promise.resolve(_(n)))}function Df(n,e){return o(_(n).then(_(e)))}function If(n){return o(_(n).buffer)}function Ef(n,e,t){return o(new Int8Array(_(n),e>>>0,t>>>0))}function Ff(n,e,t){return o(new Int16Array(_(n),e>>>0,t>>>0))}function Tf(n,e,t){return o(new Int32Array(_(n),e>>>0,t>>>0))}function Bf(n,e,t){return o(new Uint8Array(_(n),e>>>0,t>>>0))}function Lf(n,e,t){return o(new Uint16Array(_(n),e>>>0,t>>>0))}function Mf(n,e,t){return o(new Uint32Array(_(n),e>>>0,t>>>0))}function kf(n,e,t){return o(new Float32Array(_(n),e>>>0,t>>>0))}function Rf(){return L((function(n,e,t){return Reflect.set(_(n),_(e),_(t))}),arguments)}function Of(n,e){var t=x(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var _=e.length,c="[";_>0&&(c+=n(e[0]));for(var i=1;i<_;i++)c+=", "+n(e[i]);return c+="]"}var o,a=/\[object ([^\]]+)\]/.exec(toString.call(e));if(!(a.length>1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(_(e)),u.d,u.e),f=v;m()[n/4+1]=f,m()[n/4+0]=t}function Cf(n,e){throw new Error(g(n,e))}function Vf(){return o(u.j)}function Uf(n,e,t){return o(h(n,e,120,S))}function qf(n,e,t){return o(h(n,e,120,S))}function Kf(n,e,t){return o(h(n,e,120,S))}function jf(n,e,t){return o(h(n,e,120,S))}function Gf(n,e,t){return o(h(n,e,120,S))}function Wf(n,e,t){return o(h(n,e,120,S))}function Qf(n,e,t){return o(h(n,e,120,S))}function Xf(n,e,t){return o(h(n,e,120,S))}function Yf(n,e,t){return o(h(n,e,120,A))}function Nf(n,e,t){return o(h(n,e,202,P))}}.call(this,t(375)(n))},460:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(369);r.l()}}]); \ No newline at end of file diff --git a/assets/js/11.6c80f1a5.js b/assets/js/11.6c80f1a5.js new file mode 100644 index 00000000..6f98e870 --- /dev/null +++ b/assets/js/11.6c80f1a5.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{369:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_object_clone_ref",(function(){return k})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbindgen_string_new",(function(){return O})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_number_get",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return _n})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return dn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return bn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return gn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return wn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return ln})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return sn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return mn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return vn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return yn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return pn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return hn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return xn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return Sn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return An})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Pn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return In})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return Dn})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Fn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return En})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Tn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Bn})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Ln})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return Mn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return kn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Rn})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return On})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return jn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Gn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Wn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Nn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Jn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Zn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return $n})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ne})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return ee})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return te})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return re})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return ue})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return fe})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ce})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return _e})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return ie})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return oe})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return de})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return be})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return ge})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return we})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return le})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return se})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return me})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ve})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return ye})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return pe})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return he})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return xe})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Ae})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Pe})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return Ie})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return De})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Fe})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Ee})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Te})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Be})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Le})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Me})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return ke})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Re})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Oe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ce})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return je})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Ge})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return We})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ne})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return He})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return Je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return Ze})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return $e})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return nt})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return et})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return tt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return rt})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ut})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ft})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return ct})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return _t})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return it})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return ot})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return dt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return bt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return gt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return wt})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return lt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return st})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return mt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return vt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return yt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return pt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return ht})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return xt})),t.d(e,"__wbg_name_2473476082bed625",(function(){return St})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return At})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return Pt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return It})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Dt})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Ft})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Et})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return Tt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return Bt})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return Lt})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Mt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return kt})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Rt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Ot})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Ct})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Vt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Ut})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return qt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Kt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return jt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Gt})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Wt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Qt})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Xt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Yt})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Nt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Ht})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return zt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Zt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return $t})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return nr})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return er})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return tr})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return rr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return ur})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return fr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return cr})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return _r})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return ir})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return or})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return ar})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return dr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return br})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return gr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return wr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return lr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return sr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return mr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return vr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return yr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return pr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return hr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return xr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Sr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ar})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Pr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Dr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Fr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Er})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Tr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Br})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return Lr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Mr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return kr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Rr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Or})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Cr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Vr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Ur})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return qr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Kr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return jr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Gr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Wr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Qr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Xr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Yr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Nr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Hr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Jr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return zr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return Zr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return $r})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return nu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return eu})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return tu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return ru})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return uu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return fu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return cu})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return _u})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return iu})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return ou})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return au})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return du})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return bu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return gu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return wu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return lu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return su})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return mu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return vu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return yu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return pu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return hu})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return xu})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Su})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Au})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Pu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Iu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Du})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Fu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Eu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Tu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Bu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return Lu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Mu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return ku})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Ru})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Ou})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Cu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Vu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Uu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return qu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Ku})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return ju})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Gu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Wu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Qu})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Xu})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Yu})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Nu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Hu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Ju})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return zu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Zu})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return $u})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return nf})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return ef})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return tf})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return rf})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return uf})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return ff})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return cf})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return _f})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return of})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return af})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return df})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return bf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return gf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return wf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return lf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return sf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return mf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return yf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return pf})),t.d(e,"__wbindgen_is_undefined",(function(){return hf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return xf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Sf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Af})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Pf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return If})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Df})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Ff})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Ef})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return Tf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Bf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return Lf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return Mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return kf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Rf})),t.d(e,"__wbindgen_debug_string",(function(){return Of})),t.d(e,"__wbindgen_throw",(function(){return Cf})),t.d(e,"__wbindgen_memory",(function(){return Vf})),t.d(e,"__wbindgen_closure_wrapper578",(function(){return Uf})),t.d(e,"__wbindgen_closure_wrapper580",(function(){return qf})),t.d(e,"__wbindgen_closure_wrapper582",(function(){return Kf})),t.d(e,"__wbindgen_closure_wrapper584",(function(){return jf})),t.d(e,"__wbindgen_closure_wrapper586",(function(){return Gf})),t.d(e,"__wbindgen_closure_wrapper588",(function(){return Wf})),t.d(e,"__wbindgen_closure_wrapper590",(function(){return Qf})),t.d(e,"__wbindgen_closure_wrapper592",(function(){return Xf})),t.d(e,"__wbindgen_closure_wrapper594",(function(){return Yf})),t.d(e,"__wbindgen_closure_wrapper821",(function(){return Nf}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(412),t(411),t(61),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(416),t(462)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}function o(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var a=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});a.decode();var d=new Uint8Array;function b(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function g(n,e){return a.decode(b().subarray(n,n+e))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function m(){return 0===s.byteLength&&(s=new Int32Array(u.j.buffer)),s}var v=0,y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof y.encodeInto?function(n,e){return y.encodeInto(n,e)}:function(n,e){var t=y.encode(n);return e.set(t),{read:n.length,written:t.length}};function h(n,e,t){if(void 0===t){var r=y.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),v=r.length,u}for(var f=n.length,c=e(f),_=b(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var a=b().subarray(c+i,c+f);i+=p(n,a).written}return v=i,c}function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function N(n,e){c(n).bindVertexArray(c(e))}function H(n,e,t,r,u,f,_,i,o,a,d){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,a>>>0,d>>>0)}function J(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function Z(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function $(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,F(r,u))}function en(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,E(r,u))}function tn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,_,i,o,a){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,a)}function fn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function cn(n,e,t,r,u,f,_,i,o,a,d,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d,b)}function _n(n,e,t,r,u,f,_,i,o,a,d){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,c(d))}function on(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,a){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a)}function dn(n){var e=c(n).createSampler();return w(e)?0:o(e)}function bn(n){var e=c(n).createVertexArray();return w(e)?0:o(e)}function gn(n,e){c(n).deleteQuery(c(e))}function wn(n,e){c(n).deleteSampler(c(e))}function ln(n,e){c(n).deleteSync(c(e))}function sn(n,e){c(n).deleteVertexArray(c(e))}function mn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function vn(n,e){c(n).drawBuffers(c(e))}function yn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function pn(n,e){c(n).endQuery(e>>>0)}function hn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return w(r)?0:o(r)}function xn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function Sn(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function An(){return L((function(n,e,t){return o(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Pn(n,e,t){return o(c(n).getQueryParameter(c(e),t>>>0))}function In(n,e,t){return o(c(n).getSyncParameter(c(e),t>>>0))}function Dn(n,e,t,r){return c(n).getUniformBlockIndex(c(e),g(t,r))}function Fn(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function En(n,e){c(n).readBuffer(e>>>0)}function Tn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Bn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Ln(n,e,t,r,u,f){c(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function Mn(n,e,t,r){c(n).samplerParameterf(c(e),t>>>0,r)}function kn(n,e,t,r){c(n).samplerParameteri(c(e),t>>>0,r)}function Rn(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function On(n,e,t,r,u,f,_){c(n).texStorage3D(e>>>0,t,r>>>0,u,f,_)}function Cn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,a)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,c(b))}),arguments)}function Kn(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function jn(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Gn(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Wn(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Qn(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Xn(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Yn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Nn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Hn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Jn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function zn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function Zn(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function $n(n,e){c(n).activeTexture(e>>>0)}function ne(n,e,t){c(n).attachShader(c(e),c(t))}function ee(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function te(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function re(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function ue(n,e,t){c(n).bindTexture(e>>>0,c(t))}function fe(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function ce(n,e){c(n).blendEquation(e>>>0)}function _e(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function ie(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function oe(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function de(n,e){c(n).compileShader(c(e))}function be(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function ge(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function we(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function le(n){var e=c(n).createProgram();return w(e)?0:o(e)}function se(n){var e=c(n).createRenderbuffer();return w(e)?0:o(e)}function me(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function ve(n){var e=c(n).createTexture();return w(e)?0:o(e)}function ye(n,e){c(n).cullFace(e>>>0)}function pe(n,e){c(n).deleteBuffer(c(e))}function he(n,e){c(n).deleteFramebuffer(c(e))}function xe(n,e){c(n).deleteProgram(c(e))}function Se(n,e){c(n).deleteRenderbuffer(c(e))}function Ae(n,e){c(n).deleteShader(c(e))}function Pe(n,e){c(n).deleteTexture(c(e))}function Ie(n,e){c(n).depthFunc(e>>>0)}function De(n,e){c(n).depthMask(0!==e)}function Fe(n,e,t){c(n).depthRange(e,t)}function Ee(n,e){c(n).disable(e>>>0)}function Te(n,e){c(n).disableVertexAttribArray(e>>>0)}function Be(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Le(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Me(n,e){c(n).enable(e>>>0)}function ke(n,e){c(n).enableVertexAttribArray(e>>>0)}function Re(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Oe(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Ce(n,e){c(n).frontFace(e>>>0)}function Ve(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function Ue(){return L((function(n,e,t){var r=c(n).getExtension(g(e,t));return w(r)?0:o(r)}),arguments)}function qe(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function je(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function Ge(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function We(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function Qe(n){var e=c(n).getSupportedExtensions();return w(e)?0:o(e)}function Xe(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function Ye(n,e){c(n).linkProgram(c(e))}function Ne(n,e,t){c(n).pixelStorei(e>>>0,t)}function He(n,e,t){c(n).polygonOffset(e,t)}function Je(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function ze(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Ze(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function $e(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function nt(n,e){c(n).stencilMask(e>>>0)}function et(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function tt(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function rt(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function ut(n,e,t){c(n).uniform1f(c(e),t)}function ft(n,e,t){c(n).uniform1i(c(e),t)}function ct(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function _t(n,e){c(n).useProgram(c(e))}function it(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function ot(n,e,t,r,u){c(n).viewport(e,t,r,u)}function at(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function dt(n){var e=c(n).document;return w(e)?0:o(e)}function bt(){return L((function(n){return o(c(n).innerWidth)}),arguments)}function gt(){return L((function(n){return o(c(n).innerHeight)}),arguments)}function wt(n){return c(n).devicePixelRatio}function lt(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function st(){return L((function(n,e,t){var r=c(n).matchMedia(g(e,t));return w(r)?0:o(r)}),arguments)}function mt(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function vt(n,e,t){var r=c(n)[g(e,t)];return w(r)?0:o(r)}function yt(n,e){c(n).clearTimeout(e)}function pt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function ht(n){return c(n).size}function xt(n){return c(n).type}function St(n,e){var t=h(c(e).name,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function At(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function Pt(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function It(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function Dt(){return L((function(n,e,t,r,u){c(n).setProperty(g(e,t),g(r,u))}),arguments)}function Ft(n){return c(n).x}function Et(n){return c(n).y}function Tt(n){return c(n).clientX}function Bt(n){return c(n).clientY}function Lt(n){return c(n).offsetX}function Mt(n){return c(n).offsetY}function kt(n){return c(n).ctrlKey}function Rt(n){return c(n).shiftKey}function Ot(n){return c(n).altKey}function Ct(n){return c(n).metaKey}function Vt(n){return c(n).button}function Ut(n){return c(n).buttons}function qt(n){return c(n).movementX}function Kt(n){return c(n).movementY}function jt(n,e){c(n).bindVertexArrayOES(c(e))}function Gt(n){var e=c(n).createVertexArrayOES();return w(e)?0:o(e)}function Wt(n,e){c(n).deleteVertexArrayOES(c(e))}function Qt(n){return c(n).pointerId}function Xt(n){return c(n).deltaX}function Yt(n){return c(n).deltaY}function Nt(n){return c(n).deltaMode}function Ht(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Jt(n){return c(n).width}function zt(n,e){c(n).width=e>>>0}function Zt(n){return c(n).height}function $t(n,e){c(n).height=e>>>0}function nr(){return L((function(n,e,t,r){var u=c(n).getContext(g(e,t),c(r));return w(u)?0:o(u)}),arguments)}function er(n){return c(n).matches}function tr(n){return c(n).now()}function rr(n,e){c(n).drawBuffersWEBGL(c(e))}function ur(n){var e=c(n).fullscreenElement;return w(e)?0:o(e)}function fr(){return L((function(n,e,t){return o(c(n).createElement(g(e,t)))}),arguments)}function cr(n,e,t){var r=c(n).getElementById(g(e,t));return w(r)?0:o(r)}function _r(){return L((function(n,e,t){var r=c(n).querySelector(g(e,t));return w(r)?0:o(r)}),arguments)}function ir(n){return o(c(n).getBoundingClientRect())}function or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function ar(){return L((function(n,e,t,r,u){c(n).setAttribute(g(e,t),g(r,u))}),arguments)}function dr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function br(n){return o(c(n).style)}function gr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function wr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function lr(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function sr(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function mr(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function vr(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function yr(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function pr(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function hr(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function xr(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Sr(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Ar(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Pr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Ir(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Dr(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Fr(n,e){c(n).activeTexture(e>>>0)}function Er(n,e,t){c(n).attachShader(c(e),c(t))}function Tr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Br(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Lr(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function Mr(n,e,t){c(n).bindTexture(e>>>0,c(t))}function kr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Rr(n,e){c(n).blendEquation(e>>>0)}function Or(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Cr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function Vr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Ur(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function qr(n,e){c(n).compileShader(c(e))}function Kr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function jr(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function Gr(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function Wr(n){var e=c(n).createProgram();return w(e)?0:o(e)}function Qr(n){var e=c(n).createRenderbuffer();return w(e)?0:o(e)}function Xr(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function Yr(n){var e=c(n).createTexture();return w(e)?0:o(e)}function Nr(n,e){c(n).cullFace(e>>>0)}function Hr(n,e){c(n).deleteBuffer(c(e))}function Jr(n,e){c(n).deleteFramebuffer(c(e))}function zr(n,e){c(n).deleteProgram(c(e))}function Zr(n,e){c(n).deleteRenderbuffer(c(e))}function $r(n,e){c(n).deleteShader(c(e))}function nu(n,e){c(n).deleteTexture(c(e))}function eu(n,e){c(n).depthFunc(e>>>0)}function tu(n,e){c(n).depthMask(0!==e)}function ru(n,e,t){c(n).depthRange(e,t)}function uu(n,e){c(n).disable(e>>>0)}function fu(n,e){c(n).disableVertexAttribArray(e>>>0)}function cu(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function _u(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function iu(n,e){c(n).enable(e>>>0)}function ou(n,e){c(n).enableVertexAttribArray(e>>>0)}function au(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function du(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function bu(n,e){c(n).frontFace(e>>>0)}function gu(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function wu(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function lu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function su(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function mu(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function vu(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function yu(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function pu(n,e){c(n).linkProgram(c(e))}function hu(n,e,t){c(n).pixelStorei(e>>>0,t)}function xu(n,e,t){c(n).polygonOffset(e,t)}function Su(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Au(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Pu(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function Iu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Du(n,e){c(n).stencilMask(e>>>0)}function Fu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Eu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Bu(n,e,t){c(n).uniform1f(c(e),t)}function Lu(n,e,t){c(n).uniform1i(c(e),t)}function Mu(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function ku(n,e){c(n).useProgram(c(e))}function Ru(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Ou(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Cu(n){console.debug(c(n))}function Vu(n){console.error(c(n))}function Uu(n,e){console.error(c(n),c(e))}function qu(n){console.info(c(n))}function Ku(n){console.log(c(n))}function ju(n){console.warn(c(n))}function Gu(){return L((function(n,e,t,r){c(n).addEventListener(g(e,t),c(r))}),arguments)}function Wu(){return L((function(n,e,t,r,u){c(n).addEventListener(g(e,t),c(r),c(u))}),arguments)}function Qu(){return L((function(n,e,t,r){c(n).removeEventListener(g(e,t),c(r))}),arguments)}function Xu(n){return c(n).charCode}function Yu(n){return c(n).keyCode}function Nu(n){return c(n).altKey}function Hu(n){return c(n).ctrlKey}function Ju(n){return c(n).shiftKey}function zu(n){return c(n).metaKey}function Zu(n,e){var t=h(c(e).key,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function $u(n,e){var t=h(c(e).code,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function nf(n,e,t){return c(n).getModifierState(g(e,t))}function ef(n){return c(n).matches}function tf(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function rf(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function uf(){return L((function(n,e){return o(c(n).appendChild(c(e)))}),arguments)}function ff(n){var e=c(n).target;return w(e)?0:o(e)}function cf(n){return c(n).cancelBubble}function _f(n){c(n).preventDefault()}function of(n){c(n).stopPropagation()}function af(n,e){return o(c(n)[e>>>0])}function df(n){return c(n).length}function bf(){return o(new Array)}function gf(n,e){return o(new Function(g(n,e)))}function wf(){return L((function(n,e){return o(Reflect.get(c(n),c(e)))}),arguments)}function lf(){return L((function(n,e){return o(c(n).call(c(e)))}),arguments)}function sf(){return o(new Object)}function mf(){return L((function(){return o(self.self)}),arguments)}function vf(){return L((function(){return o(window.window)}),arguments)}function yf(){return L((function(){return o(globalThis.globalThis)}),arguments)}function pf(){return L((function(){return o(global.global)}),arguments)}function hf(n){return void 0===c(n)}function xf(n){return o(Array.of(c(n)))}function Sf(n,e){return c(n).push(c(e))}function Af(n,e){return Object.is(c(n),c(e))}function Pf(n){return o(Promise.resolve(c(n)))}function If(n,e){return o(c(n).then(c(e)))}function Df(n){return o(c(n).buffer)}function Ff(n,e,t){return o(new Int8Array(c(n),e>>>0,t>>>0))}function Ef(n,e,t){return o(new Int16Array(c(n),e>>>0,t>>>0))}function Tf(n,e,t){return o(new Int32Array(c(n),e>>>0,t>>>0))}function Bf(n,e,t){return o(new Uint8Array(c(n),e>>>0,t>>>0))}function Lf(n,e,t){return o(new Uint16Array(c(n),e>>>0,t>>>0))}function Mf(n,e,t){return o(new Uint32Array(c(n),e>>>0,t>>>0))}function kf(n,e,t){return o(new Float32Array(c(n),e>>>0,t>>>0))}function Rf(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function Of(n,e){var t=h(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=v;m()[n/4+1]=f,m()[n/4+0]=t}function Cf(n,e){throw new Error(g(n,e))}function Vf(){return o(u.j)}function Uf(n,e,t){return o(x(n,e,120,S))}function qf(n,e,t){return o(x(n,e,120,S))}function Kf(n,e,t){return o(x(n,e,120,S))}function jf(n,e,t){return o(x(n,e,120,S))}function Gf(n,e,t){return o(x(n,e,120,S))}function Wf(n,e,t){return o(x(n,e,120,S))}function Qf(n,e,t){return o(x(n,e,120,S))}function Xf(n,e,t){return o(x(n,e,120,S))}function Yf(n,e,t){return o(x(n,e,120,A))}function Nf(n,e,t){return o(x(n,e,202,P))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},462:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(369);r.l()}}]); \ No newline at end of file diff --git a/assets/js/12.65e5cff6.js b/assets/js/12.65e5cff6.js deleted file mode 100644 index 39cca27a..00000000 --- a/assets/js/12.65e5cff6.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{370:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return D})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_object_clone_ref",(function(){return k})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbindgen_string_new",(function(){return O})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_number_get",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return cn})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return dn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return bn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return gn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return wn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return ln})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return sn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return mn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return vn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return yn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return pn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return hn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return Sn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return An})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Pn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Dn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return In})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return En})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Fn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Tn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Bn})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Ln})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return Mn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return kn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Rn})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return On})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return jn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Gn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Wn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Nn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Jn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Zn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return $n})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ne})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return ee})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return te})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return re})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return ue})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return fe})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return _e})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ce})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return ie})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return oe})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return de})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return be})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return ge})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return we})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return le})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return se})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return me})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ve})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return ye})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return pe})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return he})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Ae})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Pe})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return De})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Ie})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Ee})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Fe})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Te})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Be})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Le})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Me})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return ke})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Re})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Oe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ce})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return je})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Ge})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return We})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ne})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return He})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return Je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return Ze})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return $e})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return nt})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return et})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return tt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return rt})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ut})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ft})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return _t})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return ct})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return it})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return ot})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return dt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return bt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return gt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return wt})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return lt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return st})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return mt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return vt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return yt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return pt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return xt})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ht})),t.d(e,"__wbg_name_2473476082bed625",(function(){return St})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return At})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return Pt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return Dt})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return It})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Et})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Ft})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return Tt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return Bt})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return Lt})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Mt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return kt})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Rt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Ot})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Ct})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Vt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Ut})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return qt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Kt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return jt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Gt})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Wt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Qt})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Xt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Yt})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Nt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Ht})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return zt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Zt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return $t})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return nr})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return er})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return tr})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return rr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return ur})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return fr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return _r})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return cr})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return ir})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return or})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return ar})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return dr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return br})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return gr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return wr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return lr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return sr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return mr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return vr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return yr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return pr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return xr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return hr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Sr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ar})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Pr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Ir})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Er})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Fr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Tr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Br})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return Lr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Mr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return kr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Rr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Or})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Cr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Vr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Ur})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return qr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Kr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return jr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Gr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Wr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Qr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Xr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Yr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Nr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Hr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Jr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return zr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return Zr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return $r})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return nu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return eu})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return tu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return ru})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return uu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return fu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return _u})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return cu})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return iu})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return ou})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return au})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return du})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return bu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return gu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return wu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return lu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return su})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return mu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return vu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return yu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return pu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return xu})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return hu})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Su})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Au})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Pu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Du})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Iu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Eu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Fu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Tu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Bu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return Lu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Mu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return ku})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Ru})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Ou})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Cu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Vu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Uu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return qu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Ku})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return ju})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Gu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Wu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Qu})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Xu})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Yu})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Nu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Hu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Ju})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return zu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Zu})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return $u})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return nf})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return ef})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return tf})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return rf})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return uf})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return ff})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return _f})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return cf})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return of})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return af})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return df})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return bf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return gf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return wf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return lf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return sf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return mf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return yf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return pf})),t.d(e,"__wbindgen_is_undefined",(function(){return xf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return hf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Sf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Af})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Pf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Df})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return If})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Ef})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Ff})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return Tf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Bf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return Lf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return Mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return kf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Rf})),t.d(e,"__wbindgen_debug_string",(function(){return Of})),t.d(e,"__wbindgen_throw",(function(){return Cf})),t.d(e,"__wbindgen_memory",(function(){return Vf})),t.d(e,"__wbindgen_closure_wrapper556",(function(){return Uf})),t.d(e,"__wbindgen_closure_wrapper558",(function(){return qf})),t.d(e,"__wbindgen_closure_wrapper560",(function(){return Kf})),t.d(e,"__wbindgen_closure_wrapper562",(function(){return jf})),t.d(e,"__wbindgen_closure_wrapper564",(function(){return Gf})),t.d(e,"__wbindgen_closure_wrapper566",(function(){return Wf})),t.d(e,"__wbindgen_closure_wrapper568",(function(){return Qf})),t.d(e,"__wbindgen_closure_wrapper570",(function(){return Xf})),t.d(e,"__wbindgen_closure_wrapper572",(function(){return Yf})),t.d(e,"__wbindgen_closure_wrapper821",(function(){return Nf}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(404),t(403),t(61),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(414),t(461)),f=new Array(32).fill(void 0);function _(n){return f[n]}f.push(void 0,null,!0,!1);var c=f.length;function i(n){var e=_(n);return function(n){n<36||(f[n]=c,c=n)}(n),e}function o(n){c===f.length&&f.push(f.length+1);var e=c;return c=f[e],f[e]=n,e}var a=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});a.decode();var d=new Uint8Array;function b(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function g(n,e){return a.decode(b().subarray(n,n+e))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function m(){return 0===s.byteLength&&(s=new Int32Array(u.j.buffer)),s}var v=0,y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof y.encodeInto?function(n,e){return y.encodeInto(n,e)}:function(n,e){var t=y.encode(n);return e.set(t),{read:n.length,written:t.length}};function x(n,e,t){if(void 0===t){var r=y.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),v=r.length,u}for(var f=n.length,_=e(f),c=b(),i=0;i127)break;c[_+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),_=t(_,f,f=i+3*n.length);var a=b().subarray(_+i,_+f);i+=p(n,a).written}return v=i,_}function h(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},_=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),_=0;_>>0,_(t))}function X(n,e,t,r,u,f){_(n).bindBufferRange(e>>>0,t>>>0,_(r),u,f)}function Y(n,e,t){_(n).bindSampler(e>>>0,_(t))}function N(n,e){_(n).bindVertexArray(_(e))}function H(n,e,t,r,u,f,c,i,o,a,d){_(n).blitFramebuffer(e,t,r,u,f,c,i,o,a>>>0,d>>>0)}function J(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function Z(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function $(n,e,t,r,u){_(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){_(n).clearBufferfv(e>>>0,t,E(r,u))}function en(n,e,t,r,u){_(n).clearBufferiv(e>>>0,t,F(r,u))}function tn(n,e,t,r,u){_(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return _(n).clientWaitSync(_(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,c,i,o,a){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o,a)}function fn(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function _n(n,e,t,r,u,f,c,i,o,a,d,b){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d,b)}function cn(n,e,t,r,u,f,c,i,o,a,d){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,_(d))}function on(n,e,t,r,u,f){_(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,c,i,o,a){_(n).copyTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a)}function dn(n){var e=_(n).createSampler();return w(e)?0:o(e)}function bn(n){var e=_(n).createVertexArray();return w(e)?0:o(e)}function gn(n,e){_(n).deleteQuery(_(e))}function wn(n,e){_(n).deleteSampler(_(e))}function ln(n,e){_(n).deleteSync(_(e))}function sn(n,e){_(n).deleteVertexArray(_(e))}function mn(n,e,t,r,u){_(n).drawArraysInstanced(e>>>0,t,r,u)}function vn(n,e){_(n).drawBuffers(_(e))}function yn(n,e,t,r,u,f){_(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function pn(n,e){_(n).endQuery(e>>>0)}function xn(n,e,t){var r=_(n).fenceSync(e>>>0,t>>>0);return w(r)?0:o(r)}function hn(n,e,t,r,u,f){_(n).framebufferTextureLayer(e>>>0,t>>>0,_(r),u,f)}function Sn(n,e,t,r){_(n).getBufferSubData(e>>>0,t,_(r))}function An(){return L((function(n,e,t){return o(_(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Pn(n,e,t){return o(_(n).getQueryParameter(_(e),t>>>0))}function Dn(n,e,t){return o(_(n).getSyncParameter(_(e),t>>>0))}function In(n,e,t,r){return _(n).getUniformBlockIndex(_(e),g(t,r))}function En(){return L((function(n,e,t){_(n).invalidateFramebuffer(e>>>0,_(t))}),arguments)}function Fn(n,e){_(n).readBuffer(e>>>0)}function Tn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function Bn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,i)}),arguments)}function Ln(n,e,t,r,u,f){_(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function Mn(n,e,t,r){_(n).samplerParameterf(_(e),t>>>0,r)}function kn(n,e,t,r){_(n).samplerParameteri(_(e),t>>>0,r)}function Rn(n,e,t,r,u,f){_(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function On(n,e,t,r,u,f,c){_(n).texStorage3D(e>>>0,t,r>>>0,u,f,c)}function Cn(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(a))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,a)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,c,i,o,a,d,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,c,i,o,a,d,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d>>>0,_(b))}),arguments)}function Kn(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function jn(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Gn(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Wn(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Qn(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Xn(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Yn(n,e,t,r){_(n).uniformBlockBinding(_(e),t>>>0,r>>>0)}function Nn(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Hn(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Jn(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function zn(n,e,t){_(n).vertexAttribDivisor(e>>>0,t>>>0)}function Zn(n,e,t,r,u,f){_(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function $n(n,e){_(n).activeTexture(e>>>0)}function ne(n,e,t){_(n).attachShader(_(e),_(t))}function ee(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function te(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function re(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function ue(n,e,t){_(n).bindTexture(e>>>0,_(t))}function fe(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function _e(n,e){_(n).blendEquation(e>>>0)}function ce(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function ie(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function oe(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function de(n,e){_(n).compileShader(_(e))}function be(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function ge(n){var e=_(n).createBuffer();return w(e)?0:o(e)}function we(n){var e=_(n).createFramebuffer();return w(e)?0:o(e)}function le(n){var e=_(n).createProgram();return w(e)?0:o(e)}function se(n){var e=_(n).createRenderbuffer();return w(e)?0:o(e)}function me(n,e){var t=_(n).createShader(e>>>0);return w(t)?0:o(t)}function ve(n){var e=_(n).createTexture();return w(e)?0:o(e)}function ye(n,e){_(n).cullFace(e>>>0)}function pe(n,e){_(n).deleteBuffer(_(e))}function xe(n,e){_(n).deleteFramebuffer(_(e))}function he(n,e){_(n).deleteProgram(_(e))}function Se(n,e){_(n).deleteRenderbuffer(_(e))}function Ae(n,e){_(n).deleteShader(_(e))}function Pe(n,e){_(n).deleteTexture(_(e))}function De(n,e){_(n).depthFunc(e>>>0)}function Ie(n,e){_(n).depthMask(0!==e)}function Ee(n,e,t){_(n).depthRange(e,t)}function Fe(n,e){_(n).disable(e>>>0)}function Te(n,e){_(n).disableVertexAttribArray(e>>>0)}function Be(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function Le(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function Me(n,e){_(n).enable(e>>>0)}function ke(n,e){_(n).enableVertexAttribArray(e>>>0)}function Re(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function Oe(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function Ce(n,e){_(n).frontFace(e>>>0)}function Ve(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return w(r)?0:o(r)}function Ue(){return L((function(n,e,t){var r=_(n).getExtension(g(e,t));return w(r)?0:o(r)}),arguments)}function qe(){return L((function(n,e){return o(_(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function je(n,e,t){return o(_(n).getProgramParameter(_(e),t>>>0))}function Ge(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function We(n,e,t){return o(_(n).getShaderParameter(_(e),t>>>0))}function Qe(n){var e=_(n).getSupportedExtensions();return w(e)?0:o(e)}function Xe(n,e,t,r){var u=_(n).getUniformLocation(_(e),g(t,r));return w(u)?0:o(u)}function Ye(n,e){_(n).linkProgram(_(e))}function Ne(n,e,t){_(n).pixelStorei(e>>>0,t)}function He(n,e,t){_(n).polygonOffset(e,t)}function Je(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function ze(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Ze(n,e,t,r){_(n).shaderSource(_(e),g(t,r))}function $e(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function nt(n,e){_(n).stencilMask(e>>>0)}function et(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function tt(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function rt(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function ut(n,e,t){_(n).uniform1f(_(e),t)}function ft(n,e,t){_(n).uniform1i(_(e),t)}function _t(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function ct(n,e){_(n).useProgram(_(e))}function it(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function ot(n,e,t,r,u){_(n).viewport(e,t,r,u)}function at(n){var e;try{e=_(n)instanceof Window}catch(n){e=!1}return e}function dt(n){var e=_(n).document;return w(e)?0:o(e)}function bt(){return L((function(n){return o(_(n).innerWidth)}),arguments)}function gt(){return L((function(n){return o(_(n).innerHeight)}),arguments)}function wt(n){return _(n).devicePixelRatio}function lt(){return L((function(n,e){_(n).cancelAnimationFrame(e)}),arguments)}function st(){return L((function(n,e,t){var r=_(n).matchMedia(g(e,t));return w(r)?0:o(r)}),arguments)}function mt(){return L((function(n,e){return _(n).requestAnimationFrame(_(e))}),arguments)}function vt(n,e,t){var r=_(n)[g(e,t)];return w(r)?0:o(r)}function yt(n,e){_(n).clearTimeout(e)}function pt(){return L((function(n,e,t){return _(n).setTimeout(_(e),t)}),arguments)}function xt(n){return _(n).size}function ht(n){return _(n).type}function St(n,e){var t=x(_(e).name,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function At(n,e,t,r,u){_(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function Pt(n,e,t,r,u,f){_(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function Dt(n,e,t){_(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function It(){return L((function(n,e,t,r,u){_(n).setProperty(g(e,t),g(r,u))}),arguments)}function Et(n){return _(n).x}function Ft(n){return _(n).y}function Tt(n){return _(n).clientX}function Bt(n){return _(n).clientY}function Lt(n){return _(n).offsetX}function Mt(n){return _(n).offsetY}function kt(n){return _(n).ctrlKey}function Rt(n){return _(n).shiftKey}function Ot(n){return _(n).altKey}function Ct(n){return _(n).metaKey}function Vt(n){return _(n).button}function Ut(n){return _(n).buttons}function qt(n){return _(n).movementX}function Kt(n){return _(n).movementY}function jt(n,e){_(n).bindVertexArrayOES(_(e))}function Gt(n){var e=_(n).createVertexArrayOES();return w(e)?0:o(e)}function Wt(n,e){_(n).deleteVertexArrayOES(_(e))}function Qt(n){return _(n).pointerId}function Xt(n){return _(n).deltaX}function Yt(n){return _(n).deltaY}function Nt(n){return _(n).deltaMode}function Ht(n){var e;try{e=_(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Jt(n){return _(n).width}function zt(n,e){_(n).width=e>>>0}function Zt(n){return _(n).height}function $t(n,e){_(n).height=e>>>0}function nr(){return L((function(n,e,t,r){var u=_(n).getContext(g(e,t),_(r));return w(u)?0:o(u)}),arguments)}function er(n){return _(n).matches}function tr(n){return _(n).now()}function rr(n,e){_(n).drawBuffersWEBGL(_(e))}function ur(n){var e=_(n).fullscreenElement;return w(e)?0:o(e)}function fr(){return L((function(n,e,t){return o(_(n).createElement(g(e,t)))}),arguments)}function _r(n,e,t){var r=_(n).getElementById(g(e,t));return w(r)?0:o(r)}function cr(){return L((function(n,e,t){var r=_(n).querySelector(g(e,t));return w(r)?0:o(r)}),arguments)}function ir(n){return o(_(n).getBoundingClientRect())}function or(){return L((function(n){_(n).requestFullscreen()}),arguments)}function ar(){return L((function(n,e,t,r,u){_(n).setAttribute(g(e,t),g(r,u))}),arguments)}function dr(){return L((function(n,e){_(n).setPointerCapture(e)}),arguments)}function br(n){return o(_(n).style)}function gr(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function wr(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function lr(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function sr(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function mr(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function vr(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(a))}),arguments)}function yr(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function pr(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function xr(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function hr(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Sr(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Ar(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Pr(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Dr(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Ir(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Er(n,e){_(n).activeTexture(e>>>0)}function Fr(n,e,t){_(n).attachShader(_(e),_(t))}function Tr(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function Br(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function Lr(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function Mr(n,e,t){_(n).bindTexture(e>>>0,_(t))}function kr(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function Rr(n,e){_(n).blendEquation(e>>>0)}function Or(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function Cr(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function Vr(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Ur(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function qr(n,e){_(n).compileShader(_(e))}function Kr(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function jr(n){var e=_(n).createBuffer();return w(e)?0:o(e)}function Gr(n){var e=_(n).createFramebuffer();return w(e)?0:o(e)}function Wr(n){var e=_(n).createProgram();return w(e)?0:o(e)}function Qr(n){var e=_(n).createRenderbuffer();return w(e)?0:o(e)}function Xr(n,e){var t=_(n).createShader(e>>>0);return w(t)?0:o(t)}function Yr(n){var e=_(n).createTexture();return w(e)?0:o(e)}function Nr(n,e){_(n).cullFace(e>>>0)}function Hr(n,e){_(n).deleteBuffer(_(e))}function Jr(n,e){_(n).deleteFramebuffer(_(e))}function zr(n,e){_(n).deleteProgram(_(e))}function Zr(n,e){_(n).deleteRenderbuffer(_(e))}function $r(n,e){_(n).deleteShader(_(e))}function nu(n,e){_(n).deleteTexture(_(e))}function eu(n,e){_(n).depthFunc(e>>>0)}function tu(n,e){_(n).depthMask(0!==e)}function ru(n,e,t){_(n).depthRange(e,t)}function uu(n,e){_(n).disable(e>>>0)}function fu(n,e){_(n).disableVertexAttribArray(e>>>0)}function _u(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function cu(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function iu(n,e){_(n).enable(e>>>0)}function ou(n,e){_(n).enableVertexAttribArray(e>>>0)}function au(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function du(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function bu(n,e){_(n).frontFace(e>>>0)}function gu(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return w(r)?0:o(r)}function wu(){return L((function(n,e){return o(_(n).getParameter(e>>>0))}),arguments)}function lu(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function su(n,e,t){return o(_(n).getProgramParameter(_(e),t>>>0))}function mu(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function vu(n,e,t){return o(_(n).getShaderParameter(_(e),t>>>0))}function yu(n,e,t,r){var u=_(n).getUniformLocation(_(e),g(t,r));return w(u)?0:o(u)}function pu(n,e){_(n).linkProgram(_(e))}function xu(n,e,t){_(n).pixelStorei(e>>>0,t)}function hu(n,e,t){_(n).polygonOffset(e,t)}function Su(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Au(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Pu(n,e,t,r){_(n).shaderSource(_(e),g(t,r))}function Du(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Iu(n,e){_(n).stencilMask(e>>>0)}function Eu(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function Fu(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tu(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function Bu(n,e,t){_(n).uniform1f(_(e),t)}function Lu(n,e,t){_(n).uniform1i(_(e),t)}function Mu(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function ku(n,e){_(n).useProgram(_(e))}function Ru(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function Ou(n,e,t,r,u){_(n).viewport(e,t,r,u)}function Cu(n){console.debug(_(n))}function Vu(n){console.error(_(n))}function Uu(n,e){console.error(_(n),_(e))}function qu(n){console.info(_(n))}function Ku(n){console.log(_(n))}function ju(n){console.warn(_(n))}function Gu(){return L((function(n,e,t,r){_(n).addEventListener(g(e,t),_(r))}),arguments)}function Wu(){return L((function(n,e,t,r,u){_(n).addEventListener(g(e,t),_(r),_(u))}),arguments)}function Qu(){return L((function(n,e,t,r){_(n).removeEventListener(g(e,t),_(r))}),arguments)}function Xu(n){return _(n).charCode}function Yu(n){return _(n).keyCode}function Nu(n){return _(n).altKey}function Hu(n){return _(n).ctrlKey}function Ju(n){return _(n).shiftKey}function zu(n){return _(n).metaKey}function Zu(n,e){var t=x(_(e).key,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function $u(n,e){var t=x(_(e).code,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function nf(n,e,t){return _(n).getModifierState(g(e,t))}function ef(n){return _(n).matches}function tf(){return L((function(n,e){_(n).addListener(_(e))}),arguments)}function rf(){return L((function(n,e){_(n).removeListener(_(e))}),arguments)}function uf(){return L((function(n,e){return o(_(n).appendChild(_(e)))}),arguments)}function ff(n){var e=_(n).target;return w(e)?0:o(e)}function _f(n){return _(n).cancelBubble}function cf(n){_(n).preventDefault()}function of(n){_(n).stopPropagation()}function af(n,e){return o(_(n)[e>>>0])}function df(n){return _(n).length}function bf(){return o(new Array)}function gf(n,e){return o(new Function(g(n,e)))}function wf(){return L((function(n,e){return o(Reflect.get(_(n),_(e)))}),arguments)}function lf(){return L((function(n,e){return o(_(n).call(_(e)))}),arguments)}function sf(){return o(new Object)}function mf(){return L((function(){return o(self.self)}),arguments)}function vf(){return L((function(){return o(window.window)}),arguments)}function yf(){return L((function(){return o(globalThis.globalThis)}),arguments)}function pf(){return L((function(){return o(global.global)}),arguments)}function xf(n){return void 0===_(n)}function hf(n){return o(Array.of(_(n)))}function Sf(n,e){return _(n).push(_(e))}function Af(n,e){return Object.is(_(n),_(e))}function Pf(n){return o(Promise.resolve(_(n)))}function Df(n,e){return o(_(n).then(_(e)))}function If(n){return o(_(n).buffer)}function Ef(n,e,t){return o(new Int8Array(_(n),e>>>0,t>>>0))}function Ff(n,e,t){return o(new Int16Array(_(n),e>>>0,t>>>0))}function Tf(n,e,t){return o(new Int32Array(_(n),e>>>0,t>>>0))}function Bf(n,e,t){return o(new Uint8Array(_(n),e>>>0,t>>>0))}function Lf(n,e,t){return o(new Uint16Array(_(n),e>>>0,t>>>0))}function Mf(n,e,t){return o(new Uint32Array(_(n),e>>>0,t>>>0))}function kf(n,e,t){return o(new Float32Array(_(n),e>>>0,t>>>0))}function Rf(){return L((function(n,e,t){return Reflect.set(_(n),_(e),_(t))}),arguments)}function Of(n,e){var t=x(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var _=e.length,c="[";_>0&&(c+=n(e[0]));for(var i=1;i<_;i++)c+=", "+n(e[i]);return c+="]"}var o,a=/\[object ([^\]]+)\]/.exec(toString.call(e));if(!(a.length>1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(_(e)),u.d,u.e),f=v;m()[n/4+1]=f,m()[n/4+0]=t}function Cf(n,e){throw new Error(g(n,e))}function Vf(){return o(u.j)}function Uf(n,e,t){return o(h(n,e,114,S))}function qf(n,e,t){return o(h(n,e,114,S))}function Kf(n,e,t){return o(h(n,e,114,S))}function jf(n,e,t){return o(h(n,e,114,S))}function Gf(n,e,t){return o(h(n,e,114,S))}function Wf(n,e,t){return o(h(n,e,114,S))}function Qf(n,e,t){return o(h(n,e,114,S))}function Xf(n,e,t){return o(h(n,e,114,A))}function Yf(n,e,t){return o(h(n,e,114,S))}function Nf(n,e,t){return o(h(n,e,203,P))}}.call(this,t(375)(n))},461:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(370);r.l()}}]); \ No newline at end of file diff --git a/assets/js/12.fd765fd8.js b/assets/js/12.fd765fd8.js new file mode 100644 index 00000000..c3498a05 --- /dev/null +++ b/assets/js/12.fd765fd8.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{370:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_object_clone_ref",(function(){return k})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbindgen_string_new",(function(){return O})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_number_get",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return _n})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return dn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return bn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return gn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return wn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return ln})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return sn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return mn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return vn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return yn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return pn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return hn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return xn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return Sn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return An})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Pn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return In})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return Dn})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Fn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return En})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Tn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Bn})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Ln})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return Mn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return kn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Rn})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return On})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return jn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Gn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Wn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Nn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Jn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Zn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return $n})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ne})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return ee})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return te})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return re})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return ue})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return fe})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ce})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return _e})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return ie})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return oe})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return de})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return be})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return ge})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return we})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return le})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return se})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return me})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ve})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return ye})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return pe})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return he})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return xe})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Ae})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Pe})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return Ie})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return De})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Fe})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Ee})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Te})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Be})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Le})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Me})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return ke})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Re})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Oe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ce})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return je})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Ge})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return We})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ne})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return He})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return Je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return Ze})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return $e})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return nt})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return et})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return tt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return rt})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ut})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ft})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return ct})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return _t})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return it})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return ot})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return dt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return bt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return gt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return wt})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return lt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return st})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return mt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return vt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return yt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return pt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return ht})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return xt})),t.d(e,"__wbg_name_2473476082bed625",(function(){return St})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return At})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return Pt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return It})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Dt})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Ft})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Et})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return Tt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return Bt})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return Lt})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Mt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return kt})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Rt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Ot})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Ct})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Vt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Ut})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return qt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Kt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return jt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Gt})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Wt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Qt})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Xt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Yt})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Nt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Ht})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return zt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Zt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return $t})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return nr})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return er})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return tr})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return rr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return ur})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return fr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return cr})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return _r})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return ir})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return or})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return ar})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return dr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return br})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return gr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return wr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return lr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return sr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return mr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return vr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return yr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return pr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return hr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return xr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Sr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ar})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Pr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Dr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Fr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Er})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Tr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Br})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return Lr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Mr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return kr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Rr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Or})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Cr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Vr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Ur})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return qr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Kr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return jr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Gr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Wr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Qr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Xr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Yr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Nr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Hr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Jr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return zr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return Zr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return $r})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return nu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return eu})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return tu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return ru})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return uu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return fu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return cu})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return _u})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return iu})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return ou})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return au})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return du})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return bu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return gu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return wu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return lu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return su})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return mu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return vu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return yu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return pu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return hu})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return xu})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Su})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Au})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Pu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Iu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Du})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Fu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Eu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Tu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Bu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return Lu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Mu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return ku})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Ru})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Ou})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Cu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Vu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Uu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return qu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Ku})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return ju})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Gu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Wu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Qu})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Xu})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Yu})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Nu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Hu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Ju})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return zu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Zu})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return $u})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return nf})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return ef})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return tf})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return rf})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return uf})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return ff})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return cf})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return _f})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return of})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return af})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return df})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return bf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return gf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return wf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return lf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return sf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return mf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return yf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return pf})),t.d(e,"__wbindgen_is_undefined",(function(){return hf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return xf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Sf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Af})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Pf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return If})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Df})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Ff})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Ef})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return Tf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Bf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return Lf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return Mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return kf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Rf})),t.d(e,"__wbindgen_debug_string",(function(){return Of})),t.d(e,"__wbindgen_throw",(function(){return Cf})),t.d(e,"__wbindgen_memory",(function(){return Vf})),t.d(e,"__wbindgen_closure_wrapper556",(function(){return Uf})),t.d(e,"__wbindgen_closure_wrapper558",(function(){return qf})),t.d(e,"__wbindgen_closure_wrapper560",(function(){return Kf})),t.d(e,"__wbindgen_closure_wrapper562",(function(){return jf})),t.d(e,"__wbindgen_closure_wrapper564",(function(){return Gf})),t.d(e,"__wbindgen_closure_wrapper566",(function(){return Wf})),t.d(e,"__wbindgen_closure_wrapper568",(function(){return Qf})),t.d(e,"__wbindgen_closure_wrapper570",(function(){return Xf})),t.d(e,"__wbindgen_closure_wrapper572",(function(){return Yf})),t.d(e,"__wbindgen_closure_wrapper821",(function(){return Nf}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(412),t(411),t(61),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(416),t(463)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}function o(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var a=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});a.decode();var d=new Uint8Array;function b(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function g(n,e){return a.decode(b().subarray(n,n+e))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function m(){return 0===s.byteLength&&(s=new Int32Array(u.j.buffer)),s}var v=0,y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof y.encodeInto?function(n,e){return y.encodeInto(n,e)}:function(n,e){var t=y.encode(n);return e.set(t),{read:n.length,written:t.length}};function h(n,e,t){if(void 0===t){var r=y.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),v=r.length,u}for(var f=n.length,c=e(f),_=b(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var a=b().subarray(c+i,c+f);i+=p(n,a).written}return v=i,c}function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function N(n,e){c(n).bindVertexArray(c(e))}function H(n,e,t,r,u,f,_,i,o,a,d){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,a>>>0,d>>>0)}function J(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function Z(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function $(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,F(r,u))}function en(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,E(r,u))}function tn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,_,i,o,a){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,a)}function fn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function cn(n,e,t,r,u,f,_,i,o,a,d,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d,b)}function _n(n,e,t,r,u,f,_,i,o,a,d){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,c(d))}function on(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,a){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a)}function dn(n){var e=c(n).createSampler();return w(e)?0:o(e)}function bn(n){var e=c(n).createVertexArray();return w(e)?0:o(e)}function gn(n,e){c(n).deleteQuery(c(e))}function wn(n,e){c(n).deleteSampler(c(e))}function ln(n,e){c(n).deleteSync(c(e))}function sn(n,e){c(n).deleteVertexArray(c(e))}function mn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function vn(n,e){c(n).drawBuffers(c(e))}function yn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function pn(n,e){c(n).endQuery(e>>>0)}function hn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return w(r)?0:o(r)}function xn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function Sn(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function An(){return L((function(n,e,t){return o(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Pn(n,e,t){return o(c(n).getQueryParameter(c(e),t>>>0))}function In(n,e,t){return o(c(n).getSyncParameter(c(e),t>>>0))}function Dn(n,e,t,r){return c(n).getUniformBlockIndex(c(e),g(t,r))}function Fn(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function En(n,e){c(n).readBuffer(e>>>0)}function Tn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Bn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Ln(n,e,t,r,u,f){c(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function Mn(n,e,t,r){c(n).samplerParameterf(c(e),t>>>0,r)}function kn(n,e,t,r){c(n).samplerParameteri(c(e),t>>>0,r)}function Rn(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function On(n,e,t,r,u,f,_){c(n).texStorage3D(e>>>0,t,r>>>0,u,f,_)}function Cn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,a)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,c(b))}),arguments)}function Kn(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function jn(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Gn(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Wn(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Qn(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Xn(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Yn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Nn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Hn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Jn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function zn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function Zn(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function $n(n,e){c(n).activeTexture(e>>>0)}function ne(n,e,t){c(n).attachShader(c(e),c(t))}function ee(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function te(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function re(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function ue(n,e,t){c(n).bindTexture(e>>>0,c(t))}function fe(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function ce(n,e){c(n).blendEquation(e>>>0)}function _e(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function ie(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function oe(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function de(n,e){c(n).compileShader(c(e))}function be(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function ge(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function we(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function le(n){var e=c(n).createProgram();return w(e)?0:o(e)}function se(n){var e=c(n).createRenderbuffer();return w(e)?0:o(e)}function me(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function ve(n){var e=c(n).createTexture();return w(e)?0:o(e)}function ye(n,e){c(n).cullFace(e>>>0)}function pe(n,e){c(n).deleteBuffer(c(e))}function he(n,e){c(n).deleteFramebuffer(c(e))}function xe(n,e){c(n).deleteProgram(c(e))}function Se(n,e){c(n).deleteRenderbuffer(c(e))}function Ae(n,e){c(n).deleteShader(c(e))}function Pe(n,e){c(n).deleteTexture(c(e))}function Ie(n,e){c(n).depthFunc(e>>>0)}function De(n,e){c(n).depthMask(0!==e)}function Fe(n,e,t){c(n).depthRange(e,t)}function Ee(n,e){c(n).disable(e>>>0)}function Te(n,e){c(n).disableVertexAttribArray(e>>>0)}function Be(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Le(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Me(n,e){c(n).enable(e>>>0)}function ke(n,e){c(n).enableVertexAttribArray(e>>>0)}function Re(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Oe(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Ce(n,e){c(n).frontFace(e>>>0)}function Ve(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function Ue(){return L((function(n,e,t){var r=c(n).getExtension(g(e,t));return w(r)?0:o(r)}),arguments)}function qe(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function je(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function Ge(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function We(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function Qe(n){var e=c(n).getSupportedExtensions();return w(e)?0:o(e)}function Xe(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function Ye(n,e){c(n).linkProgram(c(e))}function Ne(n,e,t){c(n).pixelStorei(e>>>0,t)}function He(n,e,t){c(n).polygonOffset(e,t)}function Je(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function ze(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Ze(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function $e(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function nt(n,e){c(n).stencilMask(e>>>0)}function et(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function tt(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function rt(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function ut(n,e,t){c(n).uniform1f(c(e),t)}function ft(n,e,t){c(n).uniform1i(c(e),t)}function ct(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function _t(n,e){c(n).useProgram(c(e))}function it(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function ot(n,e,t,r,u){c(n).viewport(e,t,r,u)}function at(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function dt(n){var e=c(n).document;return w(e)?0:o(e)}function bt(){return L((function(n){return o(c(n).innerWidth)}),arguments)}function gt(){return L((function(n){return o(c(n).innerHeight)}),arguments)}function wt(n){return c(n).devicePixelRatio}function lt(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function st(){return L((function(n,e,t){var r=c(n).matchMedia(g(e,t));return w(r)?0:o(r)}),arguments)}function mt(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function vt(n,e,t){var r=c(n)[g(e,t)];return w(r)?0:o(r)}function yt(n,e){c(n).clearTimeout(e)}function pt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function ht(n){return c(n).size}function xt(n){return c(n).type}function St(n,e){var t=h(c(e).name,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function At(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function Pt(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function It(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function Dt(){return L((function(n,e,t,r,u){c(n).setProperty(g(e,t),g(r,u))}),arguments)}function Ft(n){return c(n).x}function Et(n){return c(n).y}function Tt(n){return c(n).clientX}function Bt(n){return c(n).clientY}function Lt(n){return c(n).offsetX}function Mt(n){return c(n).offsetY}function kt(n){return c(n).ctrlKey}function Rt(n){return c(n).shiftKey}function Ot(n){return c(n).altKey}function Ct(n){return c(n).metaKey}function Vt(n){return c(n).button}function Ut(n){return c(n).buttons}function qt(n){return c(n).movementX}function Kt(n){return c(n).movementY}function jt(n,e){c(n).bindVertexArrayOES(c(e))}function Gt(n){var e=c(n).createVertexArrayOES();return w(e)?0:o(e)}function Wt(n,e){c(n).deleteVertexArrayOES(c(e))}function Qt(n){return c(n).pointerId}function Xt(n){return c(n).deltaX}function Yt(n){return c(n).deltaY}function Nt(n){return c(n).deltaMode}function Ht(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Jt(n){return c(n).width}function zt(n,e){c(n).width=e>>>0}function Zt(n){return c(n).height}function $t(n,e){c(n).height=e>>>0}function nr(){return L((function(n,e,t,r){var u=c(n).getContext(g(e,t),c(r));return w(u)?0:o(u)}),arguments)}function er(n){return c(n).matches}function tr(n){return c(n).now()}function rr(n,e){c(n).drawBuffersWEBGL(c(e))}function ur(n){var e=c(n).fullscreenElement;return w(e)?0:o(e)}function fr(){return L((function(n,e,t){return o(c(n).createElement(g(e,t)))}),arguments)}function cr(n,e,t){var r=c(n).getElementById(g(e,t));return w(r)?0:o(r)}function _r(){return L((function(n,e,t){var r=c(n).querySelector(g(e,t));return w(r)?0:o(r)}),arguments)}function ir(n){return o(c(n).getBoundingClientRect())}function or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function ar(){return L((function(n,e,t,r,u){c(n).setAttribute(g(e,t),g(r,u))}),arguments)}function dr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function br(n){return o(c(n).style)}function gr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function wr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function lr(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function sr(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function mr(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function vr(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function yr(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function pr(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function hr(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function xr(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Sr(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Ar(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Pr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Ir(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Dr(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Fr(n,e){c(n).activeTexture(e>>>0)}function Er(n,e,t){c(n).attachShader(c(e),c(t))}function Tr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Br(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Lr(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function Mr(n,e,t){c(n).bindTexture(e>>>0,c(t))}function kr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Rr(n,e){c(n).blendEquation(e>>>0)}function Or(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Cr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function Vr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Ur(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function qr(n,e){c(n).compileShader(c(e))}function Kr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function jr(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function Gr(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function Wr(n){var e=c(n).createProgram();return w(e)?0:o(e)}function Qr(n){var e=c(n).createRenderbuffer();return w(e)?0:o(e)}function Xr(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function Yr(n){var e=c(n).createTexture();return w(e)?0:o(e)}function Nr(n,e){c(n).cullFace(e>>>0)}function Hr(n,e){c(n).deleteBuffer(c(e))}function Jr(n,e){c(n).deleteFramebuffer(c(e))}function zr(n,e){c(n).deleteProgram(c(e))}function Zr(n,e){c(n).deleteRenderbuffer(c(e))}function $r(n,e){c(n).deleteShader(c(e))}function nu(n,e){c(n).deleteTexture(c(e))}function eu(n,e){c(n).depthFunc(e>>>0)}function tu(n,e){c(n).depthMask(0!==e)}function ru(n,e,t){c(n).depthRange(e,t)}function uu(n,e){c(n).disable(e>>>0)}function fu(n,e){c(n).disableVertexAttribArray(e>>>0)}function cu(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function _u(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function iu(n,e){c(n).enable(e>>>0)}function ou(n,e){c(n).enableVertexAttribArray(e>>>0)}function au(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function du(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function bu(n,e){c(n).frontFace(e>>>0)}function gu(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function wu(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function lu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function su(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function mu(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function vu(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function yu(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function pu(n,e){c(n).linkProgram(c(e))}function hu(n,e,t){c(n).pixelStorei(e>>>0,t)}function xu(n,e,t){c(n).polygonOffset(e,t)}function Su(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Au(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Pu(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function Iu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Du(n,e){c(n).stencilMask(e>>>0)}function Fu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Eu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Bu(n,e,t){c(n).uniform1f(c(e),t)}function Lu(n,e,t){c(n).uniform1i(c(e),t)}function Mu(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function ku(n,e){c(n).useProgram(c(e))}function Ru(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Ou(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Cu(n){console.debug(c(n))}function Vu(n){console.error(c(n))}function Uu(n,e){console.error(c(n),c(e))}function qu(n){console.info(c(n))}function Ku(n){console.log(c(n))}function ju(n){console.warn(c(n))}function Gu(){return L((function(n,e,t,r){c(n).addEventListener(g(e,t),c(r))}),arguments)}function Wu(){return L((function(n,e,t,r,u){c(n).addEventListener(g(e,t),c(r),c(u))}),arguments)}function Qu(){return L((function(n,e,t,r){c(n).removeEventListener(g(e,t),c(r))}),arguments)}function Xu(n){return c(n).charCode}function Yu(n){return c(n).keyCode}function Nu(n){return c(n).altKey}function Hu(n){return c(n).ctrlKey}function Ju(n){return c(n).shiftKey}function zu(n){return c(n).metaKey}function Zu(n,e){var t=h(c(e).key,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function $u(n,e){var t=h(c(e).code,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function nf(n,e,t){return c(n).getModifierState(g(e,t))}function ef(n){return c(n).matches}function tf(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function rf(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function uf(){return L((function(n,e){return o(c(n).appendChild(c(e)))}),arguments)}function ff(n){var e=c(n).target;return w(e)?0:o(e)}function cf(n){return c(n).cancelBubble}function _f(n){c(n).preventDefault()}function of(n){c(n).stopPropagation()}function af(n,e){return o(c(n)[e>>>0])}function df(n){return c(n).length}function bf(){return o(new Array)}function gf(n,e){return o(new Function(g(n,e)))}function wf(){return L((function(n,e){return o(Reflect.get(c(n),c(e)))}),arguments)}function lf(){return L((function(n,e){return o(c(n).call(c(e)))}),arguments)}function sf(){return o(new Object)}function mf(){return L((function(){return o(self.self)}),arguments)}function vf(){return L((function(){return o(window.window)}),arguments)}function yf(){return L((function(){return o(globalThis.globalThis)}),arguments)}function pf(){return L((function(){return o(global.global)}),arguments)}function hf(n){return void 0===c(n)}function xf(n){return o(Array.of(c(n)))}function Sf(n,e){return c(n).push(c(e))}function Af(n,e){return Object.is(c(n),c(e))}function Pf(n){return o(Promise.resolve(c(n)))}function If(n,e){return o(c(n).then(c(e)))}function Df(n){return o(c(n).buffer)}function Ff(n,e,t){return o(new Int8Array(c(n),e>>>0,t>>>0))}function Ef(n,e,t){return o(new Int16Array(c(n),e>>>0,t>>>0))}function Tf(n,e,t){return o(new Int32Array(c(n),e>>>0,t>>>0))}function Bf(n,e,t){return o(new Uint8Array(c(n),e>>>0,t>>>0))}function Lf(n,e,t){return o(new Uint16Array(c(n),e>>>0,t>>>0))}function Mf(n,e,t){return o(new Uint32Array(c(n),e>>>0,t>>>0))}function kf(n,e,t){return o(new Float32Array(c(n),e>>>0,t>>>0))}function Rf(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function Of(n,e){var t=h(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=v;m()[n/4+1]=f,m()[n/4+0]=t}function Cf(n,e){throw new Error(g(n,e))}function Vf(){return o(u.j)}function Uf(n,e,t){return o(x(n,e,114,S))}function qf(n,e,t){return o(x(n,e,114,S))}function Kf(n,e,t){return o(x(n,e,114,S))}function jf(n,e,t){return o(x(n,e,114,S))}function Gf(n,e,t){return o(x(n,e,114,S))}function Wf(n,e,t){return o(x(n,e,114,S))}function Qf(n,e,t){return o(x(n,e,114,S))}function Xf(n,e,t){return o(x(n,e,114,A))}function Yf(n,e,t){return o(x(n,e,114,S))}function Nf(n,e,t){return o(x(n,e,203,P))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},463:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(370);r.l()}}]); \ No newline at end of file diff --git a/assets/js/13.64e1abdd.js b/assets/js/13.64e1abdd.js new file mode 100644 index 00000000..53ba747a --- /dev/null +++ b/assets/js/13.64e1abdd.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{374:function(n,t,e){"use strict";e.r(t),function(n){e.d(t,"run",(function(){return L})),e.d(t,"__wbindgen_cb_drop",(function(){return x})),e.d(t,"__wbindgen_object_drop_ref",(function(){return k})),e.d(t,"__wbindgen_object_clone_ref",(function(){return C})),e.d(t,"__wbindgen_string_new",(function(){return F})),e.d(t,"__wbg_new_abda76e883ba8a5f",(function(){return j})),e.d(t,"__wbg_stack_658279fe44541cf6",(function(){return I})),e.d(t,"__wbg_error_f851667af71bcfc6",(function(){return O})),e.d(t,"__wbindgen_number_get",(function(){return P})),e.d(t,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return X})),e.d(t,"__wbg_document_3ead31dbcad65886",(function(){return Y})),e.d(t,"__wbg_innerWidth_ffa584f74d721fce",(function(){return B})),e.d(t,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return M})),e.d(t,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return S})),e.d(t,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return q})),e.d(t,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return R})),e.d(t,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return D})),e.d(t,"__wbg_get_55f248d76a5aa3d1",(function(){return W})),e.d(t,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return J})),e.d(t,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return H})),e.d(t,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return U})),e.d(t,"__wbg_x_419967b8271dcf59",(function(){return N})),e.d(t,"__wbg_y_0f67486e0f88b265",(function(){return z})),e.d(t,"__wbg_clientX_e39206f946859108",(function(){return G})),e.d(t,"__wbg_clientY_e376bb2d8f470c88",(function(){return Q})),e.d(t,"__wbg_offsetX_8891849b36542d53",(function(){return V})),e.d(t,"__wbg_offsetY_1f52082687af467b",(function(){return Z})),e.d(t,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return $})),e.d(t,"__wbg_shiftKey_81014521a7612e6a",(function(){return nn})),e.d(t,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return tn})),e.d(t,"__wbg_metaKey_49e49046d8402fb7",(function(){return en})),e.d(t,"__wbg_button_2bb5dc0116d6b89b",(function(){return rn})),e.d(t,"__wbg_buttons_047716c1296e3d1c",(function(){return un})),e.d(t,"__wbg_movementX_f5947c282009d740",(function(){return cn})),e.d(t,"__wbg_movementY_2c81eed268321a0a",(function(){return on})),e.d(t,"__wbg_pointerId_18be034781db46f3",(function(){return fn})),e.d(t,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return _n})),e.d(t,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return dn})),e.d(t,"__wbg_deltaMode_a90be314f5c676f1",(function(){return an})),e.d(t,"__wbg_width_2f4b0cbbf1c850d9",(function(){return bn})),e.d(t,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return gn})),e.d(t,"__wbg_height_a81d308a000d91d0",(function(){return wn})),e.d(t,"__wbg_setheight_3eb8729b59493242",(function(){return ln})),e.d(t,"__wbg_matches_206d50bc7cb1f89e",(function(){return sn})),e.d(t,"__wbg_now_8172cd917e5eda6b",(function(){return hn})),e.d(t,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return yn})),e.d(t,"__wbg_createElement_976dbb84fe1661b5",(function(){return vn})),e.d(t,"__wbg_getElementById_3a708b83e4f034d7",(function(){return pn})),e.d(t,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return mn})),e.d(t,"__wbg_requestFullscreen_7d41309612540445",(function(){return En})),e.d(t,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return An})),e.d(t,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return Kn})),e.d(t,"__wbg_style_e9380748cee29f13",(function(){return Ln})),e.d(t,"__wbg_debug_f15cb542ea509609",(function(){return Tn})),e.d(t,"__wbg_error_ef9a0be47931175f",(function(){return xn})),e.d(t,"__wbg_error_02ffd4185a83fe18",(function(){return kn})),e.d(t,"__wbg_info_2874fdd5393f35ce",(function(){return Cn})),e.d(t,"__wbg_log_4b5638ad60bdc54a",(function(){return Fn})),e.d(t,"__wbg_warn_58110c4a199df084",(function(){return jn})),e.d(t,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return In})),e.d(t,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return On})),e.d(t,"__wbg_removeEventListener_dd20475efce70084",(function(){return Pn})),e.d(t,"__wbg_charCode_b0f31612a52c2bff",(function(){return Xn})),e.d(t,"__wbg_keyCode_72faed4278f77f2c",(function(){return Yn})),e.d(t,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Bn})),e.d(t,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Mn})),e.d(t,"__wbg_shiftKey_908ae224b8722a41",(function(){return Sn})),e.d(t,"__wbg_metaKey_cdd15bf44efb510e",(function(){return qn})),e.d(t,"__wbg_key_ad4fc49423a94efa",(function(){return Rn})),e.d(t,"__wbg_code_06787cd3c7a60600",(function(){return Dn})),e.d(t,"__wbg_getModifierState_135305ae40997dc7",(function(){return Wn})),e.d(t,"__wbg_matches_0ffc2232d99a6034",(function(){return Jn})),e.d(t,"__wbg_addListener_19238ce0935173e6",(function(){return Hn})),e.d(t,"__wbg_removeListener_c08dac8493263a47",(function(){return Un})),e.d(t,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Nn})),e.d(t,"__wbg_target_bf704b7db7ad1387",(function(){return zn})),e.d(t,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return Gn})),e.d(t,"__wbg_preventDefault_3209279b490de583",(function(){return Qn})),e.d(t,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return Vn})),e.d(t,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return Zn})),e.d(t,"__wbg_get_765201544a2b6869",(function(){return $n})),e.d(t,"__wbg_call_97ae9d8645dc388b",(function(){return nt})),e.d(t,"__wbg_new_0b9bfdd97583284e",(function(){return tt})),e.d(t,"__wbg_self_6d479506f72c6a71",(function(){return et})),e.d(t,"__wbg_window_f2557cc78490aceb",(function(){return rt})),e.d(t,"__wbg_globalThis_7f206bda628d5286",(function(){return ut})),e.d(t,"__wbg_global_ba75c50d1cf384f4",(function(){return ct})),e.d(t,"__wbindgen_is_undefined",(function(){return ot})),e.d(t,"__wbg_is_40a66842732708e7",(function(){return ft})),e.d(t,"__wbg_set_bf3f89b92d5a34bf",(function(){return it})),e.d(t,"__wbindgen_debug_string",(function(){return _t})),e.d(t,"__wbindgen_throw",(function(){return dt})),e.d(t,"__wbindgen_closure_wrapper168",(function(){return at})),e.d(t,"__wbindgen_closure_wrapper170",(function(){return bt})),e.d(t,"__wbindgen_closure_wrapper172",(function(){return gt})),e.d(t,"__wbindgen_closure_wrapper174",(function(){return wt})),e.d(t,"__wbindgen_closure_wrapper176",(function(){return lt})),e.d(t,"__wbindgen_closure_wrapper178",(function(){return st})),e.d(t,"__wbindgen_closure_wrapper180",(function(){return ht})),e.d(t,"__wbindgen_closure_wrapper182",(function(){return yt})),e.d(t,"__wbindgen_closure_wrapper184",(function(){return vt}));var r=e(64),u=(e(384),e(385),e(8),e(386),e(387),e(388),e(389),e(390),e(391),e(392),e(393),e(394),e(395),e(396),e(397),e(398),e(399),e(400),e(401),e(402),e(403),e(404),e(405),e(406),e(407),e(408),e(409),e(410),e(412),e(411),e(41),e(62),e(91),e(122),e(29),e(201),e(30),e(31),e(123),e(61),e(413),e(124),e(414),e(415),e(416),e(456)),c=new Array(32).fill(void 0);function o(n){return c[n]}c.push(void 0,null,!0,!1);var f=c.length;function i(n){var t=o(n);return function(n){n<36||(c[n]=f,f=n)}(n),t}function _(n){f===c.length&&c.push(c.length+1);var t=f;return f=c[t],c[t]=n,t}var d=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});d.decode();var a=new Uint8Array;function b(){return 0===a.byteLength&&(a=new Uint8Array(u.i.buffer)),a}function g(n,t){return d.decode(b().subarray(n,n+t))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function h(){return 0===s.byteLength&&(s=new Int32Array(u.i.buffer)),s}var y=0,v=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof v.encodeInto?function(n,t){return v.encodeInto(n,t)}:function(n,t){var e=v.encode(n);return t.set(e),{read:n.length,written:e.length}};function m(n,t,e){if(void 0===e){var r=v.encode(n),u=t(r.length);return b().subarray(u,u+r.length).set(r),y=r.length,u}for(var c=n.length,o=t(c),f=b(),i=0;i127)break;f[o+i]=_}if(i!==c){0!==i&&(n=n.slice(i)),o=e(o,c,c=i+3*n.length);var d=b().subarray(o+i,o+c);i+=p(n,d).written}return y=i,o}function E(n,t,e,r){var c={a:n,b:t,cnt:1,dtor:e},o=function(){c.cnt++;var n=c.a;c.a=0;try{for(var t=arguments.length,e=new Array(t),o=0;o>>0}function wn(n){return o(n).height}function ln(n,t){o(n).height=t>>>0}function sn(n){return o(n).matches}function hn(n){return o(n).now()}function yn(n){var t=o(n).fullscreenElement;return w(t)?0:_(t)}function vn(){return T((function(n,t,e){return _(o(n).createElement(g(t,e)))}),arguments)}function pn(n,t,e){var r=o(n).getElementById(g(t,e));return w(r)?0:_(r)}function mn(n){return _(o(n).getBoundingClientRect())}function En(){return T((function(n){o(n).requestFullscreen()}),arguments)}function An(){return T((function(n,t,e,r,u){o(n).setAttribute(g(t,e),g(r,u))}),arguments)}function Kn(){return T((function(n,t){o(n).setPointerCapture(t)}),arguments)}function Ln(n){return _(o(n).style)}function Tn(n){console.debug(o(n))}function xn(n){console.error(o(n))}function kn(n,t){console.error(o(n),o(t))}function Cn(n){console.info(o(n))}function Fn(n){console.log(o(n))}function jn(n){console.warn(o(n))}function In(){return T((function(n,t,e,r){o(n).addEventListener(g(t,e),o(r))}),arguments)}function On(){return T((function(n,t,e,r,u){o(n).addEventListener(g(t,e),o(r),o(u))}),arguments)}function Pn(){return T((function(n,t,e,r){o(n).removeEventListener(g(t,e),o(r))}),arguments)}function Xn(n){return o(n).charCode}function Yn(n){return o(n).keyCode}function Bn(n){return o(n).altKey}function Mn(n){return o(n).ctrlKey}function Sn(n){return o(n).shiftKey}function qn(n){return o(n).metaKey}function Rn(n,t){var e=m(o(t).key,u.d,u.e),r=y;h()[n/4+1]=r,h()[n/4+0]=e}function Dn(n,t){var e=m(o(t).code,u.d,u.e),r=y;h()[n/4+1]=r,h()[n/4+0]=e}function Wn(n,t,e){return o(n).getModifierState(g(t,e))}function Jn(n){return o(n).matches}function Hn(){return T((function(n,t){o(n).addListener(o(t))}),arguments)}function Un(){return T((function(n,t){o(n).removeListener(o(t))}),arguments)}function Nn(){return T((function(n,t){return _(o(n).appendChild(o(t)))}),arguments)}function zn(n){var t=o(n).target;return w(t)?0:_(t)}function Gn(n){return o(n).cancelBubble}function Qn(n){o(n).preventDefault()}function Vn(n){o(n).stopPropagation()}function Zn(n,t){return _(new Function(g(n,t)))}function $n(){return T((function(n,t){return _(Reflect.get(o(n),o(t)))}),arguments)}function nt(){return T((function(n,t){return _(o(n).call(o(t)))}),arguments)}function tt(){return _(new Object)}function et(){return T((function(){return _(self.self)}),arguments)}function rt(){return T((function(){return _(window.window)}),arguments)}function ut(){return T((function(){return _(globalThis.globalThis)}),arguments)}function ct(){return T((function(){return _(global.global)}),arguments)}function ot(n){return void 0===o(n)}function ft(n,t){return Object.is(o(n),o(t))}function it(){return T((function(n,t,e){return Reflect.set(o(n),o(t),o(e))}),arguments)}function _t(n,t){var e=m(function n(t){var e=Object(r.a)(t);if("number"==e||"boolean"==e||null==t)return"".concat(t);if("string"==e)return'"'.concat(t,'"');if("symbol"==e){var u=t.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==e){var c=t.name;return"string"==typeof c&&c.length>0?"Function(".concat(c,")"):"Function"}if(Array.isArray(t)){var o=t.length,f="[";o>0&&(f+=n(t[0]));for(var i=1;i1))return toString.call(t);if("Object"==(_=d[1]))try{return"Object("+JSON.stringify(t)+")"}catch(n){return"Object"}return t instanceof Error?"".concat(t.name,": ").concat(t.message,"\n").concat(t.stack):_}(o(t)),u.d,u.e),c=y;h()[n/4+1]=c,h()[n/4+0]=e}function dt(n,t){throw new Error(g(n,t))}function at(n,t,e){return _(E(n,t,39,A))}function bt(n,t,e){return _(E(n,t,39,A))}function gt(n,t,e){return _(E(n,t,39,A))}function wt(n,t,e){return _(E(n,t,39,A))}function lt(n,t,e){return _(E(n,t,39,A))}function st(n,t,e){return _(E(n,t,39,A))}function ht(n,t,e){return _(E(n,t,39,K))}function yt(n,t,e){return _(E(n,t,39,A))}function vt(n,t,e){return _(E(n,t,39,A))}}.call(this,e(383)(n))},456:function(n,t,e){"use strict";var r=e.w[n.i];n.exports=r;e(374);r.k()}}]); \ No newline at end of file diff --git a/assets/js/14.ae52f492.js b/assets/js/15.656a9cc4.js similarity index 89% rename from assets/js/14.ae52f492.js rename to assets/js/15.656a9cc4.js index ba97b1ad..b265ac3d 100644 --- a/assets/js/14.ae52f492.js +++ b/assets/js/15.656a9cc4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{416: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 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 h})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return f})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return v}));n(29),n(93),n(419),n(125),n(425),n(216),n(96),n(72),n(8),n(73),n(38),n(122),n(204);var i=/#.*$/,r=/\.(md|html)$/,s=/\/$/,a=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return a.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(l(t))return t;var e=t.match(i),n=e?e[0]:"",r=o(t);return s.test(r)?t:r+".html"+n}function p(t,e){var n=t.hash,r=function(t){var e=t.match(i);if(e)return e[0]}(e);return(!r||n===r)&&o(t.path)===o(e)}function f(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){var i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;var r=e.split("/");n&&r[r.length-1]||r.pop();for(var s=t.replace(/^\//,"").split("/"),a=0;a3&&void 0!==arguments[3]?arguments[3]: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.");var 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((function(e){return t(e,n,i,r+1)})),collapsable:!1!==e.collapsable}}(t,r,u)})):[]}return[]}function g(t){var e;return(t=t.map((function(t){return Object.assign({},t)}))).forEach((function(t){2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)})),t.filter((function(t){return 2===t.level}))}function v(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},419:function(t,e,n){"use strict";var i=n(11),r=n(211),s=n(9),a=n(92),o=n(14),l=n(32),u=n(65),c=n(212),h=n(213);r("match",(function(t,e,n){return[function(e){var n=l(this),r=null==e?void 0:u(e,t);return r?i(r,e,n):new RegExp(e)[t](o(n))},function(t){var i=s(this),r=o(t),l=n(e,i,r);if(l.done)return l.value;if(!i.global)return h(i,r);var u=i.unicode;i.lastIndex=0;for(var p,f=[],d=0;null!==(p=h(i,r));){var g=o(p[0]);f[d]=g,""===g&&(i.lastIndex=c(r,a(i.lastIndex),u)),d++}return 0===d?null:f}]}))},425:function(t,e,n){"use strict";var i=n(34),r=n(11),s=n(2),a=n(211),o=n(208),l=n(9),u=n(32),c=n(127),h=n(212),p=n(92),f=n(14),d=n(65),g=n(202),v=n(213),m=n(103),b=n(203),_=n(3),k=b.UNSUPPORTED_Y,x=Math.min,C=[].push,$=s(/./.exec),y=s(C),w=s("".slice);a("split",(function(t,e,n){var s;return s="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,n){var s=f(u(this)),a=void 0===n?4294967295:n>>>0;if(0===a)return[];if(void 0===t)return[s];if(!o(t))return r(e,s,t,a);for(var l,c,h,p=[],d=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),v=0,b=new RegExp(t.source,d+"g");(l=r(m,b,s))&&!((c=b.lastIndex)>v&&(y(p,w(s,v,l.index)),l.length>1&&l.index=a));)b.lastIndex===l.index&&b.lastIndex++;return v===s.length?!h&&$(b,"")||y(p,""):y(p,w(s,v)),p.length>a?g(p,0,a):p}:"0".split(void 0,0).length?function(t,n){return void 0===t&&0===n?[]:r(e,this,t,n)}:e,[function(e,n){var i=u(this),a=null==e?void 0:d(e,t);return a?r(a,e,i,n):r(s,f(i),e,n)},function(t,i){var r=l(this),a=f(t),o=n(s,r,a,i,s!==e);if(o.done)return o.value;var u=c(r,RegExp),d=r.unicode,g=(r.ignoreCase?"i":"")+(r.multiline?"m":"")+(r.unicode?"u":"")+(k?"g":"y"),m=new u(k?"^(?:"+r.source+")":r,g),b=void 0===i?4294967295:i>>>0;if(0===b)return[];if(0===a.length)return null===v(m,a)?[a]:[];for(var _=0,C=0,$=[];C@^][^\s!#%&*+<=>@^]*>/,P=/a/g,A=/a/g,N=new w(P)!==P,U=g.MISSED_STICKY,W=g.UNSUPPORTED_Y,H=i&&(!N||U||C||$||m((function(){return A[y]=!1,w(P)!=P||w(A)==A||"/a/i"!=w(P,"i")})));if(a("RegExp",H)){for(var M=function(t,e){var n,i,r,s,a,u,c=h(S,this),d=p(t),g=void 0===e,v=[],m=t;if(!c&&d&&g&&t.constructor===M)return t;if((d||h(S,t))&&(t=t.source,g&&(e="flags"in m?m.flags:O(m))),t=void 0===t?"":f(t),e=void 0===e?"":f(e),m=t,C&&"dotAll"in P&&(i=!!e&&T(e,"s")>-1)&&(e=j(e,/s/g,"")),n=e,U&&"sticky"in P&&(r=!!e&&T(e,"y")>-1)&&W&&(e=j(e,/y/g,"")),$&&(t=(s=function(t){for(var e,n=t.length,i=0,r="",s=[],a={},o=!1,l=!1,u=0,c="";i<=n;i++){if("\\"===(e=I(t,i)))e+=I(t,++i);else if("]"===e)o=!1;else if(!o)switch(!0){case"["===e:o=!0;break;case"("===e:E(R,D(t,i+1))&&(i+=2,l=!0),r+=e,u++;continue;case">"===e&&l:if(""===c||b(a,c))throw new L("Invalid capture group name");a[c]=!0,s[s.length]=[c,u],l=!1,c="";continue}l?c+=e:r+=e}return[r,s]}(t))[0],v=s[1]),a=o(w(t,e),c?this:S,M),(i||r||v.length)&&(u=_(a),i&&(u.dotAll=!0,u.raw=M(function(t){for(var e,n=t.length,i=0,r="",s=!1;i<=n;i++)"\\"!==(e=I(t,i))?s||"."!==e?("["===e?s=!0:"]"===e&&(s=!1),r+=e):r+="[\\s\\S]":r+=e+I(t,++i);return r}(t),n)),r&&(u.sticky=!0),v.length&&(u.groups=v)),t!==m)try{l(a,"source",""===m?"(?:)":m)}catch(t){}return a},B=function(t){t in M||u(M,t,{configurable:!0,get:function(){return w[t]},set:function(e){w[t]=e}})},G=c(w),q=0;G.length>q;)B(G[q++]);S.constructor=M,M.prototype=S,v(r,"RegExp",M)}k("RegExp")},429:function(t,e,n){var i=n(0),r=n(6),s=n(210),a=n(27),o=n(12).f,l=n(37).get,u=RegExp.prototype,c=i.TypeError;r&&s&&o(u,"dotAll",{configurable:!0,get:function(){if(this!==u){if("RegExp"===a(this))return!!l(this).dotAll;throw c("Incompatible receiver, RegExp required")}}})},430:function(t,e,n){var i=n(0),r=n(6),s=n(203).MISSED_STICKY,a=n(27),o=n(12).f,l=n(37).get,u=RegExp.prototype,c=i.TypeError;r&&s&&o(u,"sticky",{configurable:!0,get:function(){if(this!==u){if("RegExp"===a(this))return!!l(this).sticky;throw c("Incompatible receiver, RegExp required")}}})},431:function(t,e,n){"use strict";var i=n(2),r=n(98).PROPER,s=n(16),a=n(9),o=n(33),l=n(14),u=n(3),c=n(209),h=RegExp.prototype,p=h.toString,f=i(c),d=u((function(){return"/a/b"!=p.call({source:"a",flags:"b"})})),g=r&&"toString"!=p.name;(d||g)&&s(RegExp.prototype,"toString",(function(){var t=a(this),e=l(t.source),n=t.flags;return"/"+e+"/"+l(void 0===n&&o(h,t)&&!("flags"in h)?f(t):n)}),{unsafe:!0})},432:function(t,e,n){},433:function(t,e,n){},434:function(t,e,n){},435:function(t,e,n){},436:function(t,e,n){},437:function(t,e,n){},438:function(t,e,n){},439:function(t,e,n){},440:function(t,e,n){},441:function(t,e,n){},442:function(t,e,n){},443:function(t,e,n){},463:function(t,e,n){"use strict";n.r(e);n(126),n(8);var i=n(416),r={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:n(464).a},beforeCreate:function(){this.$options.components.SidebarLinks=n(463).default},methods:{isActive:i.e}},s=(n(478),n(23)),a=Object(s.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?n("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")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):n("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),n("DropdownTransition",[t.open||!t.collapsable?n("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).exports;n(29),n(125),n(96);function o(t,e,n,i){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}},n)}function l(t,e,n,r,s){var a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1;return!e||a>s?null:t("ul",{class:"sidebar-sub-headers"},e.map((function(e){var u=Object(i.e)(r,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,u),l(t,e.children,n,r,s,a+1)])})))}var u={functional:!0,props:["item","sidebarDepth"],render:function(t,e){var n=e.parent,r=n.$page,s=(n.$site,n.$route),a=n.$themeConfig,u=n.$themeLocaleConfig,c=e.props,h=c.item,p=c.sidebarDepth,f=Object(i.e)(s,h.path),d="auto"===h.type?f||h.children.some((function(t){return Object(i.e)(s,h.basePath+"#"+t.slug)})):f,g="external"===h.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,h.path,h.title||h.path):o(t,h.path,h.title||h.path,d),v=r.frontmatter.sidebarDepth||p||u.sidebarDepth||a.sidebarDepth,m=null==v?1:v,b=u.displayAllHeaders||a.displayAllHeaders;return"auto"===h.type?[g,l(t,h.children,h.basePath,s,m)]:(d||b)&&h.headers&&!i.d.test(h.path)?[g,l(t,Object(i.c)(h.headers),h.path,s,m)]:g}};n(479);var c={name:"SidebarLinks",components:{SidebarGroup:a,SidebarLink:Object(s.a)(u,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth"],data:function(){return{openGroupIndex:0}},created:function(){this.refreshIndex()},watch:{$route:function(){this.refreshIndex()}},methods:{refreshIndex:function(){var t=function(t,e){for(var n=0;n-1&&(this.openGroupIndex=t)},toggleGroup:function(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive:function(t){return Object(i.e)(this.$route,t.regularPath)}}},h=Object(s.a)(c,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.items.length?n("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(e,i){return n("li",{key:i},["group"===e.type?n("SidebarGroup",{attrs:{item:e,open:i===t.openGroupIndex,collapsable:e.collapsable||e.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):n("SidebarLink",{attrs:{sidebarDepth:t.sidebarDepth,item:e}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=h.exports},464:function(t,e,n){"use strict";var i={name:"DropdownTransition",methods:{setHeight:function(t){t.style.height=t.scrollHeight+"px"},unsetHeight:function(t){t.style.height=""}}},r=(n(473),n(23)),s=Object(r.a)(i,(function(){var t=this.$createElement;return(this._self._c||t)("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.a=s.exports},465:function(t,e,n){"use strict";var i=n(1),r=n(466);i({target:"String",proto:!0,forced:n(467)("link")},{link:function(t){return r(this,"a","href",t)}})},466:function(t,e,n){var i=n(2),r=n(32),s=n(14),a=/"/g,o=i("".replace);t.exports=function(t,e,n,i){var l=s(r(t)),u="<"+e;return""!==n&&(u+=" "+n+'="'+o(s(i),a,""")+'"'),u+">"+l+""}},467:function(t,e,n){var i=n(3);t.exports=function(t){return i((function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}))}},468:function(t,e,n){"use strict";n(426)},469:function(t,e,n){var i=n(98).PROPER,r=n(3),s=n(139);t.exports=function(t){return r((function(){return!!s[t]()||"​…᠎"!=="​…᠎"[t]()||i&&s[t].name!==t}))}},470:function(t,e,n){"use strict";var i,r=n(1),s=n(2),a=n(26).f,o=n(92),l=n(14),u=n(136),c=n(32),h=n(137),p=n(20),f=s("".endsWith),d=s("".slice),g=Math.min,v=h("endsWith");r({target:"String",proto:!0,forced:!!(p||v||(i=a(String.prototype,"endsWith"),!i||i.writable))&&!v},{endsWith:function(t){var e=l(c(this));u(t);var n=arguments.length>1?arguments[1]:void 0,i=e.length,r=void 0===n?i:g(o(n),i),s=l(t);return f?f(e,s,r):d(e,r-s.length,r)===s}})},471:function(t,e,n){"use strict";n(432)},472:function(t,e,n){"use strict";n(433)},473:function(t,e,n){"use strict";n(434)},474:function(t,e,n){"use strict";n(435)},475:function(t,e,n){"use strict";n(436)},476:function(t,e,n){"use strict";n(437)},477:function(t,e,n){"use strict";n(438)},478:function(t,e,n){"use strict";n(439)},479:function(t,e,n){"use strict";n(440)},480:function(t,e,n){"use strict";n(441)},481:function(t,e,n){"use strict";n(442)},482:function(t,e,n){"use strict";n(443)},566:function(t,e,n){"use strict";n.r(e);n(465),n(126),n(8),n(100);var i=n(416),r={props:{item:{required:!0}},computed:{link:function(){return Object(i.b)(this.item.link)},exact:function(){var t=this;return this.$site.locales?Object.keys(this.$site.locales).some((function(e){return e===t.link})):"/"===this.link}},methods:{isExternal:i.f,isMailto:i.g,isTel:i.h}},s=n(23),a=Object(s.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isExternal(t.link)?n("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 "),n("OutboundLink")],1):n("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null).exports,o={components:{NavLink:a},computed:{data:function(){return this.$page.frontmatter},actionLink:function(){return{link:this.data.actionLink,text:this.data.actionText}}}},l=(n(468),Object(s.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("main",{staticClass:"home",attrs:{"aria-labelledby":"main-title"}},[n("header",{staticClass:"hero"},[t.data.heroImage?n("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?n("h1",{attrs:{id:"main-title"}},[t._v(t._s(t.data.heroText||t.$title||"Hello"))]):t._e(),t._v(" "),n("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?n("p",{staticClass:"action"},[n("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?n("div",{staticClass:"features"},t._l(t.data.features,(function(e,i){return n("div",{key:i,staticClass:"feature"},[n("h2",[t._v(t._s(e.title))]),t._v(" "),n("p",[t._v(t._s(e.details))])])})),0):t._e(),t._v(" "),n("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?n("div",{staticClass:"footer"},[t._v(t._s(t.data.footer))]):t._e()],1)}),[],!1,null,null,null).exports),u=(n(220),n(427),n(204),n(122),n(38),n(29),n(419),n(214),n(215),n(216),n(93),n(428),n(429),n(430),n(431),n(96),n(425),n(125),n(470),n(219)),c=n.n(u),h=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,i=c()(e,"title","");return c()(e,"frontmatter.tags")&&(i+=" ".concat(e.frontmatter.tags.join(" "))),n&&(i+=" ".concat(n)),p(t,i)},p=function(t,e){var n=function(t){return t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")},i=new RegExp("[^\0-]"),r=t.split(/\s+/g).map((function(t){return t.trim()})).filter((function(t){return!!t}));if(i.test(t))return r.some((function(t){return e.toLowerCase().indexOf(t)>-1}));var s=t.endsWith(" ");return new RegExp(r.map((function(t,e){return r.length!==e+1||s?"(?=.*\\b".concat(n(t),"\\b)"):"(?=.*\\b".concat(n(t),")")})).join("")+".+","gi").test(e)},f={name:"SearchBox",data:function(){return{query:"",focused:!1,focusIndex:0,placeholder:void 0}},computed:{showSuggestions:function(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions:function(){var t=this.query.trim().toLowerCase();if(t){for(var e=this.$site.pages,n=this.$site.themeConfig.searchMaxSuggestions||5,i=this.$localePath,r=[],s=0;s=n);s++){var a=e[s];if(this.getPageLocalePath(a)===i&&this.isSearchable(a))if(h(t,a))r.push(a);else if(a.headers)for(var o=0;o=n);o++){var l=a.headers[o];l.title&&h(t,a,l.title)&&r.push(Object.assign({},a,{path:a.path+"#"+l.slug,header:l}))}}return r}},alignRight:function(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted:function(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy:function(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath:function(t){for(var e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable:function(t){var e=null;return null===e||(e=Array.isArray(e)?e:new Array(e)).filter((function(e){return t.path.match(e)})).length>0},onHotkey:function(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp:function(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown:function(){this.showSuggestions&&(this.focusIndex "+t._s(e.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(472),Object(s.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[n("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[n("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).exports),v=n(59),m=(n(123),{components:{NavLink:a,DropdownTransition:n(464).a},data:function(){return{open:!1}},props:{item:{required:!0}},methods:{toggle:function(){this.open=!this.open}}}),b=(n(474),{components:{NavLink:a,DropdownLink:Object(s.a)(m,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[n("a",{staticClass:"dropdown-title",on:{click:t.toggle}},[n("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),n("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),n("DropdownTransition",[n("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(e,i){return n("li",{key:e.link||i,staticClass:"dropdown-item"},["links"===e.type?n("h4",[t._v(t._s(e.text))]):t._e(),t._v(" "),"links"===e.type?n("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(e.items,(function(t){return n("li",{key:t.link,staticClass:"dropdown-subitem"},[n("NavLink",{attrs:{item:t}})],1)})),0):n("NavLink",{attrs:{item:e}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav:function(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav:function(){var t=this,e=this.$site.locales;if(e&&Object.keys(e).length>1){var n=this.$page.path,i=this.$router.options.routes,r=this.$site.themeConfig.locales||{},s={text:this.$themeLocaleConfig.selectText||"Languages",items:Object.keys(e).map((function(s){var a,o=e[s],l=r[s]&&r[s].label||o.lang;return o.lang===t.$lang?a=n:(a=n.replace(t.$localeConfig.path,s),i.some((function(t){return t.path===a}))||(a=s)),{text:l,link:a}}))};return[].concat(Object(v.a)(this.userNav),[s])}return this.userNav},userLinks:function(){return(this.nav||[]).map((function(t){return Object.assign(Object(i.j)(t),{items:(t.items||[]).map(i.j)})}))},repoLink:function(){var t=this.$site.themeConfig.repo;if(t)return/^https?:/.test(t)?t:"https://github.com/".concat(t)},repoLabel:function(){if(this.repoLink){if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;for(var t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"],n=0;nMath.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),O=(n(481),n(482),Object(s.a)(L,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?n("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),n("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),t.$page.frontmatter.home?n("Home"):n("div",{staticClass:"docs-layout"},[n("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(" "),n("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=O.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{417: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 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 h})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return f})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return v}));n(29),n(93),n(420),n(125),n(426),n(216),n(96),n(72),n(8),n(73),n(38),n(122),n(204);var i=/#.*$/,r=/\.(md|html)$/,s=/\/$/,a=/^(https?:|mailto:|tel:|[a-zA-Z]{4,}:)/;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return a.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(l(t))return t;var e=t.match(i),n=e?e[0]:"",r=o(t);return s.test(r)?t:r+".html"+n}function p(t,e){var n=t.hash,r=function(t){var e=t.match(i);if(e)return e[0]}(e);return(!r||n===r)&&o(t.path)===o(e)}function f(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){var i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;var r=e.split("/");n&&r[r.length-1]||r.pop();for(var s=t.replace(/^\//,"").split("/"),a=0;a3&&void 0!==arguments[3]?arguments[3]: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.");var 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((function(e){return t(e,n,i,r+1)})),collapsable:!1!==e.collapsable}}(t,r,u)})):[]}return[]}function g(t){var e;return(t=t.map((function(t){return Object.assign({},t)}))).forEach((function(t){2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)})),t.filter((function(t){return 2===t.level}))}function v(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},420:function(t,e,n){"use strict";var i=n(11),r=n(211),s=n(9),a=n(92),o=n(14),l=n(32),u=n(66),c=n(212),h=n(213);r("match",(function(t,e,n){return[function(e){var n=l(this),r=null==e?void 0:u(e,t);return r?i(r,e,n):new RegExp(e)[t](o(n))},function(t){var i=s(this),r=o(t),l=n(e,i,r);if(l.done)return l.value;if(!i.global)return h(i,r);var u=i.unicode;i.lastIndex=0;for(var p,f=[],d=0;null!==(p=h(i,r));){var g=o(p[0]);f[d]=g,""===g&&(i.lastIndex=c(r,a(i.lastIndex),u)),d++}return 0===d?null:f}]}))},426:function(t,e,n){"use strict";var i=n(34),r=n(11),s=n(2),a=n(211),o=n(208),l=n(9),u=n(32),c=n(127),h=n(212),p=n(92),f=n(14),d=n(66),g=n(202),v=n(213),m=n(103),b=n(203),_=n(3),k=b.UNSUPPORTED_Y,x=Math.min,C=[].push,$=s(/./.exec),y=s(C),w=s("".slice);a("split",(function(t,e,n){var s;return s="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,n){var s=f(u(this)),a=void 0===n?4294967295:n>>>0;if(0===a)return[];if(void 0===t)return[s];if(!o(t))return r(e,s,t,a);for(var l,c,h,p=[],d=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),v=0,b=new RegExp(t.source,d+"g");(l=r(m,b,s))&&!((c=b.lastIndex)>v&&(y(p,w(s,v,l.index)),l.length>1&&l.index=a));)b.lastIndex===l.index&&b.lastIndex++;return v===s.length?!h&&$(b,"")||y(p,""):y(p,w(s,v)),p.length>a?g(p,0,a):p}:"0".split(void 0,0).length?function(t,n){return void 0===t&&0===n?[]:r(e,this,t,n)}:e,[function(e,n){var i=u(this),a=null==e?void 0:d(e,t);return a?r(a,e,i,n):r(s,f(i),e,n)},function(t,i){var r=l(this),a=f(t),o=n(s,r,a,i,s!==e);if(o.done)return o.value;var u=c(r,RegExp),d=r.unicode,g=(r.ignoreCase?"i":"")+(r.multiline?"m":"")+(r.unicode?"u":"")+(k?"g":"y"),m=new u(k?"^(?:"+r.source+")":r,g),b=void 0===i?4294967295:i>>>0;if(0===b)return[];if(0===a.length)return null===v(m,a)?[a]:[];for(var _=0,C=0,$=[];C@^][^\s!#%&*+<=>@^]*>/,P=/a/g,A=/a/g,N=new w(P)!==P,U=g.MISSED_STICKY,W=g.UNSUPPORTED_Y,H=i&&(!N||U||C||$||m((function(){return A[y]=!1,w(P)!=P||w(A)==A||"/a/i"!=w(P,"i")})));if(a("RegExp",H)){for(var M=function(t,e){var n,i,r,s,a,u,c=h(S,this),d=p(t),g=void 0===e,v=[],m=t;if(!c&&d&&g&&t.constructor===M)return t;if((d||h(S,t))&&(t=t.source,g&&(e="flags"in m?m.flags:O(m))),t=void 0===t?"":f(t),e=void 0===e?"":f(e),m=t,C&&"dotAll"in P&&(i=!!e&&T(e,"s")>-1)&&(e=j(e,/s/g,"")),n=e,U&&"sticky"in P&&(r=!!e&&T(e,"y")>-1)&&W&&(e=j(e,/y/g,"")),$&&(t=(s=function(t){for(var e,n=t.length,i=0,r="",s=[],a={},o=!1,l=!1,u=0,c="";i<=n;i++){if("\\"===(e=I(t,i)))e+=I(t,++i);else if("]"===e)o=!1;else if(!o)switch(!0){case"["===e:o=!0;break;case"("===e:E(R,D(t,i+1))&&(i+=2,l=!0),r+=e,u++;continue;case">"===e&&l:if(""===c||b(a,c))throw new L("Invalid capture group name");a[c]=!0,s[s.length]=[c,u],l=!1,c="";continue}l?c+=e:r+=e}return[r,s]}(t))[0],v=s[1]),a=o(w(t,e),c?this:S,M),(i||r||v.length)&&(u=_(a),i&&(u.dotAll=!0,u.raw=M(function(t){for(var e,n=t.length,i=0,r="",s=!1;i<=n;i++)"\\"!==(e=I(t,i))?s||"."!==e?("["===e?s=!0:"]"===e&&(s=!1),r+=e):r+="[\\s\\S]":r+=e+I(t,++i);return r}(t),n)),r&&(u.sticky=!0),v.length&&(u.groups=v)),t!==m)try{l(a,"source",""===m?"(?:)":m)}catch(t){}return a},B=function(t){t in M||u(M,t,{configurable:!0,get:function(){return w[t]},set:function(e){w[t]=e}})},G=c(w),q=0;G.length>q;)B(G[q++]);S.constructor=M,M.prototype=S,v(r,"RegExp",M)}k("RegExp")},430:function(t,e,n){var i=n(0),r=n(6),s=n(210),a=n(27),o=n(12).f,l=n(37).get,u=RegExp.prototype,c=i.TypeError;r&&s&&o(u,"dotAll",{configurable:!0,get:function(){if(this!==u){if("RegExp"===a(this))return!!l(this).dotAll;throw c("Incompatible receiver, RegExp required")}}})},431:function(t,e,n){var i=n(0),r=n(6),s=n(203).MISSED_STICKY,a=n(27),o=n(12).f,l=n(37).get,u=RegExp.prototype,c=i.TypeError;r&&s&&o(u,"sticky",{configurable:!0,get:function(){if(this!==u){if("RegExp"===a(this))return!!l(this).sticky;throw c("Incompatible receiver, RegExp required")}}})},432:function(t,e,n){"use strict";var i=n(2),r=n(98).PROPER,s=n(16),a=n(9),o=n(33),l=n(14),u=n(3),c=n(209),h=RegExp.prototype,p=h.toString,f=i(c),d=u((function(){return"/a/b"!=p.call({source:"a",flags:"b"})})),g=r&&"toString"!=p.name;(d||g)&&s(RegExp.prototype,"toString",(function(){var t=a(this),e=l(t.source),n=t.flags;return"/"+e+"/"+l(void 0===n&&o(h,t)&&!("flags"in h)?f(t):n)}),{unsafe:!0})},433:function(t,e,n){},434:function(t,e,n){},435:function(t,e,n){},436:function(t,e,n){},437:function(t,e,n){},438:function(t,e,n){},439:function(t,e,n){},440:function(t,e,n){},441:function(t,e,n){},442:function(t,e,n){},443:function(t,e,n){},444:function(t,e,n){},465:function(t,e,n){"use strict";n.r(e);n(126),n(8);var i=n(417),r={name:"SidebarGroup",props:["item","open","collapsable","depth"],components:{DropdownTransition:n(466).a},beforeCreate:function(){this.$options.components.SidebarLinks=n(465).default},methods:{isActive:i.e}},s=(n(480),n(23)),a=Object(s.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?n("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")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):n("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),n("DropdownTransition",[t.open||!t.collapsable?n("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).exports;n(29),n(125),n(96);function o(t,e,n,i){return t("router-link",{props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}},n)}function l(t,e,n,r,s){var a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1;return!e||a>s?null:t("ul",{class:"sidebar-sub-headers"},e.map((function(e){var u=Object(i.e)(r,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,u),l(t,e.children,n,r,s,a+1)])})))}var u={functional:!0,props:["item","sidebarDepth"],render:function(t,e){var n=e.parent,r=n.$page,s=(n.$site,n.$route),a=n.$themeConfig,u=n.$themeLocaleConfig,c=e.props,h=c.item,p=c.sidebarDepth,f=Object(i.e)(s,h.path),d="auto"===h.type?f||h.children.some((function(t){return Object(i.e)(s,h.basePath+"#"+t.slug)})):f,g="external"===h.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,h.path,h.title||h.path):o(t,h.path,h.title||h.path,d),v=r.frontmatter.sidebarDepth||p||u.sidebarDepth||a.sidebarDepth,m=null==v?1:v,b=u.displayAllHeaders||a.displayAllHeaders;return"auto"===h.type?[g,l(t,h.children,h.basePath,s,m)]:(d||b)&&h.headers&&!i.d.test(h.path)?[g,l(t,Object(i.c)(h.headers),h.path,s,m)]:g}};n(481);var c={name:"SidebarLinks",components:{SidebarGroup:a,SidebarLink:Object(s.a)(u,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth"],data:function(){return{openGroupIndex:0}},created:function(){this.refreshIndex()},watch:{$route:function(){this.refreshIndex()}},methods:{refreshIndex:function(){var t=function(t,e){for(var n=0;n-1&&(this.openGroupIndex=t)},toggleGroup:function(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive:function(t){return Object(i.e)(this.$route,t.regularPath)}}},h=Object(s.a)(c,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.items.length?n("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(e,i){return n("li",{key:i},["group"===e.type?n("SidebarGroup",{attrs:{item:e,open:i===t.openGroupIndex,collapsable:e.collapsable||e.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):n("SidebarLink",{attrs:{sidebarDepth:t.sidebarDepth,item:e}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=h.exports},466:function(t,e,n){"use strict";var i={name:"DropdownTransition",methods:{setHeight:function(t){t.style.height=t.scrollHeight+"px"},unsetHeight:function(t){t.style.height=""}}},r=(n(475),n(23)),s=Object(r.a)(i,(function(){var t=this.$createElement;return(this._self._c||t)("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.a=s.exports},467:function(t,e,n){"use strict";var i=n(1),r=n(468);i({target:"String",proto:!0,forced:n(469)("link")},{link:function(t){return r(this,"a","href",t)}})},468:function(t,e,n){var i=n(2),r=n(32),s=n(14),a=/"/g,o=i("".replace);t.exports=function(t,e,n,i){var l=s(r(t)),u="<"+e;return""!==n&&(u+=" "+n+'="'+o(s(i),a,""")+'"'),u+">"+l+""}},469:function(t,e,n){var i=n(3);t.exports=function(t){return i((function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}))}},470:function(t,e,n){"use strict";n(427)},471:function(t,e,n){var i=n(98).PROPER,r=n(3),s=n(139);t.exports=function(t){return r((function(){return!!s[t]()||"​…᠎"!=="​…᠎"[t]()||i&&s[t].name!==t}))}},472:function(t,e,n){"use strict";var i,r=n(1),s=n(2),a=n(26).f,o=n(92),l=n(14),u=n(136),c=n(32),h=n(137),p=n(20),f=s("".endsWith),d=s("".slice),g=Math.min,v=h("endsWith");r({target:"String",proto:!0,forced:!!(p||v||(i=a(String.prototype,"endsWith"),!i||i.writable))&&!v},{endsWith:function(t){var e=l(c(this));u(t);var n=arguments.length>1?arguments[1]:void 0,i=e.length,r=void 0===n?i:g(o(n),i),s=l(t);return f?f(e,s,r):d(e,r-s.length,r)===s}})},473:function(t,e,n){"use strict";n(433)},474:function(t,e,n){"use strict";n(434)},475:function(t,e,n){"use strict";n(435)},476:function(t,e,n){"use strict";n(436)},477:function(t,e,n){"use strict";n(437)},478:function(t,e,n){"use strict";n(438)},479:function(t,e,n){"use strict";n(439)},480:function(t,e,n){"use strict";n(440)},481:function(t,e,n){"use strict";n(441)},482:function(t,e,n){"use strict";n(442)},483:function(t,e,n){"use strict";n(443)},484:function(t,e,n){"use strict";n(444)},569:function(t,e,n){"use strict";n.r(e);n(467),n(126),n(8),n(100);var i=n(417),r={props:{item:{required:!0}},computed:{link:function(){return Object(i.b)(this.item.link)},exact:function(){var t=this;return this.$site.locales?Object.keys(this.$site.locales).some((function(e){return e===t.link})):"/"===this.link}},methods:{isExternal:i.f,isMailto:i.g,isTel:i.h}},s=n(23),a=Object(s.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isExternal(t.link)?n("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 "),n("OutboundLink")],1):n("router-link",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact}},[t._v(t._s(t.item.text))])}),[],!1,null,null,null).exports,o={components:{NavLink:a},computed:{data:function(){return this.$page.frontmatter},actionLink:function(){return{link:this.data.actionLink,text:this.data.actionText}}}},l=(n(470),Object(s.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("main",{staticClass:"home",attrs:{"aria-labelledby":"main-title"}},[n("header",{staticClass:"hero"},[t.data.heroImage?n("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?n("h1",{attrs:{id:"main-title"}},[t._v(t._s(t.data.heroText||t.$title||"Hello"))]):t._e(),t._v(" "),n("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?n("p",{staticClass:"action"},[n("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?n("div",{staticClass:"features"},t._l(t.data.features,(function(e,i){return n("div",{key:i,staticClass:"feature"},[n("h2",[t._v(t._s(e.title))]),t._v(" "),n("p",[t._v(t._s(e.details))])])})),0):t._e(),t._v(" "),n("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?n("div",{staticClass:"footer"},[t._v(t._s(t.data.footer))]):t._e()],1)}),[],!1,null,null,null).exports),u=(n(220),n(428),n(204),n(122),n(38),n(29),n(420),n(214),n(215),n(216),n(93),n(429),n(430),n(431),n(432),n(96),n(426),n(125),n(472),n(219)),c=n.n(u),h=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,i=c()(e,"title","");return c()(e,"frontmatter.tags")&&(i+=" ".concat(e.frontmatter.tags.join(" "))),n&&(i+=" ".concat(n)),p(t,i)},p=function(t,e){var n=function(t){return t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")},i=new RegExp("[^\0-]"),r=t.split(/\s+/g).map((function(t){return t.trim()})).filter((function(t){return!!t}));if(i.test(t))return r.some((function(t){return e.toLowerCase().indexOf(t)>-1}));var s=t.endsWith(" ");return new RegExp(r.map((function(t,e){return r.length!==e+1||s?"(?=.*\\b".concat(n(t),"\\b)"):"(?=.*\\b".concat(n(t),")")})).join("")+".+","gi").test(e)},f={name:"SearchBox",data:function(){return{query:"",focused:!1,focusIndex:0,placeholder:void 0}},computed:{showSuggestions:function(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions:function(){var t=this.query.trim().toLowerCase();if(t){for(var e=this.$site.pages,n=this.$site.themeConfig.searchMaxSuggestions||5,i=this.$localePath,r=[],s=0;s=n);s++){var a=e[s];if(this.getPageLocalePath(a)===i&&this.isSearchable(a))if(h(t,a))r.push(a);else if(a.headers)for(var o=0;o=n);o++){var l=a.headers[o];l.title&&h(t,a,l.title)&&r.push(Object.assign({},a,{path:a.path+"#"+l.slug,header:l}))}}return r}},alignRight:function(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted:function(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy:function(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath:function(t){for(var e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable:function(t){var e=null;return null===e||(e=Array.isArray(e)?e:new Array(e)).filter((function(e){return t.path.match(e)})).length>0},onHotkey:function(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp:function(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown:function(){this.showSuggestions&&(this.focusIndex "+t._s(e.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(474),Object(s.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[n("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[n("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).exports),v=n(59),m=(n(123),{components:{NavLink:a,DropdownTransition:n(466).a},data:function(){return{open:!1}},props:{item:{required:!0}},methods:{toggle:function(){this.open=!this.open}}}),b=(n(476),{components:{NavLink:a,DropdownLink:Object(s.a)(m,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[n("a",{staticClass:"dropdown-title",on:{click:t.toggle}},[n("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),n("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),n("DropdownTransition",[n("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(e,i){return n("li",{key:e.link||i,staticClass:"dropdown-item"},["links"===e.type?n("h4",[t._v(t._s(e.text))]):t._e(),t._v(" "),"links"===e.type?n("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(e.items,(function(t){return n("li",{key:t.link,staticClass:"dropdown-subitem"},[n("NavLink",{attrs:{item:t}})],1)})),0):n("NavLink",{attrs:{item:e}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav:function(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav:function(){var t=this,e=this.$site.locales;if(e&&Object.keys(e).length>1){var n=this.$page.path,i=this.$router.options.routes,r=this.$site.themeConfig.locales||{},s={text:this.$themeLocaleConfig.selectText||"Languages",items:Object.keys(e).map((function(s){var a,o=e[s],l=r[s]&&r[s].label||o.lang;return o.lang===t.$lang?a=n:(a=n.replace(t.$localeConfig.path,s),i.some((function(t){return t.path===a}))||(a=s)),{text:l,link:a}}))};return[].concat(Object(v.a)(this.userNav),[s])}return this.userNav},userLinks:function(){return(this.nav||[]).map((function(t){return Object.assign(Object(i.j)(t),{items:(t.items||[]).map(i.j)})}))},repoLink:function(){var t=this.$site.themeConfig.repo;if(t)return/^https?:/.test(t)?t:"https://github.com/".concat(t)},repoLabel:function(){if(this.repoLink){if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;for(var t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"],n=0;nMath.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),O=(n(483),n(484),Object(s.a)(L,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?n("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),n("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),t.$page.frontmatter.home?n("Home"):n("div",{staticClass:"docs-layout"},[n("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(" "),n("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=O.exports}}]); \ No newline at end of file diff --git a/assets/js/15.84e6424a.js b/assets/js/16.944ff32f.js similarity index 99% rename from assets/js/15.84e6424a.js rename to assets/js/16.944ff32f.js index 6786d482..ca3afded 100644 --- a/assets/js/15.84e6424a.js +++ b/assets/js/16.944ff32f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{503:function(t,s,a){t.exports=a.p+"assets/img/light-in-scene.7c329d72.png"},504:function(t,s,a){t.exports=a.p+"assets/img/ambient_lighting.8bece8d1.png"},505:function(t,s,a){t.exports=a.p+"assets/img/normal_diagram.dfa577f7.png"},506:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_wrong.dab00d9a.png"},507:function(t,s,a){t.exports=a.p+"assets/img/diffuse_wrong.ce856a2c.png"},508: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=="},509:function(t,s,a){t.exports=a.p+"assets/img/diffuse_right.e3a6b793.png"},510:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_lighting.98735034.png"},511:function(t,s,a){t.exports=a.p+"assets/img/normal-scale-issue.7631ac97.png"},512: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="},513:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_specular_lighting.76386148.png"},514:function(t,s,a){t.exports=a.p+"assets/img/specular_lighting.b3869eb1.png"},515:function(t,s,a){t.exports=a.p+"assets/img/half_dir.bbcc23b8.png"},582:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"working-with-lights"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#working-with-lights"}},[t._v("#")]),t._v(" Working with Lights")]),t._v(" "),n("p",[t._v("While we can tell that our scene is 3d because of our camera, it still feels very flat. That's because our model stays the same color regardless of how it's oriented. If we want to change that we need to add lighting to our scene.")]),t._v(" "),n("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 it was bouncing around.")]),t._v(" "),n("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 "),n("em",[t._v("per second")]),t._v(". Just imagine that for the sun! To get around this, we're gonna use math to cheat.")]),t._v(" "),n("p",[t._v("Let's discuss a few options.")]),t._v(" "),n("h2",{attrs:{id:"ray-path-tracing"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#ray-path-tracing"}},[t._v("#")]),t._v(" Ray/Path Tracing")]),t._v(" "),n("p",[t._v("This is an "),n("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 "),n("RouterLink",{attrs:{to:"/todo/"}},[t._v("ray tracing tutorial")]),t._v(" if you want to learn more.")],1),t._v(" "),n("h2",{attrs:{id:"the-blinn-phong-model"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-blinn-phong-model"}},[t._v("#")]),t._v(" The Blinn-Phong Model")]),t._v(" "),n("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 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Phong_shading",target:"_blank",rel:"noopener noreferrer"}},[t._v("Phong reflection model"),n("OutboundLink")],1),t._v(" is often used. It splits up the lighting calculation into three (3) parts: ambient lighting, diffuse lighting, and specular lighting. We're going to be learning the "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_reflection_model",target:"_blank",rel:"noopener noreferrer"}},[t._v("Blinn-Phong model"),n("OutboundLink")],1),t._v(", which cheats a bit at the specular calculation to speed things up.")]),t._v(" "),n("p",[t._v("Before we can get into that though, we need to add a light to our scene.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("LightUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Our "),n("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(" "),n("div",{staticClass:"note"},[n("p",[t._v("The rule of thumb for alignment with WGSL structs is field alignments are\nalways powers of 2. For example, a "),n("code",[t._v("vec3")]),t._v(" may only have 3 float fields giving\nit a size of 12, the alignment will be bumped up to the next power of 2 being\n16. This means that you have to be more careful with how you layout your struct\nin Rust.")]),t._v(" "),n("p",[t._v("Some developers choose the use "),n("code",[t._v("vec4")]),t._v("s instead of "),n("code",[t._v("vec3")]),t._v("s to avoid alignment\nissues. You can learn more about the alignment rules in the "),n("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#alignment-and-size",target:"_blank",rel:"noopener noreferrer"}},[t._v("wgsl spec"),n("OutboundLink")],1)])]),t._v(" "),n("p",[t._v("We're going to create another buffer to store our light in.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_uniform "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LightUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _padding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _padding2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll want to update our lights position, so we use COPY_DST")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light VB"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("UNIFORM")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Don't forget to add the "),n("code",[t._v("light_uniform")]),t._v(" and "),n("code",[t._v("light_buffer")]),t._v(" to "),n("code",[t._v("State")]),t._v(". After that, we need to create a bind group layout and bind group for our light.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferBindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uniform")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n has_dynamic_offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_binding_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("light_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" light_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_entire_binding")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Add those to "),n("code",[t._v("State")]),t._v(", and also update the "),n("code",[t._v("render_pipeline_layout")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("light_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Let's also update the light's position in the "),n("code",[t._v("update()")]),t._v(" method, so we can see what our objects look like from different angles.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Update the light")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" old_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" old_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("This will have the light rotate around the origin one degree every frame.")]),t._v(" "),n("h2",{attrs:{id:"seeing-the-light"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#seeing-the-light"}},[t._v("#")]),t._v(" Seeing the light")]),t._v(" "),n("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 "),n("code",[t._v("create_render_pipeline()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vs_main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" vertex_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fs_main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n blend"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n alpha"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendComponent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendComponent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrites")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n primitive"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n strip_index_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cull_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::DEPTH_CLIP_CONTROL")]),t._v("\n unclipped_depth"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::CONSERVATIVE_RASTERIZATION")]),t._v("\n conservative"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" depth_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("format"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DepthStencilState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_write_enabled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_compare"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompareFunction")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Less")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n stencil"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StencilState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bias"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DepthBiasState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multisample"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mask"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_to_coverage_enabled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multiview"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We also need to change "),n("code",[t._v("State::new()")]),t._v(" to use this function.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Normal Shader"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We're going to need to modify "),n("code",[t._v("model::DrawModel")]),t._v(" to use our "),n("code",[t._v("light_bind_group")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("With that done we can create another render pipeline for our light.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light Pipeline Layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("light_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light Shader"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"light.wgsl"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("I chose to create a separate layout for the "),n("code",[t._v("light_render_pipeline")]),t._v(", as it doesn't need all the resources that the regular "),n("code",[t._v("render_pipeline")]),t._v(" needs (main just the textures).")]),t._v(" "),n("p",[t._v("With that in place, we need to write the actual shaders.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// light.wgsl\n// Vertex shader\n\nstruct Camera {\n view_proj: mat4x4,\n}\n@group(0) @binding(0)\nvar camera: Camera;\n\nstruct Light {\n position: vec3,\n color: vec3,\n}\n@group(1) @binding(0)\nvar light: Light;\n\nstruct VertexInput {\n @location(0) position: vec3,\n};\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) color: vec3,\n};\n\n@vertex\nfn vs_main(\n model: VertexInput,\n) -> VertexOutput {\n let scale = 0.25;\n var out: VertexOutput;\n out.clip_position = camera.view_proj * vec4(model.position * scale + light.position, 1.0);\n out.color = light.color;\n return out;\n}\n\n// Fragment shader\n\n@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n return vec4(in.color, 1.0);\n}\n")])])]),n("p",[t._v("Now we could manually implement the draw code for the light in "),n("code",[t._v("render()")]),t._v(", but to keep with the pattern we developed, let's create a new trait called "),n("code",[t._v("DrawLight")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawLight")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawLight")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Finally, we want to add Light rendering to our render passes.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("crate")]),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawLight")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("With all that, we'll end up with something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(503),alt:"./light-in-scene.png"}})]),t._v(" "),n("h2",{attrs:{id:"ambient-lighting"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#ambient-lighting"}},[t._v("#")]),t._v(" Ambient Lighting")]),t._v(" "),n("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. Actually modeling this interaction is computationally expensive, so we cheat. We define an ambient lighting value that stands for the light bouncing off other parts of the scene to light our objects.")]),t._v(" "),n("p",[t._v("The ambient part is based on the light color as well as the object color. We've already added our "),n("code",[t._v("light_bind_group")]),t._v(", so we just need to use it in our shader. In "),n("code",[t._v("shader.wgsl")]),t._v(", add the following below the texture uniforms.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct Light {\n position: vec3,\n color: vec3,\n}\n@group(2) @binding(0)\nvar light: Light;\n")])])]),n("p",[t._v("Then we need to update our main shader code to calculate and use the ambient color value.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n let object_color: vec4 = textureSample(t_diffuse, s_diffuse, in.tex_coords);\n \n // We don't need (or want) much ambient light, so 0.1 is fine\n let ambient_strength = 0.1;\n let ambient_color = light.color * ambient_strength;\n\n let result = ambient_color * object_color.xyz;\n\n return vec4(result, object_color.a);\n}\n")])])]),n("p",[t._v("With that, we should get something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(504),alt:"./ambient_lighting.png"}})]),t._v(" "),n("h2",{attrs:{id:"diffuse-lighting"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#diffuse-lighting"}},[t._v("#")]),t._v(" Diffuse Lighting")]),t._v(" "),n("p",[t._v("Remember the normal vectors that were included with 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 vector using the dot product to get the cosine of the angle between them.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(505),alt:"./normal_diagram.png"}})]),t._v(" "),n("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(" "),n("p",[t._v("We're going to need to pull in the normal vector into our "),n("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct VertexInput {\n @location(0) position: vec3,\n @location(1) tex_coords: vec2,\n @location(2) normal: vec3, // NEW!\n};\n")])])]),n("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(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) tex_coords: vec2,\n @location(1) world_normal: vec3,\n @location(2) world_position: vec3,\n};\n")])])]),n("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(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("@vertex\nfn vs_main(\n model: VertexInput,\n instance: InstanceInput,\n) -> VertexOutput {\n let model_matrix = mat4x4(\n instance.model_matrix_0,\n instance.model_matrix_1,\n instance.model_matrix_2,\n instance.model_matrix_3,\n );\n var out: VertexOutput;\n out.tex_coords = model.tex_coords;\n out.world_normal = model.normal;\n var world_position: vec4 = model_matrix * vec4(model.position, 1.0);\n out.world_position = world_position.xyz;\n out.clip_position = camera.view_proj * world_position;\n return out;\n}\n")])])]),n("p",[t._v("With that, we can do the actual calculation. Below the "),n("code",[t._v("ambient_color")]),t._v(" calculation, but above "),n("code",[t._v("result")]),t._v(", add the following.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let light_dir = normalize(light.position - in.world_position);\n\nlet diffuse_strength = max(dot(in.world_normal, light_dir), 0.0);\nlet diffuse_color = light.color * diffuse_strength;\n")])])]),n("p",[t._v("Now we can include the "),n("code",[t._v("diffuse_color")]),t._v(" in the "),n("code",[t._v("result")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let result = (ambient_color + diffuse_color) * object_color.xyz;\n")])])]),n("p",[t._v("With that, we get something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(506),alt:"./ambient_diffuse_wrong.png"}})]),t._v(" "),n("h2",{attrs:{id:"the-normal-matrix"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-normal-matrix"}},[t._v("#")]),t._v(" The normal matrix")]),t._v(" "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In the loop we create the instances in")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("180.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We'll also remove the "),n("code",[t._v("ambient_color")]),t._v(" from our lighting "),n("code",[t._v("result")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let result = (diffuse_color) * object_color.xyz;\n")])])]),n("p",[t._v("That should give us something that looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(507),alt:"./diffuse_wrong.png"}})]),t._v(" "),n("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(" "),n("p",[n("img",{attrs:{src:a(508),alt:"./normal_not_rotated.png"}})]),t._v(" "),n("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(" "),n("p",[t._v("We could compute the normal matrix in the vertex shader, but that would involve inverting the "),n("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(" "),n("p",[t._v("Instead, we're going to add a "),n("code",[t._v("normal")]),t._v(" matrix field to "),n("code",[t._v("InstanceRaw")]),t._v(". Instead of inverting the model matrix, we'll just be using the instance's rotation to create a "),n("code",[t._v("Matrix3")]),t._v(".")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("We are using "),n("code",[t._v("Matrix3")]),t._v(" instead of "),n("code",[t._v("Matrix4")]),t._v(" as we only really need the rotation component of the matrix.")])]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[allow(dead_code)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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 "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This means that our shaders will only change to use the next")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// instance when the shader starts processing a new instance")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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 "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A mat4 takes up 4 vertex slots as it is technically 4 vec4s. We need to define a slot")]),t._v("\n "),n("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 "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("12")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("9")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to modify "),n("code",[t._v("Instance")]),t._v(" to create the normal matrix.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("to_raw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_translation")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now we need to reconstruct the normal matrix in the vertex shader.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct InstanceInput {\n @location(5) model_matrix_0: vec4,\n @location(6) model_matrix_1: vec4,\n @location(7) model_matrix_2: vec4,\n @location(8) model_matrix_3: vec4,\n // NEW!\n @location(9) normal_matrix_0: vec3,\n @location(10) normal_matrix_1: vec3,\n @location(11) normal_matrix_2: vec3,\n};\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) tex_coords: vec2,\n @location(1) world_normal: vec3,\n @location(2) world_position: vec3,\n};\n\n@vertex\nfn vs_main(\n model: VertexInput,\n instance: InstanceInput,\n) -> VertexOutput {\n let model_matrix = mat4x4(\n instance.model_matrix_0,\n instance.model_matrix_1,\n instance.model_matrix_2,\n instance.model_matrix_3,\n );\n // NEW!\n let normal_matrix = mat3x3(\n instance.normal_matrix_0,\n instance.normal_matrix_1,\n instance.normal_matrix_2,\n );\n var out: VertexOutput;\n out.tex_coords = model.tex_coords;\n out.world_normal = normal_matrix * model.normal; // UPDATED!\n var world_position: vec4 = model_matrix * vec4(model.position, 1.0);\n out.world_position = world_position.xyz;\n out.clip_position = camera.view_proj * world_position;\n return out;\n}\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("I'm currently doing things in "),n("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"),n("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 "),n("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(" "),n("p",[t._v("There are advantages to using view space. The main one is when you have massive worlds doing lighting and other calculations in model spacing 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(" "),n("p",[t._v("With that change, our lighting now looks correct.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(509),alt:"./diffuse_right.png"}})]),t._v(" "),n("p",[t._v("Bringing back our other objects, and adding the ambient lighting gives us this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(510),alt:"./ambient_diffuse_lighting.png"}}),t._v(";")]),t._v(" "),n("div",{staticClass:"note"},[n("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 pointed shared this code with me that does the trick:")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("out.world_normal = (model_matrix * vec4(model.normal, 0.0)).xyz;\n")])])]),n("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(" "),n("p",[t._v("The scaling factor "),n("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(" "),n("p",[n("img",{attrs:{src:a(511),alt:"./normal-scale-issue.png"}})])]),t._v(" "),n("h2",{attrs:{id:"specular-lighting"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#specular-lighting"}},[t._v("#")]),t._v(" Specular Lighting")]),t._v(" "),n("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(" "),n("p",[n("img",{attrs:{src:a(512),alt:"./specular_diagram.png"}})]),t._v(" "),n("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(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct Camera {\n view_pos: vec4,\n view_proj: mat4x4,\n}\n@group(1) @binding(0)\nvar camera: Camera;\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("Don't forget to update the "),n("code",[t._v("Camera")]),t._v(" struct in "),n("code",[t._v("light.wgsl")]),t._v(" as well, as if it doesn't match the "),n("code",[t._v("CameraUniform")]),t._v(" struct in rust, the light will render wrong.")])]),t._v(" "),n("p",[t._v("We're going to need to update the "),n("code",[t._v("CameraUniform")]),t._v(" struct as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("identity")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We're using Vector4 because of the uniforms 16 byte spacing requirement")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_homogeneous")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("build_view_projection_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Since we want to use our uniforms in the fragment shader now, we need to change its visibility.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutBinding")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Updated!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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 "),n("code",[t._v("reflect_dir")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// shader.wgsl\n// In the fragment shader...\nlet view_dir = normalize(camera.view_pos.xyz - in.world_position);\nlet reflect_dir = reflect(-light_dir, in.world_normal);\n")])])]),n("p",[t._v("Then we use the dot product to calculate the "),n("code",[t._v("specular_strength")]),t._v(" and use that to compute the "),n("code",[t._v("specular_color")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let specular_strength = pow(max(dot(view_dir, reflect_dir), 0.0), 32.0);\nlet specular_color = specular_strength * light.color;\n")])])]),n("p",[t._v("Finally, we add that to the result.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let result = (ambient_color + diffuse_color + specular_color) * object_color.xyz;\n")])])]),n("p",[t._v("With that, you should have something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(513),alt:"./ambient_diffuse_specular_lighting.png"}})]),t._v(" "),n("p",[t._v("If we just look at the "),n("code",[t._v("specular_color")]),t._v(" on its own we get this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(514),alt:"./specular_lighting.png"}})]),t._v(" "),n("h2",{attrs:{id:"the-half-direction"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-half-direction"}},[t._v("#")]),t._v(" The half direction")]),t._v(" "),n("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 "),n("a",{attrs:{href:"https://learnopengl.com/Advanced-Lighting/Advanced-Lighting",target:"_blank",rel:"noopener noreferrer"}},[t._v("certain circumstances"),n("OutboundLink")],1),t._v(". The Blinn part of Blinn-Phong comes from the realization that if you add the "),n("code",[t._v("view_dir")]),t._v(", and "),n("code",[t._v("light_dir")]),t._v(" together, normalize the result and use the dot product of that and the "),n("code",[t._v("normal")]),t._v(", you get roughly the same results without the issues that using "),n("code",[t._v("reflect_dir")]),t._v(" had.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let view_dir = normalize(camera.view_pos.xyz - in.world_position);\nlet half_dir = normalize(view_dir + light_dir);\n\nlet specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);\n")])])]),n("p",[t._v("It's hard to tell the difference, but here are the results.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(515),alt:"./half_dir.png"}})]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial10_lighting"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{505:function(t,s,a){t.exports=a.p+"assets/img/light-in-scene.7c329d72.png"},506:function(t,s,a){t.exports=a.p+"assets/img/ambient_lighting.8bece8d1.png"},507:function(t,s,a){t.exports=a.p+"assets/img/normal_diagram.dfa577f7.png"},508:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_wrong.dab00d9a.png"},509:function(t,s,a){t.exports=a.p+"assets/img/diffuse_wrong.ce856a2c.png"},510: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=="},511:function(t,s,a){t.exports=a.p+"assets/img/diffuse_right.e3a6b793.png"},512:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_lighting.98735034.png"},513:function(t,s,a){t.exports=a.p+"assets/img/normal-scale-issue.7631ac97.png"},514: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="},515:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_specular_lighting.76386148.png"},516:function(t,s,a){t.exports=a.p+"assets/img/specular_lighting.b3869eb1.png"},517:function(t,s,a){t.exports=a.p+"assets/img/half_dir.bbcc23b8.png"},585:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"working-with-lights"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#working-with-lights"}},[t._v("#")]),t._v(" Working with Lights")]),t._v(" "),n("p",[t._v("While we can tell that our scene is 3d because of our camera, it still feels very flat. That's because our model stays the same color regardless of how it's oriented. If we want to change that we need to add lighting to our scene.")]),t._v(" "),n("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 it was bouncing around.")]),t._v(" "),n("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 "),n("em",[t._v("per second")]),t._v(". Just imagine that for the sun! To get around this, we're gonna use math to cheat.")]),t._v(" "),n("p",[t._v("Let's discuss a few options.")]),t._v(" "),n("h2",{attrs:{id:"ray-path-tracing"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#ray-path-tracing"}},[t._v("#")]),t._v(" Ray/Path Tracing")]),t._v(" "),n("p",[t._v("This is an "),n("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 "),n("RouterLink",{attrs:{to:"/todo/"}},[t._v("ray tracing tutorial")]),t._v(" if you want to learn more.")],1),t._v(" "),n("h2",{attrs:{id:"the-blinn-phong-model"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-blinn-phong-model"}},[t._v("#")]),t._v(" The Blinn-Phong Model")]),t._v(" "),n("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 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Phong_shading",target:"_blank",rel:"noopener noreferrer"}},[t._v("Phong reflection model"),n("OutboundLink")],1),t._v(" is often used. It splits up the lighting calculation into three (3) parts: ambient lighting, diffuse lighting, and specular lighting. We're going to be learning the "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_reflection_model",target:"_blank",rel:"noopener noreferrer"}},[t._v("Blinn-Phong model"),n("OutboundLink")],1),t._v(", which cheats a bit at the specular calculation to speed things up.")]),t._v(" "),n("p",[t._v("Before we can get into that though, we need to add a light to our scene.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("LightUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Our "),n("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(" "),n("div",{staticClass:"note"},[n("p",[t._v("The rule of thumb for alignment with WGSL structs is field alignments are\nalways powers of 2. For example, a "),n("code",[t._v("vec3")]),t._v(" may only have 3 float fields giving\nit a size of 12, the alignment will be bumped up to the next power of 2 being\n16. This means that you have to be more careful with how you layout your struct\nin Rust.")]),t._v(" "),n("p",[t._v("Some developers choose the use "),n("code",[t._v("vec4")]),t._v("s instead of "),n("code",[t._v("vec3")]),t._v("s to avoid alignment\nissues. You can learn more about the alignment rules in the "),n("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#alignment-and-size",target:"_blank",rel:"noopener noreferrer"}},[t._v("wgsl spec"),n("OutboundLink")],1)])]),t._v(" "),n("p",[t._v("We're going to create another buffer to store our light in.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_uniform "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LightUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _padding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n _padding2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll want to update our lights position, so we use COPY_DST")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light VB"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("UNIFORM")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Don't forget to add the "),n("code",[t._v("light_uniform")]),t._v(" and "),n("code",[t._v("light_buffer")]),t._v(" to "),n("code",[t._v("State")]),t._v(". After that, we need to create a bind group layout and bind group for our light.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferBindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uniform")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n has_dynamic_offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_binding_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("light_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" light_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_entire_binding")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Add those to "),n("code",[t._v("State")]),t._v(", and also update the "),n("code",[t._v("render_pipeline_layout")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("light_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Let's also update the light's position in the "),n("code",[t._v("update()")]),t._v(" method, so we can see what our objects look like from different angles.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Update the light")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" old_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" old_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("This will have the light rotate around the origin one degree every frame.")]),t._v(" "),n("h2",{attrs:{id:"seeing-the-light"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#seeing-the-light"}},[t._v("#")]),t._v(" Seeing the light")]),t._v(" "),n("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 "),n("code",[t._v("create_render_pipeline()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vs_main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" vertex_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fs_main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" color_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n blend"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n alpha"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendComponent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendComponent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrites")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n primitive"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n strip_index_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cull_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::DEPTH_CLIP_CONTROL")]),t._v("\n unclipped_depth"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::CONSERVATIVE_RASTERIZATION")]),t._v("\n conservative"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" depth_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("format"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DepthStencilState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_write_enabled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_compare"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompareFunction")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Less")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n stencil"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StencilState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bias"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DepthBiasState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multisample"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mask"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_to_coverage_enabled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multiview"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We also need to change "),n("code",[t._v("State::new()")]),t._v(" to use this function.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Normal Shader"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We're going to need to modify "),n("code",[t._v("model::DrawModel")]),t._v(" to use our "),n("code",[t._v("light_bind_group")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("With that done we can create another render pipeline for our light.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" light_render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light Pipeline Layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("light_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" shader "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Light Shader"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderSource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"light.wgsl"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("I chose to create a separate layout for the "),n("code",[t._v("light_render_pipeline")]),t._v(", as it doesn't need all the resources that the regular "),n("code",[t._v("render_pipeline")]),t._v(" needs (main just the textures).")]),t._v(" "),n("p",[t._v("With that in place, we need to write the actual shaders.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// light.wgsl\n// Vertex shader\n\nstruct Camera {\n view_proj: mat4x4,\n}\n@group(0) @binding(0)\nvar camera: Camera;\n\nstruct Light {\n position: vec3,\n color: vec3,\n}\n@group(1) @binding(0)\nvar light: Light;\n\nstruct VertexInput {\n @location(0) position: vec3,\n};\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) color: vec3,\n};\n\n@vertex\nfn vs_main(\n model: VertexInput,\n) -> VertexOutput {\n let scale = 0.25;\n var out: VertexOutput;\n out.clip_position = camera.view_proj * vec4(model.position * scale + light.position, 1.0);\n out.color = light.color;\n return out;\n}\n\n// Fragment shader\n\n@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n return vec4(in.color, 1.0);\n}\n")])])]),n("p",[t._v("Now we could manually implement the draw code for the light in "),n("code",[t._v("render()")]),t._v(", but to keep with the pattern we developed, let's create a new trait called "),n("code",[t._v("DrawLight")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawLight")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawLight")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_light_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Finally, we want to add Light rendering to our render passes.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("crate")]),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawLight")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_light_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("With all that, we'll end up with something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(505),alt:"./light-in-scene.png"}})]),t._v(" "),n("h2",{attrs:{id:"ambient-lighting"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#ambient-lighting"}},[t._v("#")]),t._v(" Ambient Lighting")]),t._v(" "),n("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. Actually modeling this interaction is computationally expensive, so we cheat. We define an ambient lighting value that stands for the light bouncing off other parts of the scene to light our objects.")]),t._v(" "),n("p",[t._v("The ambient part is based on the light color as well as the object color. We've already added our "),n("code",[t._v("light_bind_group")]),t._v(", so we just need to use it in our shader. In "),n("code",[t._v("shader.wgsl")]),t._v(", add the following below the texture uniforms.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct Light {\n position: vec3,\n color: vec3,\n}\n@group(2) @binding(0)\nvar light: Light;\n")])])]),n("p",[t._v("Then we need to update our main shader code to calculate and use the ambient color value.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n let object_color: vec4 = textureSample(t_diffuse, s_diffuse, in.tex_coords);\n \n // We don't need (or want) much ambient light, so 0.1 is fine\n let ambient_strength = 0.1;\n let ambient_color = light.color * ambient_strength;\n\n let result = ambient_color * object_color.xyz;\n\n return vec4(result, object_color.a);\n}\n")])])]),n("p",[t._v("With that, we should get something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(506),alt:"./ambient_lighting.png"}})]),t._v(" "),n("h2",{attrs:{id:"diffuse-lighting"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#diffuse-lighting"}},[t._v("#")]),t._v(" Diffuse Lighting")]),t._v(" "),n("p",[t._v("Remember the normal vectors that were included with 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 vector using the dot product to get the cosine of the angle between them.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(507),alt:"./normal_diagram.png"}})]),t._v(" "),n("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(" "),n("p",[t._v("We're going to need to pull in the normal vector into our "),n("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct VertexInput {\n @location(0) position: vec3,\n @location(1) tex_coords: vec2,\n @location(2) normal: vec3, // NEW!\n};\n")])])]),n("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(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) tex_coords: vec2,\n @location(1) world_normal: vec3,\n @location(2) world_position: vec3,\n};\n")])])]),n("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(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("@vertex\nfn vs_main(\n model: VertexInput,\n instance: InstanceInput,\n) -> VertexOutput {\n let model_matrix = mat4x4(\n instance.model_matrix_0,\n instance.model_matrix_1,\n instance.model_matrix_2,\n instance.model_matrix_3,\n );\n var out: VertexOutput;\n out.tex_coords = model.tex_coords;\n out.world_normal = model.normal;\n var world_position: vec4 = model_matrix * vec4(model.position, 1.0);\n out.world_position = world_position.xyz;\n out.clip_position = camera.view_proj * world_position;\n return out;\n}\n")])])]),n("p",[t._v("With that, we can do the actual calculation. Below the "),n("code",[t._v("ambient_color")]),t._v(" calculation, but above "),n("code",[t._v("result")]),t._v(", add the following.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let light_dir = normalize(light.position - in.world_position);\n\nlet diffuse_strength = max(dot(in.world_normal, light_dir), 0.0);\nlet diffuse_color = light.color * diffuse_strength;\n")])])]),n("p",[t._v("Now we can include the "),n("code",[t._v("diffuse_color")]),t._v(" in the "),n("code",[t._v("result")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let result = (ambient_color + diffuse_color) * object_color.xyz;\n")])])]),n("p",[t._v("With that, we get something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(508),alt:"./ambient_diffuse_wrong.png"}})]),t._v(" "),n("h2",{attrs:{id:"the-normal-matrix"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-normal-matrix"}},[t._v("#")]),t._v(" The normal matrix")]),t._v(" "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In the loop we create the instances in")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("180.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We'll also remove the "),n("code",[t._v("ambient_color")]),t._v(" from our lighting "),n("code",[t._v("result")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let result = (diffuse_color) * object_color.xyz;\n")])])]),n("p",[t._v("That should give us something that looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(509),alt:"./diffuse_wrong.png"}})]),t._v(" "),n("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(" "),n("p",[n("img",{attrs:{src:a(510),alt:"./normal_not_rotated.png"}})]),t._v(" "),n("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(" "),n("p",[t._v("We could compute the normal matrix in the vertex shader, but that would involve inverting the "),n("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(" "),n("p",[t._v("Instead, we're going to add a "),n("code",[t._v("normal")]),t._v(" matrix field to "),n("code",[t._v("InstanceRaw")]),t._v(". Instead of inverting the model matrix, we'll just be using the instance's rotation to create a "),n("code",[t._v("Matrix3")]),t._v(".")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("We are using "),n("code",[t._v("Matrix3")]),t._v(" instead of "),n("code",[t._v("Matrix4")]),t._v(" as we only really need the rotation component of the matrix.")])]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[allow(dead_code)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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 "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This means that our shaders will only change to use the next")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// instance when the shader starts processing a new instance")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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 "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A mat4 takes up 4 vertex slots as it is technically 4 vec4s. We need to define a slot")]),t._v("\n "),n("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 "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("12")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("9")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("19")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("22")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to modify "),n("code",[t._v("Instance")]),t._v(" to create the normal matrix.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("to_raw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" model "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_translation")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now we need to reconstruct the normal matrix in the vertex shader.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct InstanceInput {\n @location(5) model_matrix_0: vec4,\n @location(6) model_matrix_1: vec4,\n @location(7) model_matrix_2: vec4,\n @location(8) model_matrix_3: vec4,\n // NEW!\n @location(9) normal_matrix_0: vec3,\n @location(10) normal_matrix_1: vec3,\n @location(11) normal_matrix_2: vec3,\n};\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) tex_coords: vec2,\n @location(1) world_normal: vec3,\n @location(2) world_position: vec3,\n};\n\n@vertex\nfn vs_main(\n model: VertexInput,\n instance: InstanceInput,\n) -> VertexOutput {\n let model_matrix = mat4x4(\n instance.model_matrix_0,\n instance.model_matrix_1,\n instance.model_matrix_2,\n instance.model_matrix_3,\n );\n // NEW!\n let normal_matrix = mat3x3(\n instance.normal_matrix_0,\n instance.normal_matrix_1,\n instance.normal_matrix_2,\n );\n var out: VertexOutput;\n out.tex_coords = model.tex_coords;\n out.world_normal = normal_matrix * model.normal; // UPDATED!\n var world_position: vec4 = model_matrix * vec4(model.position, 1.0);\n out.world_position = world_position.xyz;\n out.clip_position = camera.view_proj * world_position;\n return out;\n}\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("I'm currently doing things in "),n("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"),n("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 "),n("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(" "),n("p",[t._v("There are advantages to using view space. The main one is when you have massive worlds doing lighting and other calculations in model spacing 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(" "),n("p",[t._v("With that change, our lighting now looks correct.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(511),alt:"./diffuse_right.png"}})]),t._v(" "),n("p",[t._v("Bringing back our other objects, and adding the ambient lighting gives us this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(512),alt:"./ambient_diffuse_lighting.png"}}),t._v(";")]),t._v(" "),n("div",{staticClass:"note"},[n("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 pointed shared this code with me that does the trick:")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("out.world_normal = (model_matrix * vec4(model.normal, 0.0)).xyz;\n")])])]),n("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(" "),n("p",[t._v("The scaling factor "),n("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(" "),n("p",[n("img",{attrs:{src:a(513),alt:"./normal-scale-issue.png"}})])]),t._v(" "),n("h2",{attrs:{id:"specular-lighting"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#specular-lighting"}},[t._v("#")]),t._v(" Specular Lighting")]),t._v(" "),n("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(" "),n("p",[n("img",{attrs:{src:a(514),alt:"./specular_diagram.png"}})]),t._v(" "),n("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(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct Camera {\n view_pos: vec4,\n view_proj: mat4x4,\n}\n@group(1) @binding(0)\nvar camera: Camera;\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("Don't forget to update the "),n("code",[t._v("Camera")]),t._v(" struct in "),n("code",[t._v("light.wgsl")]),t._v(" as well, as if it doesn't match the "),n("code",[t._v("CameraUniform")]),t._v(" struct in rust, the light will render wrong.")])]),t._v(" "),n("p",[t._v("We're going to need to update the "),n("code",[t._v("CameraUniform")]),t._v(" struct as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_proj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("identity")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We're using Vector4 because of the uniforms 16 byte spacing requirement")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_homogeneous")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("build_view_projection_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Since we want to use our uniforms in the fragment shader now, we need to change its visibility.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutBinding")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Updated!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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 "),n("code",[t._v("reflect_dir")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// shader.wgsl\n// In the fragment shader...\nlet view_dir = normalize(camera.view_pos.xyz - in.world_position);\nlet reflect_dir = reflect(-light_dir, in.world_normal);\n")])])]),n("p",[t._v("Then we use the dot product to calculate the "),n("code",[t._v("specular_strength")]),t._v(" and use that to compute the "),n("code",[t._v("specular_color")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let specular_strength = pow(max(dot(view_dir, reflect_dir), 0.0), 32.0);\nlet specular_color = specular_strength * light.color;\n")])])]),n("p",[t._v("Finally, we add that to the result.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let result = (ambient_color + diffuse_color + specular_color) * object_color.xyz;\n")])])]),n("p",[t._v("With that, you should have something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(515),alt:"./ambient_diffuse_specular_lighting.png"}})]),t._v(" "),n("p",[t._v("If we just look at the "),n("code",[t._v("specular_color")]),t._v(" on its own we get this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(516),alt:"./specular_lighting.png"}})]),t._v(" "),n("h2",{attrs:{id:"the-half-direction"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-half-direction"}},[t._v("#")]),t._v(" The half direction")]),t._v(" "),n("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 "),n("a",{attrs:{href:"https://learnopengl.com/Advanced-Lighting/Advanced-Lighting",target:"_blank",rel:"noopener noreferrer"}},[t._v("certain circumstances"),n("OutboundLink")],1),t._v(". The Blinn part of Blinn-Phong comes from the realization that if you add the "),n("code",[t._v("view_dir")]),t._v(", and "),n("code",[t._v("light_dir")]),t._v(" together, normalize the result and use the dot product of that and the "),n("code",[t._v("normal")]),t._v(", you get roughly the same results without the issues that using "),n("code",[t._v("reflect_dir")]),t._v(" had.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let view_dir = normalize(camera.view_pos.xyz - in.world_position);\nlet half_dir = normalize(view_dir + light_dir);\n\nlet specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);\n")])])]),n("p",[t._v("It's hard to tell the difference, but here are the results.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(517),alt:"./half_dir.png"}})]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial10_lighting"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/16.ce42724f.js b/assets/js/17.fc260ba0.js similarity index 99% rename from assets/js/16.ce42724f.js rename to assets/js/17.fc260ba0.js index 8c966fee..bea45c85 100644 --- a/assets/js/16.ce42724f.js +++ b/assets/js/17.fc260ba0.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{516:function(t,s,a){t.exports=a.p+"assets/img/cube-normal.025f2b53.png"},517:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_wrong.4b8065ba.png"},518:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_specular_lighting.76386148.png"},519: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="},520:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_correct.c1f96315.png"},521:function(t,s,a){t.exports=a.p+"assets/img/no_srgb.2f9f1450.png"},522:function(t,s,a){t.exports=a.p+"assets/img/debug_material.b374492b.png"},583:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"normal-mapping"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#normal-mapping"}},[t._v("#")]),t._v(" Normal Mapping")]),t._v(" "),n("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 be would hard to know where to add new polygons. This is where normal mapping comes in.")]),t._v(" "),n("p",[t._v("Remember in "),n("RouterLink",{attrs:{to:"/beginner/tutorial7-instancing/#a-different-way-textures"}},[t._v("the instancing tutorial")]),t._v(", we experimented with storing instance data in a texture? 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(" "),n("p",[t._v("The brick texture I found came with a normal map. Let's take a look at it!")]),t._v(" "),n("p",[n("img",{attrs:{src:a(516),alt:"./cube-normal.png"}})]),t._v(" "),n("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(" "),n("p",[t._v("We'll need to modify our "),n("code",[t._v("Material")]),t._v(" struct in "),n("code",[t._v("model.rs")]),t._v(" to include a "),n("code",[t._v("normal_texture")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Material")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll have to update the "),n("code",[t._v("texture_bind_group_layout")]),t._v(" to include the normal map as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// normal map")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n multisampled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_type"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureSampleType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filterable"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerBindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Filtering")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_bind_group_layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We'll need to actually load the normal map. We'll do this in the loop where we create the materials in the "),n("code",[t._v("load_model()")]),t._v(" function in "),n("code",[t._v("resources.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// resources.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("You'll notice I'm using a "),n("code",[t._v("Material::new()")]),t._v(" function we didn't have previously. Here's the code for that:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now we can use the texture in the fragment shader.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Fragment shader\n\n@group(0) @binding(0)\nvar t_diffuse: texture_2d;\n@group(0)@binding(1)\nvar s_diffuse: sampler;\n@group(0)@binding(2)\nvar t_normal: texture_2d;\n@group(0) @binding(3)\nvar s_normal: sampler;\n\n@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n let object_color: vec4 = textureSample(t_diffuse, s_diffuse, in.tex_coords);\n let object_normal: vec4 = textureSample(t_normal, s_normal, in.tex_coords);\n \n // We don't need (or want) much ambient light, so 0.1 is fine\n let ambient_strength = 0.1;\n let ambient_color = light.color * ambient_strength;\n\n // Create the lighting vectors\n let tangent_normal = object_normal.xyz * 2.0 - 1.0;\n let light_dir = normalize(light.position - in.world_position);\n let view_dir = normalize(camera.view_pos.xyz - in.world_position);\n let half_dir = normalize(view_dir + light_dir);\n\n let diffuse_strength = max(dot(tangent_normal, light_dir), 0.0);\n let diffuse_color = light.color * diffuse_strength;\n\n let specular_strength = pow(max(dot(tangent_normal, half_dir), 0.0), 32.0);\n let specular_color = specular_strength * light.color;\n\n let result = (ambient_color + diffuse_color + specular_color) * object_color.xyz;\n\n return vec4(result, object_color.a);\n}\n")])])]),n("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(" "),n("p",[n("img",{attrs:{src:a(517),alt:""}}),t._v(" "),n("img",{attrs:{src:a(518),alt:""}})]),t._v(" "),n("p",[t._v("Parts of the scene are dark when they should be lit up, and vice versa.")]),t._v(" "),n("h2",{attrs:{id:"tangent-space-to-world-space"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#tangent-space-to-world-space"}},[t._v("#")]),t._v(" Tangent Space to World Space")]),t._v(" "),n("p",[t._v("I mentioned briefly in the "),n("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 '),n("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 "),n("code",[t._v("tangent space")]),t._v(".")],1),t._v(" "),n("p",[t._v("If we remember the "),n("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 "),n("code",[t._v("tangent space")]),t._v(" into "),n("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(" "),n("p",[t._v("We can create a matrix that represents a coordinate system using 3 vectors that are perpendicular (or orthonormal) to each other. Basically, we define the x, y, and z axes of our coordinate system.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let coordinate_system = mat3x3(\n vec3(1, 0, 0), // x axis (right)\n vec3(0, 1, 0), // y axis (up)\n vec3(0, 0, 1) // z axis (forward)\n);\n")])])]),n("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(" "),n("h2",{attrs:{id:"the-tangent-and-the-bitangent"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-tangent-and-the-bitangent"}},[t._v("#")]),t._v(" The tangent, and the bitangent")]),t._v(" "),n("p",[t._v("We have one of the 3 vectors we need, the normal. What about the others? These are the tangent and bitangent vectors. A tangent represents any vector that is 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(" "),n("p",[t._v("Some model formats include the tanget 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(" "),n("p",[n("img",{attrs:{src:a(519),alt:""}})]),t._v(" "),n("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 "),n("code",[t._v("ModelVertex")]),t._v(" struct in "),n("code",[t._v("model.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll need to upgrade our "),n("code",[t._v("VertexBufferLayout")]),t._v(" as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tangent and bitangent")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now we can calculate the new tangent and bitangent vectors. Update the mesh generation in "),n("code",[t._v("load_model()")]),t._v(" in "),n("code",[t._v("resource.rs")]),t._v(" to use the following code:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll calculate these later")]),t._v("\n tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" indices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" triangles_included "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vec!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Calculate tangents and bitangets. We're going to")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// use the triangles, so we need to loop through the")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// indices in chunks of 3")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" c "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("chunks")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Calculate the edges of the triangle")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This will give us a direction to calculate the")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// tangent and bitangent")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_uv1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_uv2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Solving the following system of equations will")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// give us the tangent and bitangent.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// delta_pos1 = delta_uv1.x * T + delta_u.y * B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// delta_pos2 = delta_uv2.x * T + delta_uv2.y * B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Luckily, the place I found this equation provided")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the solution!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" r "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We flip the bitangent to enable right-handed normal")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// maps with wgpu texture coordinate system")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Used to average the tangents/bitangents")]),t._v("\n triangles_included"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangles_included"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangles_included"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Average the tangents/bitangents")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" triangles_included"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" denom "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" v "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" denom"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" denom"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"world-space-to-tangent-space"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#world-space-to-tangent-space"}},[t._v("#")]),t._v(" World Space to Tangent Space")]),t._v(" "),n("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 "),n("code",[t._v("VertexInput")]),t._v(" to include the tangent and bitangents we calculated earlier.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct VertexInput {\n @location(0) position: vec3,\n @location(1) tex_coords: vec2,\n @location(2) normal: vec3,\n @location(3) tangent: vec3,\n @location(4) bitangent: vec3,\n};\n")])])]),n("p",[t._v("Next, we'll construct the "),n("code",[t._v("tangent_matrix")]),t._v(" and then transform the vertex's light and view position into tangent space.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct VertexOutput {\n @builtin(position) clip_position: vec4;\n @location(0) tex_coords: vec2;\n // UPDATED!\n @location(1) tangent_position: vec3;\n @location(2) tangent_light_position: vec3;\n @location(3) tangent_view_position: vec3;\n};\n\n@vertex\nfn vs_main(\n model: VertexInput,\n instance: InstanceInput,\n) -> VertexOutput {\n // ...\n let normal_matrix = mat3x3(\n instance.normal_matrix_0,\n instance.normal_matrix_1,\n instance.normal_matrix_2,\n );\n\n // Construct the tangent matrix\n let world_normal = normalize(normal_matrix * model.normal);\n let world_tangent = normalize(normal_matrix * model.tangent);\n let world_bitangent = normalize(normal_matrix * model.bitangent);\n let tangent_matrix = transpose(mat3x3(\n world_tangent,\n world_bitangent,\n world_normal,\n ));\n\n let world_position = model_matrix * vec4(model.position, 1.0);\n\n var out: VertexOutput;\n out.clip_position = camera.view_proj * world_position;\n out.tex_coords = model.tex_coords;\n out.tangent_position = tangent_matrix * world_position.xyz;\n out.tangent_view_position = tangent_matrix * camera.view_pos.xyz;\n out.tangent_light_position = tangent_matrix * light.position;\n return out;\n}\n")])])]),n("p",[t._v("Finally, we'll update the fragment shader to use these transformed lighting values.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n // Sample textures..\n\n // Create the lighting vectors\n let tangent_normal = object_normal.xyz * 2.0 - 1.0;\n let light_dir = normalize(in.tangent_light_position - in.tangent_position);\n let view_dir = normalize(in.tangent_view_position - in.tangent_position);\n\n // Perform lighting calculations...\n}\n")])])]),n("p",[t._v("We get the following from this calculation.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(520),alt:""}})]),t._v(" "),n("h2",{attrs:{id:"srgb-and-normal-textures"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#srgb-and-normal-textures"}},[t._v("#")]),t._v(" Srgb and normal textures")]),t._v(" "),n("p",[t._v("We've been using "),n("code",[t._v("Rgba8UnormSrgb")]),t._v(" for all our textures. The "),n("code",[t._v("Srgb")]),t._v(" bit specifies that we will be using "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/SRGB",target:"_blank",rel:"noopener noreferrer"}},[t._v("standard red green blue color space"),n("OutboundLink")],1),t._v(". This is also known as linear color space. Linear color space has less color density. Even so, it is often used for diffuse textures, as they are typically made in "),n("code",[t._v("Srgb")]),t._v(" color space.")]),t._v(" "),n("p",[t._v("Normal textures aren't made with "),n("code",[t._v("Srgb")]),t._v(". Using "),n("code",[t._v("Rgba8UnormSrgb")]),t._v(" can change how the GPU samples the texture. This can make the resulting simulation "),n("a",{attrs:{href:"https://medium.com/@bgolus/generating-perfect-normal-maps-for-unity-f929e673fc57#b86c",target:"_blank",rel:"noopener noreferrer"}},[t._v("less accurate"),n("OutboundLink")],1),t._v(". We can avoid these issues by using "),n("code",[t._v("Rgba8Unorm")]),t._v(" when we create the texture. Let's add an "),n("code",[t._v("is_normal_map")]),t._v(" method to our "),n("code",[t._v("Texture")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DynamicImage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandBuffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("failure"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" is_normal_map "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8Unorm")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sampler "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cmd_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll need to propagate this change to the other methods that use this.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to update "),n("code",[t._v("resource.rs")]),t._v(" as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_binary")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UDPATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n\n materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),n("p",[t._v("That gives us the following.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(521),alt:""}})]),t._v(" "),n("h2",{attrs:{id:"unrelated-stuff"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#unrelated-stuff"}},[t._v("#")]),t._v(" Unrelated stuff")]),t._v(" "),n("p",[t._v("I wanted to mess around with other materials so I added a "),n("code",[t._v("draw_model_instanced_with_material()")]),t._v(" to the "),n("code",[t._v("DrawModel")]),t._v(" trait.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced_with_material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced_with_material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("I found a cobblestone texture with a matching normal map and created a "),n("code",[t._v("debug_material")]),t._v(" for that.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" debug_material "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../res/cobble-diffuse.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../res/cobble-normal.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/alt-diffuse.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" normal_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/alt-normal.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"alt-material"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[allow(dead_code)]")]),t._v("\n debug_material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Then to render with the "),n("code",[t._v("debug_material")]),t._v(" I used the "),n("code",[t._v("draw_model_instanced_with_material()")]),t._v(" that I created.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced_with_material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("debug_material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("That gives us something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(522),alt:""}})]),t._v(" "),n("p",[t._v("You can find the textures I use in the Github Repository.")]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial11_normals"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{518:function(t,s,a){t.exports=a.p+"assets/img/cube-normal.025f2b53.png"},519:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_wrong.4b8065ba.png"},520:function(t,s,a){t.exports=a.p+"assets/img/ambient_diffuse_specular_lighting.76386148.png"},521: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="},522:function(t,s,a){t.exports=a.p+"assets/img/normal_mapping_correct.c1f96315.png"},523:function(t,s,a){t.exports=a.p+"assets/img/no_srgb.2f9f1450.png"},524:function(t,s,a){t.exports=a.p+"assets/img/debug_material.b374492b.png"},586:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"normal-mapping"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#normal-mapping"}},[t._v("#")]),t._v(" Normal Mapping")]),t._v(" "),n("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 be would hard to know where to add new polygons. This is where normal mapping comes in.")]),t._v(" "),n("p",[t._v("Remember in "),n("RouterLink",{attrs:{to:"/beginner/tutorial7-instancing/#a-different-way-textures"}},[t._v("the instancing tutorial")]),t._v(", we experimented with storing instance data in a texture? 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(" "),n("p",[t._v("The brick texture I found came with a normal map. Let's take a look at it!")]),t._v(" "),n("p",[n("img",{attrs:{src:a(518),alt:"./cube-normal.png"}})]),t._v(" "),n("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(" "),n("p",[t._v("We'll need to modify our "),n("code",[t._v("Material")]),t._v(" struct in "),n("code",[t._v("model.rs")]),t._v(" to include a "),n("code",[t._v("normal_texture")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Material")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll have to update the "),n("code",[t._v("texture_bind_group_layout")]),t._v(" to include the normal map as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// normal map")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n multisampled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_type"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureSampleType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filterable"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerBindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Filtering")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_bind_group_layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We'll need to actually load the normal map. We'll do this in the loop where we create the materials in the "),n("code",[t._v("load_model()")]),t._v(" function in "),n("code",[t._v("resources.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// resources.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("You'll notice I'm using a "),n("code",[t._v("Material::new()")]),t._v(" function we didn't have previously. Here's the code for that:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now we can use the texture in the fragment shader.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Fragment shader\n\n@group(0) @binding(0)\nvar t_diffuse: texture_2d;\n@group(0)@binding(1)\nvar s_diffuse: sampler;\n@group(0)@binding(2)\nvar t_normal: texture_2d;\n@group(0) @binding(3)\nvar s_normal: sampler;\n\n@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n let object_color: vec4 = textureSample(t_diffuse, s_diffuse, in.tex_coords);\n let object_normal: vec4 = textureSample(t_normal, s_normal, in.tex_coords);\n \n // We don't need (or want) much ambient light, so 0.1 is fine\n let ambient_strength = 0.1;\n let ambient_color = light.color * ambient_strength;\n\n // Create the lighting vectors\n let tangent_normal = object_normal.xyz * 2.0 - 1.0;\n let light_dir = normalize(light.position - in.world_position);\n let view_dir = normalize(camera.view_pos.xyz - in.world_position);\n let half_dir = normalize(view_dir + light_dir);\n\n let diffuse_strength = max(dot(tangent_normal, light_dir), 0.0);\n let diffuse_color = light.color * diffuse_strength;\n\n let specular_strength = pow(max(dot(tangent_normal, half_dir), 0.0), 32.0);\n let specular_color = specular_strength * light.color;\n\n let result = (ambient_color + diffuse_color + specular_color) * object_color.xyz;\n\n return vec4(result, object_color.a);\n}\n")])])]),n("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(" "),n("p",[n("img",{attrs:{src:a(519),alt:""}}),t._v(" "),n("img",{attrs:{src:a(520),alt:""}})]),t._v(" "),n("p",[t._v("Parts of the scene are dark when they should be lit up, and vice versa.")]),t._v(" "),n("h2",{attrs:{id:"tangent-space-to-world-space"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#tangent-space-to-world-space"}},[t._v("#")]),t._v(" Tangent Space to World Space")]),t._v(" "),n("p",[t._v("I mentioned briefly in the "),n("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 '),n("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 "),n("code",[t._v("tangent space")]),t._v(".")],1),t._v(" "),n("p",[t._v("If we remember the "),n("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 "),n("code",[t._v("tangent space")]),t._v(" into "),n("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(" "),n("p",[t._v("We can create a matrix that represents a coordinate system using 3 vectors that are perpendicular (or orthonormal) to each other. Basically, we define the x, y, and z axes of our coordinate system.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("let coordinate_system = mat3x3(\n vec3(1, 0, 0), // x axis (right)\n vec3(0, 1, 0), // y axis (up)\n vec3(0, 0, 1) // z axis (forward)\n);\n")])])]),n("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(" "),n("h2",{attrs:{id:"the-tangent-and-the-bitangent"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-tangent-and-the-bitangent"}},[t._v("#")]),t._v(" The tangent, and the bitangent")]),t._v(" "),n("p",[t._v("We have one of the 3 vectors we need, the normal. What about the others? These are the tangent and bitangent vectors. A tangent represents any vector that is 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(" "),n("p",[t._v("Some model formats include the tanget 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(" "),n("p",[n("img",{attrs:{src:a(521),alt:""}})]),t._v(" "),n("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 "),n("code",[t._v("ModelVertex")]),t._v(" struct in "),n("code",[t._v("model.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll need to upgrade our "),n("code",[t._v("VertexBufferLayout")]),t._v(" as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tangent and bitangent")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("11")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now we can calculate the new tangent and bitangent vectors. Update the mesh generation in "),n("code",[t._v("load_model()")]),t._v(" in "),n("code",[t._v("resource.rs")]),t._v(" to use the following code:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll calculate these later")]),t._v("\n tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" indices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" triangles_included "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vec!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Calculate tangents and bitangets. We're going to")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// use the triangles, so we need to loop through the")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// indices in chunks of 3")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" c "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("chunks")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" v2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pos2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector2")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Calculate the edges of the triangle")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This will give us a direction to calculate the")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// tangent and bitangent")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_uv1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" delta_uv2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Solving the following system of equations will")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// give us the tangent and bitangent.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// delta_pos1 = delta_uv1.x * T + delta_u.y * B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// delta_pos2 = delta_uv2.x * T + delta_uv2.y * B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Luckily, the place I found this equation provided")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the solution!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" r "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We flip the bitangent to enable right-handed normal")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// maps with wgpu texture coordinate system")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Used to average the tangents/bitangents")]),t._v("\n triangles_included"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangles_included"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangles_included"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Average the tangents/bitangents")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" triangles_included"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" denom "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" v "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" denom"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" denom"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"world-space-to-tangent-space"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#world-space-to-tangent-space"}},[t._v("#")]),t._v(" World Space to Tangent Space")]),t._v(" "),n("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 "),n("code",[t._v("VertexInput")]),t._v(" to include the tangent and bitangents we calculated earlier.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct VertexInput {\n @location(0) position: vec3,\n @location(1) tex_coords: vec2,\n @location(2) normal: vec3,\n @location(3) tangent: vec3,\n @location(4) bitangent: vec3,\n};\n")])])]),n("p",[t._v("Next, we'll construct the "),n("code",[t._v("tangent_matrix")]),t._v(" and then transform the vertex's light and view position into tangent space.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct VertexOutput {\n @builtin(position) clip_position: vec4;\n @location(0) tex_coords: vec2;\n // UPDATED!\n @location(1) tangent_position: vec3;\n @location(2) tangent_light_position: vec3;\n @location(3) tangent_view_position: vec3;\n};\n\n@vertex\nfn vs_main(\n model: VertexInput,\n instance: InstanceInput,\n) -> VertexOutput {\n // ...\n let normal_matrix = mat3x3(\n instance.normal_matrix_0,\n instance.normal_matrix_1,\n instance.normal_matrix_2,\n );\n\n // Construct the tangent matrix\n let world_normal = normalize(normal_matrix * model.normal);\n let world_tangent = normalize(normal_matrix * model.tangent);\n let world_bitangent = normalize(normal_matrix * model.bitangent);\n let tangent_matrix = transpose(mat3x3(\n world_tangent,\n world_bitangent,\n world_normal,\n ));\n\n let world_position = model_matrix * vec4(model.position, 1.0);\n\n var out: VertexOutput;\n out.clip_position = camera.view_proj * world_position;\n out.tex_coords = model.tex_coords;\n out.tangent_position = tangent_matrix * world_position.xyz;\n out.tangent_view_position = tangent_matrix * camera.view_pos.xyz;\n out.tangent_light_position = tangent_matrix * light.position;\n return out;\n}\n")])])]),n("p",[t._v("Finally, we'll update the fragment shader to use these transformed lighting values.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n // Sample textures..\n\n // Create the lighting vectors\n let tangent_normal = object_normal.xyz * 2.0 - 1.0;\n let light_dir = normalize(in.tangent_light_position - in.tangent_position);\n let view_dir = normalize(in.tangent_view_position - in.tangent_position);\n\n // Perform lighting calculations...\n}\n")])])]),n("p",[t._v("We get the following from this calculation.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(522),alt:""}})]),t._v(" "),n("h2",{attrs:{id:"srgb-and-normal-textures"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#srgb-and-normal-textures"}},[t._v("#")]),t._v(" Srgb and normal textures")]),t._v(" "),n("p",[t._v("We've been using "),n("code",[t._v("Rgba8UnormSrgb")]),t._v(" for all our textures. The "),n("code",[t._v("Srgb")]),t._v(" bit specifies that we will be using "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/SRGB",target:"_blank",rel:"noopener noreferrer"}},[t._v("standard red green blue color space"),n("OutboundLink")],1),t._v(". This is also known as linear color space. Linear color space has less color density. Even so, it is often used for diffuse textures, as they are typically made in "),n("code",[t._v("Srgb")]),t._v(" color space.")]),t._v(" "),n("p",[t._v("Normal textures aren't made with "),n("code",[t._v("Srgb")]),t._v(". Using "),n("code",[t._v("Rgba8UnormSrgb")]),t._v(" can change how the GPU samples the texture. This can make the resulting simulation "),n("a",{attrs:{href:"https://medium.com/@bgolus/generating-perfect-normal-maps-for-unity-f929e673fc57#b86c",target:"_blank",rel:"noopener noreferrer"}},[t._v("less accurate"),n("OutboundLink")],1),t._v(". We can avoid these issues by using "),n("code",[t._v("Rgba8Unorm")]),t._v(" when we create the texture. Let's add an "),n("code",[t._v("is_normal_map")]),t._v(" method to our "),n("code",[t._v("Texture")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DynamicImage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandBuffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("failure"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" is_normal_map "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8Unorm")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sampler "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cmd_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll need to propagate this change to the other methods that use this.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to update "),n("code",[t._v("resource.rs")]),t._v(" as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_normal_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_binary")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UDPATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n\n materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),n("p",[t._v("That gives us the following.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(523),alt:""}})]),t._v(" "),n("h2",{attrs:{id:"unrelated-stuff"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#unrelated-stuff"}},[t._v("#")]),t._v(" Unrelated stuff")]),t._v(" "),n("p",[t._v("I wanted to mess around with other materials so I added a "),n("code",[t._v("draw_model_instanced_with_material()")]),t._v(" to the "),n("code",[t._v("DrawModel")]),t._v(" trait.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced_with_material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced_with_material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("I found a cobblestone texture with a matching normal map and created a "),n("code",[t._v("debug_material")]),t._v(" for that.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" debug_material "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../res/cobble-diffuse.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../res/cobble-normal.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/alt-diffuse.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" normal_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/alt-normal.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"alt-material"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" normal_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[allow(dead_code)]")]),t._v("\n debug_material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Then to render with the "),n("code",[t._v("debug_material")]),t._v(" I used the "),n("code",[t._v("draw_model_instanced_with_material()")]),t._v(" that I created.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced_with_material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("debug_material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("That gives us something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(524),alt:""}})]),t._v(" "),n("p",[t._v("You can find the textures I use in the Github Repository.")]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial11_normals"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/17.a06f58e2.js b/assets/js/18.4a711d00.js similarity index 73% rename from assets/js/17.a06f58e2.js rename to assets/js/18.4a711d00.js index 420b28d4..4310dc32 100644 --- a/assets/js/17.a06f58e2.js +++ b/assets/js/18.4a711d00.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{420:function(t,r,e){var n=e(202),i=Math.floor,o=function(t,r){var e=t.length,c=i(e/2);return e<8?u(t,r):a(t,o(n(t,0,c),r),o(n(t,c),r),r)},u=function(t,r){for(var e,n,i=t.length,o=1;o0;)t[n]=t[--n];n!==o++&&(t[n]=e)}return t},a=function(t,r,e,n){for(var i=r.length,o=e.length,u=0,a=0;u3)){if(h)return!0;if(p)return p<603;var t,r,e,n,i="";for(t=65;t<76;t++){switch(r=String.fromCharCode(t),t){case 66:case 69:case 70:case 72:e=3;break;case 68:case 71:e=4;break;default:e=2}for(n=0;n<47;n++)g.push({k:r+n,v:e})}for(g.sort((function(t,r){return r.v-t.v})),n=0;nc(e)?1:-1}}(t)),e=i.length,n=0;n0?1:0})).slice(0,5)}}},i=e(23),o=Object(i.a)(n,(function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("div",[e("ul",t._l(t.recentFiles,(function(r,n){return e("li",{key:r},[e("a",{attrs:{href:n.path}},[t._v(t._s(n.title))])])})),0)])}),[],!1,null,null,null);r.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{421:function(t,r,e){var n=e(202),i=Math.floor,o=function(t,r){var e=t.length,c=i(e/2);return e<8?u(t,r):a(t,o(n(t,0,c),r),o(n(t,c),r),r)},u=function(t,r){for(var e,n,i=t.length,o=1;o0;)t[n]=t[--n];n!==o++&&(t[n]=e)}return t},a=function(t,r,e,n){for(var i=r.length,o=e.length,u=0,a=0;u3)){if(h)return!0;if(p)return p<603;var t,r,e,n,i="";for(t=65;t<76;t++){switch(r=String.fromCharCode(t),t){case 66:case 69:case 70:case 72:e=3;break;case 68:case 71:e=4;break;default:e=2}for(n=0;n<47;n++)g.push({k:r+n,v:e})}for(g.sort((function(t,r){return r.v-t.v})),n=0;nc(e)?1:-1}}(t)),e=i.length,n=0;n0?1:0})).slice(0,5)}}},i=e(23),o=Object(i.a)(n,(function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("div",[e("ul",t._l(t.recentFiles,(function(r,n){return e("li",{key:r},[e("a",{attrs:{href:n.path}},[t._v(t._s(n.title))])])})),0)])}),[],!1,null,null,null);r.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/18.76b2811f.js b/assets/js/19.067373fa.js similarity index 99% rename from assets/js/18.76b2811f.js rename to assets/js/19.067373fa.js index 2d5f30fa..289f2ae7 100644 --- a/assets/js/18.76b2811f.js +++ b/assets/js/19.067373fa.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{491:function(t,s,a){t.exports=a.p+"assets/img/happy-tree.bdff8a19.png"},492:function(t,s,a){t.exports=a.p+"assets/img/address_mode.66a7cd1a.png"},493:function(t,s,a){t.exports=a.p+"assets/img/upside-down.d50c3643.png"},494:function(t,s,a){t.exports=a.p+"assets/img/happy-tree-uv-coords.aa3b7d36.png"},495:function(t,s,a){t.exports=a.p+"assets/img/rightside-up.75f852e2.png"},576:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"textures-and-bind-groups"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#textures-and-bind-groups"}},[t._v("#")]),t._v(" Textures and bind groups")]),t._v(" "),n("p",[t._v("Up to this point, we have been drawing super simple shapes. While we can make a game with just triangles, trying to draw highly detailed objects would massively limit what devices could even run our game. However, we can get around this problem with "),n("strong",[t._v("textures")]),t._v(".")]),t._v(" "),n("p",[t._v("Textures are images 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(" "),n("h2",{attrs:{id:"loading-an-image-from-a-file"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#loading-an-image-from-a-file"}},[t._v("#")]),t._v(" Loading an image from a file")]),t._v(" "),n("p",[t._v("If we want to map an image to our mesh, we first need an image. Let's use this happy little tree:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(491),alt:"a happy tree"}})]),t._v(" "),n("p",[t._v("We'll use the "),n("a",{attrs:{href:"https://docs.rs/image",target:"_blank",rel:"noopener noreferrer"}},[t._v("image crate"),n("OutboundLink")],1),t._v(" to load our tree. Let's add it to our dependencies:")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies.image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.24"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("default-features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"jpeg"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),n("p",[t._v("The jpeg decoder that "),n("code",[t._v("image")]),t._v(" includes uses "),n("a",{attrs:{href:"https://docs.rs/rayon",target:"_blank",rel:"noopener noreferrer"}},[t._v("rayon"),n("OutboundLink")],1),t._v(" to speed up the decoding with threads. WASM doesn't support threads currently so we need to disable this so that our code won't crash when we try to load a jpeg on the web.")]),t._v(" "),n("div",{staticClass:"note"},[n("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 "),n("code",[t._v("image")]),t._v(" when building with "),n("code",[t._v("wasm-bindgen")]),t._v(". This will involve creating an "),n("code",[t._v("")]),t._v(" tag in Rust to get the image, and then a "),n("code",[t._v("")]),t._v(" to get the pixel data, but I'll leave this as an exercise for the reader.")])]),t._v(" "),n("p",[t._v("In "),n("code",[t._v("State")]),t._v("'s "),n("code",[t._v("new()")]),t._v(" method add the following just after configuring the "),n("code",[t._v("surface")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_image "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("diffuse_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_rgba "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_rgba8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Here we grab the bytes from our image file and load them into an image which is then converted into a "),n("code",[t._v("Vec")]),t._v(" of rgba bytes. We also save the image's dimensions for when we create the actual "),n("code",[t._v("Texture")]),t._v(".")]),t._v(" "),n("p",[t._v("Now, let's create the "),n("code",[t._v("Texture")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All textures are stored as 3D, we represent our 2D texture")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// by setting depth to 1.")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll talk about this a little later")]),t._v("\n sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TEXTURE_BINDING tells wgpu that we want to use this texture in shaders")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// COPY_DST means that we want to copy data to this texture")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_texture"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"getting-data-into-a-texture"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#getting-data-into-a-texture"}},[t._v("#")]),t._v(" Getting data into a Texture")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("Texture")]),t._v(" struct has no methods to interact with the data directly. However, we can use a method on the "),n("code",[t._v("queue")]),t._v(" we created earlier called "),n("code",[t._v("write_texture")]),t._v(" to load the texture in. Let's take a look at how we do that:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tells wgpu where to copy the pixel data")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The actual pixel data")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The layout of the texture")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("num"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("num"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("The old way of writing data to a texture was to copy the pixel data to a buffer and then copy it to the texture. Using "),n("code",[t._v("write_texture")]),t._v(" is a bit more efficient as it uses one buffer less - I'll leave it here though in case you need it.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Temp Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_buffer_copy_encoder"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nencoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_buffer_to_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n array_layer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nqueue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("bytes_per_row")]),t._v(" field needs some consideration. This value needs to be a multiple of 256. Check out "),n("RouterLink",{attrs:{to:"/showcase/gifs/#how-do-we-make-the-frames"}},[t._v("the gif tutorial")]),t._v(" for more details.")],1)]),t._v(" "),n("h2",{attrs:{id:"textureviews-and-samplers"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#textureviews-and-samplers"}},[t._v("#")]),t._v(" TextureViews and Samplers")]),t._v(" "),n("p",[t._v("Now that our texture has data in it, we need a way to use it. This is where a "),n("code",[t._v("TextureView")]),t._v(" and a "),n("code",[t._v("Sampler")]),t._v(" come in. A "),n("code",[t._v("TextureView")]),t._v(" offers us a "),n("em",[t._v("view")]),t._v(" into our texture. A "),n("code",[t._v("Sampler")]),t._v(" controls how the "),n("code",[t._v("Texture")]),t._v(" is "),n("em",[t._v("sampled")]),t._v(". Sampling works similar to the eyedropper tool in GIMP/Photoshop. Our program supplies a coordinate on the texture (known as a "),n("em",[t._v("texture coordinate")]),t._v("), and the sampler then returns the corresponding color based on the texture and some internal parameters.")]),t._v(" "),n("p",[t._v("Let's define our "),n("code",[t._v("diffuse_texture_view")]),t._v(" and "),n("code",[t._v("diffuse_sampler")]),t._v(" now:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We don't need to configure the texture view much, so let's")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let wgpu define it.")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture_view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_sampler "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n address_mode_u"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_w"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mag_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mipmap_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("address_mode_*")]),t._v(" parameters determine what to do if the sampler gets a texture coordinate that's outside the texture itself. We have a few options to choose from:")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("ClampToEdge")]),t._v(": Any texture coordinates outside the texture will return the color of the nearest pixel on the edges of the texture.")]),t._v(" "),n("li",[n("code",[t._v("Repeat")]),t._v(": The texture will repeat as texture coordinates exceed the texture's dimensions.")]),t._v(" "),n("li",[n("code",[t._v("MirrorRepeat")]),t._v(": Similar to "),n("code",[t._v("Repeat")]),t._v(", but the image will flip when going over boundaries.")])]),t._v(" "),n("p",[n("img",{attrs:{src:a(492),alt:"address_mode.png"}})]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("mag_filter")]),t._v(" and "),n("code",[t._v("min_filter")]),t._v(" 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(" "),n("p",[t._v("There are 2 options:")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("Linear")]),t._v(": Select two texels in each dimension and return a linear interpolation between their values.")]),t._v(" "),n("li",[n("code",[t._v("Nearest")]),t._v(": Return the value of the texel 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(" "),n("p",[t._v("Mipmaps are a complex topic and will require "),n("a",{attrs:{href:"/todo"}},[t._v("their own section in the future")]),t._v(". For now, we can say that "),n("code",[t._v("mipmap_filter")]),t._v(" functions similar to "),n("code",[t._v("(mag/min)_filter")]),t._v(" as it tells the sampler how to blend between mipmaps.")]),t._v(" "),n("p",[t._v("I'm using some defaults for the other fields. If you want to see what they are, check "),n("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.SamplerDescriptor.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("the wgpu docs"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("p",[t._v("All these different resources are nice and all, but they don't do us much good if we can't plug them in anywhere. This is where "),n("code",[t._v("BindGroup")]),t._v("s and "),n("code",[t._v("PipelineLayout")]),t._v("s come in.")]),t._v(" "),n("h2",{attrs:{id:"the-bindgroup"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-bindgroup"}},[t._v("#")]),t._v(" The BindGroup")]),t._v(" "),n("p",[t._v("A "),n("code",[t._v("BindGroup")]),t._v(" describes a set of resources and how they can be accessed by a shader. We create a "),n("code",[t._v("BindGroup")]),t._v(" using a "),n("code",[t._v("BindGroupLayout")]),t._v(". Let's make one of those first.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n multisampled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_type"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureSampleType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filterable"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This should match the filterable field of the")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// corresponding Texture entry above.")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerBindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Filtering")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_bind_group_layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Our "),n("code",[t._v("texture_bind_group_layout")]),t._v(" has two entries: one for a sampled texture at binding 0, and one for a sampler at binding 1. Both of these bindings are visible only to the fragment shader as specified by "),n("code",[t._v("FRAGMENT")]),t._v(". The possible values for this field are any bitwise combination of "),n("code",[t._v("NONE")]),t._v(", "),n("code",[t._v("VERTEX")]),t._v(", "),n("code",[t._v("FRAGMENT")]),t._v(", or "),n("code",[t._v("COMPUTE")]),t._v(". Most of the time we'll only use "),n("code",[t._v("FRAGMENT")]),t._v(" for textures and samplers, but it's good to know what else is available.")]),t._v(" "),n("p",[t._v("With "),n("code",[t._v("texture_bind_group_layout")]),t._v(", we can now create our "),n("code",[t._v("BindGroup")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture_view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Looking at this you might get a bit of déjà vu! That's because a "),n("code",[t._v("BindGroup")]),t._v(" is a more specific declaration of the "),n("code",[t._v("BindGroupLayout")]),t._v(". The reason they're separate is that it allows us to swap out "),n("code",[t._v("BindGroup")]),t._v("s on the fly, so long as they all share the same "),n("code",[t._v("BindGroupLayout")]),t._v(". Each texture and sampler we create will need to be added to a "),n("code",[t._v("BindGroup")]),t._v(". For our purposes, we'll create a new bind group for each texture.")]),t._v(" "),n("p",[t._v("Now that we have our "),n("code",[t._v("diffuse_bind_group")]),t._v(", let's add it to our "),n("code",[t._v("State")]),t._v(" struct:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Make sure we return these fields in the "),n("code",[t._v("new")]),t._v(" method:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now that we've got our "),n("code",[t._v("BindGroup")]),t._v(", we can use it in our "),n("code",[t._v("render()")]),t._v(" function.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"pipelinelayout"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#pipelinelayout"}},[t._v("#")]),t._v(" PipelineLayout")]),t._v(" "),n("p",[t._v("Remember the "),n("code",[t._v("PipelineLayout")]),t._v(" we created back in "),n("a",{attrs:{href:"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 "),n("code",[t._v("PipelineLayout")]),t._v(" contains a list of "),n("code",[t._v("BindGroupLayout")]),t._v("s that the pipeline can use. Modify "),n("code",[t._v("render_pipeline_layout")]),t._v(" to use our "),n("code",[t._v("texture_bind_group_layout")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n push_constant_ranges"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"a-change-to-the-vertices"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-change-to-the-vertices"}},[t._v("#")]),t._v(" A change to the VERTICES")]),t._v(" "),n("p",[t._v("There are a few things we need to change about our "),n("code",[t._v("Vertex")]),t._v(" definition. Up to now, we've been using a "),n("code",[t._v("color")]),t._v(" attribute to set the color of our mesh. Now that we're using a texture, we want to replace our "),n("code",[t._v("color")]),t._v(" with "),n("code",[t._v("tex_coords")]),t._v(". These coordinates will then be passed to the "),n("code",[t._v("Sampler")]),t._v(" to retrieve the appropriate color.")]),t._v(" "),n("p",[t._v("Since our "),n("code",[t._v("tex_coords")]),t._v(" are two dimensional, we'll change the field to take two floats instead of three.")]),t._v(" "),n("p",[t._v("First, we'll change the "),n("code",[t._v("Vertex")]),t._v(" struct:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("And then reflect these changes in the "),n("code",[t._v("VertexBufferLayout")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Lastly, we need to change "),n("code",[t._v("VERTICES")]),t._v(" itself. Replace the existing definition with the following:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.99240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.56958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.05060294")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1526709")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.7347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"shader-time"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shader-time"}},[t._v("#")]),t._v(" Shader time")]),t._v(" "),n("p",[t._v("With our new "),n("code",[t._v("Vertex")]),t._v(" structure in place, it's time to update our shaders. We'll first need to pass our "),n("code",[t._v("tex_coords")]),t._v(" into the vertex shader and then use them over to our fragment shader to get the final color from the "),n("code",[t._v("Sampler")]),t._v(". Let's start with the vertex shader:")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Vertex shader\n\nstruct VertexInput {\n @location(0) position: vec3,\n @location(1) tex_coords: vec2,\n}\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) tex_coords: vec2,\n}\n\n@vertex\nfn vs_main(\n model: VertexInput,\n) -> VertexOutput {\n var out: VertexOutput;\n out.tex_coords = model.tex_coords;\n out.clip_position = vec4(model.position, 1.0);\n return out;\n}\n")])])]),n("p",[t._v("Now that we have our vertex shader outputting our "),n("code",[t._v("tex_coords")]),t._v(", we need to change the fragment shader to take them in. With these coordinates, we'll finally be able to use our sampler to get a color from our texture.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Fragment shader\n\n@group(0) @binding(0)\nvar t_diffuse: texture_2d;\n@group(0)@binding(1)\nvar s_diffuse: sampler;\n\n@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n return textureSample(t_diffuse, s_diffuse, in.tex_coords);\n}\n")])])]),n("p",[t._v("The variables "),n("code",[t._v("t_diffuse")]),t._v(" and "),n("code",[t._v("s_diffuse")]),t._v(" are what's known as uniforms. We'll go over uniforms more in the "),n("RouterLink",{attrs:{to:"/beginner/tutorial6-uniforms/"}},[t._v("cameras section")]),t._v(". For now, all we need to know is that "),n("code",[t._v("group()")]),t._v(" corresponds to the 1st parameter in "),n("code",[t._v("set_bind_group()")]),t._v(" and "),n("code",[t._v("binding()")]),t._v(" relates to the "),n("code",[t._v("binding")]),t._v(" specified when we created the "),n("code",[t._v("BindGroupLayout")]),t._v(" and "),n("code",[t._v("BindGroup")]),t._v(".")],1),t._v(" "),n("h2",{attrs:{id:"the-results"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-results"}},[t._v("#")]),t._v(" The results")]),t._v(" "),n("p",[t._v("If we run our program now we should get the following result:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(493),alt:"an upside down tree on a pentagon"}})]),t._v(" "),n("p",[t._v("That's weird, our tree is upside down! This is because wgpu's world coordinates have the y-axis pointing up, while texture coordinates have the y-axis pointing down. In other words, (0, 0) in texture coordinates corresponds to the top-left of the image, while (1, 1) is the bottom right.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(494),alt:"happy-tree-uv-coords.png"}})]),t._v(" "),n("p",[t._v("We can get our triangle right-side up by replacing the y coordinate "),n("code",[t._v("y")]),t._v(" of each texture coordinate with "),n("code",[t._v("1 - y")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.00759614")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.43041354")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.949397")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.84732914")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2652641")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With that in place, we now have our tree right-side up on our pentagon:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(495),alt:"our happy tree as it should be"}})]),t._v(" "),n("h2",{attrs:{id:"cleaning-things-up"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-things-up"}},[t._v("#")]),t._v(" Cleaning things up")]),t._v(" "),n("p",[t._v("For convenience, let's pull our texture code into its own module. We'll first need to add the "),n("a",{attrs:{href:"https://docs.rs/anyhow/",target:"_blank",rel:"noopener noreferrer"}},[t._v("anyhow"),n("OutboundLink")],1),t._v(" crate to our "),n("code",[t._v("Cargo.toml")]),t._v(" file to simplify error handling;")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("image")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.23"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cgmath")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.27"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.9"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.4"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"derive"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("anyhow")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# NEW!")]),t._v("\n")])])]),n("p",[t._v("Then, in a new file called "),n("code",[t._v("src/texture.rs")]),t._v(", add the following:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DynamicImage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rgba "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_rgba8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("num"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("num"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sampler "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n address_mode_u"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_w"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mag_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mipmap_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sampler "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("Notice that we're using "),n("code",[t._v("to_rgba8()")]),t._v(" instead of "),n("code",[t._v("as_rgba8()")]),t._v(". PNGs work fine with "),n("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 "),n("code",[t._v("as_rgba8()")]),t._v(" on the JPEG texture image we are going to use. Instead, we can use "),n("code",[t._v("to_rgba8()")]),t._v(" to handle such an image, which will generate a new image buffer with alpha channel even if the original image does not have one.")])]),t._v(" "),n("p",[t._v("We need to import "),n("code",[t._v("texture.rs")]),t._v(" as a module, so somewhere at the top of "),n("code",[t._v("lib.rs")]),t._v(" add the following.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The texture creation code in "),n("code",[t._v("new()")]),t._v(" now gets a lot simpler:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Everything up until `let texture_bind_group_layout = ...` can now be removed.")]),t._v("\n")])])]),n("p",[t._v("We still need to store the bind group separately so that "),n("code",[t._v("Texture")]),t._v(" doesn't need to know how the "),n("code",[t._v("BindGroup")]),t._v(" is laid out. The creation of "),n("code",[t._v("diffuse_bind_group")]),t._v(" slightly changes to use the "),n("code",[t._v("view")]),t._v(" and "),n("code",[t._v("sampler")]),t._v(" fields of "),n("code",[t._v("diffuse_texture")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Finally, let's update our "),n("code",[t._v("State")]),t._v(" field to use our shiny new "),n("code",[t._v("Texture")]),t._v(" struct, as we'll need it in future tutorials.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Phew!")]),t._v(" "),n("p",[t._v("With these changes in place, the code should be working the same as it was before, but we now have a much easier way to create textures.")]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Create another texture and swap it out when you press the space key.")]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial5_textures"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{493:function(t,s,a){t.exports=a.p+"assets/img/happy-tree.bdff8a19.png"},494:function(t,s,a){t.exports=a.p+"assets/img/address_mode.66a7cd1a.png"},495:function(t,s,a){t.exports=a.p+"assets/img/upside-down.d50c3643.png"},496:function(t,s,a){t.exports=a.p+"assets/img/happy-tree-uv-coords.aa3b7d36.png"},497:function(t,s,a){t.exports=a.p+"assets/img/rightside-up.75f852e2.png"},579:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"textures-and-bind-groups"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#textures-and-bind-groups"}},[t._v("#")]),t._v(" Textures and bind groups")]),t._v(" "),n("p",[t._v("Up to this point, we have been drawing super simple shapes. While we can make a game with just triangles, trying to draw highly detailed objects would massively limit what devices could even run our game. However, we can get around this problem with "),n("strong",[t._v("textures")]),t._v(".")]),t._v(" "),n("p",[t._v("Textures are images 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(" "),n("h2",{attrs:{id:"loading-an-image-from-a-file"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#loading-an-image-from-a-file"}},[t._v("#")]),t._v(" Loading an image from a file")]),t._v(" "),n("p",[t._v("If we want to map an image to our mesh, we first need an image. Let's use this happy little tree:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(493),alt:"a happy tree"}})]),t._v(" "),n("p",[t._v("We'll use the "),n("a",{attrs:{href:"https://docs.rs/image",target:"_blank",rel:"noopener noreferrer"}},[t._v("image crate"),n("OutboundLink")],1),t._v(" to load our tree. Let's add it to our dependencies:")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies.image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.24"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("default-features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"jpeg"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),n("p",[t._v("The jpeg decoder that "),n("code",[t._v("image")]),t._v(" includes uses "),n("a",{attrs:{href:"https://docs.rs/rayon",target:"_blank",rel:"noopener noreferrer"}},[t._v("rayon"),n("OutboundLink")],1),t._v(" to speed up the decoding with threads. WASM doesn't support threads currently so we need to disable this so that our code won't crash when we try to load a jpeg on the web.")]),t._v(" "),n("div",{staticClass:"note"},[n("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 "),n("code",[t._v("image")]),t._v(" when building with "),n("code",[t._v("wasm-bindgen")]),t._v(". This will involve creating an "),n("code",[t._v("")]),t._v(" tag in Rust to get the image, and then a "),n("code",[t._v("")]),t._v(" to get the pixel data, but I'll leave this as an exercise for the reader.")])]),t._v(" "),n("p",[t._v("In "),n("code",[t._v("State")]),t._v("'s "),n("code",[t._v("new()")]),t._v(" method add the following just after configuring the "),n("code",[t._v("surface")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_image "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("diffuse_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_rgba "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_rgba8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Here we grab the bytes from our image file and load them into an image which is then converted into a "),n("code",[t._v("Vec")]),t._v(" of rgba bytes. We also save the image's dimensions for when we create the actual "),n("code",[t._v("Texture")]),t._v(".")]),t._v(" "),n("p",[t._v("Now, let's create the "),n("code",[t._v("Texture")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All textures are stored as 3D, we represent our 2D texture")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// by setting depth to 1.")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We'll talk about this a little later")]),t._v("\n sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TEXTURE_BINDING tells wgpu that we want to use this texture in shaders")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// COPY_DST means that we want to copy data to this texture")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_texture"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"getting-data-into-a-texture"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#getting-data-into-a-texture"}},[t._v("#")]),t._v(" Getting data into a Texture")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("Texture")]),t._v(" struct has no methods to interact with the data directly. However, we can use a method on the "),n("code",[t._v("queue")]),t._v(" we created earlier called "),n("code",[t._v("write_texture")]),t._v(" to load the texture in. Let's take a look at how we do that:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Tells wgpu where to copy the pixel data")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The actual pixel data")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The layout of the texture")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("num"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("num"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("The old way of writing data to a texture was to copy the pixel data to a buffer and then copy it to the texture. Using "),n("code",[t._v("write_texture")]),t._v(" is a bit more efficient as it uses one buffer less - I'll leave it here though in case you need it.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Temp Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_buffer_copy_encoder"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nencoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_buffer_to_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n array_layer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nqueue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("bytes_per_row")]),t._v(" field needs some consideration. This value needs to be a multiple of 256. Check out "),n("RouterLink",{attrs:{to:"/showcase/gifs/#how-do-we-make-the-frames"}},[t._v("the gif tutorial")]),t._v(" for more details.")],1)]),t._v(" "),n("h2",{attrs:{id:"textureviews-and-samplers"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#textureviews-and-samplers"}},[t._v("#")]),t._v(" TextureViews and Samplers")]),t._v(" "),n("p",[t._v("Now that our texture has data in it, we need a way to use it. This is where a "),n("code",[t._v("TextureView")]),t._v(" and a "),n("code",[t._v("Sampler")]),t._v(" come in. A "),n("code",[t._v("TextureView")]),t._v(" offers us a "),n("em",[t._v("view")]),t._v(" into our texture. A "),n("code",[t._v("Sampler")]),t._v(" controls how the "),n("code",[t._v("Texture")]),t._v(" is "),n("em",[t._v("sampled")]),t._v(". Sampling works similar to the eyedropper tool in GIMP/Photoshop. Our program supplies a coordinate on the texture (known as a "),n("em",[t._v("texture coordinate")]),t._v("), and the sampler then returns the corresponding color based on the texture and some internal parameters.")]),t._v(" "),n("p",[t._v("Let's define our "),n("code",[t._v("diffuse_texture_view")]),t._v(" and "),n("code",[t._v("diffuse_sampler")]),t._v(" now:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We don't need to configure the texture view much, so let's")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let wgpu define it.")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture_view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_sampler "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n address_mode_u"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_w"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mag_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mipmap_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("address_mode_*")]),t._v(" parameters determine what to do if the sampler gets a texture coordinate that's outside the texture itself. We have a few options to choose from:")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("ClampToEdge")]),t._v(": Any texture coordinates outside the texture will return the color of the nearest pixel on the edges of the texture.")]),t._v(" "),n("li",[n("code",[t._v("Repeat")]),t._v(": The texture will repeat as texture coordinates exceed the texture's dimensions.")]),t._v(" "),n("li",[n("code",[t._v("MirrorRepeat")]),t._v(": Similar to "),n("code",[t._v("Repeat")]),t._v(", but the image will flip when going over boundaries.")])]),t._v(" "),n("p",[n("img",{attrs:{src:a(494),alt:"address_mode.png"}})]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("mag_filter")]),t._v(" and "),n("code",[t._v("min_filter")]),t._v(" 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(" "),n("p",[t._v("There are 2 options:")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("Linear")]),t._v(": Select two texels in each dimension and return a linear interpolation between their values.")]),t._v(" "),n("li",[n("code",[t._v("Nearest")]),t._v(": Return the value of the texel 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(" "),n("p",[t._v("Mipmaps are a complex topic and will require "),n("a",{attrs:{href:"/todo"}},[t._v("their own section in the future")]),t._v(". For now, we can say that "),n("code",[t._v("mipmap_filter")]),t._v(" functions similar to "),n("code",[t._v("(mag/min)_filter")]),t._v(" as it tells the sampler how to blend between mipmaps.")]),t._v(" "),n("p",[t._v("I'm using some defaults for the other fields. If you want to see what they are, check "),n("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.SamplerDescriptor.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("the wgpu docs"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("p",[t._v("All these different resources are nice and all, but they don't do us much good if we can't plug them in anywhere. This is where "),n("code",[t._v("BindGroup")]),t._v("s and "),n("code",[t._v("PipelineLayout")]),t._v("s come in.")]),t._v(" "),n("h2",{attrs:{id:"the-bindgroup"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-bindgroup"}},[t._v("#")]),t._v(" The BindGroup")]),t._v(" "),n("p",[t._v("A "),n("code",[t._v("BindGroup")]),t._v(" describes a set of resources and how they can be accessed by a shader. We create a "),n("code",[t._v("BindGroup")]),t._v(" using a "),n("code",[t._v("BindGroupLayout")]),t._v(". Let's make one of those first.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n multisampled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view_dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_type"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureSampleType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filterable"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This should match the filterable field of the")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// corresponding Texture entry above.")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerBindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Filtering")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"texture_bind_group_layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Our "),n("code",[t._v("texture_bind_group_layout")]),t._v(" has two entries: one for a sampled texture at binding 0, and one for a sampler at binding 1. Both of these bindings are visible only to the fragment shader as specified by "),n("code",[t._v("FRAGMENT")]),t._v(". The possible values for this field are any bitwise combination of "),n("code",[t._v("NONE")]),t._v(", "),n("code",[t._v("VERTEX")]),t._v(", "),n("code",[t._v("FRAGMENT")]),t._v(", or "),n("code",[t._v("COMPUTE")]),t._v(". Most of the time we'll only use "),n("code",[t._v("FRAGMENT")]),t._v(" for textures and samplers, but it's good to know what else is available.")]),t._v(" "),n("p",[t._v("With "),n("code",[t._v("texture_bind_group_layout")]),t._v(", we can now create our "),n("code",[t._v("BindGroup")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture_view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Looking at this you might get a bit of déjà vu! That's because a "),n("code",[t._v("BindGroup")]),t._v(" is a more specific declaration of the "),n("code",[t._v("BindGroupLayout")]),t._v(". The reason they're separate is that it allows us to swap out "),n("code",[t._v("BindGroup")]),t._v("s on the fly, so long as they all share the same "),n("code",[t._v("BindGroupLayout")]),t._v(". Each texture and sampler we create will need to be added to a "),n("code",[t._v("BindGroup")]),t._v(". For our purposes, we'll create a new bind group for each texture.")]),t._v(" "),n("p",[t._v("Now that we have our "),n("code",[t._v("diffuse_bind_group")]),t._v(", let's add it to our "),n("code",[t._v("State")]),t._v(" struct:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Make sure we return these fields in the "),n("code",[t._v("new")]),t._v(" method:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now that we've got our "),n("code",[t._v("BindGroup")]),t._v(", we can use it in our "),n("code",[t._v("render()")]),t._v(" function.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"pipelinelayout"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#pipelinelayout"}},[t._v("#")]),t._v(" PipelineLayout")]),t._v(" "),n("p",[t._v("Remember the "),n("code",[t._v("PipelineLayout")]),t._v(" we created back in "),n("a",{attrs:{href:"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 "),n("code",[t._v("PipelineLayout")]),t._v(" contains a list of "),n("code",[t._v("BindGroupLayout")]),t._v("s that the pipeline can use. Modify "),n("code",[t._v("render_pipeline_layout")]),t._v(" to use our "),n("code",[t._v("texture_bind_group_layout")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n push_constant_ranges"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"a-change-to-the-vertices"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-change-to-the-vertices"}},[t._v("#")]),t._v(" A change to the VERTICES")]),t._v(" "),n("p",[t._v("There are a few things we need to change about our "),n("code",[t._v("Vertex")]),t._v(" definition. Up to now, we've been using a "),n("code",[t._v("color")]),t._v(" attribute to set the color of our mesh. Now that we're using a texture, we want to replace our "),n("code",[t._v("color")]),t._v(" with "),n("code",[t._v("tex_coords")]),t._v(". These coordinates will then be passed to the "),n("code",[t._v("Sampler")]),t._v(" to retrieve the appropriate color.")]),t._v(" "),n("p",[t._v("Since our "),n("code",[t._v("tex_coords")]),t._v(" are two dimensional, we'll change the field to take two floats instead of three.")]),t._v(" "),n("p",[t._v("First, we'll change the "),n("code",[t._v("Vertex")]),t._v(" struct:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("And then reflect these changes in the "),n("code",[t._v("VertexBufferLayout")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Lastly, we need to change "),n("code",[t._v("VERTICES")]),t._v(" itself. Replace the existing definition with the following:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.99240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.56958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.05060294")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1526709")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.7347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"shader-time"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#shader-time"}},[t._v("#")]),t._v(" Shader time")]),t._v(" "),n("p",[t._v("With our new "),n("code",[t._v("Vertex")]),t._v(" structure in place, it's time to update our shaders. We'll first need to pass our "),n("code",[t._v("tex_coords")]),t._v(" into the vertex shader and then use them over to our fragment shader to get the final color from the "),n("code",[t._v("Sampler")]),t._v(". Let's start with the vertex shader:")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Vertex shader\n\nstruct VertexInput {\n @location(0) position: vec3,\n @location(1) tex_coords: vec2,\n}\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) tex_coords: vec2,\n}\n\n@vertex\nfn vs_main(\n model: VertexInput,\n) -> VertexOutput {\n var out: VertexOutput;\n out.tex_coords = model.tex_coords;\n out.clip_position = vec4(model.position, 1.0);\n return out;\n}\n")])])]),n("p",[t._v("Now that we have our vertex shader outputting our "),n("code",[t._v("tex_coords")]),t._v(", we need to change the fragment shader to take them in. With these coordinates, we'll finally be able to use our sampler to get a color from our texture.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Fragment shader\n\n@group(0) @binding(0)\nvar t_diffuse: texture_2d;\n@group(0)@binding(1)\nvar s_diffuse: sampler;\n\n@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n return textureSample(t_diffuse, s_diffuse, in.tex_coords);\n}\n")])])]),n("p",[t._v("The variables "),n("code",[t._v("t_diffuse")]),t._v(" and "),n("code",[t._v("s_diffuse")]),t._v(" are what's known as uniforms. We'll go over uniforms more in the "),n("RouterLink",{attrs:{to:"/beginner/tutorial6-uniforms/"}},[t._v("cameras section")]),t._v(". For now, all we need to know is that "),n("code",[t._v("group()")]),t._v(" corresponds to the 1st parameter in "),n("code",[t._v("set_bind_group()")]),t._v(" and "),n("code",[t._v("binding()")]),t._v(" relates to the "),n("code",[t._v("binding")]),t._v(" specified when we created the "),n("code",[t._v("BindGroupLayout")]),t._v(" and "),n("code",[t._v("BindGroup")]),t._v(".")],1),t._v(" "),n("h2",{attrs:{id:"the-results"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-results"}},[t._v("#")]),t._v(" The results")]),t._v(" "),n("p",[t._v("If we run our program now we should get the following result:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(495),alt:"an upside down tree on a pentagon"}})]),t._v(" "),n("p",[t._v("That's weird, our tree is upside down! This is because wgpu's world coordinates have the y-axis pointing up, while texture coordinates have the y-axis pointing down. In other words, (0, 0) in texture coordinates corresponds to the top-left of the image, while (1, 1) is the bottom right.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(496),alt:"happy-tree-uv-coords.png"}})]),t._v(" "),n("p",[t._v("We can get our triangle right-side up by replacing the y coordinate "),n("code",[t._v("y")]),t._v(" of each texture coordinate with "),n("code",[t._v("1 - y")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Changed")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4131759")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.00759614")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0048659444")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.43041354")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.28081453")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.949397")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.85967")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.84732914")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.9414737")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2652641")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With that in place, we now have our tree right-side up on our pentagon:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(497),alt:"our happy tree as it should be"}})]),t._v(" "),n("h2",{attrs:{id:"cleaning-things-up"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-things-up"}},[t._v("#")]),t._v(" Cleaning things up")]),t._v(" "),n("p",[t._v("For convenience, let's pull our texture code into its own module. We'll first need to add the "),n("a",{attrs:{href:"https://docs.rs/anyhow/",target:"_blank",rel:"noopener noreferrer"}},[t._v("anyhow"),n("OutboundLink")],1),t._v(" crate to our "),n("code",[t._v("Cargo.toml")]),t._v(" file to simplify error handling;")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("image")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.23"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cgmath")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.27"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.9"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.4"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"derive"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("anyhow")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# NEW!")]),t._v("\n")])])]),n("p",[t._v("Then, in a new file called "),n("code",[t._v("src/texture.rs")]),t._v(", add the following:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GenericImageView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" img "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_from_memory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("from_image")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DynamicImage")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Option")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rgba "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_rgba8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dimensions "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" img"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("dimensions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("rgba"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("num"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("num"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NonZeroU32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dimensions"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sampler "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SamplerDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n address_mode_u"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_w"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddressMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mag_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mipmap_filter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FilterMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sampler "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("Notice that we're using "),n("code",[t._v("to_rgba8()")]),t._v(" instead of "),n("code",[t._v("as_rgba8()")]),t._v(". PNGs work fine with "),n("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 "),n("code",[t._v("as_rgba8()")]),t._v(" on the JPEG texture image we are going to use. Instead, we can use "),n("code",[t._v("to_rgba8()")]),t._v(" to handle such an image, which will generate a new image buffer with alpha channel even if the original image does not have one.")])]),t._v(" "),n("p",[t._v("We need to import "),n("code",[t._v("texture.rs")]),t._v(" as a module, so somewhere at the top of "),n("code",[t._v("lib.rs")]),t._v(" add the following.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The texture creation code in "),n("code",[t._v("new()")]),t._v(" now gets a lot simpler:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bytes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_bytes!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diffuse_bytes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"happy-tree.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Everything up until `let texture_bind_group_layout = ...` can now be removed.")]),t._v("\n")])])]),n("p",[t._v("We still need to store the bind group separately so that "),n("code",[t._v("Texture")]),t._v(" doesn't need to know how the "),n("code",[t._v("BindGroup")]),t._v(" is laid out. The creation of "),n("code",[t._v("diffuse_bind_group")]),t._v(" slightly changes to use the "),n("code",[t._v("view")]),t._v(" and "),n("code",[t._v("sampler")]),t._v(" fields of "),n("code",[t._v("diffuse_texture")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CHANGED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"diffuse_bind_group"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Finally, let's update our "),n("code",[t._v("State")]),t._v(" field to use our shiny new "),n("code",[t._v("Texture")]),t._v(" struct, as we'll need it in future tutorials.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Phew!")]),t._v(" "),n("p",[t._v("With these changes in place, the code should be working the same as it was before, but we now have a much easier way to create textures.")]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Create another texture and swap it out when you press the space key.")]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial5_textures"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/19.143159cd.js b/assets/js/19.143159cd.js deleted file mode 100644 index c054f6d0..00000000 --- a/assets/js/19.143159cd.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{445:function(t,r,e){},541:function(t,r,e){"use strict";var a=e(1),n=e(2),o=e(32),i=e(64),u=e(14),s=n("".slice),l=Math.max,c=Math.min;a({target:"String",proto:!0,forced:!"".substr||"b"!=="ab".substr(-1)},{substr:function(t,r){var e,a,n=u(o(this)),_=n.length,m=i(t);return m===1/0&&(m=0),m<0&&(m=l(_+m,0)),(e=void 0===r?_:i(r))<=0||e===1/0||m>=(a=c(m+e,_))?"":s(n,m,a)}})},542:function(t,r,e){var a={"./tutorial10_lighting/tutorial10_lighting.js":[545,0,2,48],"./tutorial10_lighting/tutorial10_lighting_bg.js":[363,0,2],"./tutorial11_normals/tutorial11_normals.js":[556,0,3,49],"./tutorial11_normals/tutorial11_normals_bg.js":[364,0,3],"./tutorial12_camera/tutorial12_camera.js":[557,0,4,50],"./tutorial12_camera/tutorial12_camera_bg.js":[365,0,4],"./tutorial2_surface/tutorial2_surface.js":[558,0,6,51],"./tutorial2_surface/tutorial2_surface_bg.js":[373,0,6],"./tutorial3_pipeline/tutorial3_pipeline.js":[559,0,7,52],"./tutorial3_pipeline/tutorial3_pipeline_bg.js":[371,0,7],"./tutorial4_buffer/tutorial4_buffer.js":[560,0,8,53],"./tutorial4_buffer/tutorial4_buffer_bg.js":[372,0,8],"./tutorial5_textures/tutorial5_textures.js":[561,0,9,54],"./tutorial5_textures/tutorial5_textures_bg.js":[367,0,9],"./tutorial6_uniforms/tutorial6_uniforms.js":[562,0,10,55],"./tutorial6_uniforms/tutorial6_uniforms_bg.js":[368,0,10],"./tutorial7_instancing/tutorial7_instancing.js":[563,0,11,56],"./tutorial7_instancing/tutorial7_instancing_bg.js":[369,0,11],"./tutorial8_depth/tutorial8_depth.js":[564,0,12,57],"./tutorial8_depth/tutorial8_depth_bg.js":[370,0,12],"./tutorial9_models/tutorial9_models.js":[565,0,5,58],"./tutorial9_models/tutorial9_models_bg.js":[366,0,5]};function n(t){if(!e.o(a,t))return Promise.resolve().then((function(){var r=new Error("Cannot find module '"+t+"'");throw r.code="MODULE_NOT_FOUND",r}));var r=a[t],n=r[0];return Promise.all(r.slice(1).map(e.e)).then((function(){return e(n)}))}n.keys=function(){return Object.keys(a)},n.id=542,t.exports=n},543:function(t,r,e){"use strict";e(445)},570:function(t,r,e){"use strict";e.r(r);var a=e(87);e(135),e(29),e(93),e(541),e(8),e(18),e(25),e(123);var n={name:"WasmExample",props:{example:"",autoLoad:!1},data:function(){return{error:"",loading:!1,exampleStarted:!1}},computed:{exampleName:function(){return this.example.replace(/\w\S*/g,(function(t){return t.charAt(0).toUpperCase()+t.substr(1).toLowerCase()}))}},methods:{loadExample:function(){var t=this;return Object(a.a)(regeneratorRuntime.mark((function r(){return regeneratorRuntime.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return t.loading=!0,r.prev=1,r.next=4,e(542)("./".concat(t.example,"/").concat(t.example,".js"));case 4:r.next=9;break;case 6:r.prev=6,r.t0=r.catch(1),"Error: Using exceptions for control flow, don't mind me. This isn't actually an error!"!="".concat(r.t0)?(t.error='An error occurred loading "'.concat(t.example,'": ').concat(r.t0),console.error(r.t0),t.exampleStarted=!1):t.exampleStarted=!0;case 9:t.loading=!1;case 10:case"end":return r.stop()}}),r,null,[[1,6]])})))()}},mounted:function(){var t=this;return Object(a.a)(regeneratorRuntime.mark((function r(){return regeneratorRuntime.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return r.next=2,t.$nextTick();case 2:if(!t.autoLoad){r.next=5;break}return r.next=5,t.loadExample();case 5:case"end":return r.stop()}}),r)})))()}},o=(e(543),e(23)),i=Object(o.a)(n,(function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("div",{attrs:{id:"wasm-example"}},[t.error?e("div",{staticClass:"error"},[t._v("\n "+t._s(t.error)+"\n ")]):t._e(),t._v(" "),t.exampleStarted||t.autoLoad?t._e():e("button",{attrs:{disabled:t.loading},on:{click:function(r){return t.loadExample()}}},[t._v("Try "+t._s(t.exampleName)+"!")])])}),[],!1,null,null,null);r.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/2.6b3360f8.js b/assets/js/2.6b3360f8.js new file mode 100644 index 00000000..00c1081e --- /dev/null +++ b/assets/js/2.6b3360f8.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{363:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_string_new",(function(){return k})),t.d(e,"__wbindgen_object_clone_ref",(function(){return R})),t.d(e,"__wbindgen_cb_drop",(function(){return O})),t.d(e,"__wbindgen_string_get",(function(){return C})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return U})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return j})),t.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return q})),t.d(e,"__wbindgen_number_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return G})),t.d(e,"__wbindgen_number_new",(function(){return W})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return N})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return H})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return J})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return z})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return Z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return $})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return nn})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return en})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return tn})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return rn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return on})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return dn})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return bn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return gn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return wn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return ln})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return sn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return mn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return vn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return yn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return pn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return hn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return Sn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return An})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Pn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return In})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Dn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return Fn})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return En})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Tn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Bn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Ln})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Mn})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return kn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return Rn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return On})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Un})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return jn})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Gn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Wn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Nn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Jn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return zn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return $n})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return ne})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ee})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return te})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return re})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return ue})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return fe})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return ce})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return _e})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ie})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return oe})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return de})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return be})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ge})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return we})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return le})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return se})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return me})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ve})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ye})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return pe})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return he})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return Se})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Ae})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Pe})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Ie})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return De})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Fe})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Ee})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Te})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Be})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Le})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Me})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return ke})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return Re})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Oe})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ce})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ue})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return je})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Ge})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return We})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ne})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return He})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return Je})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return ze})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return $e})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return nt})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return et})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return tt})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return rt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return ut})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ft})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ct})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return _t})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return it})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return ot})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return dt})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return bt})),t.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return gt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return wt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return lt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return st})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return mt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return vt})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return yt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return pt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return ht})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return xt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return St})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return At})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Pt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return It})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Dt})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Ft})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Et})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Tt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Bt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Lt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Mt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return kt})),t.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return Rt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ot})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ct})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Ut})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Vt})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return jt})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return qt})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return Kt})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Gt})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return Wt})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Nt})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Qt})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Xt})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Yt})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Ht})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Jt})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return zt})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Zt})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return $t})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return nr})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return er})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return tr})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return rr})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ur})),t.d(e,"__wbg_name_2473476082bed625",(function(){return fr})),t.d(e,"__wbg_body_3cb4b4042b9a632b",(function(){return cr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return _r})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return ir})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return or})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return dr})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return ar})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return br})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return gr})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return wr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return lr})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return sr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return mr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return vr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return yr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return pr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return hr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return xr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return Sr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return Ar})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return Pr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Ir})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Fr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Er})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Tr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Br})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Lr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Mr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return kr})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return Rr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Or})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Cr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Ur})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Vr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return jr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return qr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Kr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Gr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Wr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Nr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Qr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Xr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Yr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Hr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Jr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return zr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Zr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return $r})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return nu})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return eu})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return tu})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return ru})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return uu})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return fu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return cu})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return _u})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return iu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return ou})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return du})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return au})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return bu})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return gu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return wu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return lu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return su})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return mu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return vu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return yu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return pu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return hu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return xu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return Su})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return Au})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return Pu})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Iu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Du})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Fu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Eu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Tu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Bu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Lu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Mu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return ku})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return Ru})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Ou})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Cu})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Uu})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Vu})),t.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return ju})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return qu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Ku})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Gu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Wu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Nu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Qu})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Xu})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Yu})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Hu})),t.d(e,"__wbg_origin_486b350035be1f11",(function(){return Ju})),t.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return zu})),t.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return Zu})),t.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return $u})),t.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return nf})),t.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return ef})),t.d(e,"__wbg_text_1169d752cc697903",(function(){return tf})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return rf})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return uf})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return ff})),t.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return cf})),t.d(e,"__wbg_append_de37df908812970d",(function(){return _f})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return of})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return df})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return af})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return bf})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return gf})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return wf})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return lf})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return sf})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return mf})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return vf})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return yf})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return pf})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return hf})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return xf})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Sf})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Af})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return Pf})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return If})),t.d(e,"__wbindgen_is_function",(function(){return Df})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return Ff})),t.d(e,"__wbindgen_is_object",(function(){return Ef})),t.d(e,"__wbg_next_579e583d33566a86",(function(){return Tf})),t.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return Bf})),t.d(e,"__wbg_done_1b73b0672e15f234",(function(){return Lf})),t.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return Mf})),t.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return kf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return Rf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return Of})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return Cf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return Uf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return Vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return jf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return qf})),t.d(e,"__wbindgen_is_undefined",(function(){return Kf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return Gf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Wf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Nf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Qf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Xf})),t.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return Yf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Jf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return zf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return Zf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return $f})),t.d(e,"__wbg_new_8c3f0052272a457a",(function(){return nc})),t.d(e,"__wbg_set_83db9690f9353e79",(function(){return ec})),t.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return tc})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return rc})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return uc})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return fc})),t.d(e,"__wbg_has_8359f114ce042f5a",(function(){return cc})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return _c})),t.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return ic})),t.d(e,"__wbindgen_debug_string",(function(){return oc})),t.d(e,"__wbindgen_throw",(function(){return dc})),t.d(e,"__wbindgen_memory",(function(){return ac})),t.d(e,"__wbindgen_closure_wrapper836",(function(){return bc})),t.d(e,"__wbindgen_closure_wrapper838",(function(){return gc})),t.d(e,"__wbindgen_closure_wrapper840",(function(){return wc})),t.d(e,"__wbindgen_closure_wrapper842",(function(){return lc})),t.d(e,"__wbindgen_closure_wrapper844",(function(){return sc})),t.d(e,"__wbindgen_closure_wrapper846",(function(){return mc})),t.d(e,"__wbindgen_closure_wrapper848",(function(){return vc})),t.d(e,"__wbindgen_closure_wrapper850",(function(){return yc})),t.d(e,"__wbindgen_closure_wrapper852",(function(){return pc})),t.d(e,"__wbindgen_closure_wrapper1140",(function(){return hc}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(61),t(411),t(412),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(97),t(18),t(25),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(418),t(416),t(453)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}var o=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});o.decode();var d=new Uint8Array;function a(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function b(n,e){return o.decode(a().subarray(n,n+e))}function g(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return a().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,c=e(f),_=a(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var d=a().subarray(c+i,c+f);i+=s(n,d).written}return w=i,c}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function H(n,e){c(n).bindVertexArray(c(e))}function J(n,e,t,r,u,f,_,i,o,d,a){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,d>>>0,a>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function Z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function $(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function nn(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function en(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,F(r,u))}function tn(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,E(r,u))}function rn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function un(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function fn(n,e,t,r,u,f,_,i,o,d){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,d)}function cn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function _n(n,e,t,r,u,f,_,i,o,d,a,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a,b)}function on(n,e,t,r,u,f,_,i,o,d,a){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,c(a))}function dn(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,d){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d)}function bn(n){var e=c(n).createSampler();return v(e)?0:g(e)}function gn(n){var e=c(n).createVertexArray();return v(e)?0:g(e)}function wn(n,e){c(n).deleteQuery(c(e))}function ln(n,e){c(n).deleteSampler(c(e))}function sn(n,e){c(n).deleteSync(c(e))}function mn(n,e){c(n).deleteVertexArray(c(e))}function vn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function yn(n,e){c(n).drawBuffers(c(e))}function pn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function hn(n,e){c(n).endQuery(e>>>0)}function xn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return v(r)?0:g(r)}function Sn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function An(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function Pn(){return L((function(n,e,t){return g(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function In(n,e,t){return g(c(n).getQueryParameter(c(e),t>>>0))}function Dn(n,e,t){return g(c(n).getSyncParameter(c(e),t>>>0))}function Fn(n,e,t,r){return c(n).getUniformBlockIndex(c(e),b(t,r))}function En(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function Tn(n,e){c(n).readBuffer(e>>>0)}function Bn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Ln(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Mn(n,e,t,r,u,f){c(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function kn(n,e,t,r){c(n).samplerParameterf(c(e),t>>>0,r)}function Rn(n,e,t,r){c(n).samplerParameteri(c(e),t>>>0,r)}function On(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Cn(n,e,t,r,u,f,_){c(n).texStorage3D(e>>>0,t,r>>>0,u,f,_)}function Un(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,d)}),arguments)}function jn(){return L((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,c(b))}),arguments)}function Kn(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function Gn(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Wn(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Nn(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Qn(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Xn(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Yn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Hn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Jn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function zn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Zn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function $n(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function ne(n,e){c(n).activeTexture(e>>>0)}function ee(n,e,t){c(n).attachShader(c(e),c(t))}function te(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function re(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function ue(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function fe(n,e,t){c(n).bindTexture(e>>>0,c(t))}function ce(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function _e(n,e){c(n).blendEquation(e>>>0)}function ie(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function oe(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function de(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function be(n,e){c(n).compileShader(c(e))}function ge(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function we(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function le(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function se(n){var e=c(n).createProgram();return v(e)?0:g(e)}function me(n){var e=c(n).createRenderbuffer();return v(e)?0:g(e)}function ve(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function ye(n){var e=c(n).createTexture();return v(e)?0:g(e)}function pe(n,e){c(n).cullFace(e>>>0)}function he(n,e){c(n).deleteBuffer(c(e))}function xe(n,e){c(n).deleteFramebuffer(c(e))}function Se(n,e){c(n).deleteProgram(c(e))}function Ae(n,e){c(n).deleteRenderbuffer(c(e))}function Pe(n,e){c(n).deleteShader(c(e))}function Ie(n,e){c(n).deleteTexture(c(e))}function De(n,e){c(n).depthFunc(e>>>0)}function Fe(n,e){c(n).depthMask(0!==e)}function Ee(n,e,t){c(n).depthRange(e,t)}function Te(n,e){c(n).disable(e>>>0)}function Be(n,e){c(n).disableVertexAttribArray(e>>>0)}function Le(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Me(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function ke(n,e){c(n).enable(e>>>0)}function Re(n,e){c(n).enableVertexAttribArray(e>>>0)}function Oe(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Ce(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Ue(n,e){c(n).frontFace(e>>>0)}function Ve(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:g(r)}function je(){return L((function(n,e,t){var r=c(n).getExtension(b(e,t));return v(r)?0:g(r)}),arguments)}function qe(){return L((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Ge(n,e,t){return g(c(n).getProgramParameter(c(e),t>>>0))}function We(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Ne(n,e,t){return g(c(n).getShaderParameter(c(e),t>>>0))}function Qe(n){var e=c(n).getSupportedExtensions();return v(e)?0:g(e)}function Xe(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function Ye(n,e){c(n).linkProgram(c(e))}function He(n,e,t){c(n).pixelStorei(e>>>0,t)}function Je(n,e,t){c(n).polygonOffset(e,t)}function ze(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Ze(n,e,t,r,u){c(n).scissor(e,t,r,u)}function $e(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function nt(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function et(n,e){c(n).stencilMask(e>>>0)}function tt(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function rt(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ut(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function ft(n,e,t){c(n).uniform1f(c(e),t)}function ct(n,e,t){c(n).uniform1i(c(e),t)}function _t(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function it(n,e){c(n).useProgram(c(e))}function ot(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function dt(n,e,t,r,u){c(n).viewport(e,t,r,u)}function at(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function bt(n){var e=c(n).document;return v(e)?0:g(e)}function gt(n){return g(c(n).location)}function wt(){return L((function(n){return g(c(n).innerWidth)}),arguments)}function lt(){return L((function(n){return g(c(n).innerHeight)}),arguments)}function st(n){return c(n).devicePixelRatio}function mt(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function vt(){return L((function(n,e,t){var r=c(n).matchMedia(b(e,t));return v(r)?0:g(r)}),arguments)}function yt(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function pt(n,e,t){var r=c(n)[b(e,t)];return v(r)?0:g(r)}function ht(n,e){c(n).clearTimeout(e)}function xt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function St(n,e){c(n).bindVertexArrayOES(c(e))}function At(n){var e=c(n).createVertexArrayOES();return v(e)?0:g(e)}function Pt(n,e){c(n).deleteVertexArrayOES(c(e))}function It(n){return c(n).pointerId}function Dt(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Ft(n){return c(n).width}function Et(n,e){c(n).width=e>>>0}function Tt(n){return c(n).height}function Bt(n,e){c(n).height=e>>>0}function Lt(){return L((function(n,e,t,r){var u=c(n).getContext(b(e,t),c(r));return v(u)?0:g(u)}),arguments)}function Mt(n){return c(n).matches}function kt(n){return c(n).now()}function Rt(){return L((function(n,e,t){return g(new Request(b(n,e),c(t)))}),arguments)}function Ot(n,e){c(n).drawBuffersWEBGL(c(e))}function Ct(n){return c(n).charCode}function Ut(n){return c(n).keyCode}function Vt(n){return c(n).altKey}function jt(n){return c(n).ctrlKey}function qt(n){return c(n).shiftKey}function Kt(n){return c(n).metaKey}function Gt(n,e){var t=m(c(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Wt(n,e){var t=m(c(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Nt(n,e,t){return c(n).getModifierState(b(e,t))}function Qt(){return L((function(n,e,t,r){c(n).addEventListener(b(e,t),c(r))}),arguments)}function Xt(){return L((function(n,e,t,r,u){c(n).addEventListener(b(e,t),c(r),c(u))}),arguments)}function Yt(){return L((function(n,e,t,r){c(n).removeEventListener(b(e,t),c(r))}),arguments)}function Ht(){return L((function(n,e){return g(c(n).appendChild(c(e)))}),arguments)}function Jt(n){var e=c(n).target;return v(e)?0:g(e)}function zt(n){return c(n).cancelBubble}function Zt(n){c(n).preventDefault()}function $t(n){c(n).stopPropagation()}function nr(n){return c(n).matches}function er(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function tr(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function rr(n){return c(n).size}function ur(n){return c(n).type}function fr(n,e){var t=m(c(e).name,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function cr(n){var e=c(n).body;return v(e)?0:g(e)}function _r(n){var e=c(n).fullscreenElement;return v(e)?0:g(e)}function ir(){return L((function(n,e,t){return g(c(n).createElement(b(e,t)))}),arguments)}function or(n,e,t){var r=c(n).getElementById(b(e,t));return v(r)?0:g(r)}function dr(){return L((function(n,e,t){var r=c(n).querySelector(b(e,t));return v(r)?0:g(r)}),arguments)}function ar(n){return g(c(n).getBoundingClientRect())}function br(){return L((function(n){c(n).requestFullscreen()}),arguments)}function gr(){return L((function(n,e,t,r,u){c(n).setAttribute(b(e,t),b(r,u))}),arguments)}function wr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function lr(n){return g(c(n).style)}function sr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function mr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function vr(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function yr(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function pr(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function hr(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function xr(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function Sr(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Ar(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Pr(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Ir(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Dr(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Fr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Er(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Tr(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Br(n,e){c(n).activeTexture(e>>>0)}function Lr(n,e,t){c(n).attachShader(c(e),c(t))}function Mr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function kr(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Rr(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function Or(n,e,t){c(n).bindTexture(e>>>0,c(t))}function Cr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Ur(n,e){c(n).blendEquation(e>>>0)}function Vr(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function jr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function qr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Kr(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Gr(n,e){c(n).compileShader(c(e))}function Wr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function Nr(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function Qr(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function Xr(n){var e=c(n).createProgram();return v(e)?0:g(e)}function Yr(n){var e=c(n).createRenderbuffer();return v(e)?0:g(e)}function Hr(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function Jr(n){var e=c(n).createTexture();return v(e)?0:g(e)}function zr(n,e){c(n).cullFace(e>>>0)}function Zr(n,e){c(n).deleteBuffer(c(e))}function $r(n,e){c(n).deleteFramebuffer(c(e))}function nu(n,e){c(n).deleteProgram(c(e))}function eu(n,e){c(n).deleteRenderbuffer(c(e))}function tu(n,e){c(n).deleteShader(c(e))}function ru(n,e){c(n).deleteTexture(c(e))}function uu(n,e){c(n).depthFunc(e>>>0)}function fu(n,e){c(n).depthMask(0!==e)}function cu(n,e,t){c(n).depthRange(e,t)}function _u(n,e){c(n).disable(e>>>0)}function iu(n,e){c(n).disableVertexAttribArray(e>>>0)}function ou(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function du(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function au(n,e){c(n).enable(e>>>0)}function bu(n,e){c(n).enableVertexAttribArray(e>>>0)}function gu(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function wu(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function lu(n,e){c(n).frontFace(e>>>0)}function su(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:g(r)}function mu(){return L((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function vu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function yu(n,e,t){return g(c(n).getProgramParameter(c(e),t>>>0))}function pu(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function hu(n,e,t){return g(c(n).getShaderParameter(c(e),t>>>0))}function xu(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function Su(n,e){c(n).linkProgram(c(e))}function Au(n,e,t){c(n).pixelStorei(e>>>0,t)}function Pu(n,e,t){c(n).polygonOffset(e,t)}function Iu(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Du(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Fu(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function Eu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Tu(n,e){c(n).stencilMask(e>>>0)}function Bu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Lu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Mu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function ku(n,e,t){c(n).uniform1f(c(e),t)}function Ru(n,e,t){c(n).uniform1i(c(e),t)}function Ou(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function Cu(n,e){c(n).useProgram(c(e))}function Uu(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Vu(n,e,t,r,u){c(n).viewport(e,t,r,u)}function ju(n,e){return g(c(n).fetch(c(e)))}function qu(n){console.debug(c(n))}function Ku(n){console.error(c(n))}function Gu(n,e){console.error(c(n),c(e))}function Wu(n){console.info(c(n))}function Nu(n){console.log(c(n))}function Qu(n){console.warn(c(n))}function Xu(){return L((function(n,e,t,r,u){c(n).setProperty(b(e,t),b(r,u))}),arguments)}function Yu(n){return c(n).x}function Hu(n){return c(n).y}function Ju(){return L((function(n,e){var t=m(c(e).origin,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}),arguments)}function zu(n){var e;try{e=c(n)instanceof Response}catch(n){e=!1}return e}function Zu(n,e){var t=m(c(e).url,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function $u(n){return c(n).status}function nf(n){return g(c(n).headers)}function ef(){return L((function(n){return g(c(n).arrayBuffer())}),arguments)}function tf(){return L((function(n){return g(c(n).text())}),arguments)}function rf(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function uf(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function ff(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function cf(){return L((function(){return g(new Headers)}),arguments)}function _f(){return L((function(n,e,t,r,u){c(n).append(b(e,t),b(r,u))}),arguments)}function of(n){return c(n).clientX}function df(n){return c(n).clientY}function af(n){return c(n).offsetX}function bf(n){return c(n).offsetY}function gf(n){return c(n).ctrlKey}function wf(n){return c(n).shiftKey}function lf(n){return c(n).altKey}function sf(n){return c(n).metaKey}function mf(n){return c(n).button}function vf(n){return c(n).buttons}function yf(n){return c(n).movementX}function pf(n){return c(n).movementY}function hf(n){return c(n).deltaX}function xf(n){return c(n).deltaY}function Sf(n){return c(n).deltaMode}function Af(n,e){return g(c(n)[e>>>0])}function Pf(n){return c(n).length}function If(){return g(new Array)}function Df(n){return"function"==typeof c(n)}function Ff(n,e){return g(new Function(b(n,e)))}function Ef(n){var e=c(n);return"object"===Object(r.a)(e)&&null!==e}function Tf(n){return g(c(n).next)}function Bf(){return L((function(n){return g(c(n).next())}),arguments)}function Lf(n){return c(n).done}function Mf(n){return g(c(n).value)}function kf(){return g(Symbol.iterator)}function Rf(){return L((function(n,e){return g(Reflect.get(c(n),c(e)))}),arguments)}function Of(){return L((function(n,e){return g(c(n).call(c(e)))}),arguments)}function Cf(){return g(new Object)}function Uf(){return L((function(){return g(self.self)}),arguments)}function Vf(){return L((function(){return g(window.window)}),arguments)}function jf(){return L((function(){return g(globalThis.globalThis)}),arguments)}function qf(){return L((function(){return g(global.global)}),arguments)}function Kf(n){return void 0===c(n)}function Gf(n){return g(Array.of(c(n)))}function Wf(n,e){return c(n).push(c(e))}function Nf(n,e){return Object.is(c(n),c(e))}function Qf(n){return g(Promise.resolve(c(n)))}function Xf(n,e){return g(c(n).then(c(e)))}function Yf(n,e,t){return g(c(n).then(c(e),c(t)))}function Hf(n){return g(c(n).buffer)}function Jf(n,e,t){return g(new Int8Array(c(n),e>>>0,t>>>0))}function zf(n,e,t){return g(new Int16Array(c(n),e>>>0,t>>>0))}function Zf(n,e,t){return g(new Int32Array(c(n),e>>>0,t>>>0))}function $f(n,e,t){return g(new Uint8Array(c(n),e>>>0,t>>>0))}function nc(n){return g(new Uint8Array(c(n)))}function ec(n,e,t){c(n).set(c(e),t>>>0)}function tc(n){return c(n).length}function rc(n,e,t){return g(new Uint16Array(c(n),e>>>0,t>>>0))}function uc(n,e,t){return g(new Uint32Array(c(n),e>>>0,t>>>0))}function fc(n,e,t){return g(new Float32Array(c(n),e>>>0,t>>>0))}function cc(){return L((function(n,e){return Reflect.has(c(n),c(e))}),arguments)}function _c(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function ic(){return L((function(n){return g(JSON.stringify(c(n)))}),arguments)}function oc(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=d[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function dc(n,e){throw new Error(b(n,e))}function ac(){return g(u.j)}function bc(n,e,t){return g(x(n,e,179,S))}function gc(n,e,t){return g(x(n,e,179,S))}function wc(n,e,t){return g(x(n,e,179,A))}function lc(n,e,t){return g(x(n,e,179,S))}function sc(n,e,t){return g(x(n,e,179,S))}function mc(n,e,t){return g(x(n,e,179,S))}function vc(n,e,t){return g(x(n,e,179,S))}function yc(n,e,t){return g(x(n,e,179,S))}function pc(n,e,t){return g(x(n,e,179,S))}function hc(n,e,t){return g(x(n,e,341,P))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},418:function(n,e,t){t(1)({target:"Reflect",stat:!0},{has:function(n,e){return e in n}})},453:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(363);r.l()}}]); \ No newline at end of file diff --git a/assets/js/2.6baa2ac9.js b/assets/js/2.6baa2ac9.js deleted file mode 100644 index a9098b4b..00000000 --- a/assets/js/2.6baa2ac9.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{363:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return D})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_string_new",(function(){return k})),t.d(e,"__wbindgen_object_clone_ref",(function(){return R})),t.d(e,"__wbindgen_cb_drop",(function(){return O})),t.d(e,"__wbindgen_string_get",(function(){return C})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return V})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return j})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return q})),t.d(e,"__wbindgen_number_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return G})),t.d(e,"__wbindgen_number_new",(function(){return W})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return N})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return H})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return J})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return z})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return Z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return $})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return nn})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return en})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return tn})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return rn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return on})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return dn})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return bn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return gn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return wn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return ln})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return sn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return mn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return vn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return yn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return pn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return hn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return Sn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return An})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Pn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Dn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return In})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return En})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Fn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Tn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Bn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Ln})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Mn})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return kn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return Rn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return On})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Vn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return jn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Gn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Wn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Nn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Jn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return zn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return $n})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return ne})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ee})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return te})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return re})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return ue})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return fe})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return _e})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ce})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ie})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return oe})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return de})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return be})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ge})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return we})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return le})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return se})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return me})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ve})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ye})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return pe})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return he})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return Se})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Ae})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Pe})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return De})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return Ie})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Ee})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Fe})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Te})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Be})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Le})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Me})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return ke})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return Re})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Oe})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ce})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ve})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return je})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Ge})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return We})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ne})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return He})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return Je})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return ze})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return $e})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return nt})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return et})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return tt})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return rt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return ut})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ft})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return _t})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return ct})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return it})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return ot})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return dt})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return bt})),t.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return gt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return wt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return lt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return st})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return mt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return vt})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return yt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return pt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return ht})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return xt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return St})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return At})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Pt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Dt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return It})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Et})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Ft})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Tt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Bt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Lt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Mt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return kt})),t.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return Rt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ot})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ct})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Vt})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return jt})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Ut})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return qt})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return Kt})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Gt})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return Wt})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Nt})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Qt})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Xt})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Yt})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Ht})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Jt})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return zt})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Zt})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return $t})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return nr})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return er})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return tr})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return rr})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ur})),t.d(e,"__wbg_name_2473476082bed625",(function(){return fr})),t.d(e,"__wbg_body_3cb4b4042b9a632b",(function(){return _r})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return cr})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return ir})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return or})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return dr})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return ar})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return br})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return gr})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return wr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return lr})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return sr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return mr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return vr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return yr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return pr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return hr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return xr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return Sr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return Ar})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return Pr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Dr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Er})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Fr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Tr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Br})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Lr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Mr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return kr})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return Rr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Or})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Cr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Vr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return jr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Ur})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return qr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Kr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Gr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Wr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Nr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Qr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Xr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Yr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Hr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Jr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return zr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Zr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return $r})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return nu})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return eu})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return tu})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return ru})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return uu})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return fu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return _u})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return cu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return iu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return ou})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return du})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return au})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return bu})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return gu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return wu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return lu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return su})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return mu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return vu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return yu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return pu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return hu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return xu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return Su})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return Au})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return Pu})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Du})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Iu})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Eu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Fu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Tu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Bu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Lu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Mu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return ku})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return Ru})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Ou})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Cu})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Vu})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return ju})),t.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return Uu})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return qu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Ku})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Gu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Wu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Nu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Qu})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Xu})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Yu})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Hu})),t.d(e,"__wbg_origin_486b350035be1f11",(function(){return Ju})),t.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return zu})),t.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return Zu})),t.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return $u})),t.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return nf})),t.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return ef})),t.d(e,"__wbg_text_1169d752cc697903",(function(){return tf})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return rf})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return uf})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return ff})),t.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return _f})),t.d(e,"__wbg_append_de37df908812970d",(function(){return cf})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return of})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return df})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return af})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return bf})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return gf})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return wf})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return lf})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return sf})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return mf})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return vf})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return yf})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return pf})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return hf})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return xf})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Sf})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Af})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return Pf})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return Df})),t.d(e,"__wbindgen_is_function",(function(){return If})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return Ef})),t.d(e,"__wbindgen_is_object",(function(){return Ff})),t.d(e,"__wbg_next_579e583d33566a86",(function(){return Tf})),t.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return Bf})),t.d(e,"__wbg_done_1b73b0672e15f234",(function(){return Lf})),t.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return Mf})),t.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return kf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return Rf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return Of})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return Cf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return Vf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return jf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return Uf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return qf})),t.d(e,"__wbindgen_is_undefined",(function(){return Kf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return Gf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Wf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Nf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Qf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Xf})),t.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return Yf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Jf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return zf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return Zf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return $f})),t.d(e,"__wbg_new_8c3f0052272a457a",(function(){return n_})),t.d(e,"__wbg_set_83db9690f9353e79",(function(){return e_})),t.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return t_})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return r_})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return u_})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return f_})),t.d(e,"__wbg_has_8359f114ce042f5a",(function(){return __})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return c_})),t.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return i_})),t.d(e,"__wbindgen_debug_string",(function(){return o_})),t.d(e,"__wbindgen_throw",(function(){return d_})),t.d(e,"__wbindgen_memory",(function(){return a_})),t.d(e,"__wbindgen_closure_wrapper836",(function(){return b_})),t.d(e,"__wbindgen_closure_wrapper838",(function(){return g_})),t.d(e,"__wbindgen_closure_wrapper840",(function(){return w_})),t.d(e,"__wbindgen_closure_wrapper842",(function(){return l_})),t.d(e,"__wbindgen_closure_wrapper844",(function(){return s_})),t.d(e,"__wbindgen_closure_wrapper846",(function(){return m_})),t.d(e,"__wbindgen_closure_wrapper848",(function(){return v_})),t.d(e,"__wbindgen_closure_wrapper850",(function(){return y_})),t.d(e,"__wbindgen_closure_wrapper852",(function(){return p_})),t.d(e,"__wbindgen_closure_wrapper1140",(function(){return h_}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(61),t(403),t(404),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(97),t(18),t(25),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(417),t(414),t(452)),f=new Array(32).fill(void 0);function _(n){return f[n]}f.push(void 0,null,!0,!1);var c=f.length;function i(n){var e=_(n);return function(n){n<36||(f[n]=c,c=n)}(n),e}var o=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});o.decode();var d=new Uint8Array;function a(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function b(n,e){return o.decode(a().subarray(n,n+e))}function g(n){c===f.length&&f.push(f.length+1);var e=c;return c=f[e],f[e]=n,e}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return a().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,_=e(f),c=a(),i=0;i127)break;c[_+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),_=t(_,f,f=i+3*n.length);var d=a().subarray(_+i,_+f);i+=s(n,d).written}return w=i,_}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},_=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),_=0;_>>0,_(t))}function X(n,e,t,r,u,f){_(n).bindBufferRange(e>>>0,t>>>0,_(r),u,f)}function Y(n,e,t){_(n).bindSampler(e>>>0,_(t))}function H(n,e){_(n).bindVertexArray(_(e))}function J(n,e,t,r,u,f,c,i,o,d,a){_(n).blitFramebuffer(e,t,r,u,f,c,i,o,d>>>0,a>>>0)}function z(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function Z(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function $(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function nn(n,e,t,r,u){_(n).clearBufferfi(e>>>0,t,r,u)}function en(n,e,t,r,u){_(n).clearBufferfv(e>>>0,t,E(r,u))}function tn(n,e,t,r,u){_(n).clearBufferiv(e>>>0,t,F(r,u))}function rn(n,e,t,r,u){_(n).clearBufferuiv(e>>>0,t,B(r,u))}function un(n,e,t,r){return _(n).clientWaitSync(_(e),t>>>0,r>>>0)}function fn(n,e,t,r,u,f,c,i,o,d){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o,d)}function _n(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function cn(n,e,t,r,u,f,c,i,o,d,a,b){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a,b)}function on(n,e,t,r,u,f,c,i,o,d,a){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,_(a))}function dn(n,e,t,r,u,f){_(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,c,i,o,d){_(n).copyTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d)}function bn(n){var e=_(n).createSampler();return v(e)?0:g(e)}function gn(n){var e=_(n).createVertexArray();return v(e)?0:g(e)}function wn(n,e){_(n).deleteQuery(_(e))}function ln(n,e){_(n).deleteSampler(_(e))}function sn(n,e){_(n).deleteSync(_(e))}function mn(n,e){_(n).deleteVertexArray(_(e))}function vn(n,e,t,r,u){_(n).drawArraysInstanced(e>>>0,t,r,u)}function yn(n,e){_(n).drawBuffers(_(e))}function pn(n,e,t,r,u,f){_(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function hn(n,e){_(n).endQuery(e>>>0)}function xn(n,e,t){var r=_(n).fenceSync(e>>>0,t>>>0);return v(r)?0:g(r)}function Sn(n,e,t,r,u,f){_(n).framebufferTextureLayer(e>>>0,t>>>0,_(r),u,f)}function An(n,e,t,r){_(n).getBufferSubData(e>>>0,t,_(r))}function Pn(){return L((function(n,e,t){return g(_(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Dn(n,e,t){return g(_(n).getQueryParameter(_(e),t>>>0))}function In(n,e,t){return g(_(n).getSyncParameter(_(e),t>>>0))}function En(n,e,t,r){return _(n).getUniformBlockIndex(_(e),b(t,r))}function Fn(){return L((function(n,e,t){_(n).invalidateFramebuffer(e>>>0,_(t))}),arguments)}function Tn(n,e){_(n).readBuffer(e>>>0)}function Bn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function Ln(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,i)}),arguments)}function Mn(n,e,t,r,u,f){_(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function kn(n,e,t,r){_(n).samplerParameterf(_(e),t>>>0,r)}function Rn(n,e,t,r){_(n).samplerParameteri(_(e),t>>>0,r)}function On(n,e,t,r,u,f){_(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Cn(n,e,t,r,u,f,c){_(n).texStorage3D(e>>>0,t,r>>>0,u,f,c)}function Vn(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(d))}),arguments)}function jn(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,d)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,c,i,o,d,a,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,c,i,o,d,a,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a>>>0,_(b))}),arguments)}function Kn(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function Gn(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Wn(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Nn(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Qn(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Xn(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Yn(n,e,t,r){_(n).uniformBlockBinding(_(e),t>>>0,r>>>0)}function Hn(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Jn(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function zn(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Zn(n,e,t){_(n).vertexAttribDivisor(e>>>0,t>>>0)}function $n(n,e,t,r,u,f){_(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function ne(n,e){_(n).activeTexture(e>>>0)}function ee(n,e,t){_(n).attachShader(_(e),_(t))}function te(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function re(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function ue(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function fe(n,e,t){_(n).bindTexture(e>>>0,_(t))}function _e(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function ce(n,e){_(n).blendEquation(e>>>0)}function ie(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function oe(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function de(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function be(n,e){_(n).compileShader(_(e))}function ge(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function we(n){var e=_(n).createBuffer();return v(e)?0:g(e)}function le(n){var e=_(n).createFramebuffer();return v(e)?0:g(e)}function se(n){var e=_(n).createProgram();return v(e)?0:g(e)}function me(n){var e=_(n).createRenderbuffer();return v(e)?0:g(e)}function ve(n,e){var t=_(n).createShader(e>>>0);return v(t)?0:g(t)}function ye(n){var e=_(n).createTexture();return v(e)?0:g(e)}function pe(n,e){_(n).cullFace(e>>>0)}function he(n,e){_(n).deleteBuffer(_(e))}function xe(n,e){_(n).deleteFramebuffer(_(e))}function Se(n,e){_(n).deleteProgram(_(e))}function Ae(n,e){_(n).deleteRenderbuffer(_(e))}function Pe(n,e){_(n).deleteShader(_(e))}function De(n,e){_(n).deleteTexture(_(e))}function Ie(n,e){_(n).depthFunc(e>>>0)}function Ee(n,e){_(n).depthMask(0!==e)}function Fe(n,e,t){_(n).depthRange(e,t)}function Te(n,e){_(n).disable(e>>>0)}function Be(n,e){_(n).disableVertexAttribArray(e>>>0)}function Le(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function Me(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function ke(n,e){_(n).enable(e>>>0)}function Re(n,e){_(n).enableVertexAttribArray(e>>>0)}function Oe(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function Ce(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function Ve(n,e){_(n).frontFace(e>>>0)}function je(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return v(r)?0:g(r)}function Ue(){return L((function(n,e,t){var r=_(n).getExtension(b(e,t));return v(r)?0:g(r)}),arguments)}function qe(){return L((function(n,e){return g(_(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function Ge(n,e,t){return g(_(n).getProgramParameter(_(e),t>>>0))}function We(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function Ne(n,e,t){return g(_(n).getShaderParameter(_(e),t>>>0))}function Qe(n){var e=_(n).getSupportedExtensions();return v(e)?0:g(e)}function Xe(n,e,t,r){var u=_(n).getUniformLocation(_(e),b(t,r));return v(u)?0:g(u)}function Ye(n,e){_(n).linkProgram(_(e))}function He(n,e,t){_(n).pixelStorei(e>>>0,t)}function Je(n,e,t){_(n).polygonOffset(e,t)}function ze(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Ze(n,e,t,r,u){_(n).scissor(e,t,r,u)}function $e(n,e,t,r){_(n).shaderSource(_(e),b(t,r))}function nt(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function et(n,e){_(n).stencilMask(e>>>0)}function tt(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function rt(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ut(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function ft(n,e,t){_(n).uniform1f(_(e),t)}function _t(n,e,t){_(n).uniform1i(_(e),t)}function ct(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function it(n,e){_(n).useProgram(_(e))}function ot(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function dt(n,e,t,r,u){_(n).viewport(e,t,r,u)}function at(n){var e;try{e=_(n)instanceof Window}catch(n){e=!1}return e}function bt(n){var e=_(n).document;return v(e)?0:g(e)}function gt(n){return g(_(n).location)}function wt(){return L((function(n){return g(_(n).innerWidth)}),arguments)}function lt(){return L((function(n){return g(_(n).innerHeight)}),arguments)}function st(n){return _(n).devicePixelRatio}function mt(){return L((function(n,e){_(n).cancelAnimationFrame(e)}),arguments)}function vt(){return L((function(n,e,t){var r=_(n).matchMedia(b(e,t));return v(r)?0:g(r)}),arguments)}function yt(){return L((function(n,e){return _(n).requestAnimationFrame(_(e))}),arguments)}function pt(n,e,t){var r=_(n)[b(e,t)];return v(r)?0:g(r)}function ht(n,e){_(n).clearTimeout(e)}function xt(){return L((function(n,e,t){return _(n).setTimeout(_(e),t)}),arguments)}function St(n,e){_(n).bindVertexArrayOES(_(e))}function At(n){var e=_(n).createVertexArrayOES();return v(e)?0:g(e)}function Pt(n,e){_(n).deleteVertexArrayOES(_(e))}function Dt(n){return _(n).pointerId}function It(n){var e;try{e=_(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Et(n){return _(n).width}function Ft(n,e){_(n).width=e>>>0}function Tt(n){return _(n).height}function Bt(n,e){_(n).height=e>>>0}function Lt(){return L((function(n,e,t,r){var u=_(n).getContext(b(e,t),_(r));return v(u)?0:g(u)}),arguments)}function Mt(n){return _(n).matches}function kt(n){return _(n).now()}function Rt(){return L((function(n,e,t){return g(new Request(b(n,e),_(t)))}),arguments)}function Ot(n,e){_(n).drawBuffersWEBGL(_(e))}function Ct(n){return _(n).charCode}function Vt(n){return _(n).keyCode}function jt(n){return _(n).altKey}function Ut(n){return _(n).ctrlKey}function qt(n){return _(n).shiftKey}function Kt(n){return _(n).metaKey}function Gt(n,e){var t=m(_(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Wt(n,e){var t=m(_(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Nt(n,e,t){return _(n).getModifierState(b(e,t))}function Qt(){return L((function(n,e,t,r){_(n).addEventListener(b(e,t),_(r))}),arguments)}function Xt(){return L((function(n,e,t,r,u){_(n).addEventListener(b(e,t),_(r),_(u))}),arguments)}function Yt(){return L((function(n,e,t,r){_(n).removeEventListener(b(e,t),_(r))}),arguments)}function Ht(){return L((function(n,e){return g(_(n).appendChild(_(e)))}),arguments)}function Jt(n){var e=_(n).target;return v(e)?0:g(e)}function zt(n){return _(n).cancelBubble}function Zt(n){_(n).preventDefault()}function $t(n){_(n).stopPropagation()}function nr(n){return _(n).matches}function er(){return L((function(n,e){_(n).addListener(_(e))}),arguments)}function tr(){return L((function(n,e){_(n).removeListener(_(e))}),arguments)}function rr(n){return _(n).size}function ur(n){return _(n).type}function fr(n,e){var t=m(_(e).name,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function _r(n){var e=_(n).body;return v(e)?0:g(e)}function cr(n){var e=_(n).fullscreenElement;return v(e)?0:g(e)}function ir(){return L((function(n,e,t){return g(_(n).createElement(b(e,t)))}),arguments)}function or(n,e,t){var r=_(n).getElementById(b(e,t));return v(r)?0:g(r)}function dr(){return L((function(n,e,t){var r=_(n).querySelector(b(e,t));return v(r)?0:g(r)}),arguments)}function ar(n){return g(_(n).getBoundingClientRect())}function br(){return L((function(n){_(n).requestFullscreen()}),arguments)}function gr(){return L((function(n,e,t,r,u){_(n).setAttribute(b(e,t),b(r,u))}),arguments)}function wr(){return L((function(n,e){_(n).setPointerCapture(e)}),arguments)}function lr(n){return g(_(n).style)}function sr(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function mr(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function vr(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function yr(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function pr(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function hr(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(d))}),arguments)}function xr(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function Sr(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Ar(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Pr(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Dr(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Ir(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Er(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Fr(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Tr(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Br(n,e){_(n).activeTexture(e>>>0)}function Lr(n,e,t){_(n).attachShader(_(e),_(t))}function Mr(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function kr(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function Rr(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function Or(n,e,t){_(n).bindTexture(e>>>0,_(t))}function Cr(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function Vr(n,e){_(n).blendEquation(e>>>0)}function jr(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function Ur(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function qr(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Kr(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Gr(n,e){_(n).compileShader(_(e))}function Wr(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function Nr(n){var e=_(n).createBuffer();return v(e)?0:g(e)}function Qr(n){var e=_(n).createFramebuffer();return v(e)?0:g(e)}function Xr(n){var e=_(n).createProgram();return v(e)?0:g(e)}function Yr(n){var e=_(n).createRenderbuffer();return v(e)?0:g(e)}function Hr(n,e){var t=_(n).createShader(e>>>0);return v(t)?0:g(t)}function Jr(n){var e=_(n).createTexture();return v(e)?0:g(e)}function zr(n,e){_(n).cullFace(e>>>0)}function Zr(n,e){_(n).deleteBuffer(_(e))}function $r(n,e){_(n).deleteFramebuffer(_(e))}function nu(n,e){_(n).deleteProgram(_(e))}function eu(n,e){_(n).deleteRenderbuffer(_(e))}function tu(n,e){_(n).deleteShader(_(e))}function ru(n,e){_(n).deleteTexture(_(e))}function uu(n,e){_(n).depthFunc(e>>>0)}function fu(n,e){_(n).depthMask(0!==e)}function _u(n,e,t){_(n).depthRange(e,t)}function cu(n,e){_(n).disable(e>>>0)}function iu(n,e){_(n).disableVertexAttribArray(e>>>0)}function ou(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function du(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function au(n,e){_(n).enable(e>>>0)}function bu(n,e){_(n).enableVertexAttribArray(e>>>0)}function gu(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function wu(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function lu(n,e){_(n).frontFace(e>>>0)}function su(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return v(r)?0:g(r)}function mu(){return L((function(n,e){return g(_(n).getParameter(e>>>0))}),arguments)}function vu(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function yu(n,e,t){return g(_(n).getProgramParameter(_(e),t>>>0))}function pu(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function hu(n,e,t){return g(_(n).getShaderParameter(_(e),t>>>0))}function xu(n,e,t,r){var u=_(n).getUniformLocation(_(e),b(t,r));return v(u)?0:g(u)}function Su(n,e){_(n).linkProgram(_(e))}function Au(n,e,t){_(n).pixelStorei(e>>>0,t)}function Pu(n,e,t){_(n).polygonOffset(e,t)}function Du(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Iu(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Eu(n,e,t,r){_(n).shaderSource(_(e),b(t,r))}function Fu(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Tu(n,e){_(n).stencilMask(e>>>0)}function Bu(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function Lu(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Mu(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function ku(n,e,t){_(n).uniform1f(_(e),t)}function Ru(n,e,t){_(n).uniform1i(_(e),t)}function Ou(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function Cu(n,e){_(n).useProgram(_(e))}function Vu(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function ju(n,e,t,r,u){_(n).viewport(e,t,r,u)}function Uu(n,e){return g(_(n).fetch(_(e)))}function qu(n){console.debug(_(n))}function Ku(n){console.error(_(n))}function Gu(n,e){console.error(_(n),_(e))}function Wu(n){console.info(_(n))}function Nu(n){console.log(_(n))}function Qu(n){console.warn(_(n))}function Xu(){return L((function(n,e,t,r,u){_(n).setProperty(b(e,t),b(r,u))}),arguments)}function Yu(n){return _(n).x}function Hu(n){return _(n).y}function Ju(){return L((function(n,e){var t=m(_(e).origin,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}),arguments)}function zu(n){var e;try{e=_(n)instanceof Response}catch(n){e=!1}return e}function Zu(n,e){var t=m(_(e).url,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function $u(n){return _(n).status}function nf(n){return g(_(n).headers)}function ef(){return L((function(n){return g(_(n).arrayBuffer())}),arguments)}function tf(){return L((function(n){return g(_(n).text())}),arguments)}function rf(n,e,t,r,u){_(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function uf(n,e,t,r,u,f){_(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function ff(n,e,t){_(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function _f(){return L((function(){return g(new Headers)}),arguments)}function cf(){return L((function(n,e,t,r,u){_(n).append(b(e,t),b(r,u))}),arguments)}function of(n){return _(n).clientX}function df(n){return _(n).clientY}function af(n){return _(n).offsetX}function bf(n){return _(n).offsetY}function gf(n){return _(n).ctrlKey}function wf(n){return _(n).shiftKey}function lf(n){return _(n).altKey}function sf(n){return _(n).metaKey}function mf(n){return _(n).button}function vf(n){return _(n).buttons}function yf(n){return _(n).movementX}function pf(n){return _(n).movementY}function hf(n){return _(n).deltaX}function xf(n){return _(n).deltaY}function Sf(n){return _(n).deltaMode}function Af(n,e){return g(_(n)[e>>>0])}function Pf(n){return _(n).length}function Df(){return g(new Array)}function If(n){return"function"==typeof _(n)}function Ef(n,e){return g(new Function(b(n,e)))}function Ff(n){var e=_(n);return"object"===Object(r.a)(e)&&null!==e}function Tf(n){return g(_(n).next)}function Bf(){return L((function(n){return g(_(n).next())}),arguments)}function Lf(n){return _(n).done}function Mf(n){return g(_(n).value)}function kf(){return g(Symbol.iterator)}function Rf(){return L((function(n,e){return g(Reflect.get(_(n),_(e)))}),arguments)}function Of(){return L((function(n,e){return g(_(n).call(_(e)))}),arguments)}function Cf(){return g(new Object)}function Vf(){return L((function(){return g(self.self)}),arguments)}function jf(){return L((function(){return g(window.window)}),arguments)}function Uf(){return L((function(){return g(globalThis.globalThis)}),arguments)}function qf(){return L((function(){return g(global.global)}),arguments)}function Kf(n){return void 0===_(n)}function Gf(n){return g(Array.of(_(n)))}function Wf(n,e){return _(n).push(_(e))}function Nf(n,e){return Object.is(_(n),_(e))}function Qf(n){return g(Promise.resolve(_(n)))}function Xf(n,e){return g(_(n).then(_(e)))}function Yf(n,e,t){return g(_(n).then(_(e),_(t)))}function Hf(n){return g(_(n).buffer)}function Jf(n,e,t){return g(new Int8Array(_(n),e>>>0,t>>>0))}function zf(n,e,t){return g(new Int16Array(_(n),e>>>0,t>>>0))}function Zf(n,e,t){return g(new Int32Array(_(n),e>>>0,t>>>0))}function $f(n,e,t){return g(new Uint8Array(_(n),e>>>0,t>>>0))}function n_(n){return g(new Uint8Array(_(n)))}function e_(n,e,t){_(n).set(_(e),t>>>0)}function t_(n){return _(n).length}function r_(n,e,t){return g(new Uint16Array(_(n),e>>>0,t>>>0))}function u_(n,e,t){return g(new Uint32Array(_(n),e>>>0,t>>>0))}function f_(n,e,t){return g(new Float32Array(_(n),e>>>0,t>>>0))}function __(){return L((function(n,e){return Reflect.has(_(n),_(e))}),arguments)}function c_(){return L((function(n,e,t){return Reflect.set(_(n),_(e),_(t))}),arguments)}function i_(){return L((function(n){return g(JSON.stringify(_(n)))}),arguments)}function o_(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var _=e.length,c="[";_>0&&(c+=n(e[0]));for(var i=1;i<_;i++)c+=", "+n(e[i]);return c+="]"}var o,d=/\[object ([^\]]+)\]/.exec(toString.call(e));if(!(d.length>1))return toString.call(e);if("Object"==(o=d[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(_(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function d_(n,e){throw new Error(b(n,e))}function a_(){return g(u.j)}function b_(n,e,t){return g(x(n,e,179,S))}function g_(n,e,t){return g(x(n,e,179,S))}function w_(n,e,t){return g(x(n,e,179,A))}function l_(n,e,t){return g(x(n,e,179,S))}function s_(n,e,t){return g(x(n,e,179,S))}function m_(n,e,t){return g(x(n,e,179,S))}function v_(n,e,t){return g(x(n,e,179,S))}function y_(n,e,t){return g(x(n,e,179,S))}function p_(n,e,t){return g(x(n,e,179,S))}function h_(n,e,t){return g(x(n,e,341,P))}}.call(this,t(375)(n))},417:function(n,e,t){t(1)({target:"Reflect",stat:!0},{has:function(n,e){return e in n}})},452:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(363);r.l()}}]); \ No newline at end of file diff --git a/assets/js/20.31e0a434.js b/assets/js/20.31e0a434.js new file mode 100644 index 00000000..9d2a3aa8 --- /dev/null +++ b/assets/js/20.31e0a434.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{446:function(t,r,e){},543:function(t,r,e){"use strict";var a=e(1),o=e(2),n=e(32),i=e(65),u=e(14),l=o("".slice),s=Math.max,c=Math.min;a({target:"String",proto:!0,forced:!"".substr||"b"!=="ab".substr(-1)},{substr:function(t,r){var e,a,o=u(n(this)),_=o.length,m=i(t);return m===1/0&&(m=0),m<0&&(m=s(_+m,0)),(e=void 0===r?_:i(r))<=0||e===1/0||m>=(a=c(m+e,_))?"":l(o,m,a)}})},544:function(t,r,e){var a={"./tutorial10_lighting/tutorial10_lighting.js":[547,0,2,49],"./tutorial10_lighting/tutorial10_lighting_bg.js":[363,0,2],"./tutorial11_normals/tutorial11_normals.js":[558,0,3,50],"./tutorial11_normals/tutorial11_normals_bg.js":[364,0,3],"./tutorial12_camera/tutorial12_camera.js":[559,0,4,51],"./tutorial12_camera/tutorial12_camera_bg.js":[365,0,4],"./tutorial1_window/tutorial1_window.js":[560,0,13,52],"./tutorial1_window/tutorial1_window_bg.js":[374,0,13],"./tutorial2_surface/tutorial2_surface.js":[561,0,6,53],"./tutorial2_surface/tutorial2_surface_bg.js":[373,0,6],"./tutorial3_pipeline/tutorial3_pipeline.js":[562,0,7,54],"./tutorial3_pipeline/tutorial3_pipeline_bg.js":[371,0,7],"./tutorial4_buffer/tutorial4_buffer.js":[563,0,8,55],"./tutorial4_buffer/tutorial4_buffer_bg.js":[372,0,8],"./tutorial5_textures/tutorial5_textures.js":[564,0,9,56],"./tutorial5_textures/tutorial5_textures_bg.js":[367,0,9],"./tutorial6_uniforms/tutorial6_uniforms.js":[565,0,10,57],"./tutorial6_uniforms/tutorial6_uniforms_bg.js":[368,0,10],"./tutorial7_instancing/tutorial7_instancing.js":[566,0,11,58],"./tutorial7_instancing/tutorial7_instancing_bg.js":[369,0,11],"./tutorial8_depth/tutorial8_depth.js":[567,0,12,59],"./tutorial8_depth/tutorial8_depth_bg.js":[370,0,12],"./tutorial9_models/tutorial9_models.js":[568,0,5,60],"./tutorial9_models/tutorial9_models_bg.js":[366,0,5]};function o(t){if(!e.o(a,t))return Promise.resolve().then((function(){var r=new Error("Cannot find module '"+t+"'");throw r.code="MODULE_NOT_FOUND",r}));var r=a[t],o=r[0];return Promise.all(r.slice(1).map(e.e)).then((function(){return e(o)}))}o.keys=function(){return Object.keys(a)},o.id=544,t.exports=o},545:function(t,r,e){"use strict";e(446)},573:function(t,r,e){"use strict";e.r(r);var a=e(87);e(135),e(29),e(93),e(543),e(8),e(18),e(25),e(123);var o={name:"WasmExample",props:{example:"",autoLoad:!1},data:function(){return{error:"",loading:!1,exampleStarted:!1}},computed:{exampleName:function(){return this.example.replace(/\w\S*/g,(function(t){return t.charAt(0).toUpperCase()+t.substr(1).toLowerCase()}))}},methods:{loadExample:function(){var t=this;return Object(a.a)(regeneratorRuntime.mark((function r(){return regeneratorRuntime.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return t.loading=!0,r.prev=1,r.next=4,e(544)("./".concat(t.example,"/").concat(t.example,".js"));case 4:r.next=9;break;case 6:r.prev=6,r.t0=r.catch(1),"Error: Using exceptions for control flow, don't mind me. This isn't actually an error!"!="".concat(r.t0)?(t.error='An error occurred loading "'.concat(t.example,'": ').concat(r.t0),console.error(r.t0),t.exampleStarted=!1):t.exampleStarted=!0;case 9:t.loading=!1;case 10:case"end":return r.stop()}}),r,null,[[1,6]])})))()}},mounted:function(){var t=this;return Object(a.a)(regeneratorRuntime.mark((function r(){return regeneratorRuntime.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return r.next=2,t.$nextTick();case 2:if(!t.autoLoad){r.next=5;break}return r.next=5,t.loadExample();case 5:case"end":return r.stop()}}),r)})))()}},n=(e(545),e(23)),i=Object(n.a)(o,(function(){var t=this,r=t.$createElement,e=t._self._c||r;return e("div",{attrs:{id:"wasm-example"}},[t.error?e("div",{staticClass:"error"},[t._v("\n "+t._s(t.error)+"\n ")]):t._e(),t._v(" "),t.exampleStarted||t.autoLoad?t._e():e("button",{attrs:{disabled:t.loading},on:{click:function(r){return t.loadExample()}}},[t._v("Try "+t._s(t.exampleName)+"!")])])}),[],!1,null,null,null);r.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/20.974dd1af.js b/assets/js/21.47016ecd.js similarity index 99% rename from assets/js/20.974dd1af.js rename to assets/js/21.47016ecd.js index 67db618e..c3095748 100644 --- a/assets/js/20.974dd1af.js +++ b/assets/js/21.47016ecd.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{487:function(t,s,a){t.exports=a.p+"assets/img/vb_desc.63afb652.png"},488:function(t,s,a){t.exports=a.p+"assets/img/triangle.11560f32.png"},489:function(t,s,a){t.exports=a.p+"assets/img/pentagon.2c2be93b.png"},490: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="},575:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"buffers-and-indices"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#buffers-and-indices"}},[t._v("#")]),t._v(" Buffers and Indices")]),t._v(" "),n("h2",{attrs:{id:"we-re-finally-talking-about-them"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#we-re-finally-talking-about-them"}},[t._v("#")]),t._v(" We're finally talking about them!")]),t._v(" "),n("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(" "),n("h2",{attrs:{id:"what-is-a-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#what-is-a-buffer"}},[t._v("#")]),t._v(" What is a buffer?")]),t._v(" "),n("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 of 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(" "),n("h2",{attrs:{id:"the-vertex-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-vertex-buffer"}},[t._v("#")]),t._v(" The vertex buffer")]),t._v(" "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("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 "),n("code",[t._v("Vertex")]),t._v(" to be "),n("code",[t._v("Copy")]),t._v(" so we can create a buffer with it.")]),t._v(" "),n("p",[t._v("Next, we need the actual data that will make up our triangle. Below "),n("code",[t._v("Vertex")]),t._v(" add the following.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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 "),n("code",[t._v("primitive")]),t._v(" of the "),n("code",[t._v("render_pipeline")]),t._v(" that we want the "),n("code",[t._v("front_face")]),t._v(" of our triangle to be "),n("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(" "),n("p",[t._v("Now that we have our vertex data, we need to store it in a buffer. Let's add a "),n("code",[t._v("vertex_buffer")]),t._v(" field to "),n("code",[t._v("State")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now let's create the buffer in "),n("code",[t._v("new()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new()")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("To access the "),n("code",[t._v("create_buffer_init")]),t._v(" method on "),n("code",[t._v("wgpu::Device")]),t._v(" we'll have to import the "),n("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"),n("OutboundLink")],1),t._v(" extension trait. For more information on extension traits, check out "),n("a",{attrs:{href:"http://xion.io/post/code/rust-extension-traits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("this article"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("p",[t._v("To import the extension trait, put this line somewhere near the top of "),n("code",[t._v("lib.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceExt")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("You'll note that we're using "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.2.0/bytemuck/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck"),n("OutboundLink")],1),t._v(" to cast our "),n("code",[t._v("VERTICES")]),t._v(" as a "),n("code",[t._v("&[u8]")]),t._v(". The "),n("code",[t._v("create_buffer_init()")]),t._v(" method expects a "),n("code",[t._v("&[u8]")]),t._v(", and "),n("code",[t._v("bytemuck::cast_slice")]),t._v(" does that for us. Add the following to your "),n("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.4"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"derive"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We're also going to need to implement two traits to get "),n("code",[t._v("bytemuck")]),t._v(" to work. These are "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.3.0/bytemuck/trait.Pod.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Pod"),n("OutboundLink")],1),t._v(" and "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.3.0/bytemuck/trait.Zeroable.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Zeroable"),n("OutboundLink")],1),t._v(". "),n("code",[t._v("Pod")]),t._v(" indicates that our "),n("code",[t._v("Vertex")]),t._v(' is "Plain Old Data", and thus can be interpreted as a '),n("code",[t._v("&[u8]")]),t._v(". "),n("code",[t._v("Zeroable")]),t._v(" indicates that we can use "),n("code",[t._v("std::mem::zeroed()")]),t._v(". We can modify our "),n("code",[t._v("Vertex")]),t._v(" struct to derive these methods.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("If your struct includes types that don't implement "),n("code",[t._v("Pod")]),t._v(" and "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Zeroable")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),n("p",[t._v("Finally, we can add our "),n("code",[t._v("vertex_buffer")]),t._v(" to our "),n("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"so-what-do-i-do-with-it"}},[n("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(" "),n("p",[t._v("We need to tell the "),n("code",[t._v("render_pipeline")]),t._v(" to use this buffer when we are drawing, but first, we need to tell the "),n("code",[t._v("render_pipeline")]),t._v(" how to read the buffer. We do this using "),n("code",[t._v("VertexBufferLayout")]),t._v("s and the "),n("code",[t._v("vertex_buffers")]),t._v(" field that I promised we'd talk about when we created the "),n("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),n("p",[t._v("A "),n("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 "),n("code",[t._v("Vertex")]),t._v(" would look like.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 5.")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 6.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("ol",[n("li",[t._v("The "),n("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 "),n("code",[t._v("array_stride")]),t._v(" number of bytes. In our case, array_stride will probably be 24 bytes.")]),t._v(" "),n("li",[n("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 "),n("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(" "),n("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(" "),n("li",[t._v("This defines the "),n("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 "),n("code",[t._v("size_of")]),t._v(" of the previous attributes' data.")]),t._v(" "),n("li",[t._v("This tells the shader what location to store this attribute at. For example "),n("code",[t._v("@location(0) x: vec3")]),t._v(" in the vertex shader would correspond to the "),n("code",[t._v("position")]),t._v(" field of the "),n("code",[t._v("Vertex")]),t._v(" struct, while "),n("code",[t._v("@location(1) x: vec3")]),t._v(" would be the "),n("code",[t._v("color")]),t._v(" field.")]),t._v(" "),n("li",[n("code",[t._v("format")]),t._v(" tells the shader the shape of the attribute. "),n("code",[t._v("Float32x3")]),t._v(" corresponds to "),n("code",[t._v("vec3")]),t._v(" in shader code. The max value we can store in an attribute is "),n("code",[t._v("Float32x4")]),t._v(" ("),n("code",[t._v("Uint32x4")]),t._v(", and "),n("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 "),n("code",[t._v("Float32x4")]),t._v(".")])]),t._v(" "),n("p",[t._v("For you visual learners, our vertex buffer looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(487),alt:"A figure of the VertexBufferLayout"}})]),t._v(" "),n("p",[t._v("Let's create a static method on "),n("code",[t._v("Vertex")]),t._v(" that returns this descriptor.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("Specifying the attributes as we did now is quite verbose. We could use the "),n("code",[t._v("vertex_attr_array")]),t._v(" macro provided by wgpu to clean things up a bit. With it our "),n("code",[t._v("VertexBufferLayout")]),t._v(" becomes")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vertex_attr_array!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("While this is definitely nice, Rust sees the result of "),n("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 change the lifetime on "),n("code",[t._v("wgpu::VertexBufferLayout")]),t._v(" to "),n("code",[t._v("'static")]),t._v(", or "),n("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/discussions/1790#discussioncomment-1160378",target:"_blank",rel:"noopener noreferrer"}},[t._v("make it "),n("code",[t._v("const")]),n("OutboundLink")],1),t._v(". You can see an example below:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ATTRIBS")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vertex_attr_array!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ATTRIBS")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Regardless I feel it's good to show how the data gets mapped, so I'll forgo using this macro for now.")])]),t._v(" "),n("p",[t._v("Now we can use it when we create the "),n("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("One more thing: we need to actually set the vertex buffer in the render method otherwise our program will crash.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[n("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(" "),n("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 "),n("code",[t._v("slice")]),t._v(" allows us to specify which portion of the buffer to use. We use "),n("code",[t._v("..")]),t._v(" to specify the entire buffer.")]),t._v(" "),n("p",[t._v("Before we continue, we should change the "),n("code",[t._v("render_pass.draw()")]),t._v(" call to use the number of vertices specified by "),n("code",[t._v("VERTICES")]),t._v(". Add a "),n("code",[t._v("num_vertices")]),t._v(" to "),n("code",[t._v("State")]),t._v(", and set it to be equal to "),n("code",[t._v("VERTICES.len()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_vertices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Then use it in the draw call.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Vertex shader\n\nstruct VertexInput {\n @location(0) position: vec3,\n @location(1) color: vec3,\n};\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) color: vec3,\n};\n\n@vertex\nfn vs_main(\n model: VertexInput,\n) -> VertexOutput {\n var out: VertexOutput;\n out.color = model.color;\n out.clip_position = vec4(model.position, 1.0);\n return out;\n}\n\n// Fragment shader\n\n@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n return vec4(in.color, 1.0);\n}\n")])])]),n("p",[t._v("If you've done things correctly, you should see a triangle that looks something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(488),alt:"A colorful triangle"}})]),t._v(" "),n("h2",{attrs:{id:"the-index-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-index-buffer"}},[t._v("#")]),t._v(" The index buffer")]),t._v(" "),n("p",[t._v("We technically don't "),n("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(" "),n("p",[n("img",{attrs:{src:a(489),alt:"A pentagon made of 3 triangles"}})]),t._v(" "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("You'll note though that some of the vertices are used more than once. C, and B get used twice, and E is repeated 3 times. Assuming that each float is 4 bytes, then that means of the 216 bytes we use for "),n("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(" "),n("p",[t._v("Basically, we store all the unique vertices in "),n("code",[t._v("VERTICES")]),t._v(" and we create another buffer that stores indices to elements in "),n("code",[t._v("VERTICES")]),t._v(" to create the triangles. Here's an example of that with our pentagon.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now with this setup, our "),n("code",[t._v("VERTICES")]),t._v(" take up about 120 bytes and "),n("code",[t._v("INDICES")]),t._v(" is just 18 bytes given that "),n("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. All together 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(" "),n("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 "),n("code",[t._v("State")]),t._v("'s "),n("code",[t._v("new()")]),t._v(" method, create the "),n("code",[t._v("index_buffer")]),t._v(" after you create the "),n("code",[t._v("vertex_buffer")]),t._v(". Also, change "),n("code",[t._v("num_vertices")]),t._v(" to "),n("code",[t._v("num_indices")]),t._v(" and set it equal to "),n("code",[t._v("INDICES.len()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Index Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_indices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We don't need to implement "),n("code",[t._v("Pod")]),t._v(" and "),n("code",[t._v("Zeroable")]),t._v(" for our indices, because "),n("code",[t._v("bytemuck")]),t._v(" has already implemented them for basic types such as "),n("code",[t._v("u16")]),t._v(". That means we can just add "),n("code",[t._v("index_buffer")]),t._v(" and "),n("code",[t._v("num_indices")]),t._v(" to the "),n("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("And then populate these fields in the constructor:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("All we have to do now is update the "),n("code",[t._v("render()")]),t._v(" method to use the "),n("code",[t._v("index_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n")])])]),n("p",[t._v("A couple things to note:")]),t._v(" "),n("ol",[n("li",[t._v("The method name is "),n("code",[t._v("set_index_buffer")]),t._v(" not "),n("code",[t._v("set_index_buffers")]),t._v(". You can only have one index buffer set at a time.")]),t._v(" "),n("li",[t._v("When using an index buffer, you need to use "),n("code",[t._v("draw_indexed")]),t._v(". The "),n("code",[t._v("draw")]),t._v(" method ignores the index buffer. Also make sure you use the number of indices ("),n("code",[t._v("num_indices")]),t._v("), not vertices as your model will either draw wrong, or the method will "),n("code",[t._v("panic")]),t._v(" because there are not enough indices.")])]),t._v(" "),n("p",[t._v("With all that you should have a garishly magenta pentagon in your window.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(490),alt:"Magenta pentagon in window"}})]),t._v(" "),n("h2",{attrs:{id:"color-correction"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#color-correction"}},[t._v("#")]),t._v(" Color Correction")]),t._v(" "),n("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(" "),n("p",[t._v("Most monitors use a color space known as sRGB. Our surface is (most likely depending on what is returned from "),n("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 we do in lighter colors.")]),t._v(" "),n("p",[t._v("You get the correct color using the following formula: "),n("code",[t._v("srgb_color = ((rgb_color / 255 + 0.055) / 1.055) ^ 2.4")]),t._v(". Doing this with an RGB value of (188, 0, 188) will give us (0.5028864580325687, 0.0, 0.5028864580325687). A little off from our (0.5, 0.0, 0.5). Instead of doing manual color conversation, you'll likely save a lot of time by using textures instead as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.")]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Create 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(" "),n("WasmExample",{attrs:{example:"tutorial4_buffer"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{489:function(t,s,a){t.exports=a.p+"assets/img/vb_desc.63afb652.png"},490:function(t,s,a){t.exports=a.p+"assets/img/triangle.11560f32.png"},491:function(t,s,a){t.exports=a.p+"assets/img/pentagon.2c2be93b.png"},492: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="},578:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"buffers-and-indices"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#buffers-and-indices"}},[t._v("#")]),t._v(" Buffers and Indices")]),t._v(" "),n("h2",{attrs:{id:"we-re-finally-talking-about-them"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#we-re-finally-talking-about-them"}},[t._v("#")]),t._v(" We're finally talking about them!")]),t._v(" "),n("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(" "),n("h2",{attrs:{id:"what-is-a-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#what-is-a-buffer"}},[t._v("#")]),t._v(" What is a buffer?")]),t._v(" "),n("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 of 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(" "),n("h2",{attrs:{id:"the-vertex-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-vertex-buffer"}},[t._v("#")]),t._v(" The vertex buffer")]),t._v(" "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("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 "),n("code",[t._v("Vertex")]),t._v(" to be "),n("code",[t._v("Copy")]),t._v(" so we can create a buffer with it.")]),t._v(" "),n("p",[t._v("Next, we need the actual data that will make up our triangle. Below "),n("code",[t._v("Vertex")]),t._v(" add the following.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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 "),n("code",[t._v("primitive")]),t._v(" of the "),n("code",[t._v("render_pipeline")]),t._v(" that we want the "),n("code",[t._v("front_face")]),t._v(" of our triangle to be "),n("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(" "),n("p",[t._v("Now that we have our vertex data, we need to store it in a buffer. Let's add a "),n("code",[t._v("vertex_buffer")]),t._v(" field to "),n("code",[t._v("State")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now let's create the buffer in "),n("code",[t._v("new()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new()")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("To access the "),n("code",[t._v("create_buffer_init")]),t._v(" method on "),n("code",[t._v("wgpu::Device")]),t._v(" we'll have to import the "),n("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"),n("OutboundLink")],1),t._v(" extension trait. For more information on extension traits, check out "),n("a",{attrs:{href:"http://xion.io/post/code/rust-extension-traits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("this article"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("p",[t._v("To import the extension trait, put this line somewhere near the top of "),n("code",[t._v("lib.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceExt")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("You'll note that we're using "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.2.0/bytemuck/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck"),n("OutboundLink")],1),t._v(" to cast our "),n("code",[t._v("VERTICES")]),t._v(" as a "),n("code",[t._v("&[u8]")]),t._v(". The "),n("code",[t._v("create_buffer_init()")]),t._v(" method expects a "),n("code",[t._v("&[u8]")]),t._v(", and "),n("code",[t._v("bytemuck::cast_slice")]),t._v(" does that for us. Add the following to your "),n("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("bytemuck")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.4"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"derive"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We're also going to need to implement two traits to get "),n("code",[t._v("bytemuck")]),t._v(" to work. These are "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.3.0/bytemuck/trait.Pod.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Pod"),n("OutboundLink")],1),t._v(" and "),n("a",{attrs:{href:"https://docs.rs/bytemuck/1.3.0/bytemuck/trait.Zeroable.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck::Zeroable"),n("OutboundLink")],1),t._v(". "),n("code",[t._v("Pod")]),t._v(" indicates that our "),n("code",[t._v("Vertex")]),t._v(' is "Plain Old Data", and thus can be interpreted as a '),n("code",[t._v("&[u8]")]),t._v(". "),n("code",[t._v("Zeroable")]),t._v(" indicates that we can use "),n("code",[t._v("std::mem::zeroed()")]),t._v(". We can modify our "),n("code",[t._v("Vertex")]),t._v(" struct to derive these methods.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("If your struct includes types that don't implement "),n("code",[t._v("Pod")]),t._v(" and "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Zeroable")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),n("p",[t._v("Finally, we can add our "),n("code",[t._v("vertex_buffer")]),t._v(" to our "),n("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"so-what-do-i-do-with-it"}},[n("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(" "),n("p",[t._v("We need to tell the "),n("code",[t._v("render_pipeline")]),t._v(" to use this buffer when we are drawing, but first, we need to tell the "),n("code",[t._v("render_pipeline")]),t._v(" how to read the buffer. We do this using "),n("code",[t._v("VertexBufferLayout")]),t._v("s and the "),n("code",[t._v("vertex_buffers")]),t._v(" field that I promised we'd talk about when we created the "),n("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),n("p",[t._v("A "),n("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 "),n("code",[t._v("Vertex")]),t._v(" would look like.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 5.")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 6.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("ol",[n("li",[t._v("The "),n("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 "),n("code",[t._v("array_stride")]),t._v(" number of bytes. In our case, array_stride will probably be 24 bytes.")]),t._v(" "),n("li",[n("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 "),n("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(" "),n("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(" "),n("li",[t._v("This defines the "),n("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 "),n("code",[t._v("size_of")]),t._v(" of the previous attributes' data.")]),t._v(" "),n("li",[t._v("This tells the shader what location to store this attribute at. For example "),n("code",[t._v("@location(0) x: vec3")]),t._v(" in the vertex shader would correspond to the "),n("code",[t._v("position")]),t._v(" field of the "),n("code",[t._v("Vertex")]),t._v(" struct, while "),n("code",[t._v("@location(1) x: vec3")]),t._v(" would be the "),n("code",[t._v("color")]),t._v(" field.")]),t._v(" "),n("li",[n("code",[t._v("format")]),t._v(" tells the shader the shape of the attribute. "),n("code",[t._v("Float32x3")]),t._v(" corresponds to "),n("code",[t._v("vec3")]),t._v(" in shader code. The max value we can store in an attribute is "),n("code",[t._v("Float32x4")]),t._v(" ("),n("code",[t._v("Uint32x4")]),t._v(", and "),n("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 "),n("code",[t._v("Float32x4")]),t._v(".")])]),t._v(" "),n("p",[t._v("For you visual learners, our vertex buffer looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(489),alt:"A figure of the VertexBufferLayout"}})]),t._v(" "),n("p",[t._v("Let's create a static method on "),n("code",[t._v("Vertex")]),t._v(" that returns this descriptor.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("Specifying the attributes as we did now is quite verbose. We could use the "),n("code",[t._v("vertex_attr_array")]),t._v(" macro provided by wgpu to clean things up a bit. With it our "),n("code",[t._v("VertexBufferLayout")]),t._v(" becomes")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vertex_attr_array!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("While this is definitely nice, Rust sees the result of "),n("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 change the lifetime on "),n("code",[t._v("wgpu::VertexBufferLayout")]),t._v(" to "),n("code",[t._v("'static")]),t._v(", or "),n("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/discussions/1790#discussioncomment-1160378",target:"_blank",rel:"noopener noreferrer"}},[t._v("make it "),n("code",[t._v("const")]),n("OutboundLink")],1),t._v(". You can see an example below:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ATTRIBS")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("vertex_attr_array!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ATTRIBS")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Regardless I feel it's good to show how the data gets mapped, so I'll forgo using this macro for now.")])]),t._v(" "),n("p",[t._v("Now we can use it when we create the "),n("code",[t._v("render_pipeline")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("One more thing: we need to actually set the vertex buffer in the render method otherwise our program will crash.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[n("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(" "),n("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 "),n("code",[t._v("slice")]),t._v(" allows us to specify which portion of the buffer to use. We use "),n("code",[t._v("..")]),t._v(" to specify the entire buffer.")]),t._v(" "),n("p",[t._v("Before we continue, we should change the "),n("code",[t._v("render_pass.draw()")]),t._v(" call to use the number of vertices specified by "),n("code",[t._v("VERTICES")]),t._v(". Add a "),n("code",[t._v("num_vertices")]),t._v(" to "),n("code",[t._v("State")]),t._v(", and set it to be equal to "),n("code",[t._v("VERTICES.len()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_vertices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Then use it in the draw call.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Vertex shader\n\nstruct VertexInput {\n @location(0) position: vec3,\n @location(1) color: vec3,\n};\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) color: vec3,\n};\n\n@vertex\nfn vs_main(\n model: VertexInput,\n) -> VertexOutput {\n var out: VertexOutput;\n out.color = model.color;\n out.clip_position = vec4(model.position, 1.0);\n return out;\n}\n\n// Fragment shader\n\n@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n return vec4(in.color, 1.0);\n}\n")])])]),n("p",[t._v("If you've done things correctly, you should see a triangle that looks something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(490),alt:"A colorful triangle"}})]),t._v(" "),n("h2",{attrs:{id:"the-index-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-index-buffer"}},[t._v("#")]),t._v(" The index buffer")]),t._v(" "),n("p",[t._v("We technically don't "),n("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(" "),n("p",[n("img",{attrs:{src:a(491),alt:"A pentagon made of 3 triangles"}})]),t._v(" "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("You'll note though that some of the vertices are used more than once. C, and B get used twice, and E is repeated 3 times. Assuming that each float is 4 bytes, then that means of the 216 bytes we use for "),n("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(" "),n("p",[t._v("Basically, we store all the unique vertices in "),n("code",[t._v("VERTICES")]),t._v(" and we create another buffer that stores indices to elements in "),n("code",[t._v("VERTICES")]),t._v(" to create the triangles. Here's an example of that with our pentagon.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0868241")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49240386")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.49513406")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.06958647")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// B")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.21918549")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44939706")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// C")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.35966998")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3473291")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// D")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.44147372")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2347359")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now with this setup, our "),n("code",[t._v("VERTICES")]),t._v(" take up about 120 bytes and "),n("code",[t._v("INDICES")]),t._v(" is just 18 bytes given that "),n("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. All together 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(" "),n("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 "),n("code",[t._v("State")]),t._v("'s "),n("code",[t._v("new()")]),t._v(" method, create the "),n("code",[t._v("index_buffer")]),t._v(" after you create the "),n("code",[t._v("vertex_buffer")]),t._v(". Also, change "),n("code",[t._v("num_vertices")]),t._v(" to "),n("code",[t._v("num_indices")]),t._v(" and set it equal to "),n("code",[t._v("INDICES.len()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Index Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" num_indices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDICES")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We don't need to implement "),n("code",[t._v("Pod")]),t._v(" and "),n("code",[t._v("Zeroable")]),t._v(" for our indices, because "),n("code",[t._v("bytemuck")]),t._v(" has already implemented them for basic types such as "),n("code",[t._v("u16")]),t._v(". That means we can just add "),n("code",[t._v("index_buffer")]),t._v(" and "),n("code",[t._v("num_indices")]),t._v(" to the "),n("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("And then populate these fields in the constructor:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("All we have to do now is update the "),n("code",[t._v("render()")]),t._v(" method to use the "),n("code",[t._v("index_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// render()")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n")])])]),n("p",[t._v("A couple things to note:")]),t._v(" "),n("ol",[n("li",[t._v("The method name is "),n("code",[t._v("set_index_buffer")]),t._v(" not "),n("code",[t._v("set_index_buffers")]),t._v(". You can only have one index buffer set at a time.")]),t._v(" "),n("li",[t._v("When using an index buffer, you need to use "),n("code",[t._v("draw_indexed")]),t._v(". The "),n("code",[t._v("draw")]),t._v(" method ignores the index buffer. Also make sure you use the number of indices ("),n("code",[t._v("num_indices")]),t._v("), not vertices as your model will either draw wrong, or the method will "),n("code",[t._v("panic")]),t._v(" because there are not enough indices.")])]),t._v(" "),n("p",[t._v("With all that you should have a garishly magenta pentagon in your window.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(492),alt:"Magenta pentagon in window"}})]),t._v(" "),n("h2",{attrs:{id:"color-correction"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#color-correction"}},[t._v("#")]),t._v(" Color Correction")]),t._v(" "),n("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(" "),n("p",[t._v("Most monitors use a color space known as sRGB. Our surface is (most likely depending on what is returned from "),n("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 we do in lighter colors.")]),t._v(" "),n("p",[t._v("You get the correct color using the following formula: "),n("code",[t._v("srgb_color = ((rgb_color / 255 + 0.055) / 1.055) ^ 2.4")]),t._v(". Doing this with an RGB value of (188, 0, 188) will give us (0.5028864580325687, 0.0, 0.5028864580325687). A little off from our (0.5, 0.0, 0.5). Instead of doing manual color conversation, you'll likely save a lot of time by using textures instead as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.")]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Create 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(" "),n("WasmExample",{attrs:{example:"tutorial4_buffer"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/21.0d1e41d4.js b/assets/js/22.a7ceb9be.js similarity index 96% rename from assets/js/21.0d1e41d4.js rename to assets/js/22.a7ceb9be.js index 9001d65d..55516ede 100644 --- a/assets/js/21.0d1e41d4.js +++ b/assets/js/22.a7ceb9be.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{525:function(e,t,n){e.exports=n.p+"assets/img/figure_no-fbm.1931fe05.png"},526:function(e,t,n){e.exports=n.p+"assets/img/figure_fbm.28310498.png"},527:function(e,t,n){e.exports=n.p+"assets/img/figure_spiky.46babb7a.png"},528:function(e,t,n){e.exports=n.p+"assets/img/figure_work-groups.af52f221.jpg"},585:function(e,t,n){"use strict";n.r(t);var a=n(23),o=Object(a.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"procedural-terrain"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#procedural-terrain"}},[e._v("#")]),e._v(" Procedural Terrain")]),e._v(" "),a("p",[e._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 more interesting things. You could aproach 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.")]),e._v(" "),a("p",[e._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 sampling it to get the height values at each point in the mesh. This is a perfectly valid way to approach this, but I opted to generate the noise using a Compute Shader directly. Let's get started!")]),e._v(" "),a("h2",{attrs:{id:"compute-shaders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compute-shaders"}},[e._v("#")]),e._v(" Compute Shaders")]),e._v(" "),a("p",[e._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.")]),e._v(" "),a("div",{staticClass:"note"},[a("p",[e._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.")])]),e._v(" "),a("h2",{attrs:{id:"noise-functions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#noise-functions"}},[e._v("#")]),e._v(" Noise Functions")]),e._v(" "),a("p",[e._v("Lets 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",[e._v("terrain.wgsl")]),e._v(". Then add the following:")]),e._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("// ============================\n// Terrain Generation\n// ============================\n\n// https://gist.github.com/munrocket/236ed5ba7e409b8bdf1ff6eca5dcdc39\n// MIT License. © Ian McEwan, Stefan Gustavson, Munrocket\n// - Less condensed glsl implementation with comments can be found at https://weber.itn.liu.se/~stegu/jgt2012/article.pdf\n\nfn permute3(x: vec3) -> vec3 { return (((x * 34.) + 1.) * x) % vec3(289.); }\n\nfn snoise2(v: vec2) -> f32 {\n let C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);\n var i: vec2 = floor(v + dot(v, C.yy));\n let x0 = v - i + dot(i, C.xx);\n // I flipped the condition here from > to < as it fixed some artifacting I was observing\n var i1: vec2 = select(vec2(1., 0.), vec2(0., 1.), (x0.x < x0.y));\n var x12: vec4 = x0.xyxy + C.xxzz - vec4(i1, 0., 0.);\n i = i % vec2(289.);\n let p = permute3(permute3(i.y + vec3(0., i1.y, 1.)) + i.x + vec3(0., i1.x, 1.));\n var m: vec3 = max(0.5 -\n vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), vec3(0.));\n m = m * m;\n m = m * m;\n let x = 2. * fract(p * C.www) - 1.;\n let h = abs(x) - 0.5;\n let ox = floor(x + 0.5);\n let a0 = x - ox;\n m = m * (1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h));\n let g = vec3(a0.x * x0.x + h.x * x0.y, a0.yz * x12.xz + h.yz * x12.yw);\n return 130. * dot(m, g);\n}\n\n")])])]),a("p",[e._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 of it are that it's similar to Perlin Noise, but instead of a square grid it's a hexagonal grid which 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",[e._v("permute3()")]),e._v(" takes a "),a("code",[e._v("vec3")]),e._v(" and returns a pseudorandom "),a("code",[e._v("vec3")]),e._v(", "),a("code",[e._v("snoise2()")]),e._v(" takes a "),a("code",[e._v("vec2")]),e._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"}},[e._v("this article from The Book of Shaders"),a("OutboundLink")],1),e._v(". The code's in GLSL, but the concepts are the same.")]),e._v(" "),a("p",[e._v("While we can use the output of "),a("code",[e._v("snoise")]),e._v(" directly to generate the terrains height values. The result of this tends to be very smooth, which may be what you want, but doesn't look very organic as you can see below:")]),e._v(" "),a("p",[a("img",{attrs:{src:n(525),alt:"smooth terrain"}})]),e._v(" "),a("p",[e._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"}},[e._v("Fractal Brownian Motion"),a("OutboundLink")],1),e._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:")]),e._v(" "),a("p",[a("img",{attrs:{src:n(526),alt:"more organic terrain"}})]),e._v(" "),a("p",[e._v("The code for this function is actually quite simple:")]),e._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("fn fbm(p: vec2) -> f32 {\n let NUM_OCTAVES: u32 = 5u;\n var x = p * 0.01;\n var v = 0.0;\n var a = 0.5;\n let shift = vec2(100.0);\n let cs = vec2(cos(0.5), sin(0.5));\n let rot = mat2x2(cs.x, cs.y, -cs.y, cs.x);\n\n for (var i=0u; i,\n chunk_corner: vec2,\n min_max_height: vec2,\n}\n\nstruct Vertex {\n @location(0) position: vec3,\n @location(1) normal: vec3,\n}\n\nstruct VertexBuffer {\n data: array, // stride: 32\n}\n\nstruct IndexBuffer {\n data: array,\n}\n\n@group(0) @binding(0) var chunk_data: ChunkData;\n@group(0)@binding(1) var vertices: VertexBuffer;\n@group(0)@binding(2) var indices: IndexBuffer;\n")])])]),a("p",[e._v("Our shader will expect a "),a("code",[e._v("uniform")]),e._v(" buffer that includes the size of the quad grid in "),a("code",[e._v("chunk_size")]),e._v(", the "),a("code",[e._v("chunk_corner")]),e._v(" that our noise algorithm should start at, and "),a("code",[e._v("min_max_height")]),e._v(" of the terrain.")]),e._v(" "),a("p",[e._v("The vertex and index buffers are passed in as "),a("code",[e._v("storage")]),e._v(" buffers with "),a("code",[e._v("read_write")]),e._v(" enabled. We'll create the actual buffers in Rust and bind them when we execute the compute shader.")]),e._v(" "),a("p",[e._v("The next part of the shader will be the functions that generate a point on the mesh, and a vertex at that point:")]),e._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("fn terrain_point(p: vec2) -> vec3 {\n return vec3(\n p.x,\n mix(chunk_data.min_max_height.x,chunk_data.min_max_height.y, fbm(p)),\n p.y,\n );\n}\n\nfn terrain_vertex(p: vec2) -> Vertex {\n let v = terrain_point(p);\n\n let tpx = terrain_point(p + vec2(0.1, 0.0)) - v;\n let tpz = terrain_point(p + vec2(0.0, 0.1)) - v;\n let tnx = terrain_point(p + vec2(-0.1, 0.0)) - v;\n let tnz = terrain_point(p + vec2(0.0, -0.1)) - v;\n\n let pn = normalize(cross(tpz, tpx));\n let nn = normalize(cross(tnz, tnx));\n\n let n = (pn + nn) * 0.5;\n\n return Vertex(v, n);\n}\n")])])]),a("p",[e._v("The "),a("code",[e._v("terrain_point")]),e._v(" function takes an XZ point on the terrain and returns a "),a("code",[e._v("vec3")]),e._v(" with the "),a("code",[e._v("y")]),e._v(" value between the min and max height values.")]),e._v(" "),a("p",[a("code",[e._v("terrain_vertex")]),e._v(" uses "),a("code",[e._v("terrain_point")]),e._v(" to get it's position and also to compute of the normal of the surface by sampling 4 nearby points and uses them to compute the normal using some "),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"}},[e._v("cross products"),a("OutboundLink")],1),e._v(".")]),e._v(" "),a("div",{staticClass:"note"},[a("p",[e._v("You'll notice that our "),a("code",[e._v("Vertex")]),e._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.")]),e._v(" "),a("p",[e._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 create in the fragment shader we use to render the terrain.")])]),e._v(" "),a("p",[e._v("Now that we can get a vertex on the terrains surface we can fill our vertex and index buffers with actual data. We'll create a "),a("code",[e._v("gen_terrain()")]),e._v(" function that will be the entry point for our compute shader:")]),e._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("@compute @workgroup_size(64)\nfn gen_terrain(\n @builtin(global_invocation_id) gid: vec3\n) {\n // snipped...\n}\n")])])]),a("p",[e._v("We specify that "),a("code",[e._v("gen_terrain")]),e._v(" is a compute shader entry point by annotating it with "),a("code",[e._v("stage(compute)")]),e._v(".")]),e._v(" "),a("p",[e._v("The "),a("code",[e._v("workgroup_size()")]),e._v(" is the number of workers that the GPU can allocate per "),a("code",[e._v("workgroup")]),e._v(". We specify the number of workers when we execute the compute shader. There are technically 3 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",[e._v("workgroup_size(64)")]),e._v(" is equivalent to "),a("code",[e._v("workgroup_size(64, 1, 1)")]),e._v(".")]),e._v(" "),a("p",[e._v("The "),a("code",[e._v("global_invocation_id")]),e._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",[e._v("global_invocation_id")]),e._v(" is the id of the current worker relative to all the other works.")]),e._v(" "),a("p",[e._v("Visually the workgroup grid would look something like this:")]),e._v(" "),a("p",[a("img",{attrs:{src:n(528),alt:"work group grid"}})]),e._v(" "),a("div",{staticClass:"note"},[a("p",[e._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:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._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",[e._v("If you want learn more about workgroups "),a("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#compute-shader-workgroups",target:"_blank",rel:"noopener noreferrer"}},[e._v("check out the docs"),a("OutboundLink")],1),e._v(".")])]),e._v(" "),a("p",[e._v("TODO:")]),e._v(" "),a("ul",[a("li",[e._v("Note changes to "),a("code",[e._v("create_render_pipeline")])]),e._v(" "),a("li",[e._v("Mention "),a("code",[e._v("swizzle")]),e._v(" feature for cgmath")]),e._v(" "),a("li",[e._v("Compare workgroups and workgroups sizes to nested for loops\n"),a("ul",[a("li",[e._v("Maybe make a diagram in blender?")])])]),e._v(" "),a("li",[e._v("Change to camera movement speed")])])])}),[],!1,null,null,null);t.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{527:function(e,t,n){e.exports=n.p+"assets/img/figure_no-fbm.1931fe05.png"},528:function(e,t,n){e.exports=n.p+"assets/img/figure_fbm.28310498.png"},529:function(e,t,n){e.exports=n.p+"assets/img/figure_spiky.46babb7a.png"},530:function(e,t,n){e.exports=n.p+"assets/img/figure_work-groups.af52f221.jpg"},588:function(e,t,n){"use strict";n.r(t);var a=n(23),o=Object(a.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"procedural-terrain"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#procedural-terrain"}},[e._v("#")]),e._v(" Procedural Terrain")]),e._v(" "),a("p",[e._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 more interesting things. You could aproach 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.")]),e._v(" "),a("p",[e._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 sampling it to get the height values at each point in the mesh. This is a perfectly valid way to approach this, but I opted to generate the noise using a Compute Shader directly. Let's get started!")]),e._v(" "),a("h2",{attrs:{id:"compute-shaders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compute-shaders"}},[e._v("#")]),e._v(" Compute Shaders")]),e._v(" "),a("p",[e._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.")]),e._v(" "),a("div",{staticClass:"note"},[a("p",[e._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.")])]),e._v(" "),a("h2",{attrs:{id:"noise-functions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#noise-functions"}},[e._v("#")]),e._v(" Noise Functions")]),e._v(" "),a("p",[e._v("Lets 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",[e._v("terrain.wgsl")]),e._v(". Then add the following:")]),e._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("// ============================\n// Terrain Generation\n// ============================\n\n// https://gist.github.com/munrocket/236ed5ba7e409b8bdf1ff6eca5dcdc39\n// MIT License. © Ian McEwan, Stefan Gustavson, Munrocket\n// - Less condensed glsl implementation with comments can be found at https://weber.itn.liu.se/~stegu/jgt2012/article.pdf\n\nfn permute3(x: vec3) -> vec3 { return (((x * 34.) + 1.) * x) % vec3(289.); }\n\nfn snoise2(v: vec2) -> f32 {\n let C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);\n var i: vec2 = floor(v + dot(v, C.yy));\n let x0 = v - i + dot(i, C.xx);\n // I flipped the condition here from > to < as it fixed some artifacting I was observing\n var i1: vec2 = select(vec2(1., 0.), vec2(0., 1.), (x0.x < x0.y));\n var x12: vec4 = x0.xyxy + C.xxzz - vec4(i1, 0., 0.);\n i = i % vec2(289.);\n let p = permute3(permute3(i.y + vec3(0., i1.y, 1.)) + i.x + vec3(0., i1.x, 1.));\n var m: vec3 = max(0.5 -\n vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), vec3(0.));\n m = m * m;\n m = m * m;\n let x = 2. * fract(p * C.www) - 1.;\n let h = abs(x) - 0.5;\n let ox = floor(x + 0.5);\n let a0 = x - ox;\n m = m * (1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h));\n let g = vec3(a0.x * x0.x + h.x * x0.y, a0.yz * x12.xz + h.yz * x12.yw);\n return 130. * dot(m, g);\n}\n\n")])])]),a("p",[e._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 of it are that it's similar to Perlin Noise, but instead of a square grid it's a hexagonal grid which 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",[e._v("permute3()")]),e._v(" takes a "),a("code",[e._v("vec3")]),e._v(" and returns a pseudorandom "),a("code",[e._v("vec3")]),e._v(", "),a("code",[e._v("snoise2()")]),e._v(" takes a "),a("code",[e._v("vec2")]),e._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"}},[e._v("this article from The Book of Shaders"),a("OutboundLink")],1),e._v(". The code's in GLSL, but the concepts are the same.")]),e._v(" "),a("p",[e._v("While we can use the output of "),a("code",[e._v("snoise")]),e._v(" directly to generate the terrains height values. The result of this tends to be very smooth, which may be what you want, but doesn't look very organic as you can see below:")]),e._v(" "),a("p",[a("img",{attrs:{src:n(527),alt:"smooth terrain"}})]),e._v(" "),a("p",[e._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"}},[e._v("Fractal Brownian Motion"),a("OutboundLink")],1),e._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:")]),e._v(" "),a("p",[a("img",{attrs:{src:n(528),alt:"more organic terrain"}})]),e._v(" "),a("p",[e._v("The code for this function is actually quite simple:")]),e._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("fn fbm(p: vec2) -> f32 {\n let NUM_OCTAVES: u32 = 5u;\n var x = p * 0.01;\n var v = 0.0;\n var a = 0.5;\n let shift = vec2(100.0);\n let cs = vec2(cos(0.5), sin(0.5));\n let rot = mat2x2(cs.x, cs.y, -cs.y, cs.x);\n\n for (var i=0u; i,\n chunk_corner: vec2,\n min_max_height: vec2,\n}\n\nstruct Vertex {\n @location(0) position: vec3,\n @location(1) normal: vec3,\n}\n\nstruct VertexBuffer {\n data: array, // stride: 32\n}\n\nstruct IndexBuffer {\n data: array,\n}\n\n@group(0) @binding(0) var chunk_data: ChunkData;\n@group(0)@binding(1) var vertices: VertexBuffer;\n@group(0)@binding(2) var indices: IndexBuffer;\n")])])]),a("p",[e._v("Our shader will expect a "),a("code",[e._v("uniform")]),e._v(" buffer that includes the size of the quad grid in "),a("code",[e._v("chunk_size")]),e._v(", the "),a("code",[e._v("chunk_corner")]),e._v(" that our noise algorithm should start at, and "),a("code",[e._v("min_max_height")]),e._v(" of the terrain.")]),e._v(" "),a("p",[e._v("The vertex and index buffers are passed in as "),a("code",[e._v("storage")]),e._v(" buffers with "),a("code",[e._v("read_write")]),e._v(" enabled. We'll create the actual buffers in Rust and bind them when we execute the compute shader.")]),e._v(" "),a("p",[e._v("The next part of the shader will be the functions that generate a point on the mesh, and a vertex at that point:")]),e._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("fn terrain_point(p: vec2) -> vec3 {\n return vec3(\n p.x,\n mix(chunk_data.min_max_height.x,chunk_data.min_max_height.y, fbm(p)),\n p.y,\n );\n}\n\nfn terrain_vertex(p: vec2) -> Vertex {\n let v = terrain_point(p);\n\n let tpx = terrain_point(p + vec2(0.1, 0.0)) - v;\n let tpz = terrain_point(p + vec2(0.0, 0.1)) - v;\n let tnx = terrain_point(p + vec2(-0.1, 0.0)) - v;\n let tnz = terrain_point(p + vec2(0.0, -0.1)) - v;\n\n let pn = normalize(cross(tpz, tpx));\n let nn = normalize(cross(tnz, tnx));\n\n let n = (pn + nn) * 0.5;\n\n return Vertex(v, n);\n}\n")])])]),a("p",[e._v("The "),a("code",[e._v("terrain_point")]),e._v(" function takes an XZ point on the terrain and returns a "),a("code",[e._v("vec3")]),e._v(" with the "),a("code",[e._v("y")]),e._v(" value between the min and max height values.")]),e._v(" "),a("p",[a("code",[e._v("terrain_vertex")]),e._v(" uses "),a("code",[e._v("terrain_point")]),e._v(" to get it's position and also to compute of the normal of the surface by sampling 4 nearby points and uses them to compute the normal using some "),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"}},[e._v("cross products"),a("OutboundLink")],1),e._v(".")]),e._v(" "),a("div",{staticClass:"note"},[a("p",[e._v("You'll notice that our "),a("code",[e._v("Vertex")]),e._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.")]),e._v(" "),a("p",[e._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 create in the fragment shader we use to render the terrain.")])]),e._v(" "),a("p",[e._v("Now that we can get a vertex on the terrains surface we can fill our vertex and index buffers with actual data. We'll create a "),a("code",[e._v("gen_terrain()")]),e._v(" function that will be the entry point for our compute shader:")]),e._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("@compute @workgroup_size(64)\nfn gen_terrain(\n @builtin(global_invocation_id) gid: vec3\n) {\n // snipped...\n}\n")])])]),a("p",[e._v("We specify that "),a("code",[e._v("gen_terrain")]),e._v(" is a compute shader entry point by annotating it with "),a("code",[e._v("stage(compute)")]),e._v(".")]),e._v(" "),a("p",[e._v("The "),a("code",[e._v("workgroup_size()")]),e._v(" is the number of workers that the GPU can allocate per "),a("code",[e._v("workgroup")]),e._v(". We specify the number of workers when we execute the compute shader. There are technically 3 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",[e._v("workgroup_size(64)")]),e._v(" is equivalent to "),a("code",[e._v("workgroup_size(64, 1, 1)")]),e._v(".")]),e._v(" "),a("p",[e._v("The "),a("code",[e._v("global_invocation_id")]),e._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",[e._v("global_invocation_id")]),e._v(" is the id of the current worker relative to all the other works.")]),e._v(" "),a("p",[e._v("Visually the workgroup grid would look something like this:")]),e._v(" "),a("p",[a("img",{attrs:{src:n(530),alt:"work group grid"}})]),e._v(" "),a("div",{staticClass:"note"},[a("p",[e._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:")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._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",[e._v("If you want learn more about workgroups "),a("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#compute-shader-workgroups",target:"_blank",rel:"noopener noreferrer"}},[e._v("check out the docs"),a("OutboundLink")],1),e._v(".")])]),e._v(" "),a("p",[e._v("TODO:")]),e._v(" "),a("ul",[a("li",[e._v("Note changes to "),a("code",[e._v("create_render_pipeline")])]),e._v(" "),a("li",[e._v("Mention "),a("code",[e._v("swizzle")]),e._v(" feature for cgmath")]),e._v(" "),a("li",[e._v("Compare workgroups and workgroups sizes to nested for loops\n"),a("ul",[a("li",[e._v("Maybe make a diagram in blender?")])])]),e._v(" "),a("li",[e._v("Change to camera movement speed")])])])}),[],!1,null,null,null);t.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/22.42d34407.js b/assets/js/23.abdd6762.js similarity index 98% rename from assets/js/22.42d34407.js rename to assets/js/23.abdd6762.js index 30484892..d166fdd2 100644 --- a/assets/js/22.42d34407.js +++ b/assets/js/23.abdd6762.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{530:function(t,s,a){t.exports=a.p+"assets/img/corruption.675b1eca.png"},531:function(t,s,a){t.exports=a.p+"assets/img/black_triangles.df338b97.png"},532:function(t,s,a){t.exports=a.p+"assets/img/render_doc_output.e0c8b298.png"},533:function(t,s,a){t.exports=a.p+"assets/img/results.7918efc1.png"},592:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"compute-example-tangents-and-bitangents"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compute-example-tangents-and-bitangents"}},[t._v("#")]),t._v(" Compute Example: Tangents and Bitangents")]),t._v(" "),n("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 "),n("code",[t._v("ModelVertex")]),t._v(" struct I used in the "),n("RouterLink",{attrs:{to:"/intermediate/tutorial11-normals/"}},[t._v("normal mapping tutorial")]),t._v(".")],1),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("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 "),n("code",[t._v("ModelVertex")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("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 "),n("code",[t._v("std430")]),t._v(" alignment that storage buffers require. I won't get into detail but you can check out the "),n("a",{attrs:{href:"../alignment"}},[t._v("alignment showcase")]),t._v(" if you want to know more. To summarize, the "),n("code",[t._v("vec2")]),t._v(" for the "),n("code",[t._v("tex_coords")]),t._v(" was messing up the byte alignment, corrupting the vertex data resulting in the following:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(530),alt:"./corruption.png"}})]),t._v(" "),n("p",[t._v("I could have fixed this by adding a padding field after "),n("code",[t._v("tex_coords")]),t._v(" on the Rust side, but that would require modifying the "),n("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(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" z"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" uv"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" uw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" nx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" ny"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" nz"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" tx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" tz"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" bx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" by"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" bz"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Since "),n("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 "),n("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(" "),n("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(" "),n("p",[n("img",{attrs:{src:a(531),alt:"./black_triangles.png"}})]),t._v(" "),n("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 "),n("code",[t._v("NaN")]),t._v(".")]),t._v(" "),n("p",[n("img",{attrs:{src:a(532),alt:"./render_doc_output.png"}})]),t._v(" "),n("p",[t._v("While on the CPU we could introduce a synchronization primitive such as a "),n("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 "),n("code",[t._v("main")]),t._v(" function.")]),t._v(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" vertexIndex "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" gl_GlobalInvocationID"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex result "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calcTangentBitangent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n dstVertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("vertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We use the "),n("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(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[t._v("ModelVertex "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calcTangentBitangent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" vertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ModelVertex v "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("vertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" trianglesIncluded "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Find the triangles that use v")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// * Loop over every triangle (i + 3)")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" numIndices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Only perform the calculation if one of the indices")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// matches our vertexIndex")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" index1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" index2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ModelVertex v0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex v1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex v2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" delta_uv1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" delta_uv2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" r "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n trianglesIncluded "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Average the tangent and bitangents")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("trianglesIncluded "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/=")]),t._v(" trianglesIncluded"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/=")]),t._v(" trianglesIncluded"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Save the results")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tx "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ty "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tz "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("z"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bx "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("by "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bz "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("z"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"possible-improvements"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#possible-improvements"}},[t._v("#")]),t._v(" Possible Improvements")]),t._v(" "),n("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(" "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" t "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangle_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangle_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangle_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t_list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" triangle_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangle_map_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleMapIndex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n start"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" i"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n len"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" t_list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n flat_triangle_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("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(" "),n("h2",{attrs:{id:"results"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#results"}},[t._v("#")]),t._v(" Results")]),t._v(" "),n("p",[t._v("The tangents and bitangents are now getting calculated correctly and on the GPU!")]),t._v(" "),n("p",[n("img",{attrs:{src:a(533),alt:"./results.png"}})]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{532:function(t,s,a){t.exports=a.p+"assets/img/corruption.675b1eca.png"},533:function(t,s,a){t.exports=a.p+"assets/img/black_triangles.df338b97.png"},534:function(t,s,a){t.exports=a.p+"assets/img/render_doc_output.e0c8b298.png"},535:function(t,s,a){t.exports=a.p+"assets/img/results.7918efc1.png"},595:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"compute-example-tangents-and-bitangents"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compute-example-tangents-and-bitangents"}},[t._v("#")]),t._v(" Compute Example: Tangents and Bitangents")]),t._v(" "),n("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 "),n("code",[t._v("ModelVertex")]),t._v(" struct I used in the "),n("RouterLink",{attrs:{to:"/intermediate/tutorial11-normals/"}},[t._v("normal mapping tutorial")]),t._v(".")],1),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("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 "),n("code",[t._v("ModelVertex")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("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 "),n("code",[t._v("std430")]),t._v(" alignment that storage buffers require. I won't get into detail but you can check out the "),n("a",{attrs:{href:"../alignment"}},[t._v("alignment showcase")]),t._v(" if you want to know more. To summarize, the "),n("code",[t._v("vec2")]),t._v(" for the "),n("code",[t._v("tex_coords")]),t._v(" was messing up the byte alignment, corrupting the vertex data resulting in the following:")]),t._v(" "),n("p",[n("img",{attrs:{src:a(532),alt:"./corruption.png"}})]),t._v(" "),n("p",[t._v("I could have fixed this by adding a padding field after "),n("code",[t._v("tex_coords")]),t._v(" on the Rust side, but that would require modifying the "),n("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(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" z"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" uv"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" uw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" nx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" ny"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" nz"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" tx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" tz"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" bx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" by"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" bz"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Since "),n("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 "),n("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(" "),n("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(" "),n("p",[n("img",{attrs:{src:a(533),alt:"./black_triangles.png"}})]),t._v(" "),n("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 "),n("code",[t._v("NaN")]),t._v(".")]),t._v(" "),n("p",[n("img",{attrs:{src:a(534),alt:"./render_doc_output.png"}})]),t._v(" "),n("p",[t._v("While on the CPU we could introduce a synchronization primitive such as a "),n("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 "),n("code",[t._v("main")]),t._v(" function.")]),t._v(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" vertexIndex "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" gl_GlobalInvocationID"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex result "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calcTangentBitangent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n dstVertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("vertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We use the "),n("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(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[t._v("ModelVertex "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calcTangentBitangent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" vertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ModelVertex v "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("vertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" trianglesIncluded "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Find the triangles that use v")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// * Loop over every triangle (i + 3)")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" numIndices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("uint")]),t._v(" index2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Only perform the calculation if one of the indices")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// matches our vertexIndex")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" index1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" index2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" vertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ModelVertex v0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex v1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ModelVertex v2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" srcVertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv0 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" uv2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("getUV")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec3")]),t._v(" delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" pos0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" delta_uv1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" delta_uv2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" uv2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" uv0"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("float")]),t._v(" r "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta_pos2 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" delta_pos1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" delta_uv2"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n trianglesIncluded "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Average the tangent and bitangents")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("trianglesIncluded "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/=")]),t._v(" trianglesIncluded"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/=")]),t._v(" trianglesIncluded"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n tangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n bitangent "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Save the results")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tx "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ty "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tz "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" tangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("z"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bx "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("by "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bz "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" bitangent"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("z"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"possible-improvements"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#possible-improvements"}},[t._v("#")]),t._v(" Possible Improvements")]),t._v(" "),n("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(" "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" t "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangle_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangle_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n triangle_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("t "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_v"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" t_list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" triangle_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangle_map_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleMapIndex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n start"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" i"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n len"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" t_list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n flat_triangle_map"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t_list"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("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(" "),n("h2",{attrs:{id:"results"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#results"}},[t._v("#")]),t._v(" Results")]),t._v(" "),n("p",[t._v("The tangents and bitangents are now getting calculated correctly and on the GPU!")]),t._v(" "),n("p",[n("img",{attrs:{src:a(535),alt:"./results.png"}})]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/23.a1c19e16.js b/assets/js/24.38da801a.js similarity index 99% rename from assets/js/23.a1c19e16.js rename to assets/js/24.38da801a.js index cb57eff7..1cd13128 100644 --- a/assets/js/23.a1c19e16.js +++ b/assets/js/24.38da801a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{500:function(t,s,a){t.exports=a.p+"assets/img/cubes.988d14be.png"},501:function(t,s,a){t.exports=a.p+"assets/img/cube-diffuse.03fc55af.jpg"},502:function(t,s,a){t.exports=a.p+"assets/img/cubes-correct.2db711eb.png"},580:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"model-loading"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#model-loading"}},[t._v("#")]),t._v(" Model Loading")]),t._v(" "),n("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 "),n("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(" "),n("p",[t._v("Our "),n("code",[t._v("lib.rs")]),t._v(" file is getting pretty cluttered, let's create a "),n("code",[t._v("model.rs")]),t._v(" file that we can put our model loading code into.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("You'll notice a couple of things here. In "),n("code",[t._v("lib.rs")]),t._v(" we had "),n("code",[t._v("Vertex")]),t._v(" as a struct, here we're using a trait. We could have multiple vertex types (model, UI, instance data, etc.). Making "),n("code",[t._v("Vertex")]),t._v(" a trait will allow us to abstract out the "),n("code",[t._v("VertexBufferLayout")]),t._v(" creation code to make creating "),n("code",[t._v("RenderPipeline")]),t._v("s simpler.")]),t._v(" "),n("p",[t._v("Another thing to mention is the "),n("code",[t._v("normal")]),t._v(" field in "),n("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(" "),n("p",[t._v("Let's define our "),n("code",[t._v("VertexBufferLayout")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("This is basically the same as the original "),n("code",[t._v("VertexBufferLayout")]),t._v(", but we added a "),n("code",[t._v("VertexAttribute")]),t._v(" for the "),n("code",[t._v("normal")]),t._v(". Remove the "),n("code",[t._v("Vertex")]),t._v(" struct in "),n("code",[t._v("lib.rs")]),t._v(" as we won't need it anymore, and use our new "),n("code",[t._v("Vertex")]),t._v(" from "),n("code",[t._v("model")]),t._v(" for the "),n("code",[t._v("RenderPipeline")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Since the "),n("code",[t._v("desc")]),t._v(" method is implemented on the "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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 "),n("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"),n("OutboundLink")],1),t._v(" with the model and all of its textures. We're going to put this model in a new "),n("code",[t._v("res")]),t._v(" folder next to the existing "),n("code",[t._v("src")]),t._v(" folder.")]),t._v(" "),n("h2",{attrs:{id:"accessing-files-in-the-res-folder"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#accessing-files-in-the-res-folder"}},[t._v("#")]),t._v(" Accessing files in the res folder")]),t._v(" "),n("p",[t._v("When cargo builds and runs our program it sets what's known as the current working directory. This directory is usually the folder containing your project's root "),n("code",[t._v("Cargo.toml")]),t._v(". The path to our res folder may differ depending on the structure of the project. In the "),n("code",[t._v("res")]),t._v(" folder for the example code for this section tutorial is at "),n("code",[t._v("code/beginner/tutorial9-models/res/")]),t._v(". When loading our model we could use this path, and just append "),n("code",[t._v("cube.obj")]),t._v(". This is fine, but if we change our project's structure, our code will break.")]),t._v(" "),n("p",[t._v("We're going to fix that by modifying our build script to copy our "),n("code",[t._v("res")]),t._v(" folder to where cargo creates our executable, and we'll reference it from there. Create a file called "),n("code",[t._v("build.rs")]),t._v(" and add the following:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("fs_extra"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("copy_items"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("fs_extra"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dir"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CopyOptions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("env"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This tells cargo to rerun this script if something in /res/ changes.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("println!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cargo:rerun-if-changed=res/*"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" out_dir "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("env"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" copy_options "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CopyOptions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n copy_options"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("overwrite "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" paths_to_copy "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n paths_to_copy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_items")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("paths_to_copy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" out_dir"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("copy_options"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("Make sure to put "),n("code",[t._v("build.rs")]),t._v(" in the same folder as the "),n("code",[t._v("Cargo.toml")]),t._v(". If you don't, cargo won't run it when your crate builds.")])]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The "),n("code",[t._v("OUT_DIR")]),t._v(" is an environment variable that cargo uses to specify where our application will be built.")])]),t._v(" "),n("p",[t._v("You'll need to modify your "),n("code",[t._v("Cargo.toml")]),t._v(" for this to work properly. Add the following below your "),n("code",[t._v("[dependencies]")]),t._v(" block.")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("build-dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("anyhow")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("fs_extra")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.2"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("glob")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n")])])]),n("h2",{attrs:{id:"accessing-files-from-wasm"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#accessing-files-from-wasm"}},[t._v("#")]),t._v(" Accessing files from WASM")]),t._v(" "),n("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 "),n("code",[t._v("resources.rs")]),t._v(" to handle this for us. We'll create two functions that will load text files and binary files respectively.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("io"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cfg_if"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("cfg_if"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceExt")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("crate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("format_url")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Url")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" window "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("web_sys"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" location "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" base "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Url")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("parse")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{}/{}/"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("origin")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("option_env!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"RES_PATH"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n base"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg_if!")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" url "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("format_url")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" txt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" path "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("env!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" txt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("read_to_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("txt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_binary")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg_if!")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" url "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("format_url")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" path "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("env!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("read")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("We're using "),n("code",[t._v("OUT_DIR")]),t._v(" on desktop to get to our "),n("code",[t._v("res")]),t._v(" folder.")])]),t._v(" "),n("p",[t._v("I'm using "),n("a",{attrs:{href:"https://docs.rs/reqwest",target:"_blank",rel:"noopener noreferrer"}},[t._v("reqwest"),n("OutboundLink")],1),t._v(" to handle loading the requests when using WASM. Add the following to the Cargo.toml:")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("target.'cfg(target_arch = \"wasm32\")'.dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# Other dependencies")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("reqwest")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.11"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll also need to add the "),n("code",[t._v("Location")]),t._v(" feature to "),n("code",[t._v("web-sys")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("web-sys")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Document"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Window"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Element"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Location"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Make sure to add "),n("code",[t._v("resources")]),t._v(" as a module in "),n("code",[t._v("lib.rs")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("resources")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"loading-models-with-tobj"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#loading-models-with-tobj"}},[t._v("#")]),t._v(" Loading models with TOBJ")]),t._v(" "),n("p",[t._v("We're going to use the "),n("a",{attrs:{href:"https://docs.rs/tobj/3.0/tobj/",target:"_blank",rel:"noopener noreferrer"}},[t._v("tobj"),n("OutboundLink")],1),t._v(" library to load our model. Let's add it to our "),n("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other dependencies...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("tobj")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"3.2.1"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"async"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Before we can load our model though, we need somewhere to put it.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Model")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" meshes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("You'll notice that our "),n("code",[t._v("Model")]),t._v(" struct has a "),n("code",[t._v("Vec")]),t._v(" for the "),n("code",[t._v("meshes")]),t._v(", and for "),n("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 "),n("code",[t._v("Mesh")]),t._v(" and "),n("code",[t._v("Material")]),t._v(" classes, so let's do that.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Material")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Mesh")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("Material")]),t._v(" is pretty simple, it's just the name and one texture. Our cube obj actually has 2 textures, but one is a normal map, and we'll get to those "),n("a",{attrs:{href:"../../intermediate/tutorial11-normals"}},[t._v("later")]),t._v(". The name is more for debugging purposes.")]),t._v(" "),n("p",[t._v("Speaking of textures, we'll need to add a function to load a "),n("code",[t._v("Texture")]),t._v(" in "),n("code",[t._v("resources.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_binary")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("load_texture")]),t._v(" method will be useful when we load the textures for our models, as "),n("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(" "),n("p",[n("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 "),n("code",[t._v("usize")]),t._v(" for the material. This "),n("code",[t._v("usize")]),t._v(" will be used to index the "),n("code",[t._v("materials")]),t._v(" list when it comes time to draw.")]),t._v(" "),n("p",[t._v("With all that out of the way, we can get to loading our model.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_text "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_cursor "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj_text"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" obj_reader "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj_cursor"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("models"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" obj_materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_obj_buf_async")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" obj_reader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOptions")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangulate"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n single_index"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("p"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mat_text "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("p"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_mtl_buf")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mat_text"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" meshes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" materials "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),n("h2",{attrs:{id:"rendering-a-mesh"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#rendering-a-mesh"}},[t._v("#")]),t._v(" Rendering a mesh")]),t._v(" "),n("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 "),n("code",[t._v("DrawModel")]),t._v(", and implement it for "),n("code",[t._v("RenderPass")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We could have put these methods in an "),n("code",[t._v("impl Model")]),t._v(", but I felt it made more sense to have the "),n("code",[t._v("RenderPass")]),t._v(" do all the rendering, as that's kind of its job. This does mean we have to import "),n("code",[t._v("DrawModel")]),t._v(" when we go to render though.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Before that though we need to actually load the model and save it to "),n("code",[t._v("State")]),t._v(". Put the following in "),n("code",[t._v("State::new()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_model "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("resources"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cube.obj"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instances "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("flat_map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("z"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" z "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("z "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" z "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_zero")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_z")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With all that done, you should get something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(500),alt:"cubes.png"}})]),t._v(" "),n("h2",{attrs:{id:"using-the-correct-textures"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#using-the-correct-textures"}},[t._v("#")]),t._v(" Using the correct textures")]),t._v(" "),n("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(" "),n("p",[n("img",{attrs:{src:a(501),alt:"cube-diffuse.jpg"}})]),t._v(" "),n("p",[t._v("but we're still getting our happy tree texture.")]),t._v(" "),n("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 "),n("code",[t._v("RenderPass")]),t._v(". We're still using our old "),n("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 "),n("code",[t._v("bind_group")]),t._v(" member of the "),n("code",[t._v("Material")]),t._v(" struct.")]),t._v(" "),n("p",[t._v("We're going to add a material parameter to "),n("code",[t._v("DrawModel")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to change the render code to reflect this.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mesh "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With all that in place, we should get the following.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(502),alt:"cubes-correct.png"}})]),t._v(" "),n("h2",{attrs:{id:"rendering-the-entire-model"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#rendering-the-entire-model"}},[t._v("#")]),t._v(" Rendering the entire model")]),t._v(" "),n("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 "),n("code",[t._v("DrawModel")]),t._v(" that will draw all the parts of the model with their respective materials.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The code in "),n("code",[t._v("lib.rs")]),t._v(" will change accordingly.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("WasmExample",{attrs:{example:"tutorial9_models"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{502:function(t,s,a){t.exports=a.p+"assets/img/cubes.988d14be.png"},503:function(t,s,a){t.exports=a.p+"assets/img/cube-diffuse.03fc55af.jpg"},504:function(t,s,a){t.exports=a.p+"assets/img/cubes-correct.2db711eb.png"},583:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"model-loading"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#model-loading"}},[t._v("#")]),t._v(" Model Loading")]),t._v(" "),n("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 "),n("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(" "),n("p",[t._v("Our "),n("code",[t._v("lib.rs")]),t._v(" file is getting pretty cluttered, let's create a "),n("code",[t._v("model.rs")]),t._v(" file that we can put our model loading code into.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("You'll notice a couple of things here. In "),n("code",[t._v("lib.rs")]),t._v(" we had "),n("code",[t._v("Vertex")]),t._v(" as a struct, here we're using a trait. We could have multiple vertex types (model, UI, instance data, etc.). Making "),n("code",[t._v("Vertex")]),t._v(" a trait will allow us to abstract out the "),n("code",[t._v("VertexBufferLayout")]),t._v(" creation code to make creating "),n("code",[t._v("RenderPipeline")]),t._v("s simpler.")]),t._v(" "),n("p",[t._v("Another thing to mention is the "),n("code",[t._v("normal")]),t._v(" field in "),n("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(" "),n("p",[t._v("Let's define our "),n("code",[t._v("VertexBufferLayout")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("This is basically the same as the original "),n("code",[t._v("VertexBufferLayout")]),t._v(", but we added a "),n("code",[t._v("VertexAttribute")]),t._v(" for the "),n("code",[t._v("normal")]),t._v(". Remove the "),n("code",[t._v("Vertex")]),t._v(" struct in "),n("code",[t._v("lib.rs")]),t._v(" as we won't need it anymore, and use our new "),n("code",[t._v("Vertex")]),t._v(" from "),n("code",[t._v("model")]),t._v(" for the "),n("code",[t._v("RenderPipeline")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Since the "),n("code",[t._v("desc")]),t._v(" method is implemented on the "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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 "),n("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"),n("OutboundLink")],1),t._v(" with the model and all of its textures. We're going to put this model in a new "),n("code",[t._v("res")]),t._v(" folder next to the existing "),n("code",[t._v("src")]),t._v(" folder.")]),t._v(" "),n("h2",{attrs:{id:"accessing-files-in-the-res-folder"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#accessing-files-in-the-res-folder"}},[t._v("#")]),t._v(" Accessing files in the res folder")]),t._v(" "),n("p",[t._v("When cargo builds and runs our program it sets what's known as the current working directory. This directory is usually the folder containing your project's root "),n("code",[t._v("Cargo.toml")]),t._v(". The path to our res folder may differ depending on the structure of the project. In the "),n("code",[t._v("res")]),t._v(" folder for the example code for this section tutorial is at "),n("code",[t._v("code/beginner/tutorial9-models/res/")]),t._v(". When loading our model we could use this path, and just append "),n("code",[t._v("cube.obj")]),t._v(". This is fine, but if we change our project's structure, our code will break.")]),t._v(" "),n("p",[t._v("We're going to fix that by modifying our build script to copy our "),n("code",[t._v("res")]),t._v(" folder to where cargo creates our executable, and we'll reference it from there. Create a file called "),n("code",[t._v("build.rs")]),t._v(" and add the following:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("fs_extra"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("copy_items"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("fs_extra"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dir"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CopyOptions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("env"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This tells cargo to rerun this script if something in /res/ changes.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("println!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cargo:rerun-if-changed=res/*"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" out_dir "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("env"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" copy_options "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CopyOptions")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n copy_options"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("overwrite "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" paths_to_copy "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n paths_to_copy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res/"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_items")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("paths_to_copy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" out_dir"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("copy_options"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("Make sure to put "),n("code",[t._v("build.rs")]),t._v(" in the same folder as the "),n("code",[t._v("Cargo.toml")]),t._v(". If you don't, cargo won't run it when your crate builds.")])]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The "),n("code",[t._v("OUT_DIR")]),t._v(" is an environment variable that cargo uses to specify where our application will be built.")])]),t._v(" "),n("p",[t._v("You'll need to modify your "),n("code",[t._v("Cargo.toml")]),t._v(" for this to work properly. Add the following below your "),n("code",[t._v("[dependencies]")]),t._v(" block.")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("build-dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("anyhow")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.0"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("fs_extra")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1.2"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("glob")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),t._v("\n")])])]),n("h2",{attrs:{id:"accessing-files-from-wasm"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#accessing-files-from-wasm"}},[t._v("#")]),t._v(" Accessing files from WASM")]),t._v(" "),n("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 "),n("code",[t._v("resources.rs")]),t._v(" to handle this for us. We'll create two functions that will load text files and binary files respectively.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("io"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cfg_if"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("cfg_if"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceExt")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("crate")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("format_url")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Url")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" window "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("web_sys"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" location "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("location")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" base "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Url")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("parse")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{}/{}/"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("origin")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("option_env!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"RES_PATH"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n base"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg_if!")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" url "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("format_url")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" txt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" path "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("env!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" txt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("read_to_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("txt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_binary")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg_if!")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" url "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("format_url")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("reqwest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("url"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" path "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("env!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"OUT_DIR"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"res"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("read")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("We're using "),n("code",[t._v("OUT_DIR")]),t._v(" on desktop to get to our "),n("code",[t._v("res")]),t._v(" folder.")])]),t._v(" "),n("p",[t._v("I'm using "),n("a",{attrs:{href:"https://docs.rs/reqwest",target:"_blank",rel:"noopener noreferrer"}},[t._v("reqwest"),n("OutboundLink")],1),t._v(" to handle loading the requests when using WASM. Add the following to the Cargo.toml:")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("target.'cfg(target_arch = \"wasm32\")'.dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# Other dependencies")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("reqwest")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.11"')]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll also need to add the "),n("code",[t._v("Location")]),t._v(" feature to "),n("code",[t._v("web-sys")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("web-sys")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Document"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Window"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Element"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Location"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Make sure to add "),n("code",[t._v("resources")]),t._v(" as a module in "),n("code",[t._v("lib.rs")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("resources")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"loading-models-with-tobj"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#loading-models-with-tobj"}},[t._v("#")]),t._v(" Loading models with TOBJ")]),t._v(" "),n("p",[t._v("We're going to use the "),n("a",{attrs:{href:"https://docs.rs/tobj/3.0/tobj/",target:"_blank",rel:"noopener noreferrer"}},[t._v("tobj"),n("OutboundLink")],1),t._v(" library to load our model. Let's add it to our "),n("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other dependencies...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("tobj")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"3.2.1"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"async"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Before we can load our model though, we need somewhere to put it.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Model")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" meshes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("You'll notice that our "),n("code",[t._v("Model")]),t._v(" struct has a "),n("code",[t._v("Vec")]),t._v(" for the "),n("code",[t._v("meshes")]),t._v(", and for "),n("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 "),n("code",[t._v("Mesh")]),t._v(" and "),n("code",[t._v("Material")]),t._v(" classes, so let's do that.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Material")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Mesh")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("String")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("usize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("Material")]),t._v(" is pretty simple, it's just the name and one texture. Our cube obj actually has 2 textures, but one is a normal map, and we'll get to those "),n("a",{attrs:{href:"../../intermediate/tutorial11-normals"}},[t._v("later")]),t._v(". The name is more for debugging purposes.")]),t._v(" "),n("p",[t._v("Speaking of textures, we'll need to add a function to load a "),n("code",[t._v("Texture")]),t._v(" in "),n("code",[t._v("resources.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_binary")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_bytes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("load_texture")]),t._v(" method will be useful when we load the textures for our models, as "),n("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(" "),n("p",[n("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 "),n("code",[t._v("usize")]),t._v(" for the material. This "),n("code",[t._v("usize")]),t._v(" will be used to index the "),n("code",[t._v("materials")]),t._v(" list when it comes time to draw.")]),t._v(" "),n("p",[t._v("With all that out of the way, we can get to loading our model.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("anyhow"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_text "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_cursor "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj_text"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" obj_reader "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj_cursor"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("models"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" obj_materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_obj_buf_async")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" obj_reader"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOptions")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n triangulate"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n single_index"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("p"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mat_text "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("p"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tobj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_mtl_buf")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufReader")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Cursor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mat_text"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" materials "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" m "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" obj_materials"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureView")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingResource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Sampler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sampler"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" models\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into_iter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertices "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("i"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n tex_coords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vertex_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Vertex Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vertices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("format!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" file_name"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_string")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" m"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap_or")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" meshes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" materials "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),n("h2",{attrs:{id:"rendering-a-mesh"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#rendering-a-mesh"}},[t._v("#")]),t._v(" Rendering a mesh")]),t._v(" "),n("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 "),n("code",[t._v("DrawModel")]),t._v(", and implement it for "),n("code",[t._v("RenderPass")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// model.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We could have put these methods in an "),n("code",[t._v("impl Model")]),t._v(", but I felt it made more sense to have the "),n("code",[t._v("RenderPass")]),t._v(" do all the rendering, as that's kind of its job. This does mean we have to import "),n("code",[t._v("DrawModel")]),t._v(" when we go to render though.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Before that though we need to actually load the model and save it to "),n("code",[t._v("State")]),t._v(". Put the following in "),n("code",[t._v("State::new()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" obj_model "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("resources"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("load_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cube.obj"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instances "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("flat_map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("z"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" x "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" z "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SPACE_BETWEEN")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("z "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" z "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_zero")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_z")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With all that done, you should get something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(502),alt:"cubes.png"}})]),t._v(" "),n("h2",{attrs:{id:"using-the-correct-textures"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#using-the-correct-textures"}},[t._v("#")]),t._v(" Using the correct textures")]),t._v(" "),n("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(" "),n("p",[n("img",{attrs:{src:a(503),alt:"cube-diffuse.jpg"}})]),t._v(" "),n("p",[t._v("but we're still getting our happy tree texture.")]),t._v(" "),n("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 "),n("code",[t._v("RenderPass")]),t._v(". We're still using our old "),n("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 "),n("code",[t._v("bind_group")]),t._v(" member of the "),n("code",[t._v("Material")]),t._v(" struct.")]),t._v(" "),n("p",[t._v("We're going to add a material parameter to "),n("code",[t._v("DrawModel")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_elements"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to change the render code to reflect this.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mesh "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With all that in place, we should get the following.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(504),alt:"cubes-correct.png"}})]),t._v(" "),n("h2",{attrs:{id:"rendering-the-entire-model"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#rendering-the-entire-model"}},[t._v("#")]),t._v(" Rendering the entire model")]),t._v(" "),n("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 "),n("code",[t._v("DrawModel")]),t._v(" that will draw all the parts of the model with their respective materials.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("trait")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DrawModel")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPass")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("where")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'b")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" mesh "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("meshes "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" material "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("materials"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_mesh_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mesh"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" material"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("clone")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The code in "),n("code",[t._v("lib.rs")]),t._v(" will change accordingly.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_model_instanced")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj_model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("WasmExample",{attrs:{example:"tutorial9_models"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/24.deb3c0a2.js b/assets/js/25.831771f8.js similarity index 69% rename from assets/js/24.deb3c0a2.js rename to assets/js/25.831771f8.js index 0c26901f..6954cd4e 100644 --- a/assets/js/24.deb3c0a2.js +++ b/assets/js/25.831771f8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{444:function(t,e,n){},538:function(t,e,n){"use strict";n(444)},568:function(t,e,n){"use strict";n.r(e);var i={name:"AutoGithubLink",computed:{link:function(){return"https://github.com/sotrh/learn-wgpu/tree/master/code"+this.$page.path}}},r=(n(538),n(23)),u=Object(r.a)(i,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"auto-github-link"},[e("a",{attrs:{href:this.link,target:"_blank",rel:"noopener noreferrer"}},[this._v("Check out the code!")]),this._v(" "),e("OutboundLink")],1)}),[],!1,null,null,null);e.default=u.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{445:function(t,e,n){},540:function(t,e,n){"use strict";n(445)},571:function(t,e,n){"use strict";n.r(e);var i={name:"AutoGithubLink",computed:{link:function(){return"https://github.com/sotrh/learn-wgpu/tree/master/code"+this.$page.path}}},r=(n(540),n(23)),u=Object(r.a)(i,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"auto-github-link"},[e("a",{attrs:{href:this.link,target:"_blank",rel:"noopener noreferrer"}},[this._v("Check out the code!")]),this._v(" "),e("OutboundLink")],1)}),[],!1,null,null,null);e.default=u.exports}}]); \ No newline at end of file diff --git a/assets/js/25.a612b130.js b/assets/js/26.275f1cf4.js similarity index 62% rename from assets/js/25.a612b130.js rename to assets/js/26.275f1cf4.js index c1d0b23e..3fda754e 100644 --- a/assets/js/25.a612b130.js +++ b/assets/js/26.275f1cf4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{446:function(t,e,n){},544:function(t,e,n){"use strict";n(446)},599: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:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(544),n(23)),a=Object(r.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([[26],{447:function(t,e,n){},546:function(t,e,n){"use strict";n(447)},602: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:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(546),n(23)),a=Object(r.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/26.4f737487.js b/assets/js/27.01d55187.js similarity index 99% rename from assets/js/26.4f737487.js rename to assets/js/27.01d55187.js index 4d5d5201..b570b065 100644 --- a/assets/js/26.4f737487.js +++ b/assets/js/27.01d55187.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{483: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"},484:function(t,s,a){t.exports=a.p+"assets/img/no-clear.753f913f.png"},573:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"the-surface"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-surface"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),n("h2",{attrs:{id:"first-some-housekeeping-state"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#first-some-housekeeping-state"}},[t._v("#")]),t._v(" First, some housekeeping: State")]),t._v(" "),n("p",[t._v("For convenience, we're going to pack all the fields into a struct and create some methods for it.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Creating some of the wgpu types requires async code")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("I'm glossing over "),n("code",[t._v("State")]),t._v("s fields, but they'll make more sense as I explain the code behind these methods.")]),t._v(" "),n("h2",{attrs:{id:"state-new"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#state-new"}},[t._v("#")]),t._v(" State::new()")]),t._v(" "),n("p",[t._v("The code for this is pretty straightforward, but let's break it down a bit.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("inner_size")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The instance is a handle to our GPU")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Backends::all => Vulkan + Metal + DX12 + Browser WebGPU")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Backends")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" instance"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_adapter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RequestAdapterOptions")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n power_preference"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PowerPreference")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compatible_surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n force_fallback_adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h3",{attrs:{id:"instance-and-adapter"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#instance-and-adapter"}},[t._v("#")]),t._v(" Instance and Adapter")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("instance")]),t._v(" is the first thing you create when using wgpu. Its main purpose\nis to create "),n("code",[t._v("Adapter")]),t._v("s and "),n("code",[t._v("Surface")]),t._v("s.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("adapter")]),t._v(" is a handle to our actual graphics card. You can use this to get information about the graphics card such as its name and what backend the adapter uses. We use this to create our "),n("code",[t._v("Device")]),t._v(" and "),n("code",[t._v("Queue")]),t._v(" later. Let's discuss the fields of "),n("code",[t._v("RequestAdapterOptions")]),t._v(".")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("power_preference")]),t._v(" has two variants: "),n("code",[t._v("LowPower")]),t._v(", and "),n("code",[t._v("HighPerformance")]),t._v(". "),n("code",[t._v("LowPower")]),t._v(" will pick an adapter that favors battery life, such as an integrated GPU. "),n("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 "),n("code",[t._v("LowPower")]),t._v(" if there is no adapter for the "),n("code",[t._v("HighPerformance")]),t._v(" option.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("compatible_surface")]),t._v(" field tells wgpu to find an adapter that can present to the supplied surface.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("force_fallback_adapter")]),t._v(' forces wgpu to pick an adapter that will work on all hardware. This usually means that the rendering backend will use a "software" system, instead of hardware such as a GPU.')])]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The options I've passed to "),n("code",[t._v("request_adapter")]),t._v(" aren't guaranteed to work for all devices, but will work for most of them. If wgpu can't find an adapter with the required permissions, "),n("code",[t._v("request_adapter")]),t._v(" will return "),n("code",[t._v("None")]),t._v(". If you want to get all adapters for a particular backend you can use "),n("code",[t._v("enumerate_adapters")]),t._v(". This will give you an iterator that you can loop over to check if one of the adapters works for your needs.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate_adapters")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Backends")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("adapter"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Check if this adapter supports our surface")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_empty")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),n("p",[t._v("Another thing to note is that "),n("code",[t._v("Adapter")]),t._v("s are locked to a specific backend. If you are on Windows and have 2 graphics cards you'll have at least 4 adapters available to use, 2 Vulkan and 2 DirectX.")]),t._v(" "),n("p",[t._v("For more fields you can use to refine your search, "),n("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Adapter.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("check out the docs"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("h3",{attrs:{id:"the-surface-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-surface-2"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("surface")]),t._v(" is the part of the window that we draw to. We need it to draw directly to the screen. Our "),n("code",[t._v("window")]),t._v(" needs to implement "),n("a",{attrs:{href:"https://crates.io/crates/raw-window-handle",target:"_blank",rel:"noopener noreferrer"}},[t._v("raw-window-handle"),n("OutboundLink")],1),t._v("'s "),n("code",[t._v("HasRawWindowHandle")]),t._v(" trait to create a surface. Fortunately, winit's "),n("code",[t._v("Window")]),t._v(" fits the bill. We also need it to request our "),n("code",[t._v("adapter")]),t._v(".")]),t._v(" "),n("h3",{attrs:{id:"device-and-queue"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#device-and-queue"}},[t._v("#")]),t._v(" Device and Queue")]),t._v(" "),n("p",[t._v("Let's use the "),n("code",[t._v("adapter")]),t._v(" to create the device and queue.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n features"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Features")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("empty")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// WebGL doesn't support all of wgpu's features, so if")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// we're building for the web we'll have to disable some.")]),t._v("\n limits"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target_arch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Limits")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("downlevel_webgl2_defaults")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Limits")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Trace path")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("features")]),t._v(" field on "),n("code",[t._v("DeviceDescriptor")]),t._v(", allows us to specify what extra features we want. For this simple example, I've decided not to use any extra features.")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The graphics card you have limits the features you can use. If you want to use certain features you may need to limit what devices you support or provide workarounds.")]),t._v(" "),n("p",[t._v("You can get a list of features supported by your device using "),n("code",[t._v("adapter.features()")]),t._v(", or "),n("code",[t._v("device.features()")]),t._v(".")]),t._v(" "),n("p",[t._v("You can view a full list of features "),n("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Features.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("limits")]),t._v(" field describes the limit of certain types of resources that we can create. We'll use the defaults for this tutorial, so we can support most devices. You can view a list of limits "),n("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Limits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n present_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PresentMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompositeAlphaMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Auto")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Here we are defining a config for our surface. This will define how the surface creates its underlying "),n("code",[t._v("SurfaceTexture")]),t._v("s. We will talk about "),n("code",[t._v("SurfaceTexture")]),t._v(" when we get to the "),n("code",[t._v("render")]),t._v(" function. For now, let's talk about the config's fields.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("usage")]),t._v(" field describes how "),n("code",[t._v("SurfaceTexture")]),t._v("s will be used. "),n("code",[t._v("RENDER_ATTACHMENT")]),t._v(" specifies that the textures will be used to write to the screen (we'll talk about more "),n("code",[t._v("TextureUsages")]),t._v("s later).")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("format")]),t._v(" defines how "),n("code",[t._v("SurfaceTexture")]),t._v("s will be stored on the gpu. Different displays prefer different formats. We use "),n("code",[t._v("surface.get_preferred_format(&adapter)")]),t._v(" to figure out the best format to use based on the display you're using.")]),t._v(" "),n("p",[n("code",[t._v("width")]),t._v(" and "),n("code",[t._v("height")]),t._v(" are the width and the height in pixels of a "),n("code",[t._v("SurfaceTexture")]),t._v(". This should usually be the width and the height of the window.")]),t._v(" "),n("div",{staticClass:"warning"},[t._v("\nMake sure that the width and height of the `SurfaceTexture` are not 0, as that can cause your app to crash.\n")]),t._v(" "),n("p",[n("code",[t._v("present_mode")]),t._v(" uses "),n("code",[t._v("wgpu::PresentMode")]),t._v(" enum which determines how to sync the surface with the display. The option we picked, "),n("code",[t._v("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 "),n("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/enum.PresentMode.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the docs"),n("OutboundLink")],1)]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("If you want to let your users pick what "),n("code",[t._v("PresentMode")]),t._v(" they use, you can use "),n("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_supported_modes()"),n("OutboundLink")],1),t._v(" to get a list of all the "),n("code",[t._v("PresentMode")]),t._v("s the surface supports:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" modes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_modes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Regardless, "),n("code",[t._v("PresentMode::Fifo")]),t._v(" will always be supported, and "),n("code",[t._v("PresentMode::AutoVsync")]),t._v(" and "),n("code",[t._v("PresentMode::AutoNoVsync")]),t._v(" have fallback support and therefore will work on all platforms.")])]),t._v(" "),n("p",[t._v("Now that we've configured our surface properly we can add these new fields at the end of the method.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Since our "),n("code",[t._v("State::new()")]),t._v(" method is async we need to change "),n("code",[t._v("run()")]),t._v(" to be async as well so that we can await it.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Window setup...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Event loop...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now that "),n("code",[t._v("run()")]),t._v(" is async, "),n("code",[t._v("main()")]),t._v(" will need some way to await the future. We could use a crate like "),n("a",{attrs:{href:"https://docs.rs/tokio",target:"_blank",rel:"noopener noreferrer"}},[t._v("tokio"),n("OutboundLink")],1),t._v(", or "),n("a",{attrs:{href:"https://docs.rs/async-std",target:"_blank",rel:"noopener noreferrer"}},[t._v("async-std"),n("OutboundLink")],1),t._v(", but I'm going to go with the much more lightweight "),n("a",{attrs:{href:"https://docs.rs/pollster",target:"_blank",rel:"noopener noreferrer"}},[t._v("pollster"),n("OutboundLink")],1),t._v(". Add the following to your "),n("code",[t._v("Cargo.toml")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other deps...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n")])])]),n("p",[t._v("We then use the "),n("code",[t._v("block_on")]),t._v(" function provided by pollster to await our future:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"warning"},[n("p",[t._v("Don't use "),n("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(" "),n("p",[t._v("If we try to build WASM now it will fail because "),n("code",[t._v("wasm-bindgen")]),t._v(" doesn't support using async functions as "),n("code",[t._v("start")]),t._v(" methods. You could switch to calling "),n("code",[t._v("run")]),t._v(" manually in javascript, but for simplicity, we'll add the "),n("a",{attrs:{href:"https://docs.rs/wasm-bindgen-futures",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen-futures"),n("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(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cfg-if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.27"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.9"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("target.'cfg(target_arch = \"wasm32\")'.dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_error_panic_hook")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.1.6"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_log")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2.0"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"webgl"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wasm-bindgen")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wasm-bindgen-futures")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("web-sys")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Document"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Window"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Element"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"resize"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#resize"}},[t._v("#")]),t._v(" resize()")]),t._v(" "),n("p",[t._v("If we want to support resizing in our application, we're going to need to reconfigure the "),n("code",[t._v("surface")]),t._v(" every time the window's size changes. That's the reason we stored the physical "),n("code",[t._v("size")]),t._v(" and the "),n("code",[t._v("config")]),t._v(" used to configure the "),n("code",[t._v("surface")]),t._v(". With all of these, the resize method is very simple.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("There's nothing different here from the initial "),n("code",[t._v("surface")]),t._v(" configuration, so I won't get into it.")]),t._v(" "),n("p",[t._v("We call this method in "),n("code",[t._v("run()")]),t._v(" in the event loop for the following events.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new_inner_size is &&mut so we have to dereference it twice")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"input"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[t._v("#")]),t._v(" input()")]),t._v(" "),n("p",[n("code",[t._v("input()")]),t._v(" returns a "),n("code",[t._v("bool")]),t._v(" to indicate whether an event has been fully processed. If the method returns "),n("code",[t._v("true")]),t._v(", the main loop won't process the event any further.")]),t._v(" "),n("p",[t._v("We're just going to return false for now because we don't have any events we want to capture.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to do a little more work in the event loop. We want "),n("code",[t._v("State")]),t._v(" to have priority over "),n("code",[t._v("run()")]),t._v(". Doing that (and previous changes) should have your loop looking like this.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// run()")]),t._v("\nevent_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("ref")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"update"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#update"}},[t._v("#")]),t._v(" update()")]),t._v(" "),n("p",[t._v("We don't have anything to update yet, so leave the method empty.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// remove `todo!()`")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll add some code here later on to move around objects.")]),t._v(" "),n("h2",{attrs:{id:"render"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render()")]),t._v(" "),n("p",[t._v("Here's where the magic happens. First, we need to get a frame to render to.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("get_current_texture")]),t._v(" function will wait for the "),n("code",[t._v("surface")]),t._v(" to provide a new "),n("code",[t._v("SurfaceTexture")]),t._v(" that we will render to. We'll store this in "),n("code",[t._v("output")]),t._v(" for later.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("This line creates a "),n("code",[t._v("TextureView")]),t._v(" with default settings. We need to do this because we want to control how the render code interacts with the texture.")]),t._v(" "),n("p",[t._v("We also need to create a "),n("code",[t._v("CommandEncoder")]),t._v(" to create the actual commands to send to the gpu. Most modern graphics frameworks expect commands to be stored in a command buffer before being sent to the gpu. The "),n("code",[t._v("encoder")]),t._v(" builds a command buffer that we can then send to the gpu.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Encoder"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now we can get to clearing the screen (long time coming). We need to use the "),n("code",[t._v("encoder")]),t._v(" to create a "),n("code",[t._v("RenderPass")]),t._v(". The "),n("code",[t._v("RenderPass")]),t._v(" has all the methods for the actual drawing. The code for creating a "),n("code",[t._v("RenderPass")]),t._v(" is a bit nested, so I'll copy it all here before talking about its pieces.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" _render_pass "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// submit will accept anything that implements IntoIter")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("present")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("First things first, let's talk about the extra block ("),n("code",[t._v("{}")]),t._v(") around "),n("code",[t._v("encoder.begin_render_pass(...)")]),t._v(". "),n("code",[t._v("begin_render_pass()")]),t._v(" borrows "),n("code",[t._v("encoder")]),t._v(" mutably (aka "),n("code",[t._v("&mut self")]),t._v("). We can't call "),n("code",[t._v("encoder.finish()")]),t._v(" until we release that mutable borrow. The block tells rust to drop any variables within it when the code leaves that scope thus releasing the mutable borrow on "),n("code",[t._v("encoder")]),t._v(" and allowing us to "),n("code",[t._v("finish()")]),t._v(" it. If you don't like the "),n("code",[t._v("{}")]),t._v(", you can also use "),n("code",[t._v("drop(render_pass)")]),t._v(" to achieve the same effect.")]),t._v(" "),n("p",[t._v("The last lines of the code tell "),n("code",[t._v("wgpu")]),t._v(" to finish the command buffer, and to submit it to the gpu's render queue.")]),t._v(" "),n("p",[t._v("We need to update the event loop again to call this method. We'll also call "),n("code",[t._v("update()")]),t._v(" before it too.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// run()")]),t._v("\nevent_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RedrawRequested")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Reconfigure the surface if lost")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Lost")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The system is out of memory, we should probably quit")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("OutOfMemory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All other errors (Outdated, Timeout) should be resolved by the next frame")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?}"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MainEventsCleared")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// RedrawRequested will only trigger once, unless we manually")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// request it.")]),t._v("\n window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_redraw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With all that, you should be getting something that looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(483),alt:"Window with a blue background"}})]),t._v(" "),n("h2",{attrs:{id:"wait-what-s-going-on-with-renderpassdescriptor"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wait-what-s-going-on-with-renderpassdescriptor"}},[t._v("#")]),t._v(" Wait, what's going on with RenderPassDescriptor?")]),t._v(" "),n("p",[t._v("Some of you may be able to tell what's going on just by looking at it, but I'd be remiss if I didn't go over it. Let's take a look at the code again.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("A "),n("code",[t._v("RenderPassDescriptor")]),t._v(" only has three fields: "),n("code",[t._v("label")]),t._v(", "),n("code",[t._v("color_attachments")]),t._v(" and "),n("code",[t._v("depth_stencil_attachment")]),t._v(". The "),n("code",[t._v("color_attachments")]),t._v(" describe where we are going to draw our color to. We use the "),n("code",[t._v("TextureView")]),t._v(" we created earlier to make sure that we render to the screen.")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The "),n("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 supply the ones you care about.')])]),t._v(" "),n("p",[t._v("We'll use "),n("code",[t._v("depth_stencil_attachment")]),t._v(" later, but we'll set it to "),n("code",[t._v("None")]),t._v(" for now.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("RenderPassColorAttachment")]),t._v(" has the "),n("code",[t._v("view")]),t._v(" field which informs "),n("code",[t._v("wgpu")]),t._v(" what texture to save the colors to. In this case we specify the "),n("code",[t._v("view")]),t._v(" that we created using "),n("code",[t._v("surface.get_current_texture()")]),t._v(". This means that any colors we draw to this attachment will get drawn to the screen.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("resolve_target")]),t._v(" is the texture that will receive the resolved output. This will be the same as "),n("code",[t._v("view")]),t._v(" unless multisampling is enabled. We don't need to specify this, so we leave it as "),n("code",[t._v("None")]),t._v(".")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("ops")]),t._v(" field takes a "),n("code",[t._v("wpgu::Operations")]),t._v(" object. This tells wgpu what to do with the colors on the screen (specified by "),n("code",[t._v("view")]),t._v("). The "),n("code",[t._v("load")]),t._v(" field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The "),n("code",[t._v("store")]),t._v(" field tells wgpu whether we want to store the rendered results to the "),n("code",[t._v("Texture")]),t._v(" behind our "),n("code",[t._v("TextureView")]),t._v(" (in this case it's the "),n("code",[t._v("SurfaceTexture")]),t._v("). We use "),n("code",[t._v("true")]),t._v(" as we do want to store our render results.")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("It's not uncommon to not clear the screen if the screen is going to be completely covered up with objects. If your scene doesn't cover the entire screen however you can end up with something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(484),alt:"./no-clear.png"}})])]),t._v(" "),n("h2",{attrs:{id:"validation-errors"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#validation-errors"}},[t._v("#")]),t._v(" Validation Errors?")]),t._v(" "),n("p",[t._v("If wgpu is using Vulkan on your machine, you may run into validation errors if you are running an older version of the Vulkan SDK. You should be using at least version "),n("code",[t._v("1.2.182")]),t._v(" as older versions can give out some false positives. If errors persist, you may have encountered a bug in wgpu. You can post an issue at "),n("a",{attrs:{href:"https://github.com/gfx-rs/wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/gfx-rs/wgpu"),n("OutboundLink")],1)]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Modify the "),n("code",[t._v("input()")]),t._v(" method to capture mouse events, and update the clear color using that. "),n("em",[t._v("Hint: you'll probably need to use "),n("code",[t._v("WindowEvent::CursorMoved")])]),t._v(".")]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial2_surface"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{485: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"},486:function(t,s,a){t.exports=a.p+"assets/img/no-clear.753f913f.png"},576:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"the-surface"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-surface"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),n("h2",{attrs:{id:"first-some-housekeeping-state"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#first-some-housekeeping-state"}},[t._v("#")]),t._v(" First, some housekeeping: State")]),t._v(" "),n("p",[t._v("For convenience, we're going to pack all the fields into a struct and create some methods for it.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Queue")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Creating some of the wgpu types requires async code")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("todo!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("I'm glossing over "),n("code",[t._v("State")]),t._v("s fields, but they'll make more sense as I explain the code behind these methods.")]),t._v(" "),n("h2",{attrs:{id:"state-new"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#state-new"}},[t._v("#")]),t._v(" State::new()")]),t._v(" "),n("p",[t._v("The code for this is pretty straightforward, but let's break it down a bit.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("inner_size")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The instance is a handle to our GPU")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Backends::all => Vulkan + Metal + DX12 + Browser WebGPU")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Backends")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" surface "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("unsafe")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" instance"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_surface")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_adapter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RequestAdapterOptions")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n power_preference"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PowerPreference")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compatible_surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n force_fallback_adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h3",{attrs:{id:"instance-and-adapter"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#instance-and-adapter"}},[t._v("#")]),t._v(" Instance and Adapter")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("instance")]),t._v(" is the first thing you create when using wgpu. Its main purpose\nis to create "),n("code",[t._v("Adapter")]),t._v("s and "),n("code",[t._v("Surface")]),t._v("s.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("adapter")]),t._v(" is a handle to our actual graphics card. You can use this to get information about the graphics card such as its name and what backend the adapter uses. We use this to create our "),n("code",[t._v("Device")]),t._v(" and "),n("code",[t._v("Queue")]),t._v(" later. Let's discuss the fields of "),n("code",[t._v("RequestAdapterOptions")]),t._v(".")]),t._v(" "),n("ul",[n("li",[n("code",[t._v("power_preference")]),t._v(" has two variants: "),n("code",[t._v("LowPower")]),t._v(", and "),n("code",[t._v("HighPerformance")]),t._v(". "),n("code",[t._v("LowPower")]),t._v(" will pick an adapter that favors battery life, such as an integrated GPU. "),n("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 "),n("code",[t._v("LowPower")]),t._v(" if there is no adapter for the "),n("code",[t._v("HighPerformance")]),t._v(" option.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("compatible_surface")]),t._v(" field tells wgpu to find an adapter that can present to the supplied surface.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("force_fallback_adapter")]),t._v(' forces wgpu to pick an adapter that will work on all hardware. This usually means that the rendering backend will use a "software" system, instead of hardware such as a GPU.')])]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The options I've passed to "),n("code",[t._v("request_adapter")]),t._v(" aren't guaranteed to work for all devices, but will work for most of them. If wgpu can't find an adapter with the required permissions, "),n("code",[t._v("request_adapter")]),t._v(" will return "),n("code",[t._v("None")]),t._v(". If you want to get all adapters for a particular backend you can use "),n("code",[t._v("enumerate_adapters")]),t._v(". This will give you an iterator that you can loop over to check if one of the adapters works for your needs.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("enumerate_adapters")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Backends")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("adapter"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Check if this adapter supports our surface")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_empty")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),n("p",[t._v("Another thing to note is that "),n("code",[t._v("Adapter")]),t._v("s are locked to a specific backend. If you are on Windows and have 2 graphics cards you'll have at least 4 adapters available to use, 2 Vulkan and 2 DirectX.")]),t._v(" "),n("p",[t._v("For more fields you can use to refine your search, "),n("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Adapter.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("check out the docs"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("h3",{attrs:{id:"the-surface-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-surface-2"}},[t._v("#")]),t._v(" The Surface")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("surface")]),t._v(" is the part of the window that we draw to. We need it to draw directly to the screen. Our "),n("code",[t._v("window")]),t._v(" needs to implement "),n("a",{attrs:{href:"https://crates.io/crates/raw-window-handle",target:"_blank",rel:"noopener noreferrer"}},[t._v("raw-window-handle"),n("OutboundLink")],1),t._v("'s "),n("code",[t._v("HasRawWindowHandle")]),t._v(" trait to create a surface. Fortunately, winit's "),n("code",[t._v("Window")]),t._v(" fits the bill. We also need it to request our "),n("code",[t._v("adapter")]),t._v(".")]),t._v(" "),n("h3",{attrs:{id:"device-and-queue"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#device-and-queue"}},[t._v("#")]),t._v(" Device and Queue")]),t._v(" "),n("p",[t._v("Let's use the "),n("code",[t._v("adapter")]),t._v(" to create the device and queue.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n features"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Features")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("empty")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// WebGL doesn't support all of wgpu's features, so if")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// we're building for the web we'll have to disable some.")]),t._v("\n limits"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target_arch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Limits")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("downlevel_webgl2_defaults")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Limits")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Trace path")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("features")]),t._v(" field on "),n("code",[t._v("DeviceDescriptor")]),t._v(", allows us to specify what extra features we want. For this simple example, I've decided not to use any extra features.")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The graphics card you have limits the features you can use. If you want to use certain features you may need to limit what devices you support or provide workarounds.")]),t._v(" "),n("p",[t._v("You can get a list of features supported by your device using "),n("code",[t._v("adapter.features()")]),t._v(", or "),n("code",[t._v("device.features()")]),t._v(".")]),t._v(" "),n("p",[t._v("You can view a full list of features "),n("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Features.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("limits")]),t._v(" field describes the limit of certain types of resources that we can create. We'll use the defaults for this tutorial, so we can support most devices. You can view a list of limits "),n("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/struct.Limits.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" config "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceConfiguration")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n present_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PresentMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompositeAlphaMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Auto")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Here we are defining a config for our surface. This will define how the surface creates its underlying "),n("code",[t._v("SurfaceTexture")]),t._v("s. We will talk about "),n("code",[t._v("SurfaceTexture")]),t._v(" when we get to the "),n("code",[t._v("render")]),t._v(" function. For now, let's talk about the config's fields.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("usage")]),t._v(" field describes how "),n("code",[t._v("SurfaceTexture")]),t._v("s will be used. "),n("code",[t._v("RENDER_ATTACHMENT")]),t._v(" specifies that the textures will be used to write to the screen (we'll talk about more "),n("code",[t._v("TextureUsages")]),t._v("s later).")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("format")]),t._v(" defines how "),n("code",[t._v("SurfaceTexture")]),t._v("s will be stored on the gpu. Different displays prefer different formats. We use "),n("code",[t._v("surface.get_preferred_format(&adapter)")]),t._v(" to figure out the best format to use based on the display you're using.")]),t._v(" "),n("p",[n("code",[t._v("width")]),t._v(" and "),n("code",[t._v("height")]),t._v(" are the width and the height in pixels of a "),n("code",[t._v("SurfaceTexture")]),t._v(". This should usually be the width and the height of the window.")]),t._v(" "),n("div",{staticClass:"warning"},[t._v("\nMake sure that the width and height of the `SurfaceTexture` are not 0, as that can cause your app to crash.\n")]),t._v(" "),n("p",[n("code",[t._v("present_mode")]),t._v(" uses "),n("code",[t._v("wgpu::PresentMode")]),t._v(" enum which determines how to sync the surface with the display. The option we picked, "),n("code",[t._v("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 "),n("a",{attrs:{href:"https://docs.rs/wgpu/latest/wgpu/enum.PresentMode.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the docs"),n("OutboundLink")],1)]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("If you want to let your users pick what "),n("code",[t._v("PresentMode")]),t._v(" they use, you can use "),n("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_supported_modes()"),n("OutboundLink")],1),t._v(" to get a list of all the "),n("code",[t._v("PresentMode")]),t._v("s the surface supports:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" modes "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_modes")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("adapter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Regardless, "),n("code",[t._v("PresentMode::Fifo")]),t._v(" will always be supported, and "),n("code",[t._v("PresentMode::AutoVsync")]),t._v(" and "),n("code",[t._v("PresentMode::AutoNoVsync")]),t._v(" have fallback support and therefore will work on all platforms.")])]),t._v(" "),n("p",[t._v("Now that we've configured our surface properly we can add these new fields at the end of the method.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Since our "),n("code",[t._v("State::new()")]),t._v(" method is async we need to change "),n("code",[t._v("run()")]),t._v(" to be async as well so that we can await it.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Window setup...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Event loop...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now that "),n("code",[t._v("run()")]),t._v(" is async, "),n("code",[t._v("main()")]),t._v(" will need some way to await the future. We could use a crate like "),n("a",{attrs:{href:"https://docs.rs/tokio",target:"_blank",rel:"noopener noreferrer"}},[t._v("tokio"),n("OutboundLink")],1),t._v(", or "),n("a",{attrs:{href:"https://docs.rs/async-std",target:"_blank",rel:"noopener noreferrer"}},[t._v("async-std"),n("OutboundLink")],1),t._v(", but I'm going to go with the much more lightweight "),n("a",{attrs:{href:"https://docs.rs/pollster",target:"_blank",rel:"noopener noreferrer"}},[t._v("pollster"),n("OutboundLink")],1),t._v(". Add the following to your "),n("code",[t._v("Cargo.toml")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other deps...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n")])])]),n("p",[t._v("We then use the "),n("code",[t._v("block_on")]),t._v(" function provided by pollster to await our future:")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"warning"},[n("p",[t._v("Don't use "),n("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(" "),n("p",[t._v("If we try to build WASM now it will fail because "),n("code",[t._v("wasm-bindgen")]),t._v(" doesn't support using async functions as "),n("code",[t._v("start")]),t._v(" methods. You could switch to calling "),n("code",[t._v("run")]),t._v(" manually in javascript, but for simplicity, we'll add the "),n("a",{attrs:{href:"https://docs.rs/wasm-bindgen-futures",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen-futures"),n("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(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cfg-if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.27"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.9"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("target.'cfg(target_arch = \"wasm32\")'.dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_error_panic_hook")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.1.6"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_log")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2.0"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"webgl"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wasm-bindgen")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wasm-bindgen-futures")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("web-sys")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Document"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Window"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Element"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"resize"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#resize"}},[t._v("#")]),t._v(" resize()")]),t._v(" "),n("p",[t._v("If we want to support resizing in our application, we're going to need to reconfigure the "),n("code",[t._v("surface")]),t._v(" every time the window's size changes. That's the reason we stored the physical "),n("code",[t._v("size")]),t._v(" and the "),n("code",[t._v("config")]),t._v(" used to configure the "),n("code",[t._v("surface")]),t._v(". With all of these, the resize method is very simple.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("There's nothing different here from the initial "),n("code",[t._v("surface")]),t._v(" configuration, so I won't get into it.")]),t._v(" "),n("p",[t._v("We call this method in "),n("code",[t._v("run()")]),t._v(" in the event loop for the following events.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// new_inner_size is &&mut so we have to dereference it twice")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"input"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[t._v("#")]),t._v(" input()")]),t._v(" "),n("p",[n("code",[t._v("input()")]),t._v(" returns a "),n("code",[t._v("bool")]),t._v(" to indicate whether an event has been fully processed. If the method returns "),n("code",[t._v("true")]),t._v(", the main loop won't process the event any further.")]),t._v(" "),n("p",[t._v("We're just going to return false for now because we don't have any events we want to capture.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to do a little more work in the event loop. We want "),n("code",[t._v("State")]),t._v(" to have priority over "),n("code",[t._v("run()")]),t._v(". Doing that (and previous changes) should have your loop looking like this.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// run()")]),t._v("\nevent_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("ref")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"update"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#update"}},[t._v("#")]),t._v(" update()")]),t._v(" "),n("p",[t._v("We don't have anything to update yet, so leave the method empty.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// remove `todo!()`")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We'll add some code here later on to move around objects.")]),t._v(" "),n("h2",{attrs:{id:"render"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render()")]),t._v(" "),n("p",[t._v("Here's where the magic happens. First, we need to get a frame to render to.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// impl State")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("get_current_texture")]),t._v(" function will wait for the "),n("code",[t._v("surface")]),t._v(" to provide a new "),n("code",[t._v("SurfaceTexture")]),t._v(" that we will render to. We'll store this in "),n("code",[t._v("output")]),t._v(" for later.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureViewDescriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("This line creates a "),n("code",[t._v("TextureView")]),t._v(" with default settings. We need to do this because we want to control how the render code interacts with the texture.")]),t._v(" "),n("p",[t._v("We also need to create a "),n("code",[t._v("CommandEncoder")]),t._v(" to create the actual commands to send to the gpu. Most modern graphics frameworks expect commands to be stored in a command buffer before being sent to the gpu. The "),n("code",[t._v("encoder")]),t._v(" builds a command buffer that we can then send to the gpu.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Encoder"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now we can get to clearing the screen (long time coming). We need to use the "),n("code",[t._v("encoder")]),t._v(" to create a "),n("code",[t._v("RenderPass")]),t._v(". The "),n("code",[t._v("RenderPass")]),t._v(" has all the methods for the actual drawing. The code for creating a "),n("code",[t._v("RenderPass")]),t._v(" is a bit nested, so I'll copy it all here before talking about its pieces.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" _render_pass "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// submit will accept anything that implements IntoIter")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("present")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("First things first, let's talk about the extra block ("),n("code",[t._v("{}")]),t._v(") around "),n("code",[t._v("encoder.begin_render_pass(...)")]),t._v(". "),n("code",[t._v("begin_render_pass()")]),t._v(" borrows "),n("code",[t._v("encoder")]),t._v(" mutably (aka "),n("code",[t._v("&mut self")]),t._v("). We can't call "),n("code",[t._v("encoder.finish()")]),t._v(" until we release that mutable borrow. The block tells rust to drop any variables within it when the code leaves that scope thus releasing the mutable borrow on "),n("code",[t._v("encoder")]),t._v(" and allowing us to "),n("code",[t._v("finish()")]),t._v(" it. If you don't like the "),n("code",[t._v("{}")]),t._v(", you can also use "),n("code",[t._v("drop(render_pass)")]),t._v(" to achieve the same effect.")]),t._v(" "),n("p",[t._v("The last lines of the code tell "),n("code",[t._v("wgpu")]),t._v(" to finish the command buffer, and to submit it to the gpu's render queue.")]),t._v(" "),n("p",[t._v("We need to update the event loop again to call this method. We'll also call "),n("code",[t._v("update()")]),t._v(" before it too.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// run()")]),t._v("\nevent_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RedrawRequested")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Reconfigure the surface if lost")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Lost")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The system is out of memory, we should probably quit")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SurfaceError")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("OutOfMemory")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// All other errors (Outdated, Timeout) should be resolved by the next frame")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?}"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MainEventsCleared")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// RedrawRequested will only trigger once, unless we manually")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// request it.")]),t._v("\n window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_redraw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With all that, you should be getting something that looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(485),alt:"Window with a blue background"}})]),t._v(" "),n("h2",{attrs:{id:"wait-what-s-going-on-with-renderpassdescriptor"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wait-what-s-going-on-with-renderpassdescriptor"}},[t._v("#")]),t._v(" Wait, what's going on with RenderPassDescriptor?")]),t._v(" "),n("p",[t._v("Some of you may be able to tell what's going on just by looking at it, but I'd be remiss if I didn't go over it. Let's take a look at the code again.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("A "),n("code",[t._v("RenderPassDescriptor")]),t._v(" only has three fields: "),n("code",[t._v("label")]),t._v(", "),n("code",[t._v("color_attachments")]),t._v(" and "),n("code",[t._v("depth_stencil_attachment")]),t._v(". The "),n("code",[t._v("color_attachments")]),t._v(" describe where we are going to draw our color to. We use the "),n("code",[t._v("TextureView")]),t._v(" we created earlier to make sure that we render to the screen.")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("The "),n("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 supply the ones you care about.')])]),t._v(" "),n("p",[t._v("We'll use "),n("code",[t._v("depth_stencil_attachment")]),t._v(" later, but we'll set it to "),n("code",[t._v("None")]),t._v(" for now.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("RenderPassColorAttachment")]),t._v(" has the "),n("code",[t._v("view")]),t._v(" field which informs "),n("code",[t._v("wgpu")]),t._v(" what texture to save the colors to. In this case we specify the "),n("code",[t._v("view")]),t._v(" that we created using "),n("code",[t._v("surface.get_current_texture()")]),t._v(". This means that any colors we draw to this attachment will get drawn to the screen.")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("resolve_target")]),t._v(" is the texture that will receive the resolved output. This will be the same as "),n("code",[t._v("view")]),t._v(" unless multisampling is enabled. We don't need to specify this, so we leave it as "),n("code",[t._v("None")]),t._v(".")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("ops")]),t._v(" field takes a "),n("code",[t._v("wpgu::Operations")]),t._v(" object. This tells wgpu what to do with the colors on the screen (specified by "),n("code",[t._v("view")]),t._v("). The "),n("code",[t._v("load")]),t._v(" field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The "),n("code",[t._v("store")]),t._v(" field tells wgpu whether we want to store the rendered results to the "),n("code",[t._v("Texture")]),t._v(" behind our "),n("code",[t._v("TextureView")]),t._v(" (in this case it's the "),n("code",[t._v("SurfaceTexture")]),t._v("). We use "),n("code",[t._v("true")]),t._v(" as we do want to store our render results.")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("It's not uncommon to not clear the screen if the screen is going to be completely covered up with objects. If your scene doesn't cover the entire screen however you can end up with something like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(486),alt:"./no-clear.png"}})])]),t._v(" "),n("h2",{attrs:{id:"validation-errors"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#validation-errors"}},[t._v("#")]),t._v(" Validation Errors?")]),t._v(" "),n("p",[t._v("If wgpu is using Vulkan on your machine, you may run into validation errors if you are running an older version of the Vulkan SDK. You should be using at least version "),n("code",[t._v("1.2.182")]),t._v(" as older versions can give out some false positives. If errors persist, you may have encountered a bug in wgpu. You can post an issue at "),n("a",{attrs:{href:"https://github.com/gfx-rs/wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/gfx-rs/wgpu"),n("OutboundLink")],1)]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Modify the "),n("code",[t._v("input()")]),t._v(" method to capture mouse events, and update the clear color using that. "),n("em",[t._v("Hint: you'll probably need to use "),n("code",[t._v("WindowEvent::CursorMoved")])]),t._v(".")]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial2_surface"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/27.658633e5.js b/assets/js/28.eb1c9cc8.js similarity index 52% rename from assets/js/27.658633e5.js rename to assets/js/28.eb1c9cc8.js index 2e1ed8ef..044822a8 100644 --- a/assets/js/27.658633e5.js +++ b/assets/js/28.eb1c9cc8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{485:function(t,e,s){t.exports=s.p+"assets/img/tutorial3-pipeline-vertices.5e39e8fc.png"},486:function(t,e){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=="},574:function(t,e,s){"use strict";s.r(e);var a=s(23),n=Object(a.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"the-pipeline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-pipeline"}},[t._v("#")]),t._v(" The Pipeline")]),t._v(" "),a("h2",{attrs:{id:"what-s-a-pipeline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#what-s-a-pipeline"}},[t._v("#")]),t._v(" What's a pipeline?")]),t._v(" "),a("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 "),a("code",[t._v("RenderPipeline")]),t._v(" specifically.")]),t._v(" "),a("h2",{attrs:{id:"wait-shaders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wait-shaders"}},[t._v("#")]),t._v(" Wait, shaders?")]),t._v(" "),a("p",[t._v("Shaders are mini-programs that you send to the gpu to perform operations on your data. There are 3 main types of shader: vertex, fragment, and compute. There are others such as geometry shaders, but they're more of an advanced topic. For now, we're just going to use vertex, and fragment shaders.")]),t._v(" "),a("h2",{attrs:{id:"vertex-fragment-what-are-those"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertex-fragment-what-are-those"}},[t._v("#")]),t._v(" Vertex, fragment... what are those?")]),t._v(" "),a("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(" "),a("img",{attrs:{alt:"Vertices Graphic",src:s(485)}}),t._v(" "),a("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(" "),a("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(" "),a("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(" "),a("h2",{attrs:{id:"wgsl"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wgsl"}},[t._v("#")]),t._v(" WGSL")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://www.w3.org/TR/WGSL/",target:"_blank",rel:"noopener noreferrer"}},[t._v("WebGPU Shading Language"),a("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 "),a("a",{attrs:{href:"https://github.com/gfx-rs/naga",target:"_blank",rel:"noopener noreferrer"}},[t._v("naga"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("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 "),a("a",{attrs:{href:"https://kvark.github.io/spirv/2021/05/01/spirv-horrors.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("this blog post"),a("OutboundLink")],1),t._v(").")]),t._v(" "),a("div",{staticClass:"note"},[a("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(" "),a("div",{staticClass:"note"},[a("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 "),a("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"),a("OutboundLink")],1),t._v(" to take a look at your code.")])]),t._v(" "),a("h2",{attrs:{id:"writing-the-shaders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#writing-the-shaders"}},[t._v("#")]),t._v(" Writing the shaders")]),t._v(" "),a("p",[t._v("In the same folder as "),a("code",[t._v("main.rs")]),t._v(", create a file "),a("code",[t._v("shader.wgsl")]),t._v(". Write the following code in "),a("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("// Vertex shader\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n};\n\n@vertex\nfn vs_main(\n @builtin(vertex_index) in_vertex_index: u32,\n) -> VertexOutput {\n var out: VertexOutput;\n let x = f32(1 - i32(in_vertex_index)) * 0.5;\n let y = f32(i32(in_vertex_index & 1u) * 2 - 1) * 0.5;\n out.clip_position = vec4(x, y, 0.0, 1.0);\n return out;\n}\n")])])]),a("p",[t._v("First, we declare "),a("code",[t._v("struct")]),t._v(" to store the output of our vertex shader. This consists of only one field currently which is our vertex's "),a("code",[t._v("clip_position")]),t._v(". The "),a("code",[t._v("@builtin(position)")]),t._v(" bit tells WGPU that this is the value we want to use as the vertex's "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Clip_coordinates",target:"_blank",rel:"noopener noreferrer"}},[t._v("clip coordinates"),a("OutboundLink")],1),t._v(". This is analogous to GLSL's "),a("code",[t._v("gl_Position")]),t._v(" variable.")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("Vector types such as "),a("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 "),a("code",[t._v("vec3")]),t._v(".")])]),t._v(" "),a("p",[t._v("The next part of the shader code is the "),a("code",[t._v("vs_main")]),t._v(" function. We are using "),a("code",[t._v("@vertex")]),t._v(" to mark this function as a valid entry point for a vertex shader. We expect a "),a("code",[t._v("u32")]),t._v(" called "),a("code",[t._v("in_vertex_index")]),t._v(" which gets its value from "),a("code",[t._v("@builtin(vertex_index)")]),t._v(".")]),t._v(" "),a("p",[t._v("We then declare a variable called "),a("code",[t._v("out")]),t._v(" using our "),a("code",[t._v("VertexOutput")]),t._v(" struct. We create two other variables for the "),a("code",[t._v("x")]),t._v(", and "),a("code",[t._v("y")]),t._v(", of a triangle.")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("The "),a("code",[t._v("f32()")]),t._v(" and "),a("code",[t._v("i32()")]),t._v(" bits are examples of casts.")])]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("Variables defined with "),a("code",[t._v("var")]),t._v(" can be modified but must specify their type. Variables created with "),a("code",[t._v("let")]),t._v(" can have their types inferred, but their value cannot be changed during the shader.")])]),t._v(" "),a("p",[t._v("Now we can save our "),a("code",[t._v("clip_position")]),t._v(" to "),a("code",[t._v("out")]),t._v(". We then just return "),a("code",[t._v("out")]),t._v(" and we're done with the vertex shader!")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("We technically didn't need a struct for this example, and could have just done something like the following:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("@vertex\nfn vs_main(\n @builtin(vertex_index) in_vertex_index: u32\n) -> @builtin(position) vec4 {\n // Vertex shader code...\n}\n")])])]),a("p",[t._v("We'll be adding more fields to "),a("code",[t._v("VertexOutput")]),t._v(" later, so we might as well start using it now.")])]),t._v(" "),a("p",[t._v("Next up, the fragment shader. Still in "),a("code",[t._v("shader.wgsl")]),t._v(" add the following:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("// Fragment shader\n\n@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n return vec4(0.3, 0.2, 0.1, 1.0);\n}\n")])])]),a("p",[t._v("This sets the color of the current fragment to brown.")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("Notice that the entry point for the vertex shader was named "),a("code",[t._v("vs_main")]),t._v(" and that the entry point for the fragment shader is called "),a("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 "),a("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#declaration-and-scope",target:"_blank",rel:"noopener noreferrer"}},[t._v("WGSL spec"),a("OutboundLink")],1),t._v(" require these names to be different. Therefore, the above-mentioned naming scheme (which is adopted from the "),a("code",[t._v("wgpu")]),t._v(" examples) is used throughout the tutorial.")])]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("@location(0)")]),t._v(" bit tells WGPU to store the "),a("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(" "),a("div",{staticClass:"note"},[a("p",[t._v("Something to note about "),a("code",[t._v("@builtin(position)")]),t._v(", in the fragment shader this value is in "),a("a",{attrs:{href:"https://gpuweb.github.io/gpuweb/#coordinate-systems",target:"_blank",rel:"noopener noreferrer"}},[t._v("framebuffer space"),a("OutboundLink")],1),t._v(". This means that if your window is 800x600, the x and y of "),a("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 pixel coordinates of a given fragment, but if you want the position coordinates you'll have to pass them in separately.")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("struct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) vert_pos: vec3,\n}\n\n@vertex\nfn vs_main(\n @builtin(vertex_index) in_vertex_index: u32,\n) -> VertexOutput {\n var out: VertexOutput;\n let x = f32(1 - i32(in_vertex_index)) * 0.5;\n let y = f32(i32(in_vertex_index & 1u) * 2 - 1) * 0.5;\n out.clip_position = vec4(x, y, 0.0, 1.0);\n out.vert_pos = out.clip_position.xyz;\n return out;\n}\n")])])])]),t._v(" "),a("h2",{attrs:{id:"how-do-we-use-the-shaders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-do-we-use-the-shaders"}},[t._v("#")]),t._v(" How do we use the shaders?")]),t._v(" "),a("p",[t._v("This is the part where we finally make the thing in the title: the pipeline. First, let's modify "),a("code",[t._v("State")]),t._v(" to include 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 comment"}},[t._v("// lib.rs")]),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("State")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),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("Surface")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),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("Device")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),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("Queue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),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("SurfaceConfiguration")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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("// NEW!")]),t._v("\n render_pipeline"),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("RenderPipeline")]),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("Now let's move to the "),a("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 "),a("code",[t._v("render_pipeline")]),t._v(" requires those.")]),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(" shader "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),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("ShaderModuleDescriptor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Shader"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),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("ShaderSource")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),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("into")]),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"),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("div",{staticClass:"note"},[a("p",[t._v("You can also use "),a("code",[t._v("include_wgsl!")]),t._v(" macro as a small shortcut to create the "),a("code",[t._v("ShaderModuleDescriptor")]),t._v(".")]),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(" shader "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_wgsl!")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),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")])])])]),t._v(" "),a("p",[t._v("One more thing, we need to create a "),a("code",[t._v("PipelineLayout")]),t._v(". We'll get more into this after we cover "),a("code",[t._v("Buffer")]),t._v("s.")]),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(" render_pipeline_layout "),a("span",{pre:!0,attrs:{class:"token operator"}},[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("create_pipeline_layout")]),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 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("PipelineLayoutDescriptor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),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 punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),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 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")])])]),a("p",[t._v("Finally, we have all we need to create the "),a("code",[t._v("render_pipeline")]),t._v(".")]),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(" render_pipeline "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),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 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("RenderPipelineDescriptor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),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("VertexState")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vs_main"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n buffers"),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 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("// 2.")]),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 fragment"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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("FragmentState")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fs_main"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),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 class-name"}},[t._v("Some")]),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("ColorTargetState")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n format"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n blend"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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("BlendState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),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("ColorWrites")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),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("]")]),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 "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// continued ...")]),t._v("\n")])])]),a("p",[t._v("Several things to note here:")]),t._v(" "),a("ol",[a("li",[t._v("Here you can specify which function inside the shader should be the "),a("code",[t._v("entry_point")]),t._v(". These are the functions we marked with "),a("code",[t._v("@vertex")]),t._v(" and "),a("code",[t._v("@fragment")])]),t._v(" "),a("li",[t._v("The "),a("code",[t._v("buffers")]),t._v(" field tells "),a("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(" "),a("li",[t._v("The "),a("code",[t._v("fragment")]),t._v(" is technically optional, so you have to wrap it in "),a("code",[t._v("Some()")]),t._v(". We need it if we want to store color data to the "),a("code",[t._v("surface")]),t._v(".")]),t._v(" "),a("li",[t._v("The "),a("code",[t._v("targets")]),t._v(" field tells "),a("code",[t._v("wgpu")]),t._v(" what color outputs it should set up. Currently, we only need one for the "),a("code",[t._v("surface")]),t._v(". We use the "),a("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 "),a("code",[t._v("wgpu")]),t._v(" to write to all colors: red, blue, green, and alpha. "),a("em",[t._v("We'll talk more about")]),t._v(" "),a("code",[t._v("color_state")]),t._v(" "),a("em",[t._v("when we talk about textures.")])])]),t._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[t._v(" primitive"),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("PrimitiveState")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),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("PrimitiveTopology")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n strip_index_format"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),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("FrontFace")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n cull_mode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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("Face")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),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("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_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("PolygonMode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::DEPTH_CLIP_CONTROL")]),t._v("\n unclipped_depth"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::CONSERVATIVE_RASTERIZATION")]),t._v("\n conservative"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),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 comment"}},[t._v("// continued ...")]),t._v("\n")])])]),a("p",[t._v("The "),a("code",[t._v("primitive")]),t._v(" field describes how to interpret our vertices when converting them into triangles.")]),t._v(" "),a("ol",[a("li",[t._v("Using "),a("code",[t._v("PrimitiveTopology::TriangleList")]),t._v(" means that every three vertices will correspond to one triangle.")]),t._v(" "),a("li",[t._v("The "),a("code",[t._v("front_face")]),t._v(" and "),a("code",[t._v("cull_mode")]),t._v(" fields tell "),a("code",[t._v("wgpu")]),t._v(" how to determine whether a given triangle is facing forward or not. "),a("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 "),a("code",[t._v("CullMode::Back")]),t._v(". We'll cover culling a bit more when we cover "),a("code",[t._v("Buffer")]),t._v("s.")])]),t._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[t._v(" depth_stencil"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n multisample"),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("MultisampleState")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n mask"),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 number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n alpha_to_coverage_enabled"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),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 multiview"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 5.")]),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")])])]),a("p",[t._v("The rest of the method is pretty simple:")]),t._v(" "),a("ol",[a("li",[t._v("We're not using a depth/stencil buffer currently, so we leave "),a("code",[t._v("depth_stencil")]),t._v(" as "),a("code",[t._v("None")]),t._v(". "),a("em",[t._v("This will change later")]),t._v(".")]),t._v(" "),a("li",[a("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(" "),a("li",[a("code",[t._v("mask")]),t._v(" specifies which samples should be active. In this case, we are using all of them.")]),t._v(" "),a("li",[a("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(" "),a("li",[a("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 "),a("code",[t._v("None")]),t._v(".")])]),t._v(" "),a("p",[t._v("Now, all we have to do is add the "),a("code",[t._v("render_pipeline")]),t._v(" to "),a("code",[t._v("State")]),t._v(" and then we can use it!")]),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 comment"}},[t._v("// new()")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pipeline"),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:"using-a-pipeline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#using-a-pipeline"}},[t._v("#")]),t._v(" Using a pipeline")]),t._v(" "),a("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 "),a("code",[t._v("render_pipeline")]),t._v(", but we still need to modify the code in "),a("code",[t._v("render()")]),t._v(" to actually use it.")]),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 comment"}},[t._v("// render()")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),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 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("RenderPassDescriptor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),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("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is what @location(0) in the fragment shader targets")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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("RenderPassColorAttachment")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),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("Operations")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),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("LoadOp")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),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("Color")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),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("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(",")]),t._v("\n depth_stencil_attachment"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),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\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),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 keyword"}},[t._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),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("// 2.")]),t._v("\n render_pass"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),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 number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),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 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 comment"}},[t._v("// 3.")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])])]),a("p",[t._v("We didn't change much, but let's talk about what we did change.")]),t._v(" "),a("ol",[a("li",[t._v("We renamed "),a("code",[t._v("_render_pass")]),t._v(" to "),a("code",[t._v("render_pass")]),t._v(" and made it mutable.")]),t._v(" "),a("li",[t._v("We set the pipeline on the "),a("code",[t._v("render_pass")]),t._v(" using the one we just created.")]),t._v(" "),a("li",[t._v("We tell "),a("code",[t._v("wgpu")]),t._v(" to draw "),a("em",[t._v("something")]),t._v(" with 3 vertices, and 1 instance. This is where "),a("code",[t._v("@builtin(vertex_index)")]),t._v(" comes from.")])]),t._v(" "),a("p",[t._v("With all that you should be seeing a lovely brown triangle.")]),t._v(" "),a("p",[a("img",{attrs:{src:s(486),alt:"Said lovely brown triangle"}})]),t._v(" "),a("h2",{attrs:{id:"challenge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),a("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. "),a("em",[t._v("Hint: you'll need to modify")]),t._v(" "),a("code",[t._v("VertexOutput")])]),t._v(" "),a("WasmExample",{attrs:{example:"tutorial3_pipeline"}}),t._v(" "),a("AutoGithubLink")],1)}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{487:function(t,e,s){t.exports=s.p+"assets/img/tutorial3-pipeline-vertices.5e39e8fc.png"},488:function(t,e){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=="},577:function(t,e,s){"use strict";s.r(e);var a=s(23),n=Object(a.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"the-pipeline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-pipeline"}},[t._v("#")]),t._v(" The Pipeline")]),t._v(" "),a("h2",{attrs:{id:"what-s-a-pipeline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#what-s-a-pipeline"}},[t._v("#")]),t._v(" What's a pipeline?")]),t._v(" "),a("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 "),a("code",[t._v("RenderPipeline")]),t._v(" specifically.")]),t._v(" "),a("h2",{attrs:{id:"wait-shaders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wait-shaders"}},[t._v("#")]),t._v(" Wait, shaders?")]),t._v(" "),a("p",[t._v("Shaders are mini-programs that you send to the gpu to perform operations on your data. There are 3 main types of shader: vertex, fragment, and compute. There are others such as geometry shaders, but they're more of an advanced topic. For now, we're just going to use vertex, and fragment shaders.")]),t._v(" "),a("h2",{attrs:{id:"vertex-fragment-what-are-those"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertex-fragment-what-are-those"}},[t._v("#")]),t._v(" Vertex, fragment... what are those?")]),t._v(" "),a("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(" "),a("img",{attrs:{alt:"Vertices Graphic",src:s(487)}}),t._v(" "),a("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(" "),a("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(" "),a("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(" "),a("h2",{attrs:{id:"wgsl"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wgsl"}},[t._v("#")]),t._v(" WGSL")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://www.w3.org/TR/WGSL/",target:"_blank",rel:"noopener noreferrer"}},[t._v("WebGPU Shading Language"),a("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 "),a("a",{attrs:{href:"https://github.com/gfx-rs/naga",target:"_blank",rel:"noopener noreferrer"}},[t._v("naga"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("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 "),a("a",{attrs:{href:"https://kvark.github.io/spirv/2021/05/01/spirv-horrors.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("this blog post"),a("OutboundLink")],1),t._v(").")]),t._v(" "),a("div",{staticClass:"note"},[a("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(" "),a("div",{staticClass:"note"},[a("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 "),a("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"),a("OutboundLink")],1),t._v(" to take a look at your code.")])]),t._v(" "),a("h2",{attrs:{id:"writing-the-shaders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#writing-the-shaders"}},[t._v("#")]),t._v(" Writing the shaders")]),t._v(" "),a("p",[t._v("In the same folder as "),a("code",[t._v("main.rs")]),t._v(", create a file "),a("code",[t._v("shader.wgsl")]),t._v(". Write the following code in "),a("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("// Vertex shader\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n};\n\n@vertex\nfn vs_main(\n @builtin(vertex_index) in_vertex_index: u32,\n) -> VertexOutput {\n var out: VertexOutput;\n let x = f32(1 - i32(in_vertex_index)) * 0.5;\n let y = f32(i32(in_vertex_index & 1u) * 2 - 1) * 0.5;\n out.clip_position = vec4(x, y, 0.0, 1.0);\n return out;\n}\n")])])]),a("p",[t._v("First, we declare "),a("code",[t._v("struct")]),t._v(" to store the output of our vertex shader. This consists of only one field currently which is our vertex's "),a("code",[t._v("clip_position")]),t._v(". The "),a("code",[t._v("@builtin(position)")]),t._v(" bit tells WGPU that this is the value we want to use as the vertex's "),a("a",{attrs:{href:"https://en.wikipedia.org/wiki/Clip_coordinates",target:"_blank",rel:"noopener noreferrer"}},[t._v("clip coordinates"),a("OutboundLink")],1),t._v(". This is analogous to GLSL's "),a("code",[t._v("gl_Position")]),t._v(" variable.")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("Vector types such as "),a("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 "),a("code",[t._v("vec3")]),t._v(".")])]),t._v(" "),a("p",[t._v("The next part of the shader code is the "),a("code",[t._v("vs_main")]),t._v(" function. We are using "),a("code",[t._v("@vertex")]),t._v(" to mark this function as a valid entry point for a vertex shader. We expect a "),a("code",[t._v("u32")]),t._v(" called "),a("code",[t._v("in_vertex_index")]),t._v(" which gets its value from "),a("code",[t._v("@builtin(vertex_index)")]),t._v(".")]),t._v(" "),a("p",[t._v("We then declare a variable called "),a("code",[t._v("out")]),t._v(" using our "),a("code",[t._v("VertexOutput")]),t._v(" struct. We create two other variables for the "),a("code",[t._v("x")]),t._v(", and "),a("code",[t._v("y")]),t._v(", of a triangle.")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("The "),a("code",[t._v("f32()")]),t._v(" and "),a("code",[t._v("i32()")]),t._v(" bits are examples of casts.")])]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("Variables defined with "),a("code",[t._v("var")]),t._v(" can be modified but must specify their type. Variables created with "),a("code",[t._v("let")]),t._v(" can have their types inferred, but their value cannot be changed during the shader.")])]),t._v(" "),a("p",[t._v("Now we can save our "),a("code",[t._v("clip_position")]),t._v(" to "),a("code",[t._v("out")]),t._v(". We then just return "),a("code",[t._v("out")]),t._v(" and we're done with the vertex shader!")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("We technically didn't need a struct for this example, and could have just done something like the following:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("@vertex\nfn vs_main(\n @builtin(vertex_index) in_vertex_index: u32\n) -> @builtin(position) vec4 {\n // Vertex shader code...\n}\n")])])]),a("p",[t._v("We'll be adding more fields to "),a("code",[t._v("VertexOutput")]),t._v(" later, so we might as well start using it now.")])]),t._v(" "),a("p",[t._v("Next up, the fragment shader. Still in "),a("code",[t._v("shader.wgsl")]),t._v(" add the following:")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("// Fragment shader\n\n@fragment\nfn fs_main(in: VertexOutput) -> @location(0) vec4 {\n return vec4(0.3, 0.2, 0.1, 1.0);\n}\n")])])]),a("p",[t._v("This sets the color of the current fragment to brown.")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("Notice that the entry point for the vertex shader was named "),a("code",[t._v("vs_main")]),t._v(" and that the entry point for the fragment shader is called "),a("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 "),a("a",{attrs:{href:"https://www.w3.org/TR/WGSL/#declaration-and-scope",target:"_blank",rel:"noopener noreferrer"}},[t._v("WGSL spec"),a("OutboundLink")],1),t._v(" require these names to be different. Therefore, the above-mentioned naming scheme (which is adopted from the "),a("code",[t._v("wgpu")]),t._v(" examples) is used throughout the tutorial.")])]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("@location(0)")]),t._v(" bit tells WGPU to store the "),a("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(" "),a("div",{staticClass:"note"},[a("p",[t._v("Something to note about "),a("code",[t._v("@builtin(position)")]),t._v(", in the fragment shader this value is in "),a("a",{attrs:{href:"https://gpuweb.github.io/gpuweb/#coordinate-systems",target:"_blank",rel:"noopener noreferrer"}},[t._v("framebuffer space"),a("OutboundLink")],1),t._v(". This means that if your window is 800x600, the x and y of "),a("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 pixel coordinates of a given fragment, but if you want the position coordinates you'll have to pass them in separately.")]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("struct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) vert_pos: vec3,\n}\n\n@vertex\nfn vs_main(\n @builtin(vertex_index) in_vertex_index: u32,\n) -> VertexOutput {\n var out: VertexOutput;\n let x = f32(1 - i32(in_vertex_index)) * 0.5;\n let y = f32(i32(in_vertex_index & 1u) * 2 - 1) * 0.5;\n out.clip_position = vec4(x, y, 0.0, 1.0);\n out.vert_pos = out.clip_position.xyz;\n return out;\n}\n")])])])]),t._v(" "),a("h2",{attrs:{id:"how-do-we-use-the-shaders"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-do-we-use-the-shaders"}},[t._v("#")]),t._v(" How do we use the shaders?")]),t._v(" "),a("p",[t._v("This is the part where we finally make the thing in the title: the pipeline. First, let's modify "),a("code",[t._v("State")]),t._v(" to include 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 comment"}},[t._v("// lib.rs")]),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("State")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),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("Surface")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),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("Device")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),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("Queue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),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("SurfaceConfiguration")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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("// NEW!")]),t._v("\n render_pipeline"),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("RenderPipeline")]),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("Now let's move to the "),a("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 "),a("code",[t._v("render_pipeline")]),t._v(" requires those.")]),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(" shader "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),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("ShaderModuleDescriptor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Shader"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),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("ShaderSource")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wgsl")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),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("into")]),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"),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("div",{staticClass:"note"},[a("p",[t._v("You can also use "),a("code",[t._v("include_wgsl!")]),t._v(" macro as a small shortcut to create the "),a("code",[t._v("ShaderModuleDescriptor")]),t._v(".")]),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(" shader "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),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 macro property"}},[t._v("include_wgsl!")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.wgsl"')]),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")])])])]),t._v(" "),a("p",[t._v("One more thing, we need to create a "),a("code",[t._v("PipelineLayout")]),t._v(". We'll get more into this after we cover "),a("code",[t._v("Buffer")]),t._v("s.")]),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(" render_pipeline_layout "),a("span",{pre:!0,attrs:{class:"token operator"}},[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("create_pipeline_layout")]),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 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("PipelineLayoutDescriptor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),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 punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),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 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")])])]),a("p",[t._v("Finally, we have all we need to create the "),a("code",[t._v("render_pipeline")]),t._v(".")]),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(" render_pipeline "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),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 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("RenderPipelineDescriptor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),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("VertexState")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vs_main"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n buffers"),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 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("// 2.")]),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 fragment"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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("FragmentState")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("shader"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fs_main"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),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 class-name"}},[t._v("Some")]),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("ColorTargetState")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n format"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n blend"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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("BlendState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),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("ColorWrites")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),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("]")]),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 "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// continued ...")]),t._v("\n")])])]),a("p",[t._v("Several things to note here:")]),t._v(" "),a("ol",[a("li",[t._v("Here you can specify which function inside the shader should be the "),a("code",[t._v("entry_point")]),t._v(". These are the functions we marked with "),a("code",[t._v("@vertex")]),t._v(" and "),a("code",[t._v("@fragment")])]),t._v(" "),a("li",[t._v("The "),a("code",[t._v("buffers")]),t._v(" field tells "),a("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(" "),a("li",[t._v("The "),a("code",[t._v("fragment")]),t._v(" is technically optional, so you have to wrap it in "),a("code",[t._v("Some()")]),t._v(". We need it if we want to store color data to the "),a("code",[t._v("surface")]),t._v(".")]),t._v(" "),a("li",[t._v("The "),a("code",[t._v("targets")]),t._v(" field tells "),a("code",[t._v("wgpu")]),t._v(" what color outputs it should set up. Currently, we only need one for the "),a("code",[t._v("surface")]),t._v(". We use the "),a("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 "),a("code",[t._v("wgpu")]),t._v(" to write to all colors: red, blue, green, and alpha. "),a("em",[t._v("We'll talk more about")]),t._v(" "),a("code",[t._v("color_state")]),t._v(" "),a("em",[t._v("when we talk about textures.")])])]),t._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[t._v(" primitive"),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("PrimitiveState")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),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("PrimitiveTopology")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n strip_index_format"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),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("FrontFace")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n cull_mode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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("Face")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),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("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_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("PolygonMode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::DEPTH_CLIP_CONTROL")]),t._v("\n unclipped_depth"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Requires Features::CONSERVATIVE_RASTERIZATION")]),t._v("\n conservative"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),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 comment"}},[t._v("// continued ...")]),t._v("\n")])])]),a("p",[t._v("The "),a("code",[t._v("primitive")]),t._v(" field describes how to interpret our vertices when converting them into triangles.")]),t._v(" "),a("ol",[a("li",[t._v("Using "),a("code",[t._v("PrimitiveTopology::TriangleList")]),t._v(" means that every three vertices will correspond to one triangle.")]),t._v(" "),a("li",[t._v("The "),a("code",[t._v("front_face")]),t._v(" and "),a("code",[t._v("cull_mode")]),t._v(" fields tell "),a("code",[t._v("wgpu")]),t._v(" how to determine whether a given triangle is facing forward or not. "),a("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 "),a("code",[t._v("CullMode::Back")]),t._v(". We'll cover culling a bit more when we cover "),a("code",[t._v("Buffer")]),t._v("s.")])]),t._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[t._v(" depth_stencil"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n multisample"),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("MultisampleState")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n mask"),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 number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n alpha_to_coverage_enabled"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),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 multiview"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 5.")]),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")])])]),a("p",[t._v("The rest of the method is pretty simple:")]),t._v(" "),a("ol",[a("li",[t._v("We're not using a depth/stencil buffer currently, so we leave "),a("code",[t._v("depth_stencil")]),t._v(" as "),a("code",[t._v("None")]),t._v(". "),a("em",[t._v("This will change later")]),t._v(".")]),t._v(" "),a("li",[a("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(" "),a("li",[a("code",[t._v("mask")]),t._v(" specifies which samples should be active. In this case, we are using all of them.")]),t._v(" "),a("li",[a("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(" "),a("li",[a("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 "),a("code",[t._v("None")]),t._v(".")])]),t._v(" "),a("p",[t._v("Now, all we have to do is add the "),a("code",[t._v("render_pipeline")]),t._v(" to "),a("code",[t._v("State")]),t._v(" and then we can use it!")]),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 comment"}},[t._v("// new()")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n surface"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pipeline"),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:"using-a-pipeline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#using-a-pipeline"}},[t._v("#")]),t._v(" Using a pipeline")]),t._v(" "),a("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 "),a("code",[t._v("render_pipeline")]),t._v(", but we still need to modify the code in "),a("code",[t._v("render()")]),t._v(" to actually use it.")]),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 comment"}},[t._v("// render()")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),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 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("RenderPassDescriptor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),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("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is what @location(0) in the fragment shader targets")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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("RenderPassColorAttachment")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),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("Operations")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),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("LoadOp")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),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("Color")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),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("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),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("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(",")]),t._v("\n depth_stencil_attachment"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),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\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n render_pass"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),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 keyword"}},[t._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),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("// 2.")]),t._v("\n render_pass"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),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 number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),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 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 comment"}},[t._v("// 3.")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])])]),a("p",[t._v("We didn't change much, but let's talk about what we did change.")]),t._v(" "),a("ol",[a("li",[t._v("We renamed "),a("code",[t._v("_render_pass")]),t._v(" to "),a("code",[t._v("render_pass")]),t._v(" and made it mutable.")]),t._v(" "),a("li",[t._v("We set the pipeline on the "),a("code",[t._v("render_pass")]),t._v(" using the one we just created.")]),t._v(" "),a("li",[t._v("We tell "),a("code",[t._v("wgpu")]),t._v(" to draw "),a("em",[t._v("something")]),t._v(" with 3 vertices, and 1 instance. This is where "),a("code",[t._v("@builtin(vertex_index)")]),t._v(" comes from.")])]),t._v(" "),a("p",[t._v("With all that you should be seeing a lovely brown triangle.")]),t._v(" "),a("p",[a("img",{attrs:{src:s(488),alt:"Said lovely brown triangle"}})]),t._v(" "),a("h2",{attrs:{id:"challenge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),a("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. "),a("em",[t._v("Hint: you'll need to modify")]),t._v(" "),a("code",[t._v("VertexOutput")])]),t._v(" "),a("WasmExample",{attrs:{example:"tutorial3_pipeline"}}),t._v(" "),a("AutoGithubLink")],1)}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/28.f884a3be.js b/assets/js/29.5ead4d92.js similarity index 99% rename from assets/js/28.f884a3be.js rename to assets/js/29.5ead4d92.js index 24e5fab7..e0c4ab66 100644 --- a/assets/js/28.f884a3be.js +++ b/assets/js/29.5ead4d92.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{498:function(t,s,a){t.exports=a.p+"assets/img/depth_problems.fde54cff.png"},499:function(t,s,a){t.exports=a.p+"assets/img/forest_fixed.a77f70f6.png"},579:function(t,s,a){"use strict";a.r(s);var e=a(23),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"the-depth-buffer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-depth-buffer"}},[t._v("#")]),t._v(" The Depth Buffer")]),t._v(" "),e("p",[t._v("Let's take a closer look at the last example at an angle.")]),t._v(" "),e("p",[e("img",{attrs:{src:a(498),alt:"depth_problems.png"}})]),t._v(" "),e("p",[t._v("Models that should be in the back are getting rendered ahead of ones that should be 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(" "),e("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(" "),e("h2",{attrs:{id:"sorting-from-back-to-front"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#sorting-from-back-to-front"}},[t._v("#")]),t._v(" Sorting from back to front")]),t._v(" "),e("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(" "),e("p",[t._v("A simple way of doing this is to sort all the objects by their distance to 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 "),e("em",[t._v("themselves")]),t._v(".")]),t._v(" "),e("p",[t._v("If we want to do this properly we need to have pixel-level precision. That's where a "),e("em",[t._v("depth buffer")]),t._v(" comes in.")]),t._v(" "),e("h2",{attrs:{id:"a-pixels-depth"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#a-pixels-depth"}},[t._v("#")]),t._v(" A pixels depth")]),t._v(" "),e("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 the data or keep it. This technique is called depth testing. This will fix our draw order problem without needing us to sort our objects!")]),t._v(" "),e("p",[t._v("Let's make a function to create the depth texture in "),e("code",[t._v("texture.rs")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),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("pub")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),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("TextureFormat")]),t._v(" "),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("TextureFormat")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Depth32Float")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n \n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("create_depth_texture")]),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 namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),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 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")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" label"),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("str")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),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("Extent3d")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n width"),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 punctuation"}},[t._v(",")]),t._v("\n height"),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 punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" desc "),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("TextureDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),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("TextureDimension")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),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(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),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")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n "),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("TextureUsages")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("desc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),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("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sampler "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),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("SamplerDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n address_mode_u"),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("AddressMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_v"),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("AddressMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_w"),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("AddressMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mag_filter"),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("FilterMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_filter"),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("FilterMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mipmap_filter"),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("FilterMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compare"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompareFunction")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LessEqual")]),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("// 5.")]),t._v("\n lod_min_clamp"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n lod_max_clamp"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),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("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" texture"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" view"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sampler "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("ol",[e("li",[t._v("We need the DEPTH_FORMAT for when we create the depth stage of the "),e("code",[t._v("render_pipeline")]),t._v(" and for creating the depth texture itself.")]),t._v(" "),e("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 "),e("code",[t._v("config")]),t._v(" to make sure that our depth texture is the same size as our surface textures.")]),t._v(" "),e("li",[t._v("Since we are rendering to this texture, we need to add the "),e("code",[t._v("RENDER_ATTACHMENT")]),t._v(" flag to it.")]),t._v(" "),e("li",[t._v("We technically don't "),e("em",[t._v("need")]),t._v(" a sampler for a depth texture, but our "),e("code",[t._v("Texture")]),t._v(" struct requires it, and we need one if we ever want to sample it.")]),t._v(" "),e("li",[t._v("If we do decide to render our depth texture, we need to use "),e("code",[t._v("CompareFunction::LessEqual")]),t._v(". This is due to how the "),e("code",[t._v("sampler_comparison")]),t._v(" and "),e("code",[t._v("textureSampleCompare()")]),t._v(" interacts with the "),e("code",[t._v("texture()")]),t._v(" function in GLSL.")])]),t._v(" "),e("p",[t._v("We create our "),e("code",[t._v("depth_texture")]),t._v(" in "),e("code",[t._v("State::new()")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" depth_texture "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_depth_texture")]),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(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"depth_texture"')]),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("We need to modify our "),e("code",[t._v("render_pipeline")]),t._v(" to allow depth testing.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n depth_stencil"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DepthStencilState")]),t._v(" "),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(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_write_enabled"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_compare"),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("CompareFunction")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Less")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n stencil"),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("StencilState")]),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(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n bias"),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("DepthBiasState")]),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(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),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",[e("li",[t._v("The "),e("code",[t._v("depth_compare")]),t._v(" function tells us when to discard a new pixel. Using "),e("code",[t._v("LESS")]),t._v(" means pixels will be drawn front to back. Here are all the values you can use.")])]),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)]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, Hash, Eq, PartialEq)]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg_attr(feature = "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"serde"')]),t._v(", derive(Serialize, Deserialize))]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CompareFunction")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Undefined")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Never")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Less")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Equal")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[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(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LessEqual")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Greater")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NotEqual")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GreaterEqual")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Always")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),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("ol",{attrs:{start:"2"}},[e("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. Since we aren't using a stencil buffer, we'll use default values. We'll cover stencil buffers "),e("a",{attrs:{href:"../../todo"}},[t._v("later")]),t._v(".")])]),t._v(" "),e("p",[t._v("Don't forget to store the "),e("code",[t._v("depth_texture")]),t._v(" in "),e("code",[t._v("State")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\ndepth_texture"),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("We need to remember to change the "),e("code",[t._v("resize()")]),t._v(" method to create a new "),e("code",[t._v("depth_texture")]),t._v(" and "),e("code",[t._v("depth_texture_view")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),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("mut")]),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(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("depth_texture "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_depth_texture")]),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(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"depth_texture"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("Make sure you update the "),e("code",[t._v("depth_texture")]),t._v(" "),e("em",[t._v("after")]),t._v(" you update "),e("code",[t._v("config")]),t._v(". If you don't, your program will crash as the "),e("code",[t._v("depth_texture")]),t._v(" will be a different size than the "),e("code",[t._v("surface")]),t._v(" texture.")]),t._v(" "),e("p",[t._v("The last change we need to make is in the "),e("code",[t._v("render()")]),t._v(" function. We've created the "),e("code",[t._v("depth_texture")]),t._v(", but we're not currently using it. We use it by attaching it to the "),e("code",[t._v("depth_stencil_attachment")]),t._v(" of a render pass.")]),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(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n depth_stencil_attachment"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDepthStencilAttachment")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("depth_texture"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_ops"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n stencil_ops"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),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("And that's all we have to do! No shader code needed! If you run the application, the depth issues will be fixed.")]),t._v(" "),e("p",[e("img",{attrs:{src:a(499),alt:"forest_fixed.png"}})]),t._v(" "),e("h2",{attrs:{id:"challenge"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),e("p",[t._v("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 "),e("code",[t._v("sampler_comparison")]),t._v(" uniform type and the "),e("code",[t._v("textureSampleCompare")]),t._v(" function instead of "),e("code",[t._v("sampler")]),t._v(", and "),e("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(" "),e("WasmExample",{attrs:{example:"tutorial8_depth"}}),t._v(" "),e("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{500:function(t,s,a){t.exports=a.p+"assets/img/depth_problems.fde54cff.png"},501:function(t,s,a){t.exports=a.p+"assets/img/forest_fixed.a77f70f6.png"},582:function(t,s,a){"use strict";a.r(s);var e=a(23),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"the-depth-buffer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-depth-buffer"}},[t._v("#")]),t._v(" The Depth Buffer")]),t._v(" "),e("p",[t._v("Let's take a closer look at the last example at an angle.")]),t._v(" "),e("p",[e("img",{attrs:{src:a(500),alt:"depth_problems.png"}})]),t._v(" "),e("p",[t._v("Models that should be in the back are getting rendered ahead of ones that should be 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(" "),e("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(" "),e("h2",{attrs:{id:"sorting-from-back-to-front"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#sorting-from-back-to-front"}},[t._v("#")]),t._v(" Sorting from back to front")]),t._v(" "),e("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(" "),e("p",[t._v("A simple way of doing this is to sort all the objects by their distance to 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 "),e("em",[t._v("themselves")]),t._v(".")]),t._v(" "),e("p",[t._v("If we want to do this properly we need to have pixel-level precision. That's where a "),e("em",[t._v("depth buffer")]),t._v(" comes in.")]),t._v(" "),e("h2",{attrs:{id:"a-pixels-depth"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#a-pixels-depth"}},[t._v("#")]),t._v(" A pixels depth")]),t._v(" "),e("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 the data or keep it. This technique is called depth testing. This will fix our draw order problem without needing us to sort our objects!")]),t._v(" "),e("p",[t._v("Let's make a function to create the depth texture in "),e("code",[t._v("texture.rs")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),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("pub")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),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("TextureFormat")]),t._v(" "),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("TextureFormat")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Depth32Float")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n \n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("create_depth_texture")]),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 namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Device")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),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 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")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" label"),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("str")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" size "),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("Extent3d")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n width"),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 punctuation"}},[t._v(",")]),t._v("\n height"),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 punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" desc "),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("TextureDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("label"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),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("TextureDimension")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),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(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),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")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n "),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("TextureUsages")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("TEXTURE_BINDING")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("desc"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),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("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" sampler "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_sampler")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),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("SamplerDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4.")]),t._v("\n address_mode_u"),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("AddressMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_v"),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("AddressMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n address_mode_w"),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("AddressMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ClampToEdge")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mag_filter"),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("FilterMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_filter"),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("FilterMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Linear")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mipmap_filter"),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("FilterMode")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Nearest")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compare"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompareFunction")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LessEqual")]),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("// 5.")]),t._v("\n lod_min_clamp"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n lod_max_clamp"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),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("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" texture"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" view"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sampler "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("ol",[e("li",[t._v("We need the DEPTH_FORMAT for when we create the depth stage of the "),e("code",[t._v("render_pipeline")]),t._v(" and for creating the depth texture itself.")]),t._v(" "),e("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 "),e("code",[t._v("config")]),t._v(" to make sure that our depth texture is the same size as our surface textures.")]),t._v(" "),e("li",[t._v("Since we are rendering to this texture, we need to add the "),e("code",[t._v("RENDER_ATTACHMENT")]),t._v(" flag to it.")]),t._v(" "),e("li",[t._v("We technically don't "),e("em",[t._v("need")]),t._v(" a sampler for a depth texture, but our "),e("code",[t._v("Texture")]),t._v(" struct requires it, and we need one if we ever want to sample it.")]),t._v(" "),e("li",[t._v("If we do decide to render our depth texture, we need to use "),e("code",[t._v("CompareFunction::LessEqual")]),t._v(". This is due to how the "),e("code",[t._v("sampler_comparison")]),t._v(" and "),e("code",[t._v("textureSampleCompare()")]),t._v(" interacts with the "),e("code",[t._v("texture()")]),t._v(" function in GLSL.")])]),t._v(" "),e("p",[t._v("We create our "),e("code",[t._v("depth_texture")]),t._v(" in "),e("code",[t._v("State::new()")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" depth_texture "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_depth_texture")]),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(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"depth_texture"')]),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("We need to modify our "),e("code",[t._v("render_pipeline")]),t._v(" to allow depth testing.")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n depth_stencil"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DepthStencilState")]),t._v(" "),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(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("DEPTH_FORMAT")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_write_enabled"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_compare"),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("CompareFunction")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Less")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n stencil"),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("StencilState")]),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(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n bias"),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("DepthBiasState")]),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(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),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",[e("li",[t._v("The "),e("code",[t._v("depth_compare")]),t._v(" function tells us when to discard a new pixel. Using "),e("code",[t._v("LESS")]),t._v(" means pixels will be drawn front to back. Here are all the values you can use.")])]),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)]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, Debug, Hash, Eq, PartialEq)]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg_attr(feature = "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"serde"')]),t._v(", derive(Serialize, Deserialize))]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("enum")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CompareFunction")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Undefined")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Never")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Less")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Equal")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[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(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LessEqual")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Greater")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NotEqual")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GreaterEqual")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Always")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),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("ol",{attrs:{start:"2"}},[e("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. Since we aren't using a stencil buffer, we'll use default values. We'll cover stencil buffers "),e("a",{attrs:{href:"../../todo"}},[t._v("later")]),t._v(".")])]),t._v(" "),e("p",[t._v("Don't forget to store the "),e("code",[t._v("depth_texture")]),t._v(" in "),e("code",[t._v("State")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\ndepth_texture"),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("We need to remember to change the "),e("code",[t._v("resize()")]),t._v(" method to create a new "),e("code",[t._v("depth_texture")]),t._v(" and "),e("code",[t._v("depth_texture_view")]),t._v(".")]),t._v(" "),e("div",{staticClass:"language-rust extra-class"},[e("pre",{pre:!0,attrs:{class:"language-rust"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),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("mut")]),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(" new_size"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("depth_texture "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_depth_texture")]),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(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"depth_texture"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("Make sure you update the "),e("code",[t._v("depth_texture")]),t._v(" "),e("em",[t._v("after")]),t._v(" you update "),e("code",[t._v("config")]),t._v(". If you don't, your program will crash as the "),e("code",[t._v("depth_texture")]),t._v(" will be a different size than the "),e("code",[t._v("surface")]),t._v(" texture.")]),t._v(" "),e("p",[t._v("The last change we need to make is in the "),e("code",[t._v("render()")]),t._v(" function. We've created the "),e("code",[t._v("depth_texture")]),t._v(", but we're not currently using it. We use it by attaching it to the "),e("code",[t._v("depth_stencil_attachment")]),t._v(" of a render pass.")]),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(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n depth_stencil_attachment"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDepthStencilAttachment")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("depth_texture"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_ops"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n stencil_ops"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),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("And that's all we have to do! No shader code needed! If you run the application, the depth issues will be fixed.")]),t._v(" "),e("p",[e("img",{attrs:{src:a(501),alt:"forest_fixed.png"}})]),t._v(" "),e("h2",{attrs:{id:"challenge"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),e("p",[t._v("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 "),e("code",[t._v("sampler_comparison")]),t._v(" uniform type and the "),e("code",[t._v("textureSampleCompare")]),t._v(" function instead of "),e("code",[t._v("sampler")]),t._v(", and "),e("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(" "),e("WasmExample",{attrs:{example:"tutorial8_depth"}}),t._v(" "),e("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/3.09f1398c.js b/assets/js/3.09f1398c.js new file mode 100644 index 00000000..9e86384b --- /dev/null +++ b/assets/js/3.09f1398c.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{364:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_string_new",(function(){return k})),t.d(e,"__wbindgen_object_clone_ref",(function(){return R})),t.d(e,"__wbindgen_cb_drop",(function(){return O})),t.d(e,"__wbindgen_string_get",(function(){return C})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return U})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return j})),t.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return q})),t.d(e,"__wbindgen_number_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return G})),t.d(e,"__wbindgen_number_new",(function(){return W})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return N})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return H})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return J})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return z})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return Z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return $})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return nn})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return en})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return tn})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return rn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return on})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return dn})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return bn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return gn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return wn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return ln})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return sn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return mn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return vn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return yn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return pn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return hn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return Sn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return An})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Pn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return In})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Dn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return Fn})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return En})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Tn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Bn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Ln})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Mn})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return kn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return Rn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return On})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Un})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return jn})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Gn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Wn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Nn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Jn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return zn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return $n})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return ne})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ee})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return te})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return re})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return ue})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return fe})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return ce})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return _e})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ie})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return oe})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return de})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return be})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ge})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return we})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return le})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return se})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return me})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ve})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ye})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return pe})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return he})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return Se})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Ae})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Pe})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Ie})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return De})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Fe})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Ee})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Te})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Be})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Le})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Me})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return ke})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return Re})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Oe})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ce})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ue})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return je})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Ge})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return We})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ne})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return He})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return Je})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return ze})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return $e})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return nt})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return et})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return tt})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return rt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return ut})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ft})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ct})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return _t})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return it})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return ot})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return dt})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return bt})),t.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return gt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return wt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return lt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return st})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return mt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return vt})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return yt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return pt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return ht})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return xt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return St})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return At})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Pt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return It})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Dt})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Ft})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Et})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Tt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Bt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Lt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Mt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return kt})),t.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return Rt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ot})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ct})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Ut})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Vt})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return jt})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return qt})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return Kt})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Gt})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return Wt})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Nt})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Qt})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Xt})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Yt})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Ht})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Jt})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return zt})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Zt})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return $t})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return nr})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return er})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return tr})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return rr})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ur})),t.d(e,"__wbg_name_2473476082bed625",(function(){return fr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return cr})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return _r})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return ir})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return or})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return dr})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return ar})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return br})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return gr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return wr})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return lr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return sr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return mr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return vr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return yr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return pr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return hr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return xr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return Sr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return Ar})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Pr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Fr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Er})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Tr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Br})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Lr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Mr})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return kr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Rr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Or})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Cr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Ur})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Vr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return jr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return qr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Kr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Gr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Wr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Nr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Qr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Xr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Yr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Hr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Jr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return zr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Zr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return $r})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return nu})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return eu})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return tu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return ru})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return uu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return fu})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return cu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return _u})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return iu})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return ou})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return du})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return au})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return bu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return gu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return wu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return lu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return su})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return mu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return vu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return yu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return pu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return hu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return xu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return Su})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return Au})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Pu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Iu})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Du})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Fu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Eu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Tu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Bu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Lu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Mu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return ku})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Ru})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Ou})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Cu})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Uu})),t.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return Vu})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return ju})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return qu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Ku})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Gu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Wu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Nu})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Qu})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Xu})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Yu})),t.d(e,"__wbg_origin_486b350035be1f11",(function(){return Hu})),t.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return Ju})),t.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return zu})),t.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return Zu})),t.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return $u})),t.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return nf})),t.d(e,"__wbg_text_1169d752cc697903",(function(){return ef})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return tf})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return rf})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return uf})),t.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return ff})),t.d(e,"__wbg_append_de37df908812970d",(function(){return cf})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return _f})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return of})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return df})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return af})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return bf})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return gf})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return wf})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return lf})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return sf})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return mf})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return vf})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return yf})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return pf})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return hf})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return xf})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Sf})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return Af})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return Pf})),t.d(e,"__wbindgen_is_function",(function(){return If})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return Df})),t.d(e,"__wbindgen_is_object",(function(){return Ff})),t.d(e,"__wbg_next_579e583d33566a86",(function(){return Ef})),t.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return Tf})),t.d(e,"__wbg_done_1b73b0672e15f234",(function(){return Bf})),t.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return Lf})),t.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return Mf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return kf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return Rf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return Of})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return Cf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return Uf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return Vf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return jf})),t.d(e,"__wbindgen_is_undefined",(function(){return qf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return Kf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Gf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Wf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Nf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Qf})),t.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return Xf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Yf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Jf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return zf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Zf})),t.d(e,"__wbg_new_8c3f0052272a457a",(function(){return $f})),t.d(e,"__wbg_set_83db9690f9353e79",(function(){return nc})),t.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return ec})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return tc})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return rc})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return uc})),t.d(e,"__wbg_has_8359f114ce042f5a",(function(){return fc})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return cc})),t.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return _c})),t.d(e,"__wbindgen_debug_string",(function(){return ic})),t.d(e,"__wbindgen_throw",(function(){return oc})),t.d(e,"__wbindgen_memory",(function(){return dc})),t.d(e,"__wbindgen_closure_wrapper815",(function(){return ac})),t.d(e,"__wbindgen_closure_wrapper817",(function(){return bc})),t.d(e,"__wbindgen_closure_wrapper819",(function(){return gc})),t.d(e,"__wbindgen_closure_wrapper821",(function(){return wc})),t.d(e,"__wbindgen_closure_wrapper823",(function(){return lc})),t.d(e,"__wbindgen_closure_wrapper825",(function(){return sc})),t.d(e,"__wbindgen_closure_wrapper827",(function(){return mc})),t.d(e,"__wbindgen_closure_wrapper829",(function(){return vc})),t.d(e,"__wbindgen_closure_wrapper831",(function(){return yc})),t.d(e,"__wbindgen_closure_wrapper1124",(function(){return pc}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(61),t(411),t(412),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(97),t(18),t(25),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(418),t(416),t(454)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}var o=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});o.decode();var d=new Uint8Array;function a(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function b(n,e){return o.decode(a().subarray(n,n+e))}function g(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return a().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,c=e(f),_=a(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var d=a().subarray(c+i,c+f);i+=s(n,d).written}return w=i,c}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function H(n,e){c(n).bindVertexArray(c(e))}function J(n,e,t,r,u,f,_,i,o,d,a){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,d>>>0,a>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function Z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function $(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function nn(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function en(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,F(r,u))}function tn(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,E(r,u))}function rn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function un(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function fn(n,e,t,r,u,f,_,i,o,d){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,d)}function cn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function _n(n,e,t,r,u,f,_,i,o,d,a,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a,b)}function on(n,e,t,r,u,f,_,i,o,d,a){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,c(a))}function dn(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,d){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d)}function bn(n){var e=c(n).createSampler();return v(e)?0:g(e)}function gn(n){var e=c(n).createVertexArray();return v(e)?0:g(e)}function wn(n,e){c(n).deleteQuery(c(e))}function ln(n,e){c(n).deleteSampler(c(e))}function sn(n,e){c(n).deleteSync(c(e))}function mn(n,e){c(n).deleteVertexArray(c(e))}function vn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function yn(n,e){c(n).drawBuffers(c(e))}function pn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function hn(n,e){c(n).endQuery(e>>>0)}function xn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return v(r)?0:g(r)}function Sn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function An(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function Pn(){return L((function(n,e,t){return g(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function In(n,e,t){return g(c(n).getQueryParameter(c(e),t>>>0))}function Dn(n,e,t){return g(c(n).getSyncParameter(c(e),t>>>0))}function Fn(n,e,t,r){return c(n).getUniformBlockIndex(c(e),b(t,r))}function En(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function Tn(n,e){c(n).readBuffer(e>>>0)}function Bn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Ln(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Mn(n,e,t,r,u,f){c(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function kn(n,e,t,r){c(n).samplerParameterf(c(e),t>>>0,r)}function Rn(n,e,t,r){c(n).samplerParameteri(c(e),t>>>0,r)}function On(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Cn(n,e,t,r,u,f,_){c(n).texStorage3D(e>>>0,t,r>>>0,u,f,_)}function Un(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,d)}),arguments)}function jn(){return L((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,c(b))}),arguments)}function Kn(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function Gn(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Wn(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Nn(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Qn(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Xn(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Yn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Hn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Jn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function zn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Zn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function $n(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function ne(n,e){c(n).activeTexture(e>>>0)}function ee(n,e,t){c(n).attachShader(c(e),c(t))}function te(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function re(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function ue(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function fe(n,e,t){c(n).bindTexture(e>>>0,c(t))}function ce(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function _e(n,e){c(n).blendEquation(e>>>0)}function ie(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function oe(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function de(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function be(n,e){c(n).compileShader(c(e))}function ge(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function we(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function le(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function se(n){var e=c(n).createProgram();return v(e)?0:g(e)}function me(n){var e=c(n).createRenderbuffer();return v(e)?0:g(e)}function ve(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function ye(n){var e=c(n).createTexture();return v(e)?0:g(e)}function pe(n,e){c(n).cullFace(e>>>0)}function he(n,e){c(n).deleteBuffer(c(e))}function xe(n,e){c(n).deleteFramebuffer(c(e))}function Se(n,e){c(n).deleteProgram(c(e))}function Ae(n,e){c(n).deleteRenderbuffer(c(e))}function Pe(n,e){c(n).deleteShader(c(e))}function Ie(n,e){c(n).deleteTexture(c(e))}function De(n,e){c(n).depthFunc(e>>>0)}function Fe(n,e){c(n).depthMask(0!==e)}function Ee(n,e,t){c(n).depthRange(e,t)}function Te(n,e){c(n).disable(e>>>0)}function Be(n,e){c(n).disableVertexAttribArray(e>>>0)}function Le(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Me(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function ke(n,e){c(n).enable(e>>>0)}function Re(n,e){c(n).enableVertexAttribArray(e>>>0)}function Oe(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Ce(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Ue(n,e){c(n).frontFace(e>>>0)}function Ve(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:g(r)}function je(){return L((function(n,e,t){var r=c(n).getExtension(b(e,t));return v(r)?0:g(r)}),arguments)}function qe(){return L((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Ge(n,e,t){return g(c(n).getProgramParameter(c(e),t>>>0))}function We(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Ne(n,e,t){return g(c(n).getShaderParameter(c(e),t>>>0))}function Qe(n){var e=c(n).getSupportedExtensions();return v(e)?0:g(e)}function Xe(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function Ye(n,e){c(n).linkProgram(c(e))}function He(n,e,t){c(n).pixelStorei(e>>>0,t)}function Je(n,e,t){c(n).polygonOffset(e,t)}function ze(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Ze(n,e,t,r,u){c(n).scissor(e,t,r,u)}function $e(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function nt(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function et(n,e){c(n).stencilMask(e>>>0)}function tt(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function rt(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ut(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function ft(n,e,t){c(n).uniform1f(c(e),t)}function ct(n,e,t){c(n).uniform1i(c(e),t)}function _t(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function it(n,e){c(n).useProgram(c(e))}function ot(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function dt(n,e,t,r,u){c(n).viewport(e,t,r,u)}function at(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function bt(n){var e=c(n).document;return v(e)?0:g(e)}function gt(n){return g(c(n).location)}function wt(){return L((function(n){return g(c(n).innerWidth)}),arguments)}function lt(){return L((function(n){return g(c(n).innerHeight)}),arguments)}function st(n){return c(n).devicePixelRatio}function mt(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function vt(){return L((function(n,e,t){var r=c(n).matchMedia(b(e,t));return v(r)?0:g(r)}),arguments)}function yt(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function pt(n,e,t){var r=c(n)[b(e,t)];return v(r)?0:g(r)}function ht(n,e){c(n).clearTimeout(e)}function xt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function St(n,e){c(n).bindVertexArrayOES(c(e))}function At(n){var e=c(n).createVertexArrayOES();return v(e)?0:g(e)}function Pt(n,e){c(n).deleteVertexArrayOES(c(e))}function It(n){return c(n).pointerId}function Dt(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Ft(n){return c(n).width}function Et(n,e){c(n).width=e>>>0}function Tt(n){return c(n).height}function Bt(n,e){c(n).height=e>>>0}function Lt(){return L((function(n,e,t,r){var u=c(n).getContext(b(e,t),c(r));return v(u)?0:g(u)}),arguments)}function Mt(n){return c(n).matches}function kt(n){return c(n).now()}function Rt(){return L((function(n,e,t){return g(new Request(b(n,e),c(t)))}),arguments)}function Ot(n,e){c(n).drawBuffersWEBGL(c(e))}function Ct(n){return c(n).charCode}function Ut(n){return c(n).keyCode}function Vt(n){return c(n).altKey}function jt(n){return c(n).ctrlKey}function qt(n){return c(n).shiftKey}function Kt(n){return c(n).metaKey}function Gt(n,e){var t=m(c(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Wt(n,e){var t=m(c(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Nt(n,e,t){return c(n).getModifierState(b(e,t))}function Qt(){return L((function(n,e,t,r){c(n).addEventListener(b(e,t),c(r))}),arguments)}function Xt(){return L((function(n,e,t,r,u){c(n).addEventListener(b(e,t),c(r),c(u))}),arguments)}function Yt(){return L((function(n,e,t,r){c(n).removeEventListener(b(e,t),c(r))}),arguments)}function Ht(){return L((function(n,e){return g(c(n).appendChild(c(e)))}),arguments)}function Jt(n){var e=c(n).target;return v(e)?0:g(e)}function zt(n){return c(n).cancelBubble}function Zt(n){c(n).preventDefault()}function $t(n){c(n).stopPropagation()}function nr(n){return c(n).matches}function er(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function tr(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function rr(n){return c(n).size}function ur(n){return c(n).type}function fr(n,e){var t=m(c(e).name,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function cr(n){var e=c(n).fullscreenElement;return v(e)?0:g(e)}function _r(){return L((function(n,e,t){return g(c(n).createElement(b(e,t)))}),arguments)}function ir(n,e,t){var r=c(n).getElementById(b(e,t));return v(r)?0:g(r)}function or(){return L((function(n,e,t){var r=c(n).querySelector(b(e,t));return v(r)?0:g(r)}),arguments)}function dr(n){return g(c(n).getBoundingClientRect())}function ar(){return L((function(n){c(n).requestFullscreen()}),arguments)}function br(){return L((function(n,e,t,r,u){c(n).setAttribute(b(e,t),b(r,u))}),arguments)}function gr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function wr(n){return g(c(n).style)}function lr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function sr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function mr(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function vr(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function yr(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function pr(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function hr(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function xr(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Sr(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Ar(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Pr(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Ir(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Dr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Fr(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Er(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Tr(n,e){c(n).activeTexture(e>>>0)}function Br(n,e,t){c(n).attachShader(c(e),c(t))}function Lr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Mr(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function kr(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function Rr(n,e,t){c(n).bindTexture(e>>>0,c(t))}function Or(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Cr(n,e){c(n).blendEquation(e>>>0)}function Ur(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Vr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function jr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function qr(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Kr(n,e){c(n).compileShader(c(e))}function Gr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function Wr(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function Nr(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function Qr(n){var e=c(n).createProgram();return v(e)?0:g(e)}function Xr(n){var e=c(n).createRenderbuffer();return v(e)?0:g(e)}function Yr(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function Hr(n){var e=c(n).createTexture();return v(e)?0:g(e)}function Jr(n,e){c(n).cullFace(e>>>0)}function zr(n,e){c(n).deleteBuffer(c(e))}function Zr(n,e){c(n).deleteFramebuffer(c(e))}function $r(n,e){c(n).deleteProgram(c(e))}function nu(n,e){c(n).deleteRenderbuffer(c(e))}function eu(n,e){c(n).deleteShader(c(e))}function tu(n,e){c(n).deleteTexture(c(e))}function ru(n,e){c(n).depthFunc(e>>>0)}function uu(n,e){c(n).depthMask(0!==e)}function fu(n,e,t){c(n).depthRange(e,t)}function cu(n,e){c(n).disable(e>>>0)}function _u(n,e){c(n).disableVertexAttribArray(e>>>0)}function iu(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function ou(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function du(n,e){c(n).enable(e>>>0)}function au(n,e){c(n).enableVertexAttribArray(e>>>0)}function bu(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function gu(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function wu(n,e){c(n).frontFace(e>>>0)}function lu(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:g(r)}function su(){return L((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function mu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function vu(n,e,t){return g(c(n).getProgramParameter(c(e),t>>>0))}function yu(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function pu(n,e,t){return g(c(n).getShaderParameter(c(e),t>>>0))}function hu(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function xu(n,e){c(n).linkProgram(c(e))}function Su(n,e,t){c(n).pixelStorei(e>>>0,t)}function Au(n,e,t){c(n).polygonOffset(e,t)}function Pu(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Iu(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Du(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function Fu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Eu(n,e){c(n).stencilMask(e>>>0)}function Tu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Bu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Lu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Mu(n,e,t){c(n).uniform1f(c(e),t)}function ku(n,e,t){c(n).uniform1i(c(e),t)}function Ru(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function Ou(n,e){c(n).useProgram(c(e))}function Cu(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Uu(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Vu(n,e){return g(c(n).fetch(c(e)))}function ju(n){console.debug(c(n))}function qu(n){console.error(c(n))}function Ku(n,e){console.error(c(n),c(e))}function Gu(n){console.info(c(n))}function Wu(n){console.log(c(n))}function Nu(n){console.warn(c(n))}function Qu(){return L((function(n,e,t,r,u){c(n).setProperty(b(e,t),b(r,u))}),arguments)}function Xu(n){return c(n).x}function Yu(n){return c(n).y}function Hu(){return L((function(n,e){var t=m(c(e).origin,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}),arguments)}function Ju(n){var e;try{e=c(n)instanceof Response}catch(n){e=!1}return e}function zu(n,e){var t=m(c(e).url,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Zu(n){return c(n).status}function $u(n){return g(c(n).headers)}function nf(){return L((function(n){return g(c(n).arrayBuffer())}),arguments)}function ef(){return L((function(n){return g(c(n).text())}),arguments)}function tf(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function rf(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function uf(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function ff(){return L((function(){return g(new Headers)}),arguments)}function cf(){return L((function(n,e,t,r,u){c(n).append(b(e,t),b(r,u))}),arguments)}function _f(n){return c(n).clientX}function of(n){return c(n).clientY}function df(n){return c(n).offsetX}function af(n){return c(n).offsetY}function bf(n){return c(n).ctrlKey}function gf(n){return c(n).shiftKey}function wf(n){return c(n).altKey}function lf(n){return c(n).metaKey}function sf(n){return c(n).button}function mf(n){return c(n).buttons}function vf(n){return c(n).movementX}function yf(n){return c(n).movementY}function pf(n){return c(n).deltaX}function hf(n){return c(n).deltaY}function xf(n){return c(n).deltaMode}function Sf(n,e){return g(c(n)[e>>>0])}function Af(n){return c(n).length}function Pf(){return g(new Array)}function If(n){return"function"==typeof c(n)}function Df(n,e){return g(new Function(b(n,e)))}function Ff(n){var e=c(n);return"object"===Object(r.a)(e)&&null!==e}function Ef(n){return g(c(n).next)}function Tf(){return L((function(n){return g(c(n).next())}),arguments)}function Bf(n){return c(n).done}function Lf(n){return g(c(n).value)}function Mf(){return g(Symbol.iterator)}function kf(){return L((function(n,e){return g(Reflect.get(c(n),c(e)))}),arguments)}function Rf(){return L((function(n,e){return g(c(n).call(c(e)))}),arguments)}function Of(){return g(new Object)}function Cf(){return L((function(){return g(self.self)}),arguments)}function Uf(){return L((function(){return g(window.window)}),arguments)}function Vf(){return L((function(){return g(globalThis.globalThis)}),arguments)}function jf(){return L((function(){return g(global.global)}),arguments)}function qf(n){return void 0===c(n)}function Kf(n){return g(Array.of(c(n)))}function Gf(n,e){return c(n).push(c(e))}function Wf(n,e){return Object.is(c(n),c(e))}function Nf(n){return g(Promise.resolve(c(n)))}function Qf(n,e){return g(c(n).then(c(e)))}function Xf(n,e,t){return g(c(n).then(c(e),c(t)))}function Yf(n){return g(c(n).buffer)}function Hf(n,e,t){return g(new Int8Array(c(n),e>>>0,t>>>0))}function Jf(n,e,t){return g(new Int16Array(c(n),e>>>0,t>>>0))}function zf(n,e,t){return g(new Int32Array(c(n),e>>>0,t>>>0))}function Zf(n,e,t){return g(new Uint8Array(c(n),e>>>0,t>>>0))}function $f(n){return g(new Uint8Array(c(n)))}function nc(n,e,t){c(n).set(c(e),t>>>0)}function ec(n){return c(n).length}function tc(n,e,t){return g(new Uint16Array(c(n),e>>>0,t>>>0))}function rc(n,e,t){return g(new Uint32Array(c(n),e>>>0,t>>>0))}function uc(n,e,t){return g(new Float32Array(c(n),e>>>0,t>>>0))}function fc(){return L((function(n,e){return Reflect.has(c(n),c(e))}),arguments)}function cc(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function _c(){return L((function(n){return g(JSON.stringify(c(n)))}),arguments)}function ic(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=d[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function oc(n,e){throw new Error(b(n,e))}function dc(){return g(u.j)}function ac(n,e,t){return g(x(n,e,175,S))}function bc(n,e,t){return g(x(n,e,175,S))}function gc(n,e,t){return g(x(n,e,175,S))}function wc(n,e,t){return g(x(n,e,175,S))}function lc(n,e,t){return g(x(n,e,175,S))}function sc(n,e,t){return g(x(n,e,175,S))}function mc(n,e,t){return g(x(n,e,175,A))}function vc(n,e,t){return g(x(n,e,175,S))}function yc(n,e,t){return g(x(n,e,175,S))}function pc(n,e,t){return g(x(n,e,339,P))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},418:function(n,e,t){t(1)({target:"Reflect",stat:!0},{has:function(n,e){return e in n}})},454:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(364);r.l()}}]); \ No newline at end of file diff --git a/assets/js/3.5c7419db.js b/assets/js/3.5c7419db.js deleted file mode 100644 index 2790cceb..00000000 --- a/assets/js/3.5c7419db.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{364:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return D})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_string_new",(function(){return k})),t.d(e,"__wbindgen_object_clone_ref",(function(){return R})),t.d(e,"__wbindgen_cb_drop",(function(){return O})),t.d(e,"__wbindgen_string_get",(function(){return C})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return V})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return j})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return q})),t.d(e,"__wbindgen_number_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return G})),t.d(e,"__wbindgen_number_new",(function(){return W})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return N})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return H})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return J})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return z})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return Z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return $})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return nn})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return en})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return tn})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return rn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return on})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return dn})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return bn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return gn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return wn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return ln})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return sn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return mn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return vn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return yn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return pn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return hn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return Sn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return An})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Pn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Dn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return In})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return En})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Fn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Tn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Bn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Ln})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Mn})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return kn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return Rn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return On})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Vn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return jn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Gn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Wn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Nn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Jn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return zn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return $n})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return ne})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ee})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return te})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return re})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return ue})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return fe})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return _e})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ce})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ie})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return oe})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return de})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return be})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ge})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return we})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return le})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return se})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return me})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ve})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ye})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return pe})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return he})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return Se})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Ae})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Pe})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return De})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return Ie})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Ee})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Fe})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Te})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Be})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Le})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Me})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return ke})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return Re})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Oe})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ce})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ve})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return je})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Ge})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return We})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ne})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return He})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return Je})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return ze})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return $e})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return nt})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return et})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return tt})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return rt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return ut})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ft})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return _t})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return ct})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return it})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return ot})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return dt})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return bt})),t.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return gt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return wt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return lt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return st})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return mt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return vt})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return yt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return pt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return ht})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return xt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return St})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return At})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Pt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Dt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return It})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Et})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Ft})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Tt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Bt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Lt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Mt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return kt})),t.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return Rt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ot})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ct})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Vt})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return jt})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Ut})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return qt})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return Kt})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Gt})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return Wt})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Nt})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Qt})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Xt})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Yt})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Ht})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Jt})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return zt})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Zt})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return $t})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return nr})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return er})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return tr})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return rr})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ur})),t.d(e,"__wbg_name_2473476082bed625",(function(){return fr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return _r})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return cr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return ir})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return or})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return dr})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return ar})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return br})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return gr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return wr})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return lr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return sr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return mr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return vr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return yr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return pr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return hr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return xr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return Sr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return Ar})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Pr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Er})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Fr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Tr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Br})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Lr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Mr})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return kr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Rr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Or})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Cr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Vr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return jr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Ur})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return qr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Kr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Gr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Wr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Nr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Qr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Xr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Yr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Hr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Jr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return zr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Zr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return $r})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return nu})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return eu})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return tu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return ru})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return uu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return fu})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return _u})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return cu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return iu})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return ou})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return du})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return au})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return bu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return gu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return wu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return lu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return su})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return mu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return vu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return yu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return pu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return hu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return xu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return Su})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return Au})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Pu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Du})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Iu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Eu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Fu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Tu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Bu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Lu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Mu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return ku})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Ru})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Ou})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Cu})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Vu})),t.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return ju})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Uu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return qu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Ku})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Gu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Wu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Nu})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Qu})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Xu})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Yu})),t.d(e,"__wbg_origin_486b350035be1f11",(function(){return Hu})),t.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return Ju})),t.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return zu})),t.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return Zu})),t.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return $u})),t.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return nf})),t.d(e,"__wbg_text_1169d752cc697903",(function(){return ef})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return tf})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return rf})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return uf})),t.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return ff})),t.d(e,"__wbg_append_de37df908812970d",(function(){return _f})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return cf})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return of})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return df})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return af})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return bf})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return gf})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return wf})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return lf})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return sf})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return mf})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return vf})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return yf})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return pf})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return hf})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return xf})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Sf})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return Af})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return Pf})),t.d(e,"__wbindgen_is_function",(function(){return Df})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return If})),t.d(e,"__wbindgen_is_object",(function(){return Ef})),t.d(e,"__wbg_next_579e583d33566a86",(function(){return Ff})),t.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return Tf})),t.d(e,"__wbg_done_1b73b0672e15f234",(function(){return Bf})),t.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return Lf})),t.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return Mf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return kf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return Rf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return Of})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return Cf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return Vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return jf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return Uf})),t.d(e,"__wbindgen_is_undefined",(function(){return qf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return Kf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Gf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Wf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Nf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Qf})),t.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return Xf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Yf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Jf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return zf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Zf})),t.d(e,"__wbg_new_8c3f0052272a457a",(function(){return $f})),t.d(e,"__wbg_set_83db9690f9353e79",(function(){return n_})),t.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return e_})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return t_})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r_})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return u_})),t.d(e,"__wbg_has_8359f114ce042f5a",(function(){return f_})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return __})),t.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return c_})),t.d(e,"__wbindgen_debug_string",(function(){return i_})),t.d(e,"__wbindgen_throw",(function(){return o_})),t.d(e,"__wbindgen_memory",(function(){return d_})),t.d(e,"__wbindgen_closure_wrapper815",(function(){return a_})),t.d(e,"__wbindgen_closure_wrapper817",(function(){return b_})),t.d(e,"__wbindgen_closure_wrapper819",(function(){return g_})),t.d(e,"__wbindgen_closure_wrapper821",(function(){return w_})),t.d(e,"__wbindgen_closure_wrapper823",(function(){return l_})),t.d(e,"__wbindgen_closure_wrapper825",(function(){return s_})),t.d(e,"__wbindgen_closure_wrapper827",(function(){return m_})),t.d(e,"__wbindgen_closure_wrapper829",(function(){return v_})),t.d(e,"__wbindgen_closure_wrapper831",(function(){return y_})),t.d(e,"__wbindgen_closure_wrapper1124",(function(){return p_}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(61),t(403),t(404),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(97),t(18),t(25),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(417),t(414),t(453)),f=new Array(32).fill(void 0);function _(n){return f[n]}f.push(void 0,null,!0,!1);var c=f.length;function i(n){var e=_(n);return function(n){n<36||(f[n]=c,c=n)}(n),e}var o=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});o.decode();var d=new Uint8Array;function a(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function b(n,e){return o.decode(a().subarray(n,n+e))}function g(n){c===f.length&&f.push(f.length+1);var e=c;return c=f[e],f[e]=n,e}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return a().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,_=e(f),c=a(),i=0;i127)break;c[_+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),_=t(_,f,f=i+3*n.length);var d=a().subarray(_+i,_+f);i+=s(n,d).written}return w=i,_}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},_=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),_=0;_>>0,_(t))}function X(n,e,t,r,u,f){_(n).bindBufferRange(e>>>0,t>>>0,_(r),u,f)}function Y(n,e,t){_(n).bindSampler(e>>>0,_(t))}function H(n,e){_(n).bindVertexArray(_(e))}function J(n,e,t,r,u,f,c,i,o,d,a){_(n).blitFramebuffer(e,t,r,u,f,c,i,o,d>>>0,a>>>0)}function z(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function Z(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function $(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function nn(n,e,t,r,u){_(n).clearBufferfi(e>>>0,t,r,u)}function en(n,e,t,r,u){_(n).clearBufferfv(e>>>0,t,E(r,u))}function tn(n,e,t,r,u){_(n).clearBufferiv(e>>>0,t,F(r,u))}function rn(n,e,t,r,u){_(n).clearBufferuiv(e>>>0,t,B(r,u))}function un(n,e,t,r){return _(n).clientWaitSync(_(e),t>>>0,r>>>0)}function fn(n,e,t,r,u,f,c,i,o,d){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o,d)}function _n(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function cn(n,e,t,r,u,f,c,i,o,d,a,b){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a,b)}function on(n,e,t,r,u,f,c,i,o,d,a){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,_(a))}function dn(n,e,t,r,u,f){_(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,c,i,o,d){_(n).copyTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d)}function bn(n){var e=_(n).createSampler();return v(e)?0:g(e)}function gn(n){var e=_(n).createVertexArray();return v(e)?0:g(e)}function wn(n,e){_(n).deleteQuery(_(e))}function ln(n,e){_(n).deleteSampler(_(e))}function sn(n,e){_(n).deleteSync(_(e))}function mn(n,e){_(n).deleteVertexArray(_(e))}function vn(n,e,t,r,u){_(n).drawArraysInstanced(e>>>0,t,r,u)}function yn(n,e){_(n).drawBuffers(_(e))}function pn(n,e,t,r,u,f){_(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function hn(n,e){_(n).endQuery(e>>>0)}function xn(n,e,t){var r=_(n).fenceSync(e>>>0,t>>>0);return v(r)?0:g(r)}function Sn(n,e,t,r,u,f){_(n).framebufferTextureLayer(e>>>0,t>>>0,_(r),u,f)}function An(n,e,t,r){_(n).getBufferSubData(e>>>0,t,_(r))}function Pn(){return L((function(n,e,t){return g(_(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Dn(n,e,t){return g(_(n).getQueryParameter(_(e),t>>>0))}function In(n,e,t){return g(_(n).getSyncParameter(_(e),t>>>0))}function En(n,e,t,r){return _(n).getUniformBlockIndex(_(e),b(t,r))}function Fn(){return L((function(n,e,t){_(n).invalidateFramebuffer(e>>>0,_(t))}),arguments)}function Tn(n,e){_(n).readBuffer(e>>>0)}function Bn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function Ln(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,i)}),arguments)}function Mn(n,e,t,r,u,f){_(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function kn(n,e,t,r){_(n).samplerParameterf(_(e),t>>>0,r)}function Rn(n,e,t,r){_(n).samplerParameteri(_(e),t>>>0,r)}function On(n,e,t,r,u,f){_(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Cn(n,e,t,r,u,f,c){_(n).texStorage3D(e>>>0,t,r>>>0,u,f,c)}function Vn(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(d))}),arguments)}function jn(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,d)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,c,i,o,d,a,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,c,i,o,d,a,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a>>>0,_(b))}),arguments)}function Kn(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function Gn(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Wn(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Nn(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Qn(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Xn(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Yn(n,e,t,r){_(n).uniformBlockBinding(_(e),t>>>0,r>>>0)}function Hn(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Jn(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function zn(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Zn(n,e,t){_(n).vertexAttribDivisor(e>>>0,t>>>0)}function $n(n,e,t,r,u,f){_(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function ne(n,e){_(n).activeTexture(e>>>0)}function ee(n,e,t){_(n).attachShader(_(e),_(t))}function te(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function re(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function ue(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function fe(n,e,t){_(n).bindTexture(e>>>0,_(t))}function _e(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function ce(n,e){_(n).blendEquation(e>>>0)}function ie(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function oe(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function de(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function be(n,e){_(n).compileShader(_(e))}function ge(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function we(n){var e=_(n).createBuffer();return v(e)?0:g(e)}function le(n){var e=_(n).createFramebuffer();return v(e)?0:g(e)}function se(n){var e=_(n).createProgram();return v(e)?0:g(e)}function me(n){var e=_(n).createRenderbuffer();return v(e)?0:g(e)}function ve(n,e){var t=_(n).createShader(e>>>0);return v(t)?0:g(t)}function ye(n){var e=_(n).createTexture();return v(e)?0:g(e)}function pe(n,e){_(n).cullFace(e>>>0)}function he(n,e){_(n).deleteBuffer(_(e))}function xe(n,e){_(n).deleteFramebuffer(_(e))}function Se(n,e){_(n).deleteProgram(_(e))}function Ae(n,e){_(n).deleteRenderbuffer(_(e))}function Pe(n,e){_(n).deleteShader(_(e))}function De(n,e){_(n).deleteTexture(_(e))}function Ie(n,e){_(n).depthFunc(e>>>0)}function Ee(n,e){_(n).depthMask(0!==e)}function Fe(n,e,t){_(n).depthRange(e,t)}function Te(n,e){_(n).disable(e>>>0)}function Be(n,e){_(n).disableVertexAttribArray(e>>>0)}function Le(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function Me(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function ke(n,e){_(n).enable(e>>>0)}function Re(n,e){_(n).enableVertexAttribArray(e>>>0)}function Oe(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function Ce(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function Ve(n,e){_(n).frontFace(e>>>0)}function je(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return v(r)?0:g(r)}function Ue(){return L((function(n,e,t){var r=_(n).getExtension(b(e,t));return v(r)?0:g(r)}),arguments)}function qe(){return L((function(n,e){return g(_(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function Ge(n,e,t){return g(_(n).getProgramParameter(_(e),t>>>0))}function We(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function Ne(n,e,t){return g(_(n).getShaderParameter(_(e),t>>>0))}function Qe(n){var e=_(n).getSupportedExtensions();return v(e)?0:g(e)}function Xe(n,e,t,r){var u=_(n).getUniformLocation(_(e),b(t,r));return v(u)?0:g(u)}function Ye(n,e){_(n).linkProgram(_(e))}function He(n,e,t){_(n).pixelStorei(e>>>0,t)}function Je(n,e,t){_(n).polygonOffset(e,t)}function ze(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Ze(n,e,t,r,u){_(n).scissor(e,t,r,u)}function $e(n,e,t,r){_(n).shaderSource(_(e),b(t,r))}function nt(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function et(n,e){_(n).stencilMask(e>>>0)}function tt(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function rt(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ut(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function ft(n,e,t){_(n).uniform1f(_(e),t)}function _t(n,e,t){_(n).uniform1i(_(e),t)}function ct(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function it(n,e){_(n).useProgram(_(e))}function ot(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function dt(n,e,t,r,u){_(n).viewport(e,t,r,u)}function at(n){var e;try{e=_(n)instanceof Window}catch(n){e=!1}return e}function bt(n){var e=_(n).document;return v(e)?0:g(e)}function gt(n){return g(_(n).location)}function wt(){return L((function(n){return g(_(n).innerWidth)}),arguments)}function lt(){return L((function(n){return g(_(n).innerHeight)}),arguments)}function st(n){return _(n).devicePixelRatio}function mt(){return L((function(n,e){_(n).cancelAnimationFrame(e)}),arguments)}function vt(){return L((function(n,e,t){var r=_(n).matchMedia(b(e,t));return v(r)?0:g(r)}),arguments)}function yt(){return L((function(n,e){return _(n).requestAnimationFrame(_(e))}),arguments)}function pt(n,e,t){var r=_(n)[b(e,t)];return v(r)?0:g(r)}function ht(n,e){_(n).clearTimeout(e)}function xt(){return L((function(n,e,t){return _(n).setTimeout(_(e),t)}),arguments)}function St(n,e){_(n).bindVertexArrayOES(_(e))}function At(n){var e=_(n).createVertexArrayOES();return v(e)?0:g(e)}function Pt(n,e){_(n).deleteVertexArrayOES(_(e))}function Dt(n){return _(n).pointerId}function It(n){var e;try{e=_(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Et(n){return _(n).width}function Ft(n,e){_(n).width=e>>>0}function Tt(n){return _(n).height}function Bt(n,e){_(n).height=e>>>0}function Lt(){return L((function(n,e,t,r){var u=_(n).getContext(b(e,t),_(r));return v(u)?0:g(u)}),arguments)}function Mt(n){return _(n).matches}function kt(n){return _(n).now()}function Rt(){return L((function(n,e,t){return g(new Request(b(n,e),_(t)))}),arguments)}function Ot(n,e){_(n).drawBuffersWEBGL(_(e))}function Ct(n){return _(n).charCode}function Vt(n){return _(n).keyCode}function jt(n){return _(n).altKey}function Ut(n){return _(n).ctrlKey}function qt(n){return _(n).shiftKey}function Kt(n){return _(n).metaKey}function Gt(n,e){var t=m(_(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Wt(n,e){var t=m(_(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Nt(n,e,t){return _(n).getModifierState(b(e,t))}function Qt(){return L((function(n,e,t,r){_(n).addEventListener(b(e,t),_(r))}),arguments)}function Xt(){return L((function(n,e,t,r,u){_(n).addEventListener(b(e,t),_(r),_(u))}),arguments)}function Yt(){return L((function(n,e,t,r){_(n).removeEventListener(b(e,t),_(r))}),arguments)}function Ht(){return L((function(n,e){return g(_(n).appendChild(_(e)))}),arguments)}function Jt(n){var e=_(n).target;return v(e)?0:g(e)}function zt(n){return _(n).cancelBubble}function Zt(n){_(n).preventDefault()}function $t(n){_(n).stopPropagation()}function nr(n){return _(n).matches}function er(){return L((function(n,e){_(n).addListener(_(e))}),arguments)}function tr(){return L((function(n,e){_(n).removeListener(_(e))}),arguments)}function rr(n){return _(n).size}function ur(n){return _(n).type}function fr(n,e){var t=m(_(e).name,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function _r(n){var e=_(n).fullscreenElement;return v(e)?0:g(e)}function cr(){return L((function(n,e,t){return g(_(n).createElement(b(e,t)))}),arguments)}function ir(n,e,t){var r=_(n).getElementById(b(e,t));return v(r)?0:g(r)}function or(){return L((function(n,e,t){var r=_(n).querySelector(b(e,t));return v(r)?0:g(r)}),arguments)}function dr(n){return g(_(n).getBoundingClientRect())}function ar(){return L((function(n){_(n).requestFullscreen()}),arguments)}function br(){return L((function(n,e,t,r,u){_(n).setAttribute(b(e,t),b(r,u))}),arguments)}function gr(){return L((function(n,e){_(n).setPointerCapture(e)}),arguments)}function wr(n){return g(_(n).style)}function lr(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function sr(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function mr(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function vr(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function yr(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function pr(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(d))}),arguments)}function hr(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function xr(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Sr(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Ar(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Pr(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Dr(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Ir(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Er(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Fr(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Tr(n,e){_(n).activeTexture(e>>>0)}function Br(n,e,t){_(n).attachShader(_(e),_(t))}function Lr(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function Mr(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function kr(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function Rr(n,e,t){_(n).bindTexture(e>>>0,_(t))}function Or(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function Cr(n,e){_(n).blendEquation(e>>>0)}function Vr(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function jr(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function Ur(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function qr(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Kr(n,e){_(n).compileShader(_(e))}function Gr(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function Wr(n){var e=_(n).createBuffer();return v(e)?0:g(e)}function Nr(n){var e=_(n).createFramebuffer();return v(e)?0:g(e)}function Qr(n){var e=_(n).createProgram();return v(e)?0:g(e)}function Xr(n){var e=_(n).createRenderbuffer();return v(e)?0:g(e)}function Yr(n,e){var t=_(n).createShader(e>>>0);return v(t)?0:g(t)}function Hr(n){var e=_(n).createTexture();return v(e)?0:g(e)}function Jr(n,e){_(n).cullFace(e>>>0)}function zr(n,e){_(n).deleteBuffer(_(e))}function Zr(n,e){_(n).deleteFramebuffer(_(e))}function $r(n,e){_(n).deleteProgram(_(e))}function nu(n,e){_(n).deleteRenderbuffer(_(e))}function eu(n,e){_(n).deleteShader(_(e))}function tu(n,e){_(n).deleteTexture(_(e))}function ru(n,e){_(n).depthFunc(e>>>0)}function uu(n,e){_(n).depthMask(0!==e)}function fu(n,e,t){_(n).depthRange(e,t)}function _u(n,e){_(n).disable(e>>>0)}function cu(n,e){_(n).disableVertexAttribArray(e>>>0)}function iu(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function ou(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function du(n,e){_(n).enable(e>>>0)}function au(n,e){_(n).enableVertexAttribArray(e>>>0)}function bu(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function gu(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function wu(n,e){_(n).frontFace(e>>>0)}function lu(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return v(r)?0:g(r)}function su(){return L((function(n,e){return g(_(n).getParameter(e>>>0))}),arguments)}function mu(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function vu(n,e,t){return g(_(n).getProgramParameter(_(e),t>>>0))}function yu(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function pu(n,e,t){return g(_(n).getShaderParameter(_(e),t>>>0))}function hu(n,e,t,r){var u=_(n).getUniformLocation(_(e),b(t,r));return v(u)?0:g(u)}function xu(n,e){_(n).linkProgram(_(e))}function Su(n,e,t){_(n).pixelStorei(e>>>0,t)}function Au(n,e,t){_(n).polygonOffset(e,t)}function Pu(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Du(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Iu(n,e,t,r){_(n).shaderSource(_(e),b(t,r))}function Eu(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Fu(n,e){_(n).stencilMask(e>>>0)}function Tu(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function Bu(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Lu(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function Mu(n,e,t){_(n).uniform1f(_(e),t)}function ku(n,e,t){_(n).uniform1i(_(e),t)}function Ru(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function Ou(n,e){_(n).useProgram(_(e))}function Cu(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function Vu(n,e,t,r,u){_(n).viewport(e,t,r,u)}function ju(n,e){return g(_(n).fetch(_(e)))}function Uu(n){console.debug(_(n))}function qu(n){console.error(_(n))}function Ku(n,e){console.error(_(n),_(e))}function Gu(n){console.info(_(n))}function Wu(n){console.log(_(n))}function Nu(n){console.warn(_(n))}function Qu(){return L((function(n,e,t,r,u){_(n).setProperty(b(e,t),b(r,u))}),arguments)}function Xu(n){return _(n).x}function Yu(n){return _(n).y}function Hu(){return L((function(n,e){var t=m(_(e).origin,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}),arguments)}function Ju(n){var e;try{e=_(n)instanceof Response}catch(n){e=!1}return e}function zu(n,e){var t=m(_(e).url,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Zu(n){return _(n).status}function $u(n){return g(_(n).headers)}function nf(){return L((function(n){return g(_(n).arrayBuffer())}),arguments)}function ef(){return L((function(n){return g(_(n).text())}),arguments)}function tf(n,e,t,r,u){_(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function rf(n,e,t,r,u,f){_(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function uf(n,e,t){_(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function ff(){return L((function(){return g(new Headers)}),arguments)}function _f(){return L((function(n,e,t,r,u){_(n).append(b(e,t),b(r,u))}),arguments)}function cf(n){return _(n).clientX}function of(n){return _(n).clientY}function df(n){return _(n).offsetX}function af(n){return _(n).offsetY}function bf(n){return _(n).ctrlKey}function gf(n){return _(n).shiftKey}function wf(n){return _(n).altKey}function lf(n){return _(n).metaKey}function sf(n){return _(n).button}function mf(n){return _(n).buttons}function vf(n){return _(n).movementX}function yf(n){return _(n).movementY}function pf(n){return _(n).deltaX}function hf(n){return _(n).deltaY}function xf(n){return _(n).deltaMode}function Sf(n,e){return g(_(n)[e>>>0])}function Af(n){return _(n).length}function Pf(){return g(new Array)}function Df(n){return"function"==typeof _(n)}function If(n,e){return g(new Function(b(n,e)))}function Ef(n){var e=_(n);return"object"===Object(r.a)(e)&&null!==e}function Ff(n){return g(_(n).next)}function Tf(){return L((function(n){return g(_(n).next())}),arguments)}function Bf(n){return _(n).done}function Lf(n){return g(_(n).value)}function Mf(){return g(Symbol.iterator)}function kf(){return L((function(n,e){return g(Reflect.get(_(n),_(e)))}),arguments)}function Rf(){return L((function(n,e){return g(_(n).call(_(e)))}),arguments)}function Of(){return g(new Object)}function Cf(){return L((function(){return g(self.self)}),arguments)}function Vf(){return L((function(){return g(window.window)}),arguments)}function jf(){return L((function(){return g(globalThis.globalThis)}),arguments)}function Uf(){return L((function(){return g(global.global)}),arguments)}function qf(n){return void 0===_(n)}function Kf(n){return g(Array.of(_(n)))}function Gf(n,e){return _(n).push(_(e))}function Wf(n,e){return Object.is(_(n),_(e))}function Nf(n){return g(Promise.resolve(_(n)))}function Qf(n,e){return g(_(n).then(_(e)))}function Xf(n,e,t){return g(_(n).then(_(e),_(t)))}function Yf(n){return g(_(n).buffer)}function Hf(n,e,t){return g(new Int8Array(_(n),e>>>0,t>>>0))}function Jf(n,e,t){return g(new Int16Array(_(n),e>>>0,t>>>0))}function zf(n,e,t){return g(new Int32Array(_(n),e>>>0,t>>>0))}function Zf(n,e,t){return g(new Uint8Array(_(n),e>>>0,t>>>0))}function $f(n){return g(new Uint8Array(_(n)))}function n_(n,e,t){_(n).set(_(e),t>>>0)}function e_(n){return _(n).length}function t_(n,e,t){return g(new Uint16Array(_(n),e>>>0,t>>>0))}function r_(n,e,t){return g(new Uint32Array(_(n),e>>>0,t>>>0))}function u_(n,e,t){return g(new Float32Array(_(n),e>>>0,t>>>0))}function f_(){return L((function(n,e){return Reflect.has(_(n),_(e))}),arguments)}function __(){return L((function(n,e,t){return Reflect.set(_(n),_(e),_(t))}),arguments)}function c_(){return L((function(n){return g(JSON.stringify(_(n)))}),arguments)}function i_(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var _=e.length,c="[";_>0&&(c+=n(e[0]));for(var i=1;i<_;i++)c+=", "+n(e[i]);return c+="]"}var o,d=/\[object ([^\]]+)\]/.exec(toString.call(e));if(!(d.length>1))return toString.call(e);if("Object"==(o=d[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(_(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function o_(n,e){throw new Error(b(n,e))}function d_(){return g(u.j)}function a_(n,e,t){return g(x(n,e,175,S))}function b_(n,e,t){return g(x(n,e,175,S))}function g_(n,e,t){return g(x(n,e,175,S))}function w_(n,e,t){return g(x(n,e,175,S))}function l_(n,e,t){return g(x(n,e,175,S))}function s_(n,e,t){return g(x(n,e,175,S))}function m_(n,e,t){return g(x(n,e,175,A))}function v_(n,e,t){return g(x(n,e,175,S))}function y_(n,e,t){return g(x(n,e,175,S))}function p_(n,e,t){return g(x(n,e,339,P))}}.call(this,t(375)(n))},417:function(n,e,t){t(1)({target:"Reflect",stat:!0},{has:function(n,e){return e in n}})},453:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(364);r.l()}}]); \ No newline at end of file diff --git a/assets/js/29.4022913a.js b/assets/js/30.aac6dc60.js similarity index 99% rename from assets/js/29.4022913a.js rename to assets/js/30.aac6dc60.js index 1bb52163..1b5c6fa6 100644 --- a/assets/js/29.4022913a.js +++ b/assets/js/30.aac6dc60.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{523:function(t,s,a){t.exports=a.p+"assets/img/left_right_hand.ccabf5d0.gif"},524:function(t,s,a){t.exports=a.p+"assets/img/screenshot.4f5740bc.png"},584:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"a-better-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-better-camera"}},[t._v("#")]),t._v(" A Better Camera")]),t._v(" "),n("p",[t._v("I've been putting this off for a while. Implementing a camera isn't specifically related to using WGPU properly, but it's been bugging me so let's do it.")]),t._v(" "),n("p",[n("code",[t._v("lib.rs")]),t._v(" is getting a little crowded, so let's create a "),n("code",[t._v("camera.rs")]),t._v(" file to put our camera code. The first things we're going to put in it are some imports and our "),n("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalPosition")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("consts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[rustfmt::skip]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAC_PI_2")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0001")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[n("code",[t._v("std::time::Instant")]),t._v(" panics on WASM, so we'll use the "),n("a",{attrs:{href:"https://docs.rs/instant",target:"_blank",rel:"noopener noreferrer"}},[t._v("instant crate"),n("OutboundLink")],1),t._v(". You'll want to include it in your "),n("code",[t._v("Cargo.toml")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("instant")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.1"')]),t._v("\n")])])])]),t._v(" "),n("h2",{attrs:{id:"the-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-camera"}},[t._v("#")]),t._v(" The Camera")]),t._v(" "),n("p",[t._v("Next, we need to create a new "),n("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 "),n("code",[t._v("calc_matrix")]),t._v(" method to create our view matrix.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Camera")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("calc_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sin_pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cos_pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("sin_cos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sin_yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cos_yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("sin_cos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("look_to_rh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n cos_pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" cos_yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sin_pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cos_pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" sin_yaw\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"the-projection"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-projection"}},[t._v("#")]),t._v(" The Projection")]),t._v(" "),n("p",[t._v("I've decided to split the projection from the camera. The projection only really needs to change if the window resizes, so let's create a "),n("code",[t._v("Projection")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Projection")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("F")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("F")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aspect "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("calc_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("perspective")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("One thing to note: "),n("code",[t._v("cgmath")]),t._v(" currently returns a right-handed projection matrix from the "),n("code",[t._v("perspective")]),t._v(" function. This means that the z-axis points out of the screen. If you want the z-axis to be "),n("em",[t._v("into")]),t._v(" the screen (aka. a left-handed projection matrix), you'll have to code your own.")]),t._v(" "),n("p",[t._v("You can tell the difference between a right-handed coordinate system and a left-handed one by using your hands. Point your thumb to the right. This is the x-axis. Point your pointer finger up. This is the y-axis. Extend your middle finger. This is the z-axis. On your right hand, your middle finger should be pointing towards you. On your left hand, it should be pointing away.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(523),alt:"./left_right_hand.gif"}})]),t._v(" "),n("h1",{attrs:{id:"the-camera-controller"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-camera-controller"}},[t._v("#")]),t._v(" The Camera Controller")]),t._v(" "),n("p",[t._v("Our camera is different, so we'll need a new camera controller. Add the following to "),n("code",[t._v("camera.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraController")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n amount_left"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_right"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_backward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_down"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotate_horizontal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotate_vertical"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sensitivity"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sensitivity"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n amount_left"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_right"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_backward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_down"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotate_horizontal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotate_vertical"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sensitivity"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("process_keyboard")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" amount "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" key "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("W")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Up")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("S")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Down")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_backward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("A")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_left "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("D")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Right")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Space")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_up "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LShift")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_down "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("process_mouse")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mouse_dx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mouse_dy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_horizontal "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dx "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dy "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("process_scroll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delta"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" delta "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// I'm assuming a line is about 100 pixels")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LineDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PixelDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalPosition")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Move forward/backward and left/right")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("sin_cos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_backward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_left"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Move in/out (aka. "zoom")')]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Note: this isn't an actual zoom. The camera's position")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// changes when zooming. I've added this to make it easier")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to get closer to an object you want to focus on.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pitch_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("sin_cos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" scrollward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pitch_cos "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" scrollward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Move up/down. Since we don't use roll, we can just")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// modify the y coordinate directly.")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_up "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_down"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rotate")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_horizontal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If process_mouse isn't called every frame, these values")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// will not get set to zero, and the camera will rotate")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// when moving in a non cardinal direction.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_horizontal "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Keep the camera's angle from going too high/low.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"cleaning-up-lib-rs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-up-lib-rs"}},[t._v("#")]),t._v(" Cleaning up "),n("code",[t._v("lib.rs")])]),t._v(" "),n("p",[t._v("First things first we need to delete "),n("code",[t._v("Camera")]),t._v(" and "),n("code",[t._v("CameraController")]),t._v(" as well as the extra "),n("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" from "),n("code",[t._v("lib.rs")]),t._v(". Once you've done that import "),n("code",[t._v("camera.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n")])])]),n("p",[t._v("We need to update "),n("code",[t._v("update_view_proj")]),t._v(" to use our new "),n("code",[t._v("Camera")]),t._v(" and "),n("code",[t._v("Projection")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_homogeneous")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to change our "),n("code",[t._v("State")]),t._v(" to use our "),n("code",[t._v("Camera")]),t._v(", "),n("code",[t._v("CameraProjection")]),t._v(" and "),n("code",[t._v("Projection")]),t._v(" as well. We'll also add a "),n("code",[t._v("mouse_pressed")]),t._v(" field to store whether the mouse was pressed.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n mouse_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("You'll need to import "),n("code",[t._v("winit::dpi::PhysicalPosition")]),t._v(" if you haven't already.")]),t._v(" "),n("p",[t._v("We need to update "),n("code",[t._v("new()")]),t._v(" as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("5.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("10.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("90.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("20.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" projection "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_controller "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n mouse_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to change our "),n("code",[t._v("projection")]),t._v(" in "),n("code",[t._v("resize")]),t._v(" as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[n("code",[t._v("input()")]),t._v(" will need to be updated as well. Up to this point, we have been using "),n("code",[t._v("WindowEvent")]),t._v("s for our camera controls. While this works, it's not the best solution. The "),n("a",{attrs:{href:"https://docs.rs/winit/0.24.0/winit/event/enum.WindowEvent.html?search=#variant.CursorMoved",target:"_blank",rel:"noopener noreferrer"}},[t._v("winit docs"),n("OutboundLink")],1),t._v(" inform us that OS will often transform the data for the "),n("code",[t._v("CursorMoved")]),t._v(" event to allow effects such as cursor acceleration.")]),t._v(" "),n("p",[t._v("Now to fix this we could change the "),n("code",[t._v("input()")]),t._v(" function to process "),n("code",[t._v("DeviceEvent")]),t._v(" instead of "),n("code",[t._v("WindowEvent")]),t._v(", but keyboard and button presses don't get emitted as "),n("code",[t._v("DeviceEvent")]),t._v("s on MacOS and WASM. Instead, we'll just remove the "),n("code",[t._v("CursorMoved")]),t._v(" check in "),n("code",[t._v("input()")]),t._v(", and a manual call to "),n("code",[t._v("camera_controller.process_mouse()")]),t._v(" in the "),n("code",[t._v("run()")]),t._v(" function.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n virtual_keycode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_keyboard")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseWheel")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_scroll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n button"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseButton")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Here are the changes to "),n("code",[t._v("run()")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n event_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseMotion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We're not using device_id currently")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_pressed "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_mouse")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delta"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("ref")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(not(target_arch="),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v("))]")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("update")]),t._v(" function requires a bit more explanation. The "),n("code",[t._v("update_camera")]),t._v(" function on the "),n("code",[t._v("CameraController")]),t._v(" has a parameter "),n("code",[t._v("dt: Duration")]),t._v(" which is the delta time or time between frames. This is to help smooth out the camera movement so that it's not locked by the framerate. Currently, we aren't calculating "),n("code",[t._v("dt")]),t._v(", so I decided to pass it into "),n("code",[t._v("update")]),t._v(" as a parameter.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ..")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("While we're at it, let's use "),n("code",[t._v("dt")]),t._v(" for the light's rotation as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("60.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" old_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n")])])]),n("p",[t._v("We still need to calculate "),n("code",[t._v("dt")]),t._v(". Let's do that in the "),n("code",[t._v("main")]),t._v(" function.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" last_render_time "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n event_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RedrawRequested")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" now "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" last_render_time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n last_render_time "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("With that, we should be able to move our camera wherever we want.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(524),alt:"./screenshot.png"}})]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial12_camera"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{525:function(t,s,a){t.exports=a.p+"assets/img/left_right_hand.ccabf5d0.gif"},526:function(t,s,a){t.exports=a.p+"assets/img/screenshot.4f5740bc.png"},587:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"a-better-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-better-camera"}},[t._v("#")]),t._v(" A Better Camera")]),t._v(" "),n("p",[t._v("I've been putting this off for a while. Implementing a camera isn't specifically related to using WGPU properly, but it's been bugging me so let's do it.")]),t._v(" "),n("p",[n("code",[t._v("lib.rs")]),t._v(" is getting a little crowded, so let's create a "),n("code",[t._v("camera.rs")]),t._v(" file to put our camera code. The first things we're going to put in it are some imports and our "),n("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalPosition")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("consts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[rustfmt::skip]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAC_PI_2")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0001")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[n("code",[t._v("std::time::Instant")]),t._v(" panics on WASM, so we'll use the "),n("a",{attrs:{href:"https://docs.rs/instant",target:"_blank",rel:"noopener noreferrer"}},[t._v("instant crate"),n("OutboundLink")],1),t._v(". You'll want to include it in your "),n("code",[t._v("Cargo.toml")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("instant")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.1"')]),t._v("\n")])])])]),t._v(" "),n("h2",{attrs:{id:"the-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-camera"}},[t._v("#")]),t._v(" The Camera")]),t._v(" "),n("p",[t._v("Next, we need to create a new "),n("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 "),n("code",[t._v("calc_matrix")]),t._v(" method to create our view matrix.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Camera")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("V")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("calc_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sin_pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cos_pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("sin_cos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("sin_yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cos_yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("sin_cos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("look_to_rh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n cos_pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" cos_yaw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sin_pitch"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cos_pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" sin_yaw\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"the-projection"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-projection"}},[t._v("#")]),t._v(" The Projection")]),t._v(" "),n("p",[t._v("I've decided to split the projection from the camera. The projection only really needs to change if the window resizes, so let's create a "),n("code",[t._v("Projection")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Projection")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("F")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Into")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("F")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aspect "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("calc_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("perspective")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("One thing to note: "),n("code",[t._v("cgmath")]),t._v(" currently returns a right-handed projection matrix from the "),n("code",[t._v("perspective")]),t._v(" function. This means that the z-axis points out of the screen. If you want the z-axis to be "),n("em",[t._v("into")]),t._v(" the screen (aka. a left-handed projection matrix), you'll have to code your own.")]),t._v(" "),n("p",[t._v("You can tell the difference between a right-handed coordinate system and a left-handed one by using your hands. Point your thumb to the right. This is the x-axis. Point your pointer finger up. This is the y-axis. Extend your middle finger. This is the z-axis. On your right hand, your middle finger should be pointing towards you. On your left hand, it should be pointing away.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(525),alt:"./left_right_hand.gif"}})]),t._v(" "),n("h1",{attrs:{id:"the-camera-controller"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-camera-controller"}},[t._v("#")]),t._v(" The Camera Controller")]),t._v(" "),n("p",[t._v("Our camera is different, so we'll need a new camera controller. Add the following to "),n("code",[t._v("camera.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraController")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n amount_left"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_right"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_backward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_down"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotate_horizontal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotate_vertical"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sensitivity"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sensitivity"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n amount_left"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_right"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_backward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n amount_down"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotate_horizontal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotate_vertical"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sensitivity"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("process_keyboard")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" amount "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" key "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("W")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Up")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("S")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Down")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_backward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("A")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_left "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("D")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Right")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Space")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_up "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LShift")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_down "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" amount"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("process_mouse")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mouse_dx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mouse_dy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f64")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_horizontal "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dx "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mouse_dy "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("process_scroll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delta"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" delta "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// I'm assuming a line is about 100 pixels")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LineDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseScrollDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PixelDelta")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalPosition")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" scroll"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Move forward/backward and left/right")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("sin_cos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_backward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_left"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Move in/out (aka. "zoom")')]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Note: this isn't an actual zoom. The camera's position")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// changes when zooming. I've added this to make it easier")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to get closer to an object you want to focus on.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pitch_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("sin_cos")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" scrollward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pitch_cos "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_cos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" pitch_cos "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" yaw_sin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" scrollward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroll "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Move up/down. Since we don't use roll, we can just")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// modify the y coordinate directly.")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_up "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount_down"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rotate")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("yaw "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_horizontal"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sensitivity "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If process_mouse isn't called every frame, these values")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// will not get set to zero, and the camera will rotate")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// when moving in a non cardinal direction.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_horizontal "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotate_vertical "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Keep the camera's angle from going too high/low.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("pitch "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rad")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("SAFE_FRAC_PI_2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h2",{attrs:{id:"cleaning-up-lib-rs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cleaning-up-lib-rs"}},[t._v("#")]),t._v(" Cleaning up "),n("code",[t._v("lib.rs")])]),t._v(" "),n("p",[t._v("First things first we need to delete "),n("code",[t._v("Camera")]),t._v(" and "),n("code",[t._v("CameraController")]),t._v(" as well as the extra "),n("code",[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" from "),n("code",[t._v("lib.rs")]),t._v(". Once you've done that import "),n("code",[t._v("camera.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("model")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mod")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token module-declaration namespace"}},[t._v("camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n")])])]),n("p",[t._v("We need to update "),n("code",[t._v("update_view_proj")]),t._v(" to use our new "),n("code",[t._v("Camera")]),t._v(" and "),n("code",[t._v("Projection")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("to_homogeneous")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("calc_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to change our "),n("code",[t._v("State")]),t._v(" to use our "),n("code",[t._v("Camera")]),t._v(", "),n("code",[t._v("CameraProjection")]),t._v(" and "),n("code",[t._v("Projection")]),t._v(" as well. We'll also add a "),n("code",[t._v("mouse_pressed")]),t._v(" field to store whether the mouse was pressed.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n mouse_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("You'll need to import "),n("code",[t._v("winit::dpi::PhysicalPosition")]),t._v(" if you haven't already.")]),t._v(" "),n("p",[t._v("We need to update "),n("code",[t._v("new()")]),t._v(" as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("5.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("10.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("90.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("20.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" projection "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Projection")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_controller "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n mouse_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to change our "),n("code",[t._v("projection")]),t._v(" in "),n("code",[t._v("resize")]),t._v(" as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" new_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[n("code",[t._v("input()")]),t._v(" will need to be updated as well. Up to this point, we have been using "),n("code",[t._v("WindowEvent")]),t._v("s for our camera controls. While this works, it's not the best solution. The "),n("a",{attrs:{href:"https://docs.rs/winit/0.24.0/winit/event/enum.WindowEvent.html?search=#variant.CursorMoved",target:"_blank",rel:"noopener noreferrer"}},[t._v("winit docs"),n("OutboundLink")],1),t._v(" inform us that OS will often transform the data for the "),n("code",[t._v("CursorMoved")]),t._v(" event to allow effects such as cursor acceleration.")]),t._v(" "),n("p",[t._v("Now to fix this we could change the "),n("code",[t._v("input()")]),t._v(" function to process "),n("code",[t._v("DeviceEvent")]),t._v(" instead of "),n("code",[t._v("WindowEvent")]),t._v(", but keyboard and button presses don't get emitted as "),n("code",[t._v("DeviceEvent")]),t._v("s on MacOS and WASM. Instead, we'll just remove the "),n("code",[t._v("CursorMoved")]),t._v(" check in "),n("code",[t._v("input()")]),t._v(", and a manual call to "),n("code",[t._v("camera_controller.process_mouse()")]),t._v(" in the "),n("code",[t._v("run()")]),t._v(" function.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n virtual_keycode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_keyboard")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("key"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseWheel")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_scroll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n button"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseButton")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Here are the changes to "),n("code",[t._v("run()")]),t._v(":")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n event_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeviceEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MouseMotion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" delta"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We're not using device_id currently")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_pressed "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_mouse")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("delta"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delta"),n("span",{pre:!0,attrs:{class:"token number"}},[t._v(".1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("ref")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(not(target_arch="),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v("))]")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Resized")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("physical_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ScaleFactorChanged")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("resize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("new_inner_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("update")]),t._v(" function requires a bit more explanation. The "),n("code",[t._v("update_camera")]),t._v(" function on the "),n("code",[t._v("CameraController")]),t._v(" has a parameter "),n("code",[t._v("dt: Duration")]),t._v(" which is the delta time or time between frames. This is to help smooth out the camera movement so that it's not locked by the framerate. Currently, we aren't calculating "),n("code",[t._v("dt")]),t._v(", so I decided to pass it into "),n("code",[t._v("update")]),t._v(" as a parameter.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Duration")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("projection"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ..")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("While we're at it, let's use "),n("code",[t._v("dt")]),t._v(" for the light's rotation as well.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("light_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("60.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_secs_f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" old_position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n")])])]),n("p",[t._v("We still need to calculate "),n("code",[t._v("dt")]),t._v(". Let's do that in the "),n("code",[t._v("main")]),t._v(" function.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" last_render_time "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n event_loop"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("control_flow "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RedrawRequested")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window_id"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" window_id "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" now "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("instant"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instant")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dt "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" last_render_time"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n last_render_time "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" now"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("With that, we should be able to move our camera wherever we want.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(526),alt:"./screenshot.png"}})]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial12_camera"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/30.c1f8fead.js b/assets/js/31.2cc77589.js similarity index 99% rename from assets/js/30.c1f8fead.js rename to assets/js/31.2cc77589.js index 332246d6..e92f8906 100644 --- a/assets/js/30.c1f8fead.js +++ b/assets/js/31.2cc77589.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{496:function(t,s,a){t.exports=a.p+"assets/img/static-tree.e1f31949.png"},577:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"uniform-buffers-and-a-3d-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#uniform-buffers-and-a-3d-camera"}},[t._v("#")]),t._v(" Uniform buffers and a 3d camera")]),t._v(" "),n("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 "),n("code",[t._v("Vertex")]),t._v(" structure has "),n("code",[t._v("position")]),t._v(" be 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 "),n("code",[t._v("Camera")]),t._v(".")]),t._v(" "),n("h2",{attrs:{id:"a-perspective-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-perspective-camera"}},[t._v("#")]),t._v(" A perspective camera")]),t._v(" "),n("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 "),n("a",{attrs:{href:"https://docs.rs/cgmath",target:"_blank",rel:"noopener noreferrer"}},[t._v("cgmath"),n("OutboundLink")],1),t._v(" to handle all the math for us. Add the following to your "),n("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other deps...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cgmath")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n")])])]),n("p",[t._v("Now that we have a math library, let's put it to use! Create a "),n("code",[t._v("Camera")]),t._v(" struct above the "),n("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Camera")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("build_view_projection_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("look_at_rh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("perspective")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("build_view_projection_matrix")]),t._v(" is where the magic happens.")]),t._v(" "),n("ol",[n("li",[t._v("The "),n("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(" "),n("li",[t._v("The "),n("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(" "),n("li",[t._v("The coordinate system in Wgpu is based on DirectX, and Metal's coordinate systems. That means that in "),n("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"),n("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 "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[rustfmt::skip]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("ul",[n("li",[t._v("Note: We don't explicitly "),n("strong",[t._v("need")]),t._v(" the "),n("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(" "),n("p",[t._v("Now let's add a "),n("code",[t._v("camera")]),t._v(" field to "),n("code",[t._v("State")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let diffuse_bind_group ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// position the camera one unit up and 2 units back")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// +z is out of the screen")]),t._v("\n eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// have it look at the origin")]),t._v("\n target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// which way is "up"')]),t._v("\n up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("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(" "),n("h2",{attrs:{id:"the-uniform-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-uniform-buffer"}},[t._v("#")]),t._v(" The uniform buffer")]),t._v(" "),n("p",[t._v("Up to this point, we've used "),n("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 that is available to every invocation of a set of shaders. We've technically 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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need this for Rust to store our data correctly for the shaders")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is so we can store this in a buffer")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We can't use cgmath with bytemuck directly so we'll have")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to convert the Matrix4 into a 4x4 f32 array")]),t._v("\n view_proj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SquareMatrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_proj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("identity")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("build_view_projection_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now that we have our data structured, let's make our "),n("code",[t._v("camera_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// in new() after creating `camera`")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" camera_uniform "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncamera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Camera Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("UNIFORM")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"uniform-buffers-and-bind-groups"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#uniform-buffers-and-bind-groups"}},[t._v("#")]),t._v(" Uniform buffers and bind groups")]),t._v(" "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferBindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uniform")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n has_dynamic_offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_binding_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"camera_bind_group_layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("ol",[n("li",[t._v("We only really need camera information in the vertex shader, as that's what we'll use to manipulate our vertices.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("dynamic")]),t._v(" field indicates whether this buffer will change size or not. This is useful if we want to store an array of things in our uniforms.")])]),t._v(" "),n("p",[t._v("Now we can create the actual bind group.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" camera_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_entire_binding")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"camera_bind_group"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Like with our texture, we need to register our "),n("code",[t._v("camera_bind_group_layout")]),t._v(" with the render pipeline.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now we need to add "),n("code",[t._v("camera_buffer")]),t._v(" and "),n("code",[t._v("camera_bind_group")]),t._v(" to "),n("code",[t._v("State")])]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The final thing we need to do before we get into shaders is use the bind group in "),n("code",[t._v("render()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"using-the-uniform-in-the-vertex-shader"}},[n("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(" "),n("p",[t._v("Modify the vertex shader to include the following.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Vertex shader\nstruct CameraUniform {\n view_proj: mat4x4,\n};\n@group(1) @binding(0) // 1.\nvar camera: CameraUniform;\n\nstruct VertexInput {\n @location(0) position: vec3,\n @location(1) tex_coords: vec2,\n}\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) tex_coords: vec2,\n}\n\n@vertex\nfn vs_main(\n model: VertexInput,\n) -> VertexOutput {\n var out: VertexOutput;\n out.tex_coords = model.tex_coords;\n out.clip_position = camera.view_proj * vec4(model.position, 1.0); // 2.\n return out;\n}\n")])])]),n("ol",[n("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 "),n("code",[t._v("render_pipeline_layout")]),t._v(". The "),n("code",[t._v("texture_bind_group_layout")]),t._v(" is listed first, thus it's "),n("code",[t._v("group(0)")]),t._v(", and "),n("code",[t._v("camera_bind_group")]),t._v(" is second, so it's "),n("code",[t._v("group(1)")]),t._v(".")]),t._v(" "),n("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(" "),n("h2",{attrs:{id:"a-controller-for-our-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-controller-for-our-camera"}},[t._v("#")]),t._v(" A controller for our camera")]),t._v(" "),n("p",[t._v("If you run the code right now, you should get something that looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(496),alt:"./static-tree.png"}})]),t._v(" "),n("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 "),n("code",[t._v("CameraController")]),t._v(" code below.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraController")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_forward_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_backward_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_left_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_right_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_forward_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_backward_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_left_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_right_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("process_events")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keycode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" is_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" keycode "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("W")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Up")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_forward_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("A")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_left_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("S")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Down")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_backward_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("D")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Right")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_right_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InnerSpace")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_norm "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_mag "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("magnitude")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prevents glitching when camera gets too close to the")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// center of the scene.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_forward_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" forward_mag "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" forward_norm "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_backward_pressed "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-=")]),t._v(" forward_norm "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward_norm"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cross")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Redo radius calc in case the fowrard/backward is pressed.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_mag "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("magnitude")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_right_pressed "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rescale the distance between the target and eye so ")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// that it doesn't change. The eye therefore still ")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lies on the circle made by the target and eye.")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" forward_mag"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_left_pressed "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" forward_mag"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("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(" "),n("p",[t._v("We still need to plug this into our existing code to make it do anything. Add the controller to "),n("code",[t._v("State")]),t._v(" and create it in "),n("code",[t._v("new()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_controller "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We're finally going to add some code to "),n("code",[t._v("input()")]),t._v(" (assuming you haven't already)!")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_events")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("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(" "),n("ol",[n("li",[t._v("We can create a separate buffer and copy its contents to our "),n("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 "),n("code",[t._v("camera_buffer")]),t._v(") to only be accessible 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(" "),n("li",[t._v("We can call one of the mapping methods "),n("code",[t._v("map_read_async")]),t._v(", and "),n("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 "),n("code",[t._v("async")]),t._v(" aspect of these methods this also requires our buffer to use the "),n("code",[t._v("BufferUsages::MAP_READ")]),t._v(" and/or "),n("code",[t._v("BufferUsages::MAP_WRITE")]),t._v(". We won't talk about it here, but you check out "),n("a",{attrs:{href:"../../showcase/windowless"}},[t._v("Wgpu without a window")]),t._v(" tutorial if you want to know more.")]),t._v(" "),n("li",[t._v("We can use "),n("code",[t._v("write_buffer")]),t._v(" on "),n("code",[t._v("queue")]),t._v(".")])]),t._v(" "),n("p",[t._v("We're going to use option number 3.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("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(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Have our model rotate on its own independently of the camera. "),n("em",[t._v("Hint: you'll need another matrix for this.")])]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial6_uniforms"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{498:function(t,s,a){t.exports=a.p+"assets/img/static-tree.e1f31949.png"},580:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"uniform-buffers-and-a-3d-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#uniform-buffers-and-a-3d-camera"}},[t._v("#")]),t._v(" Uniform buffers and a 3d camera")]),t._v(" "),n("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 "),n("code",[t._v("Vertex")]),t._v(" structure has "),n("code",[t._v("position")]),t._v(" be 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 "),n("code",[t._v("Camera")]),t._v(".")]),t._v(" "),n("h2",{attrs:{id:"a-perspective-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-perspective-camera"}},[t._v("#")]),t._v(" A perspective camera")]),t._v(" "),n("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 "),n("a",{attrs:{href:"https://docs.rs/cgmath",target:"_blank",rel:"noopener noreferrer"}},[t._v("cgmath"),n("OutboundLink")],1),t._v(" to handle all the math for us. Add the following to your "),n("code",[t._v("Cargo.toml")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# other deps...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cgmath")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.18"')]),t._v("\n")])])]),n("p",[t._v("Now that we have a math library, let's put it to use! Create a "),n("code",[t._v("Camera")]),t._v(" struct above the "),n("code",[t._v("State")]),t._v(" struct.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Camera")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Point3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("build_view_projection_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("look_at_rh")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("perspective")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("build_view_projection_matrix")]),t._v(" is where the magic happens.")]),t._v(" "),n("ol",[n("li",[t._v("The "),n("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(" "),n("li",[t._v("The "),n("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(" "),n("li",[t._v("The coordinate system in Wgpu is based on DirectX, and Metal's coordinate systems. That means that in "),n("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"),n("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 "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[rustfmt::skip]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("OPENGL_TO_WGPU_MATRIX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("ul",[n("li",[t._v("Note: We don't explicitly "),n("strong",[t._v("need")]),t._v(" the "),n("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(" "),n("p",[t._v("Now let's add a "),n("code",[t._v("camera")]),t._v(" field to "),n("code",[t._v("State")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let diffuse_bind_group ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// position the camera one unit up and 2 units back")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// +z is out of the screen")]),t._v("\n eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// have it look at the origin")]),t._v("\n target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// which way is "up"')]),t._v("\n up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_y")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fovy"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n znear"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n zfar"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("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(" "),n("h2",{attrs:{id:"the-uniform-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-uniform-buffer"}},[t._v("#")]),t._v(" The uniform buffer")]),t._v(" "),n("p",[t._v("Up to this point, we've used "),n("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 that is available to every invocation of a set of shaders. We've technically 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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need this for Rust to store our data correctly for the shaders")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This is so we can store this in a buffer")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We can't use cgmath with bytemuck directly so we'll have")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// to convert the Matrix4 into a 4x4 f32 array")]),t._v("\n view_proj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SquareMatrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view_proj"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("identity")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view_proj "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("build_view_projection_matrix")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now that we have our data structured, let's make our "),n("code",[t._v("camera_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// in new() after creating `camera`")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" camera_uniform "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncamera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Camera Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("UNIFORM")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"uniform-buffers-and-bind-groups"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#uniform-buffers-and-bind-groups"}},[t._v("#")]),t._v(" Uniform buffers and bind groups")]),t._v(" "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupLayoutEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visibility"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderStages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ty"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferBindingType")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uniform")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n has_dynamic_offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n min_binding_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"camera_bind_group_layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("ol",[n("li",[t._v("We only really need camera information in the vertex shader, as that's what we'll use to manipulate our vertices.")]),t._v(" "),n("li",[t._v("The "),n("code",[t._v("dynamic")]),t._v(" field indicates whether this buffer will change size or not. This is useful if we want to store an array of things in our uniforms.")])]),t._v(" "),n("p",[t._v("Now we can create the actual bind group.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_bind_group "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entries"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroupEntry")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n binding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resource"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" camera_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_entire_binding")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"camera_bind_group"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Like with our texture, we need to register our "),n("code",[t._v("camera_bind_group_layout")]),t._v(" with the render pipeline.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("camera_bind_group_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now we need to add "),n("code",[t._v("camera_buffer")]),t._v(" and "),n("code",[t._v("camera_bind_group")]),t._v(" to "),n("code",[t._v("State")])]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraUniform")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BindGroup")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The final thing we need to do before we get into shaders is use the bind group in "),n("code",[t._v("render()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"using-the-uniform-in-the-vertex-shader"}},[n("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(" "),n("p",[t._v("Modify the vertex shader to include the following.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("// Vertex shader\nstruct CameraUniform {\n view_proj: mat4x4,\n};\n@group(1) @binding(0) // 1.\nvar camera: CameraUniform;\n\nstruct VertexInput {\n @location(0) position: vec3,\n @location(1) tex_coords: vec2,\n}\n\nstruct VertexOutput {\n @builtin(position) clip_position: vec4,\n @location(0) tex_coords: vec2,\n}\n\n@vertex\nfn vs_main(\n model: VertexInput,\n) -> VertexOutput {\n var out: VertexOutput;\n out.tex_coords = model.tex_coords;\n out.clip_position = camera.view_proj * vec4(model.position, 1.0); // 2.\n return out;\n}\n")])])]),n("ol",[n("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 "),n("code",[t._v("render_pipeline_layout")]),t._v(". The "),n("code",[t._v("texture_bind_group_layout")]),t._v(" is listed first, thus it's "),n("code",[t._v("group(0)")]),t._v(", and "),n("code",[t._v("camera_bind_group")]),t._v(" is second, so it's "),n("code",[t._v("group(1)")]),t._v(".")]),t._v(" "),n("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(" "),n("h2",{attrs:{id:"a-controller-for-our-camera"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-controller-for-our-camera"}},[t._v("#")]),t._v(" A controller for our camera")]),t._v(" "),n("p",[t._v("If you run the code right now, you should get something that looks like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(498),alt:"./static-tree.png"}})]),t._v(" "),n("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 "),n("code",[t._v("CameraController")]),t._v(" code below.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("CameraController")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_forward_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_backward_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_left_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_right_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_forward_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_backward_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_left_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n is_right_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("process_events")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keycode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" is_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("state "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" keycode "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("W")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Up")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_forward_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("A")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Left")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_left_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("S")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Down")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_backward_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("D")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Right")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_right_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" is_pressed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update_camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InnerSpace")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_norm "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_mag "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("magnitude")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prevents glitching when camera gets too close to the")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// center of the scene.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_forward_pressed "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" forward_mag "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" forward_norm "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_backward_pressed "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-=")]),t._v(" forward_norm "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward_norm"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cross")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("up"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Redo radius calc in case the fowrard/backward is pressed.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" forward_mag "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" forward"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("magnitude")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_right_pressed "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Rescale the distance between the target and eye so ")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// that it doesn't change. The eye therefore still ")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lies on the circle made by the target and eye.")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" forward_mag"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("is_left_pressed "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eye "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("forward "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" right "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" forward_mag"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("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(" "),n("p",[t._v("We still need to plug this into our existing code to make it do anything. Add the controller to "),n("code",[t._v("State")]),t._v(" and create it in "),n("code",[t._v("new()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" camera_controller "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CameraController")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We're finally going to add some code to "),n("code",[t._v("input()")]),t._v(" (assuming you haven't already)!")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("input")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("bool")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("process_events")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("event"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("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(" "),n("ol",[n("li",[t._v("We can create a separate buffer and copy its contents to our "),n("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 "),n("code",[t._v("camera_buffer")]),t._v(") to only be accessible 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(" "),n("li",[t._v("We can call one of the mapping methods "),n("code",[t._v("map_read_async")]),t._v(", and "),n("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 "),n("code",[t._v("async")]),t._v(" aspect of these methods this also requires our buffer to use the "),n("code",[t._v("BufferUsages::MAP_READ")]),t._v(" and/or "),n("code",[t._v("BufferUsages::MAP_WRITE")]),t._v(". We won't talk about it here, but you check out "),n("a",{attrs:{href:"../../showcase/windowless"}},[t._v("Wgpu without a window")]),t._v(" tutorial if you want to know more.")]),t._v(" "),n("li",[t._v("We can use "),n("code",[t._v("write_buffer")]),t._v(" on "),n("code",[t._v("queue")]),t._v(".")])]),t._v(" "),n("p",[t._v("We're going to use option number 3.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("update")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_controller"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_camera")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_view_proj")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_uniform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("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(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Have our model rotate on its own independently of the camera. "),n("em",[t._v("Hint: you'll need another matrix for this.")])]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial6_uniforms"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/31.8e0bd3aa.js b/assets/js/32.946ceeb1.js similarity index 99% rename from assets/js/31.8e0bd3aa.js rename to assets/js/32.946ceeb1.js index 9bc87ec5..a21b90a3 100644 --- a/assets/js/31.8e0bd3aa.js +++ b/assets/js/32.946ceeb1.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{497:function(t,s,a){t.exports=a.p+"assets/img/forest.5c5cf3ad.png"},578:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"instancing"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#instancing"}},[t._v("#")]),t._v(" Instancing")]),t._v(" "),n("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(" "),n("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(" "),n("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(" "),n("p",[t._v("If we look at the parameters for the "),n("code",[t._v("draw_indexed")]),t._v(" function "),n("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"),n("OutboundLink")],1),t._v(", we can see a solution to our problem.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n base_vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("i32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// <-- This right here")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("instances")]),t._v(" parameter takes a "),n("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 "),n("code",[t._v("0..1")]),t._v(", which instructs the GPU to draw our model once, and then stop. If we used "),n("code",[t._v("0..5")]),t._v(", our code would draw 5 instances.")]),t._v(" "),n("p",[t._v("The fact that "),n("code",[t._v("instances")]),t._v(" is a "),n("code",[t._v("Range")]),t._v(" may seem weird as using "),n("code",[t._v("1..2")]),t._v(" for instances would still draw 1 instance of our object. Seems like it would be simpler to just use a "),n("code",[t._v("u32")]),t._v(" right? The reason it's a range is that sometimes we don't want to draw "),n("strong",[t._v("all")]),t._v(" of our objects. Sometimes we want to draw a selection of them, because others are not in frame, or we are debugging and want to look at a particular set of instances.")]),t._v(" "),n("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(" "),n("h2",{attrs:{id:"the-instance-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-instance-buffer"}},[t._v("#")]),t._v(" The Instance Buffer")]),t._v(" "),n("p",[t._v("We'll create an instance buffer in a similar way to how we create a uniform buffer. First, we'll create a struct called "),n("code",[t._v("Instance")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("A "),n("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 "),n("a",{attrs:{href:"https://mathworld.wolfram.com/Quaternion.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here's a Wolfram Alpha article"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("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 "),n("code",[t._v("Instance")]),t._v(" data into a matrix and store it into a struct called "),n("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("This is the data that will go into the "),n("code",[t._v("wgpu::Buffer")]),t._v(". We keep these separate so that we can update the "),n("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(" "),n("p",[t._v("Let's create a method on "),n("code",[t._v("Instance")]),t._v(" to convert to "),n("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("to_raw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_translation")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now we need to add 2 fields to "),n("code",[t._v("State")]),t._v(": "),n("code",[t._v("instances")]),t._v(", and "),n("code",[t._v("instance_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("cgmath")]),t._v(" crate uses traits to provide common mathematical methods across its structs such as "),n("code",[t._v("Vector3")]),t._v(", and these traits must be imported before these methods can be called. For convenience, the "),n("code",[t._v("prelude")]),t._v(" module within the crate provides the most common of these extension crates when it is imported.")]),t._v(" "),n("p",[t._v("To import this prelude module, put this line near the top of "),n("code",[t._v("lib.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("prelude"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We'll create the instances in "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INSTANCE_DISPLACEMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now we can create the actual instances.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instances "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("flat_map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("z"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" x "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" z"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" z "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INSTANCE_DISPLACEMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_zero")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this is needed so an object at (0, 0, 0) won't get scaled to zero")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// as Quaternions can effect scale if they're not created correctly")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_z")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now that we have our data, we can create the actual "),n("code",[t._v("instance_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance_data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("to_raw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Instance Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("instance_data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We're going to need to create a new "),n("code",[t._v("VertexBufferLayout")]),t._v(" for "),n("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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 "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This means that our shaders will only change to use the next")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// instance when the shader starts processing a new instance")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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 "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A mat4 takes up 4 vertex slots as it is technically 4 vec4s. We need to define a slot")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// for each vec4. We'll have to reassemble the mat4 in")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the shader.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("12")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to add this descriptor to the render pipeline so that we can use it when we render.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Don't forget to return our new variables!")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The last change we need to make is in the "),n("code",[t._v("render()")]),t._v(" method. We need to bind our "),n("code",[t._v("instance_buffer")]),t._v(" and we need to change the range we're using in "),n("code",[t._v("draw_indexed()")]),t._v(" to include the number of instances.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("div",{staticClass:"warning"},[n("p",[t._v("Make sure if you add new instances to the "),n("code",[t._v("Vec")]),t._v(", that you recreate the "),n("code",[t._v("instance_buffer")]),t._v(" and as well as "),n("code",[t._v("camera_bind_group")]),t._v(", otherwise your new instances won't show up correctly.")])]),t._v(" "),n("p",[t._v("We need to reference the parts of our new matrix in "),n("code",[t._v("shader.wgsl")]),t._v(" so that we can use it for our instances. Add the following to the top of "),n("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct InstanceInput {\n @location(5) model_matrix_0: vec4,\n @location(6) model_matrix_1: vec4,\n @location(7) model_matrix_2: vec4,\n @location(8) model_matrix_3: vec4,\n};\n")])])]),n("p",[t._v("We need to reassemble the matrix before we can use it.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("@vertex\nfn vs_main(\n model: VertexInput,\n instance: InstanceInput,\n) -> VertexOutput {\n let model_matrix = mat4x4(\n instance.model_matrix_0,\n instance.model_matrix_1,\n instance.model_matrix_2,\n instance.model_matrix_3,\n );\n // Continued...\n}\n")])])]),n("p",[t._v("We'll apply the "),n("code",[t._v("model_matrix")]),t._v(" before we apply "),n("code",[t._v("camera_uniform.view_proj")]),t._v(". We do this because the "),n("code",[t._v("camera_uniform.view_proj")]),t._v(" changes the coordinate system from "),n("code",[t._v("world space")]),t._v(" to "),n("code",[t._v("camera space")]),t._v(". Our "),n("code",[t._v("model_matrix")]),t._v(" is a "),n("code",[t._v("world space")]),t._v(" transformation, so we don't want to be in "),n("code",[t._v("camera space")]),t._v(" when using it.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("@vertex\nfn vs_main(\n model: VertexInput,\n instance: InstanceInput,\n) -> VertexOutput {\n // ...\n var out: VertexOutput;\n out.tex_coords = model.tex_coords;\n out.clip_position = camera.view_proj * model_matrix * vec4(model.position, 1.0);\n return out;\n}\n")])])]),n("p",[t._v("With all that done, we should have a forest of trees!")]),t._v(" "),n("p",[n("img",{attrs:{src:a(497),alt:"./forest.png"}})]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Modify the position and/or rotation of the instances every frame.")]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial7_instancing"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{499:function(t,s,a){t.exports=a.p+"assets/img/forest.5c5cf3ad.png"},581:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"instancing"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#instancing"}},[t._v("#")]),t._v(" Instancing")]),t._v(" "),n("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(" "),n("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(" "),n("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(" "),n("p",[t._v("If we look at the parameters for the "),n("code",[t._v("draw_indexed")]),t._v(" function "),n("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"),n("OutboundLink")],1),t._v(", we can see a solution to our problem.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n base_vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("i32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Range")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// <-- This right here")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("instances")]),t._v(" parameter takes a "),n("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 "),n("code",[t._v("0..1")]),t._v(", which instructs the GPU to draw our model once, and then stop. If we used "),n("code",[t._v("0..5")]),t._v(", our code would draw 5 instances.")]),t._v(" "),n("p",[t._v("The fact that "),n("code",[t._v("instances")]),t._v(" is a "),n("code",[t._v("Range")]),t._v(" may seem weird as using "),n("code",[t._v("1..2")]),t._v(" for instances would still draw 1 instance of our object. Seems like it would be simpler to just use a "),n("code",[t._v("u32")]),t._v(" right? The reason it's a range is that sometimes we don't want to draw "),n("strong",[t._v("all")]),t._v(" of our objects. Sometimes we want to draw a selection of them, because others are not in frame, or we are debugging and want to look at a particular set of instances.")]),t._v(" "),n("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(" "),n("h2",{attrs:{id:"the-instance-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#the-instance-buffer"}},[t._v("#")]),t._v(" The Instance Buffer")]),t._v(" "),n("p",[t._v("We'll create an instance buffer in a similar way to how we create a uniform buffer. First, we'll create a struct called "),n("code",[t._v("Instance")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib.rs")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("A "),n("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 "),n("a",{attrs:{href:"https://mathworld.wolfram.com/Quaternion.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("here's a Wolfram Alpha article"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("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 "),n("code",[t._v("Instance")]),t._v(" data into a matrix and store it into a struct called "),n("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[repr(C)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("This is the data that will go into the "),n("code",[t._v("wgpu::Buffer")]),t._v(". We keep these separate so that we can update the "),n("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(" "),n("p",[t._v("Let's create a method on "),n("code",[t._v("Instance")]),t._v(" to convert to "),n("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("to_raw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_translation")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Matrix4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now we need to add 2 fields to "),n("code",[t._v("State")]),t._v(": "),n("code",[t._v("instances")]),t._v(", and "),n("code",[t._v("instance_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("struct")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The "),n("code",[t._v("cgmath")]),t._v(" crate uses traits to provide common mathematical methods across its structs such as "),n("code",[t._v("Vector3")]),t._v(", and these traits must be imported before these methods can be called. For convenience, the "),n("code",[t._v("prelude")]),t._v(" module within the crate provides the most common of these extension crates when it is imported.")]),t._v(" "),n("p",[t._v("To import this prelude module, put this line near the top of "),n("code",[t._v("lib.rs")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("prelude"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We'll create the instances in "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INSTANCE_DISPLACEMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now we can create the actual instances.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("State")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instances "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("flat_map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("z"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NUM_INSTANCES_PER_ROW")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" x"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" x "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" y"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" z"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" z "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INSTANCE_DISPLACEMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rotation "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("is_zero")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this is needed so an object at (0, 0, 0) won't get scaled to zero")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// as Quaternions can effect scale if they're not created correctly")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vector3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unit_z")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quaternion")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_axis_angle")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("normalize")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("cgmath"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Deg")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("45.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n position"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rotation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Now that we have our data, we can create the actual "),n("code",[t._v("instance_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance_data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("iter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("to_raw"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" instance_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Instance Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n contents"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("instance_data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("VERTEX")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We're going to need to create a new "),n("code",[t._v("VertexBufferLayout")]),t._v(" for "),n("code",[t._v("InstanceRaw")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token lifetime-annotation symbol"}},[t._v("'a")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexBufferLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n array_stride"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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 "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This means that our shaders will only change to use the next")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// instance when the shader starts processing a new instance")]),t._v("\n step_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexStepMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Instance")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("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 "),n("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"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// A mat4 takes up 4 vertex slots as it is technically 4 vec4s. We need to define a slot")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// for each vec4. We'll have to reassemble the mat4 in")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the shader.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexAttribute")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("12")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n shader_location"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Float32x4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("We need to add this descriptor to the render pipeline so that we can use it when we render.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InstanceRaw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("desc")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Don't forget to return our new variables!")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\n instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("The last change we need to make is in the "),n("code",[t._v("render()")]),t._v(" method. We need to bind our "),n("code",[t._v("instance_buffer")]),t._v(" and we need to change the range we're using in "),n("code",[t._v("draw_indexed()")]),t._v(" to include the number of instances.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_bind_group")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("camera_bind_group"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("vertex_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NEW!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_vertex_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_index_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IndexFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Uint16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\nrender_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw_indexed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num_indices"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instances"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("div",{staticClass:"warning"},[n("p",[t._v("Make sure if you add new instances to the "),n("code",[t._v("Vec")]),t._v(", that you recreate the "),n("code",[t._v("instance_buffer")]),t._v(" and as well as "),n("code",[t._v("camera_bind_group")]),t._v(", otherwise your new instances won't show up correctly.")])]),t._v(" "),n("p",[t._v("We need to reference the parts of our new matrix in "),n("code",[t._v("shader.wgsl")]),t._v(" so that we can use it for our instances. Add the following to the top of "),n("code",[t._v("shader.wgsl")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("struct InstanceInput {\n @location(5) model_matrix_0: vec4,\n @location(6) model_matrix_1: vec4,\n @location(7) model_matrix_2: vec4,\n @location(8) model_matrix_3: vec4,\n};\n")])])]),n("p",[t._v("We need to reassemble the matrix before we can use it.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("@vertex\nfn vs_main(\n model: VertexInput,\n instance: InstanceInput,\n) -> VertexOutput {\n let model_matrix = mat4x4(\n instance.model_matrix_0,\n instance.model_matrix_1,\n instance.model_matrix_2,\n instance.model_matrix_3,\n );\n // Continued...\n}\n")])])]),n("p",[t._v("We'll apply the "),n("code",[t._v("model_matrix")]),t._v(" before we apply "),n("code",[t._v("camera_uniform.view_proj")]),t._v(". We do this because the "),n("code",[t._v("camera_uniform.view_proj")]),t._v(" changes the coordinate system from "),n("code",[t._v("world space")]),t._v(" to "),n("code",[t._v("camera space")]),t._v(". Our "),n("code",[t._v("model_matrix")]),t._v(" is a "),n("code",[t._v("world space")]),t._v(" transformation, so we don't want to be in "),n("code",[t._v("camera space")]),t._v(" when using it.")]),t._v(" "),n("div",{staticClass:"language-wgsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("@vertex\nfn vs_main(\n model: VertexInput,\n instance: InstanceInput,\n) -> VertexOutput {\n // ...\n var out: VertexOutput;\n out.tex_coords = model.tex_coords;\n out.clip_position = camera.view_proj * model_matrix * vec4(model.position, 1.0);\n return out;\n}\n")])])]),n("p",[t._v("With all that done, we should have a forest of trees!")]),t._v(" "),n("p",[n("img",{attrs:{src:a(499),alt:"./forest.png"}})]),t._v(" "),n("h2",{attrs:{id:"challenge"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#challenge"}},[t._v("#")]),t._v(" Challenge")]),t._v(" "),n("p",[t._v("Modify the position and/or rotation of the instances every frame.")]),t._v(" "),n("WasmExample",{attrs:{example:"tutorial7_instancing"}}),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/32.552c49b8.js b/assets/js/33.4771159b.js similarity index 99% rename from assets/js/32.552c49b8.js rename to assets/js/33.4771159b.js index 73525254..5667a7ee 100644 --- a/assets/js/32.552c49b8.js +++ b/assets/js/33.4771159b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{529:function(t,e,a){t.exports=a.p+"assets/img/normal_mapping_correct.2731b486.png"},589:function(t,e,a){"use strict";a.r(e);var s=a(23),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"news-pre-0-12"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#news-pre-0-12"}},[t._v("#")]),t._v(" News (Pre 0.12)")]),t._v(" "),s("h2",{attrs:{id:"pong-working-on-the-web"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pong-working-on-the-web"}},[t._v("#")]),t._v(" Pong working on the web")]),t._v(" "),s("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(" "),s("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(" "),s("p",[t._v("If you want to check out the demo, just head over to "),s("RouterLink",{attrs:{to:"/news/showcase/pong/#wasm-support"}},[t._v("the write up")])],1),t._v(" "),s("h2",{attrs:{id:"_0-12-further-changes-to-surface"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-12-further-changes-to-surface"}},[t._v("#")]),t._v(" 0.12 further changes to Surface")]),t._v(" "),s("p",[s("code",[t._v("SwapchainFrame")]),t._v(" is no longer a thing. Instead "),s("code",[t._v("get_current_texture")]),t._v(" will return a "),s("code",[t._v("SurfaceTexture")]),t._v(" directly. This means that getting a frame to draw to looks somethings 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(" 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("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")]),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("Another change is that you must call "),s("code",[t._v("SurfaceTexture::present()")]),t._v(" after you submit your render command buffers to the "),s("code",[t._v("queue")]),t._v(". It goes something 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("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("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("\noutput"),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")])])]),s("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 "),s("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"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("h2",{attrs:{id:"pong-is-fixed-for-0-10"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pong-is-fixed-for-0-10"}},[t._v("#")]),t._v(" Pong is fixed for 0.10")]),t._v(" "),s("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 "),s("code",[t._v("spirv")]),t._v(" feature to wgpu in Cargo.toml.")]),t._v(" "),s("h2",{attrs:{id:"_0-10-swapchain-is-dead-long-live-the-surface"}},[s("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(" "),s("p",[s("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 "),s("code",[t._v("Surface")]),t._v(" instead. That means configuring "),s("code",[t._v("SurfaceTexture")]),t._v("s will look something 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(" 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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),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("[")]),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 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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PresentMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsurface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Resizing the surface will use similar 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("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("p",[t._v("Finally, getting a "),s("code",[t._v("SurfaceTexture")]),t._v(" to draw to will use the surface directly.")]),t._v(" "),s("div",{staticClass:"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(" 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("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")]),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("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(" "),s("h2",{attrs:{id:"pong-and-imgui-demos-are-fixed"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pong-and-imgui-demos-are-fixed"}},[t._v("#")]),t._v(" Pong and imgui demos are fixed!")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("imgui_wgpu")]),t._v(" and "),s("code",[t._v("wgpu_glyph")]),t._v(" crates have been updated to "),s("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 "),s("code",[t._v("naga")]),t._v(" at some point.")]),t._v(" "),s("h2",{attrs:{id:"_0-8-and-wgsl"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-8-and-wgsl"}},[t._v("#")]),t._v(" 0.8 and WGSL")]),t._v(" "),s("h3",{attrs:{id:"the-glsl-shaders-have-been-translated-to-wgsl"}},[s("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(" "),s("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(" "),s("h3",{attrs:{id:"shaderc-has-been-removed"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shaderc-has-been-removed"}},[t._v("#")]),t._v(" Shaderc has been removed")]),t._v(" "),s("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 ("),s("code",[t._v("inverse")]),t._v(" is not available in all languages targeting spirv).")]),t._v(" "),s("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(" "),s("h3",{attrs:{id:"some-of-the-showcase-examples-are-broken"}},[s("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(" "),s("p",[t._v("The "),s("code",[t._v("wgpu_glyph")]),t._v(", and "),s("code",[t._v("imgui-wgpu")]),t._v(" crates currently depend on "),s("code",[t._v("wgpu")]),t._v(" 0.7, which is causing the "),s("code",[t._v("pong")]),t._v(" and "),s("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 "),s("code",[t._v("wgpu")]),t._v(" 0.8. (Feel free to submit a issue or even PR when that happens!)")]),t._v(" "),s("h3",{attrs:{id:"various-api-changes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#various-api-changes"}},[t._v("#")]),t._v(" Various API changes")]),t._v(" "),s("ul",[s("li",[t._v("The "),s("code",[t._v("depth")]),t._v(" field is now "),s("code",[t._v("depth_or_array_layers")])]),t._v(" "),s("li",[s("code",[t._v("wgpu::VertexFormat::Float3")]),t._v(" is now "),s("code",[t._v("wgpu::VertexFormat::Float32x3")]),t._v(". Similar things apply to "),s("code",[t._v("Float2")]),t._v(" and "),s("code",[t._v("Float4")])]),t._v(" "),s("li",[s("code",[t._v("CullMode")]),t._v(" is no longer a thing, instead "),s("code",[t._v("PrimitiveState::cull_mode")]),t._v(" will require an "),s("code",[t._v("Option")])]),t._v(" "),s("li",[t._v("Added "),s("code",[t._v("clamp_depth")]),t._v(" and "),s("code",[t._v("conservative")]),t._v(" to "),s("code",[t._v("PrimitiveState")]),t._v(". Part of this means that "),s("code",[t._v("DepthStencilState")]),t._v(" no longer has a "),s("code",[t._v("clamp_depth")]),t._v(" field.")]),t._v(" "),s("li",[s("code",[t._v("color_blend")]),t._v(" and "),s("code",[t._v("alpha_blend")]),t._v(" have been moved into the new "),s("code",[t._v("blend")]),t._v(" field with accepts an "),s("code",[t._v("Option")])]),t._v(" "),s("li",[s("code",[t._v("adapter.get_preferred_format()")]),t._v(" now returns an "),s("code",[t._v("Option")])]),t._v(" "),s("li",[s("code",[t._v("wgpu::RenderPassColorAttachmentDescriptor")]),t._v(" has been renamed "),s("code",[t._v("wgpu::RenderPassColorAttachement")]),t._v(" and the "),s("code",[t._v("attachment")]),t._v(" field has been renamed to "),s("code",[t._v("view")])]),t._v(" "),s("li",[s("code",[t._v("wgpu::RenderPassDepthStencialAttachmentDescriptor")]),t._v(" also loses the "),s("code",[t._v("Descriptor")]),t._v(" part of it's name. "),s("code",[t._v("attachment")]),t._v(" gets renamed to "),s("code",[t._v("view")]),t._v(" as well.")]),t._v(" "),s("li",[s("code",[t._v("wgpu::TextureCopyView")]),t._v(" has been renamed to "),s("code",[t._v("wgpu::ImageCopyTexture")]),t._v(". This is a typedef for "),s("code",[t._v("wgpu::ImageCopyTextureBase")])]),t._v(" "),s("li",[s("code",[t._v("wgpu::TextureDataLayout")]),t._v(" is now "),s("code",[t._v("wgpu::ImageDataLayout")]),t._v(" and it's "),s("code",[t._v("bytes_per_row")]),t._v(" and "),s("code",[t._v("rows_per_image")]),t._v(" now take "),s("code",[t._v("NonZeroU32")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("wgpu::ImageCopyBuffer")]),t._v(" is now "),s("code",[t._v("wgpu::ImageCopyBuffer")]),t._v(".")])]),t._v(" "),s("h2",{attrs:{id:"_0-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-7"}},[t._v("#")]),t._v(" 0.7")]),t._v(" "),s("p",[t._v("There were a lot of changes, particularly to the "),s("code",[t._v("RenderPipelineDescriptor")]),t._v(". Most other things have not changed. You can check out the "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/140",target:"_blank",rel:"noopener noreferrer"}},[t._v("0.9 PR"),s("OutboundLink")],1),t._v(" for the full details.")]),t._v(" "),s("h2",{attrs:{id:"november-2020-cleanup-content-freeze-and-patreon"}},[s("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(" "),s("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(" "),s("ul",[s("li",[t._v("The tutorial now handles "),s("code",[t._v("SurfaceError")]),t._v(" properly")]),t._v(" "),s("li",[t._v("I'm now using bytemuck's derive feature on all buffer data structs.")]),t._v(" "),s("li",[t._v("The "),s("a",{attrs:{href:"../beginner/tutorial7-instancing"}},[t._v("instancing tutorial")]),t._v(" now uses vertex buffers instead of storage buffers.")]),t._v(" "),s("li",[s("code",[t._v("build.rs")]),t._v(" now updates when individual shaders are changed, not whenever "),s("code",[t._v("/src")]),t._v(" is changed.")]),t._v(" "),s("li",[t._v("Had some help from Github user @kanerogers to clean up the "),s("a",{attrs:{href:"../beginner/tutorial5-textures"}},[t._v("texturing tutorial")]),t._v(".")]),t._v(" "),s("li",[t._v("I made a "),s("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(" "),s("li",[t._v("I made a "),s("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(" "),s("p",[t._v('Now in the headline, I mentioned a "Content Freeze". Wgpu is still a moving target. The migration from '),s("code",[t._v("0.4")]),t._v(" to "),s("code",[t._v("0.5")]),t._v(" was a lot of work. The same goes for "),s("code",[t._v("0.5")]),t._v(" to "),s("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(" "),s("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 "),s("a",{attrs:{href:"https://www.patreon.com/sotrh",target:"_blank",rel:"noopener noreferrer"}},[t._v("patreon"),s("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(" "),s("p",[t._v("You can find out more about contributing to this project on the "),s("RouterLink",{attrs:{to:"/news/#contribution-and-support"}},[t._v("introduction page")])],1),t._v(" "),s("h2",{attrs:{id:"_0-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-6"}},[t._v("#")]),t._v(" 0.6")]),t._v(" "),s("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 "),s("code",[t._v("queue.write_buffer()")]),t._v(" and "),s("code",[t._v("queue.write_texture()")]),t._v(" everywhere. I won't get into the nitty gritty, but you can check out the "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/90",target:"_blank",rel:"noopener noreferrer"}},[t._v("pull request"),s("OutboundLink")],1),t._v(" if you're interested.")]),t._v(" "),s("h2",{attrs:{id:"added-pong-showcase"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#added-pong-showcase"}},[t._v("#")]),t._v(" Added Pong Showcase")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/news/showcase/pong/"}},[t._v("See it here")])],1),t._v(" "),s("h2",{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('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(" "),s("p",[s("img",{attrs:{src:a(529),alt:""}})]),t._v(" "),s("h2",{attrs:{id:"_0-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-5"}},[t._v("#")]),t._v(" 0.5!")]),t._v(" "),s("p",[t._v("Too many things changed to make note of them here. Check out "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/29",target:"_blank",rel:"noopener noreferrer"}},[t._v("the 0.5 pull request"),s("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 "),s("code",[t._v("Future")]),t._v("s. The tutorials have been updated as well as the code.")]),t._v(" "),s("h2",{attrs:{id:"reworked-lighting-tutorial"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#reworked-lighting-tutorial"}},[t._v("#")]),t._v(" Reworked lighting tutorial")]),t._v(" "),s("p",[t._v("The "),s("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/"}},[t._v("lighting tutorial")]),t._v(" was not up to par, so I redid it.")],1),t._v(" "),s("h2",{attrs:{id:"added-gif-showcase"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#added-gif-showcase"}},[t._v("#")]),t._v(" Added GIF showcase")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/showcase/gifs/"}},[t._v("Creating GIFs")])],1),t._v(" "),s("h2",{attrs:{id:"updated-texture-tutorials"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#updated-texture-tutorials"}},[t._v("#")]),t._v(" Updated texture tutorials")]),t._v(" "),s("p",[t._v("Up to this point, we created textures manually every time. I've pulled out the texture creation code into a new "),s("code",[t._v("texture.rs")]),t._v(" file and included it in every tutorial from the "),s("RouterLink",{attrs:{to:"/beginner/tutorial5-textures/#cleaning-things-up"}},[t._v("textures tutorial")]),t._v(" onward.")],1),t._v(" "),s("h2",{attrs:{id:"fixed-panics-due-to-not-specifying-the-correct-usage"}},[s("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 "),s("code",[t._v("usage")])]),t._v(" "),s("p",[t._v("Wgpu has become more strict about what "),s("code",[t._v("BufferUsages")]),t._v("s and "),s("code",[t._v("TextureUsages")]),t._v("s are required when performing certain operations. For example in the "),s("RouterLink",{attrs:{to:"/intermediate/windowless/"}},[t._v("Wgpu without a window example")]),t._v(", the "),s("code",[t._v("texture_desc")]),t._v(" only specified the usage to by "),s("code",[t._v("COPY_SRC")]),t._v(". This caused a crash when the "),s("code",[t._v("texture")]),t._v(" was used as a render target. Adding "),s("code",[t._v("OUTPUT_ATTACHMENT")]),t._v(" fixed the issue.")],1),t._v(" "),s("h2",{attrs:{id:"updating-winit-from-0-20-0-alpha5-to-0-20"}},[s("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(" "),s("p",[t._v("There were a lot of small changes to how the dpi stuff works. You can see all the changes "),s("a",{attrs:{href:"https://github.com/rust-windowing/winit/blob/master/CHANGELOG.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the changelog"),s("OutboundLink")],1),t._v(". That means that some of the tutorials had to change.")]),t._v(" "),s("ul",[s("li",[t._v("I've removed "),s("code",[t._v("hidpi_factor")]),t._v(" from "),s("code",[t._v("State")]),t._v(" entirely. They removed the "),s("code",[t._v("hidpi_factor()")]),t._v(" method from "),s("code",[t._v("winit::window::Window")]),t._v(", and changed "),s("code",[t._v("inner_size()")]),t._v(" to return "),s("code",[t._v("PhysicalSize")]),t._v(" instead of "),s("code",[t._v("LogicalSize")]),t._v(", so we don't need to store the "),s("code",[t._v("hidpi_factor")]),t._v(" anymore.")]),t._v(" "),s("li",[s("code",[t._v("update_hidpi_and_resize")]),t._v(" is no more. Since "),s("code",[t._v("ScaleFactorChanged")]),t._v(" passes in the windows new "),s("code",[t._v("PhysicalSize")]),t._v(", we can simply use "),s("code",[t._v("resize()")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("State::size")]),t._v(" is now "),s("code",[t._v("PhysicalSize")]),t._v(" instead of the pre 0.20 "),s("code",[t._v("LogicalSize")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("EventsCleared")]),t._v(" is now "),s("code",[t._v("MainEventsCleared")]),t._v(".")])]),t._v(" "),s("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(" "),s("h2",{attrs:{id:"changed-tutorial-examples-to-use-a-src-directory"}},[s("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(" "),s("p",[t._v("I wasn't using the traditional cargo binary folder setup. I've changed it to the standardized form now.")]),t._v(" "),s("h2",{attrs:{id:"updating-to-0-4-from-0-3"}},[s("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(" "),s("p",[t._v("There are a few things that have changed:")]),t._v(" "),s("ol",[s("li",[t._v("The use of "),s("code",[t._v("Instance")]),t._v(" has been removed. Creating a "),s("code",[t._v("Surface")]),t._v(" and requesting an "),s("code",[t._v("Adapter")]),t._v(" are done 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 keyword"}},[t._v("let")]),t._v(" surface "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),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 keyword"}},[t._v("let")]),t._v(" adapter "),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("Adapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request")]),s("span",{pre:!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 "),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(".")]),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("// needs to be unwrapped")]),t._v("\n")])])]),s("ol",{attrs:{start:"2"}},[s("li",[t._v("The "),s("code",[t._v("request_device")]),t._v(" method now returns a "),s("code",[t._v("(Device, Queue)")]),t._v(" tuple. This means that you can borrow the "),s("code",[t._v("Queue")]),t._v(" mutably while using the "),s("code",[t._v("Device")]),t._v(" immutably. Because of this change, submitting "),s("code",[t._v("CommandBuffer")]),t._v("s to the queue uses the "),s("code",[t._v("submit")]),t._v(" method on the "),s("code",[t._v("Queue")]),t._v(" directly.")])]),t._v(" "),s("div",{staticClass:"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("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 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("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),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",{attrs:{start:"3"}},[s("li",[t._v("The "),s("code",[t._v("create")]),t._v(" method on "),s("code",[t._v("Surface")]),t._v(" takes in any struct that implements the "),s("code",[t._v("HasRawWindow")]),t._v(" trait, instead of a "),s("code",[t._v("RawWindowHandle")]),t._v(". This means that the "),s("code",[t._v('raw-window-handle = "0.3"')]),t._v(" line in "),s("code",[t._v("Cargo.toml")]),t._v(" is no longer needed.")])]),t._v(" "),s("p",[t._v("I don't know if this is a change from 0.4, but you use "),s("code",[t._v('wgpu = "0.4"')]),t._v(" line in dependencies instead of the "),s("code",[t._v("[dependencies.wgpu]")]),t._v(" as wgpu will determine the best back end for you.")]),t._v(" "),s("h2",{attrs:{id:"new-recent-articles"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#new-recent-articles"}},[t._v("#")]),t._v(" New/Recent Articles")]),t._v(" "),s("RecentArticles")],1)}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{531:function(t,e,a){t.exports=a.p+"assets/img/normal_mapping_correct.2731b486.png"},592:function(t,e,a){"use strict";a.r(e);var s=a(23),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"news-pre-0-12"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#news-pre-0-12"}},[t._v("#")]),t._v(" News (Pre 0.12)")]),t._v(" "),s("h2",{attrs:{id:"pong-working-on-the-web"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pong-working-on-the-web"}},[t._v("#")]),t._v(" Pong working on the web")]),t._v(" "),s("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(" "),s("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(" "),s("p",[t._v("If you want to check out the demo, just head over to "),s("RouterLink",{attrs:{to:"/news/showcase/pong/#wasm-support"}},[t._v("the write up")])],1),t._v(" "),s("h2",{attrs:{id:"_0-12-further-changes-to-surface"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-12-further-changes-to-surface"}},[t._v("#")]),t._v(" 0.12 further changes to Surface")]),t._v(" "),s("p",[s("code",[t._v("SwapchainFrame")]),t._v(" is no longer a thing. Instead "),s("code",[t._v("get_current_texture")]),t._v(" will return a "),s("code",[t._v("SurfaceTexture")]),t._v(" directly. This means that getting a frame to draw to looks somethings 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(" 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("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")]),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("Another change is that you must call "),s("code",[t._v("SurfaceTexture::present()")]),t._v(" after you submit your render command buffers to the "),s("code",[t._v("queue")]),t._v(". It goes something 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("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("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("\noutput"),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")])])]),s("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 "),s("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"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("h2",{attrs:{id:"pong-is-fixed-for-0-10"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pong-is-fixed-for-0-10"}},[t._v("#")]),t._v(" Pong is fixed for 0.10")]),t._v(" "),s("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 "),s("code",[t._v("spirv")]),t._v(" feature to wgpu in Cargo.toml.")]),t._v(" "),s("h2",{attrs:{id:"_0-10-swapchain-is-dead-long-live-the-surface"}},[s("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(" "),s("p",[s("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 "),s("code",[t._v("Surface")]),t._v(" instead. That means configuring "),s("code",[t._v("SurfaceTexture")]),t._v("s will look something 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(" 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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),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("[")]),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 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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PresentMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsurface"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Resizing the surface will use similar 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("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("p",[t._v("Finally, getting a "),s("code",[t._v("SurfaceTexture")]),t._v(" to draw to will use the surface directly.")]),t._v(" "),s("div",{staticClass:"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(" 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("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")]),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("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(" "),s("h2",{attrs:{id:"pong-and-imgui-demos-are-fixed"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pong-and-imgui-demos-are-fixed"}},[t._v("#")]),t._v(" Pong and imgui demos are fixed!")]),t._v(" "),s("p",[t._v("The "),s("code",[t._v("imgui_wgpu")]),t._v(" and "),s("code",[t._v("wgpu_glyph")]),t._v(" crates have been updated to "),s("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 "),s("code",[t._v("naga")]),t._v(" at some point.")]),t._v(" "),s("h2",{attrs:{id:"_0-8-and-wgsl"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-8-and-wgsl"}},[t._v("#")]),t._v(" 0.8 and WGSL")]),t._v(" "),s("h3",{attrs:{id:"the-glsl-shaders-have-been-translated-to-wgsl"}},[s("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(" "),s("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(" "),s("h3",{attrs:{id:"shaderc-has-been-removed"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shaderc-has-been-removed"}},[t._v("#")]),t._v(" Shaderc has been removed")]),t._v(" "),s("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 ("),s("code",[t._v("inverse")]),t._v(" is not available in all languages targeting spirv).")]),t._v(" "),s("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(" "),s("h3",{attrs:{id:"some-of-the-showcase-examples-are-broken"}},[s("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(" "),s("p",[t._v("The "),s("code",[t._v("wgpu_glyph")]),t._v(", and "),s("code",[t._v("imgui-wgpu")]),t._v(" crates currently depend on "),s("code",[t._v("wgpu")]),t._v(" 0.7, which is causing the "),s("code",[t._v("pong")]),t._v(" and "),s("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 "),s("code",[t._v("wgpu")]),t._v(" 0.8. (Feel free to submit a issue or even PR when that happens!)")]),t._v(" "),s("h3",{attrs:{id:"various-api-changes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#various-api-changes"}},[t._v("#")]),t._v(" Various API changes")]),t._v(" "),s("ul",[s("li",[t._v("The "),s("code",[t._v("depth")]),t._v(" field is now "),s("code",[t._v("depth_or_array_layers")])]),t._v(" "),s("li",[s("code",[t._v("wgpu::VertexFormat::Float3")]),t._v(" is now "),s("code",[t._v("wgpu::VertexFormat::Float32x3")]),t._v(". Similar things apply to "),s("code",[t._v("Float2")]),t._v(" and "),s("code",[t._v("Float4")])]),t._v(" "),s("li",[s("code",[t._v("CullMode")]),t._v(" is no longer a thing, instead "),s("code",[t._v("PrimitiveState::cull_mode")]),t._v(" will require an "),s("code",[t._v("Option")])]),t._v(" "),s("li",[t._v("Added "),s("code",[t._v("clamp_depth")]),t._v(" and "),s("code",[t._v("conservative")]),t._v(" to "),s("code",[t._v("PrimitiveState")]),t._v(". Part of this means that "),s("code",[t._v("DepthStencilState")]),t._v(" no longer has a "),s("code",[t._v("clamp_depth")]),t._v(" field.")]),t._v(" "),s("li",[s("code",[t._v("color_blend")]),t._v(" and "),s("code",[t._v("alpha_blend")]),t._v(" have been moved into the new "),s("code",[t._v("blend")]),t._v(" field with accepts an "),s("code",[t._v("Option")])]),t._v(" "),s("li",[s("code",[t._v("adapter.get_preferred_format()")]),t._v(" now returns an "),s("code",[t._v("Option")])]),t._v(" "),s("li",[s("code",[t._v("wgpu::RenderPassColorAttachmentDescriptor")]),t._v(" has been renamed "),s("code",[t._v("wgpu::RenderPassColorAttachement")]),t._v(" and the "),s("code",[t._v("attachment")]),t._v(" field has been renamed to "),s("code",[t._v("view")])]),t._v(" "),s("li",[s("code",[t._v("wgpu::RenderPassDepthStencialAttachmentDescriptor")]),t._v(" also loses the "),s("code",[t._v("Descriptor")]),t._v(" part of it's name. "),s("code",[t._v("attachment")]),t._v(" gets renamed to "),s("code",[t._v("view")]),t._v(" as well.")]),t._v(" "),s("li",[s("code",[t._v("wgpu::TextureCopyView")]),t._v(" has been renamed to "),s("code",[t._v("wgpu::ImageCopyTexture")]),t._v(". This is a typedef for "),s("code",[t._v("wgpu::ImageCopyTextureBase")])]),t._v(" "),s("li",[s("code",[t._v("wgpu::TextureDataLayout")]),t._v(" is now "),s("code",[t._v("wgpu::ImageDataLayout")]),t._v(" and it's "),s("code",[t._v("bytes_per_row")]),t._v(" and "),s("code",[t._v("rows_per_image")]),t._v(" now take "),s("code",[t._v("NonZeroU32")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("wgpu::ImageCopyBuffer")]),t._v(" is now "),s("code",[t._v("wgpu::ImageCopyBuffer")]),t._v(".")])]),t._v(" "),s("h2",{attrs:{id:"_0-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-7"}},[t._v("#")]),t._v(" 0.7")]),t._v(" "),s("p",[t._v("There were a lot of changes, particularly to the "),s("code",[t._v("RenderPipelineDescriptor")]),t._v(". Most other things have not changed. You can check out the "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/140",target:"_blank",rel:"noopener noreferrer"}},[t._v("0.9 PR"),s("OutboundLink")],1),t._v(" for the full details.")]),t._v(" "),s("h2",{attrs:{id:"november-2020-cleanup-content-freeze-and-patreon"}},[s("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(" "),s("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(" "),s("ul",[s("li",[t._v("The tutorial now handles "),s("code",[t._v("SurfaceError")]),t._v(" properly")]),t._v(" "),s("li",[t._v("I'm now using bytemuck's derive feature on all buffer data structs.")]),t._v(" "),s("li",[t._v("The "),s("a",{attrs:{href:"../beginner/tutorial7-instancing"}},[t._v("instancing tutorial")]),t._v(" now uses vertex buffers instead of storage buffers.")]),t._v(" "),s("li",[s("code",[t._v("build.rs")]),t._v(" now updates when individual shaders are changed, not whenever "),s("code",[t._v("/src")]),t._v(" is changed.")]),t._v(" "),s("li",[t._v("Had some help from Github user @kanerogers to clean up the "),s("a",{attrs:{href:"../beginner/tutorial5-textures"}},[t._v("texturing tutorial")]),t._v(".")]),t._v(" "),s("li",[t._v("I made a "),s("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(" "),s("li",[t._v("I made a "),s("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(" "),s("p",[t._v('Now in the headline, I mentioned a "Content Freeze". Wgpu is still a moving target. The migration from '),s("code",[t._v("0.4")]),t._v(" to "),s("code",[t._v("0.5")]),t._v(" was a lot of work. The same goes for "),s("code",[t._v("0.5")]),t._v(" to "),s("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(" "),s("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 "),s("a",{attrs:{href:"https://www.patreon.com/sotrh",target:"_blank",rel:"noopener noreferrer"}},[t._v("patreon"),s("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(" "),s("p",[t._v("You can find out more about contributing to this project on the "),s("RouterLink",{attrs:{to:"/news/#contribution-and-support"}},[t._v("introduction page")])],1),t._v(" "),s("h2",{attrs:{id:"_0-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-6"}},[t._v("#")]),t._v(" 0.6")]),t._v(" "),s("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 "),s("code",[t._v("queue.write_buffer()")]),t._v(" and "),s("code",[t._v("queue.write_texture()")]),t._v(" everywhere. I won't get into the nitty gritty, but you can check out the "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/90",target:"_blank",rel:"noopener noreferrer"}},[t._v("pull request"),s("OutboundLink")],1),t._v(" if you're interested.")]),t._v(" "),s("h2",{attrs:{id:"added-pong-showcase"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#added-pong-showcase"}},[t._v("#")]),t._v(" Added Pong Showcase")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/news/showcase/pong/"}},[t._v("See it here")])],1),t._v(" "),s("h2",{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('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(" "),s("p",[s("img",{attrs:{src:a(531),alt:""}})]),t._v(" "),s("h2",{attrs:{id:"_0-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_0-5"}},[t._v("#")]),t._v(" 0.5!")]),t._v(" "),s("p",[t._v("Too many things changed to make note of them here. Check out "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/pull/29",target:"_blank",rel:"noopener noreferrer"}},[t._v("the 0.5 pull request"),s("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 "),s("code",[t._v("Future")]),t._v("s. The tutorials have been updated as well as the code.")]),t._v(" "),s("h2",{attrs:{id:"reworked-lighting-tutorial"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#reworked-lighting-tutorial"}},[t._v("#")]),t._v(" Reworked lighting tutorial")]),t._v(" "),s("p",[t._v("The "),s("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/"}},[t._v("lighting tutorial")]),t._v(" was not up to par, so I redid it.")],1),t._v(" "),s("h2",{attrs:{id:"added-gif-showcase"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#added-gif-showcase"}},[t._v("#")]),t._v(" Added GIF showcase")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/showcase/gifs/"}},[t._v("Creating GIFs")])],1),t._v(" "),s("h2",{attrs:{id:"updated-texture-tutorials"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#updated-texture-tutorials"}},[t._v("#")]),t._v(" Updated texture tutorials")]),t._v(" "),s("p",[t._v("Up to this point, we created textures manually every time. I've pulled out the texture creation code into a new "),s("code",[t._v("texture.rs")]),t._v(" file and included it in every tutorial from the "),s("RouterLink",{attrs:{to:"/beginner/tutorial5-textures/#cleaning-things-up"}},[t._v("textures tutorial")]),t._v(" onward.")],1),t._v(" "),s("h2",{attrs:{id:"fixed-panics-due-to-not-specifying-the-correct-usage"}},[s("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 "),s("code",[t._v("usage")])]),t._v(" "),s("p",[t._v("Wgpu has become more strict about what "),s("code",[t._v("BufferUsages")]),t._v("s and "),s("code",[t._v("TextureUsages")]),t._v("s are required when performing certain operations. For example in the "),s("RouterLink",{attrs:{to:"/intermediate/windowless/"}},[t._v("Wgpu without a window example")]),t._v(", the "),s("code",[t._v("texture_desc")]),t._v(" only specified the usage to by "),s("code",[t._v("COPY_SRC")]),t._v(". This caused a crash when the "),s("code",[t._v("texture")]),t._v(" was used as a render target. Adding "),s("code",[t._v("OUTPUT_ATTACHMENT")]),t._v(" fixed the issue.")],1),t._v(" "),s("h2",{attrs:{id:"updating-winit-from-0-20-0-alpha5-to-0-20"}},[s("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(" "),s("p",[t._v("There were a lot of small changes to how the dpi stuff works. You can see all the changes "),s("a",{attrs:{href:"https://github.com/rust-windowing/winit/blob/master/CHANGELOG.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("in the changelog"),s("OutboundLink")],1),t._v(". That means that some of the tutorials had to change.")]),t._v(" "),s("ul",[s("li",[t._v("I've removed "),s("code",[t._v("hidpi_factor")]),t._v(" from "),s("code",[t._v("State")]),t._v(" entirely. They removed the "),s("code",[t._v("hidpi_factor()")]),t._v(" method from "),s("code",[t._v("winit::window::Window")]),t._v(", and changed "),s("code",[t._v("inner_size()")]),t._v(" to return "),s("code",[t._v("PhysicalSize")]),t._v(" instead of "),s("code",[t._v("LogicalSize")]),t._v(", so we don't need to store the "),s("code",[t._v("hidpi_factor")]),t._v(" anymore.")]),t._v(" "),s("li",[s("code",[t._v("update_hidpi_and_resize")]),t._v(" is no more. Since "),s("code",[t._v("ScaleFactorChanged")]),t._v(" passes in the windows new "),s("code",[t._v("PhysicalSize")]),t._v(", we can simply use "),s("code",[t._v("resize()")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("State::size")]),t._v(" is now "),s("code",[t._v("PhysicalSize")]),t._v(" instead of the pre 0.20 "),s("code",[t._v("LogicalSize")]),t._v(".")]),t._v(" "),s("li",[s("code",[t._v("EventsCleared")]),t._v(" is now "),s("code",[t._v("MainEventsCleared")]),t._v(".")])]),t._v(" "),s("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(" "),s("h2",{attrs:{id:"changed-tutorial-examples-to-use-a-src-directory"}},[s("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(" "),s("p",[t._v("I wasn't using the traditional cargo binary folder setup. I've changed it to the standardized form now.")]),t._v(" "),s("h2",{attrs:{id:"updating-to-0-4-from-0-3"}},[s("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(" "),s("p",[t._v("There are a few things that have changed:")]),t._v(" "),s("ol",[s("li",[t._v("The use of "),s("code",[t._v("Instance")]),t._v(" has been removed. Creating a "),s("code",[t._v("Surface")]),t._v(" and requesting an "),s("code",[t._v("Adapter")]),t._v(" are done 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 keyword"}},[t._v("let")]),t._v(" surface "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Surface")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),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 keyword"}},[t._v("let")]),t._v(" adapter "),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("Adapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("request")]),s("span",{pre:!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 "),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(".")]),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("// needs to be unwrapped")]),t._v("\n")])])]),s("ol",{attrs:{start:"2"}},[s("li",[t._v("The "),s("code",[t._v("request_device")]),t._v(" method now returns a "),s("code",[t._v("(Device, Queue)")]),t._v(" tuple. This means that you can borrow the "),s("code",[t._v("Queue")]),t._v(" mutably while using the "),s("code",[t._v("Device")]),t._v(" immutably. Because of this change, submitting "),s("code",[t._v("CommandBuffer")]),t._v("s to the queue uses the "),s("code",[t._v("submit")]),t._v(" method on the "),s("code",[t._v("Queue")]),t._v(" directly.")])]),t._v(" "),s("div",{staticClass:"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("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 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("finish")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),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",{attrs:{start:"3"}},[s("li",[t._v("The "),s("code",[t._v("create")]),t._v(" method on "),s("code",[t._v("Surface")]),t._v(" takes in any struct that implements the "),s("code",[t._v("HasRawWindow")]),t._v(" trait, instead of a "),s("code",[t._v("RawWindowHandle")]),t._v(". This means that the "),s("code",[t._v('raw-window-handle = "0.3"')]),t._v(" line in "),s("code",[t._v("Cargo.toml")]),t._v(" is no longer needed.")])]),t._v(" "),s("p",[t._v("I don't know if this is a change from 0.4, but you use "),s("code",[t._v('wgpu = "0.4"')]),t._v(" line in dependencies instead of the "),s("code",[t._v("[dependencies.wgpu]")]),t._v(" as wgpu will determine the best back end for you.")]),t._v(" "),s("h2",{attrs:{id:"new-recent-articles"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#new-recent-articles"}},[t._v("#")]),t._v(" New/Recent Articles")]),t._v(" "),s("RecentArticles")],1)}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/33.fc371e11.js b/assets/js/34.243b88c1.js similarity index 99% rename from assets/js/33.fc371e11.js rename to assets/js/34.243b88c1.js index 35592c78..342660ff 100644 --- a/assets/js/33.fc371e11.js +++ b/assets/js/34.243b88c1.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{534:function(t,s,a){t.exports=a.p+"assets/img/output.5ed23d6e.gif"},593:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"creating-gifs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#creating-gifs"}},[t._v("#")]),t._v(" Creating gifs")]),t._v(" "),n("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 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/GIF",target:"_blank",rel:"noopener noreferrer"}},[t._v("GIF"),n("OutboundLink")],1),t._v("s are for.")]),t._v(" "),n("p",[t._v("Also, GIF is pronounced GHIF, not JIF as JIF is not only "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Jif_%28peanut_butter%29",target:"_blank",rel:"noopener noreferrer"}},[t._v("peanut butter"),n("OutboundLink")],1),t._v(", it is also a "),n("a",{attrs:{href:"https://filext.com/file-extension/JIF",target:"_blank",rel:"noopener noreferrer"}},[t._v("different image format"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("h2",{attrs:{id:"how-are-we-making-the-gif"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#how-are-we-making-the-gif"}},[t._v("#")]),t._v(" How are we making the GIF?")]),t._v(" "),n("p",[t._v("We're going to create a function using the "),n("a",{attrs:{href:"https://docs.rs/gif/",target:"_blank",rel:"noopener noreferrer"}},[t._v("gif crate"),n("OutboundLink")],1),t._v(" to encode the actual image.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("save_gif")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" frames"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("i32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("failure"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("gif"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Frame")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Repeat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SetParameter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" image "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("File")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Repeat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Infinite")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frame "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" frames "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_frame")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Frame")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_rgba_speed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frame"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),t._v(" "),n("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(" "),n("h2",{attrs:{id:"how-do-we-make-the-frames"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#how-do-we-make-the-frames"}},[t._v("#")]),t._v(" How do we make the frames?")]),t._v(" "),n("p",[t._v("If you checked out the "),n("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 "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create a texture to render to")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("256u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rt_desc "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_target "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("framework"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_descriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rt_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wgpu requires texture -> buffer copies to be aligned using")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wgpu::COPY_BYTES_PER_ROW_ALIGNMENT. Because of this we'll")]),t._v("\n"),n("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"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unpadded_bytes_per_row")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pixel_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" align "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_BYTES_PER_ROW_ALIGNMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" unpadded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pixel_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padding "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("align "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" unpadded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" align"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" align"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" unpadded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" padding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("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"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_desc "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" buffer_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MAP_READ")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Output Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mapped_at_creation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("buffer_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With that, we can render a frame, and then copy that frame to a "),n("code",[t._v("Vec")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frames "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" c "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("colors "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" rpass "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"GIF Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n rpass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rpass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rpass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_texture_to_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" padded_bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Create the map request")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_slice "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" request "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wait for the GPU to finish")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Maintain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" request"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" result "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padded_data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" padded_data\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("chunks")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("chunk"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("chunk"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("unpadded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("flatten")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n output_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n frames"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Something went wrong"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Once that's done we can pass our frames into "),n("code",[t._v("save_gif()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token function"}},[t._v("save_gif")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"output.gif"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frames"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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(" "),n("p",[n("img",{attrs:{src:a(534),alt:"./output.gif"}})]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{536:function(t,s,a){t.exports=a.p+"assets/img/output.5ed23d6e.gif"},596:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"creating-gifs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#creating-gifs"}},[t._v("#")]),t._v(" Creating gifs")]),t._v(" "),n("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 "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/GIF",target:"_blank",rel:"noopener noreferrer"}},[t._v("GIF"),n("OutboundLink")],1),t._v("s are for.")]),t._v(" "),n("p",[t._v("Also, GIF is pronounced GHIF, not JIF as JIF is not only "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Jif_%28peanut_butter%29",target:"_blank",rel:"noopener noreferrer"}},[t._v("peanut butter"),n("OutboundLink")],1),t._v(", it is also a "),n("a",{attrs:{href:"https://filext.com/file-extension/JIF",target:"_blank",rel:"noopener noreferrer"}},[t._v("different image format"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("h2",{attrs:{id:"how-are-we-making-the-gif"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#how-are-we-making-the-gif"}},[t._v("#")]),t._v(" How are we making the GIF?")]),t._v(" "),n("p",[t._v("We're going to create a function using the "),n("a",{attrs:{href:"https://docs.rs/gif/",target:"_blank",rel:"noopener noreferrer"}},[t._v("gif crate"),n("OutboundLink")],1),t._v(" to encode the actual image.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("save_gif")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("str")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" frames"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("i32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("->")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("failure"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("gif"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Frame")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Repeat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SetParameter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" image "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("fs"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("File")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Repeat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Infinite")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frame "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" frames "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("write_frame")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Frame")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_rgba_speed")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frame"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" speed"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),t._v(" "),n("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(" "),n("h2",{attrs:{id:"how-do-we-make-the-frames"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#how-do-we-make-the-frames"}},[t._v("#")]),t._v(" How do we make the frames?")]),t._v(" "),n("p",[t._v("If you checked out the "),n("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 "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create a texture to render to")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("256u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" rt_desc "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_target "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("framework"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_descriptor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rt_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wgpu requires texture -> buffer copies to be aligned using")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wgpu::COPY_BYTES_PER_ROW_ALIGNMENT. Because of this we'll")]),t._v("\n"),n("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"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unpadded_bytes_per_row")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" pixel_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" align "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_BYTES_PER_ROW_ALIGNMENT")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" unpadded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pixel_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padding "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("align "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" unpadded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" align"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" align"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" unpadded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" padding"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("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"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_desc "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" buffer_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MAP_READ")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Output Buffer"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mapped_at_creation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("buffer_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("With that, we can render a frame, and then copy that frame to a "),n("code",[t._v("Vec")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frames "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" c "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("colors "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" rpass "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"GIF Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" c"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n rpass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rpass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rpass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_texture_to_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" padded_bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n render_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("once")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Create the map request")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_slice "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" request "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wait for the GPU to finish")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Maintain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" request"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" result "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" padded_data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" padded_data\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("chunks")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("chunk"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("chunk"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v("unpadded_bytes_per_row "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("flatten")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("x"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("x "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("padded_data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n output_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n frames"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n _ "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Something went wrong"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Once that's done we can pass our frames into "),n("code",[t._v("save_gif()")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token function"}},[t._v("save_gif")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"output.gif"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" frames"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u16")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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(" "),n("p",[n("img",{attrs:{src:a(536),alt:"./output.gif"}})]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/34.af68cb86.js b/assets/js/35.9375dd6a.js similarity index 99% rename from assets/js/34.af68cb86.js rename to assets/js/35.9375dd6a.js index ae0f4851..2e95b059 100644 --- a/assets/js/34.af68cb86.js +++ b/assets/js/35.9375dd6a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{535:function(t,s,a){t.exports=a.p+"assets/img/screenshot.1f9dab62.png"},594:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"basic-imgui-demo"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#basic-imgui-demo"}},[t._v("#")]),t._v(" Basic Imgui Demo")]),t._v(" "),n("div",{staticClass:"warning"},[n("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(" "),n("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(" "),n("p",[t._v("For the 0.10 migration, I'll keep this example in and keep the showcase code excluded.")])]),t._v(" "),n("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 "),n("a",{attrs:{href:"https://docs.rs/imgui",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-rs"),n("OutboundLink")],1),t._v(", "),n("a",{attrs:{href:"https://docs.rs/imgui-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-wgpu"),n("OutboundLink")],1),t._v(", and "),n("a",{attrs:{href:"https://docs.rs/imgui-winit-support",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-winit-support"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui-wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui-winit-support")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("I've excluded some dependencies for brevity. I'm also using the "),n("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/framework",target:"_blank",rel:"noopener noreferrer"}},[t._v("framework crate"),n("OutboundLink")],1),t._v(" I've created for showcases to simplify setup. If you see a "),n("code",[t._v("display")]),t._v(" variable in code, it's from the "),n("code",[t._v("framework")]),t._v(". "),n("code",[t._v("Display")]),t._v(" is where the "),n("code",[t._v("device")]),t._v(", "),n("code",[t._v("queue")]),t._v(", "),n("code",[t._v("swap_chain")]),t._v(", and other basic wgpu objects are stored.")])]),t._v(" "),n("p",[t._v("We need to set up imgui and a "),n("code",[t._v("WinitPlatform")]),t._v(" to get started. Do this after creating you're "),n("code",[t._v("winit::Window")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Context")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" platform "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui_winit_support"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WinitPlatform")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nplatform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach_window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui_winit_support"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HiDpiMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_ini_filename")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now we 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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" hidpi_factor "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("scale_factor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" font_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("13.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" hidpi_factor"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("font_global_scale "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" hidpi_factor"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("fonts")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("add_font")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FontSource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DefaultFontData")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FontConfig")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n oversample_h"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pixel_snap_h"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size_pixels"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" font_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Then you need to create the renderer. We need to use the surface's "),n("code",[t._v("TextureFormat")]),t._v(" in order for things to work properly.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderer_config "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RendererConfig")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Renderer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" renderer_config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("When we update the scene, we'll need to update imgui.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_delta_time")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// dt: std::time::Duration")]),t._v("\n")])])]),n("p",[t._v("I'm not an expert with imgui, so I'll let the code speak for itself.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Build the UI")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("prepare_frame")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Failed to prepare frame!"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ui "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("frame")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" window "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Hello Imgui from WGPU!"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n window\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("300.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Condition")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FirstUseEver")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Hello world!"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"This is a demo of imgui-rs using imgui-wgpu!"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("separator")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mouse_pos "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("io")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_pos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Mouse Position: ({:.1}, {:.1})"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mouse_pos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mouse_pos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prepare to render")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("frame"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" frame"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Error getting frame: {:?}"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render the scene")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("canvas"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render the UI")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("last_cursor "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("mouse_cursor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("last_cursor "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("mouse_cursor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("prepare_render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" pass "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"UI RenderPass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Load")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("renderer\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Failed to render UI!"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ndisplay"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("That's all there is to it. Here's a picture of the results!")]),t._v(" "),n("p",[n("img",{attrs:{src:a(535),alt:"./screenshot.png"}})]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{537:function(t,s,a){t.exports=a.p+"assets/img/screenshot.1f9dab62.png"},597:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"basic-imgui-demo"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#basic-imgui-demo"}},[t._v("#")]),t._v(" Basic Imgui Demo")]),t._v(" "),n("div",{staticClass:"warning"},[n("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(" "),n("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(" "),n("p",[t._v("For the 0.10 migration, I'll keep this example in and keep the showcase code excluded.")])]),t._v(" "),n("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 "),n("a",{attrs:{href:"https://docs.rs/imgui",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-rs"),n("OutboundLink")],1),t._v(", "),n("a",{attrs:{href:"https://docs.rs/imgui-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-wgpu"),n("OutboundLink")],1),t._v(", and "),n("a",{attrs:{href:"https://docs.rs/imgui-winit-support",target:"_blank",rel:"noopener noreferrer"}},[t._v("imgui-winit-support"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui-wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("imgui-winit-support")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("I've excluded some dependencies for brevity. I'm also using the "),n("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/framework",target:"_blank",rel:"noopener noreferrer"}},[t._v("framework crate"),n("OutboundLink")],1),t._v(" I've created for showcases to simplify setup. If you see a "),n("code",[t._v("display")]),t._v(" variable in code, it's from the "),n("code",[t._v("framework")]),t._v(". "),n("code",[t._v("Display")]),t._v(" is where the "),n("code",[t._v("device")]),t._v(", "),n("code",[t._v("queue")]),t._v(", "),n("code",[t._v("swap_chain")]),t._v(", and other basic wgpu objects are stored.")])]),t._v(" "),n("p",[t._v("We need to set up imgui and a "),n("code",[t._v("WinitPlatform")]),t._v(" to get started. Do this after creating you're "),n("code",[t._v("winit::Window")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Context")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" platform "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui_winit_support"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WinitPlatform")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nplatform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach_window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui_winit_support"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("HiDpiMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_ini_filename")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now we 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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" hidpi_factor "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("scale_factor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" font_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("13.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" hidpi_factor"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("font_global_scale "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" hidpi_factor"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nimgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("fonts")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("add_font")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FontSource")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DefaultFontData")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FontConfig")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n oversample_h"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n pixel_snap_h"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n size_pixels"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" font_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Then you need to create the renderer. We need to use the surface's "),n("code",[t._v("TextureFormat")]),t._v(" in order for things to work properly.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderer_config "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RendererConfig")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n texture_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Renderer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" renderer_config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("When we update the scene, we'll need to update imgui.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("update_delta_time")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dt"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// dt: std::time::Duration")]),t._v("\n")])])]),n("p",[t._v("I'm not an expert with imgui, so I'll let the code speak for itself.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Build the UI")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("prepare_frame")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("io_mut")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Failed to prepare frame!"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" ui "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("frame")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" window "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("imgui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Window")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Hello Imgui from WGPU!"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n window\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("300.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("100.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Condition")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FirstUseEver")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Hello world!"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"This is a demo of imgui-rs using imgui-wgpu!"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("separator")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mouse_pos "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("io")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mouse_pos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("im_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Mouse Position: ({:.1}, {:.1})"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mouse_pos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mouse_pos"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prepare to render")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("swap_chain"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_current_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("frame"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" frame"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Err")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("eprintln!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Error getting frame: {:?}"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render the scene")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("canvas"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("width "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("height "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("f32")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render the UI")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("last_cursor "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("mouse_cursor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("last_cursor "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("mouse_cursor")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("prepare_render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("window"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" pass "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"UI RenderPass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Load")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("renderer\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ui"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("display"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Failed to render UI!"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("drop")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ndisplay"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("That's all there is to it. Here's a picture of the results!")]),t._v(" "),n("p",[n("img",{attrs:{src:a(537),alt:"./screenshot.png"}})]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/35.a9fbafe0.js b/assets/js/36.a67ffba8.js similarity index 99% rename from assets/js/35.a9fbafe0.js rename to assets/js/36.a67ffba8.js index c770716d..1d5a8cf4 100644 --- a/assets/js/35.a9fbafe0.js +++ b/assets/js/36.a67ffba8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{536: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"},595:function(A,t,s){"use strict";s.r(t);var a=s(23),n=Object(a.a)({},(function(){var A=this,t=A.$createElement,a=A._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":A.$parent.slotKey}},[a("h1",{attrs:{id:"pong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pong"}},[A._v("#")]),A._v(" Pong")]),A._v(" "),a("p",[a("img",{attrs:{src:s(536),alt:""}})]),A._v(" "),a("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(" "),a("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(" "),a("h2",{attrs:{id:"the-architecture"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-architecture"}},[A._v("#")]),A._v(" The Architecture")]),A._v(" "),a("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(" "),a("p",[A._v("I had a "),a("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. "),a("code",[A._v("State")]),A._v(" also included a "),a("code",[A._v("game_state")]),A._v(" field of type "),a("code",[A._v("GameState")]),A._v(".")]),A._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"}},[A._v("#[derive(Debug, Copy, Clone, Eq, PartialEq)]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("enum")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("GameState")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Quiting")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("The "),a("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 "),a("code",[A._v("System")]),A._v(" trait and created multiple structs that implemented it.")]),A._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"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("trait")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("System")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[allow(unused_variables)]")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("State")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Input")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("State")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Event")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("The systems would be in charge of controlling updating the different objects' states (position, visibility, etc), as well as updating the "),a("code",[A._v("game_state")]),A._v(" field. I created all the systems on startup and used a "),a("code",[A._v("match")]),A._v(" on "),a("code",[A._v("game_state")]),A._v(" to determine which ones should be allowed to run (the "),a("code",[A._v("visiblity_system")]),A._v(" always runs as it is always needed).")]),A._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[A._v("visiblity_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n menu_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n play_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n play_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n ball_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n play_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n game_over_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n game_over_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n menu_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Quiting")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("It's definitely not the cleanest code, but it works.")]),A._v(" "),a("p",[A._v("I ended up having 6 systems in total.")]),A._v(" "),a("ol",[a("li",[a("p",[A._v("I added the "),a("code",[A._v("VisibilitySystem")]),A._v(" near the end of development. Up to that point, all the systems had to set the "),a("code",[A._v("visible")]),A._v(" field of the objects. That was a pain and cluttered the logic. Instead, I decided to create the "),a("code",[A._v("VisiblitySystem")]),A._v(" to handle that.")])]),A._v(" "),a("li",[a("p",[A._v("The "),a("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 "),a("code",[A._v("Play")]),A._v(" button was focused, pressing enter would change "),a("code",[A._v("game_state")]),A._v(" to "),a("code",[A._v("GameState::Serving")]),A._v(" which would start the game. The "),a("code",[A._v("Quit")]),A._v(" button would shift to "),a("code",[A._v("GameState::Quiting")]),A._v(".")])]),A._v(" "),a("li",[a("p",[A._v("The "),a("code",[A._v("ServingSystem")]),A._v(" sets the ball's position to "),a("code",[A._v("(0.0, 0.0)")]),A._v(", updates the score texts, and shifts into "),a("code",[A._v("GameState::Playing")]),A._v(" after a timer.")])]),A._v(" "),a("li",[a("p",[A._v("The "),a("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 "),a("code",[A._v("GameState::Playing")]),A._v(" as well as "),a("code",[A._v("GameState::Serving")]),A._v(". I did this to allow the players to reposition themselves before the serve. The "),a("code",[A._v("PlaySystem")]),A._v(" also will shift into "),a("code",[A._v("GameState::GameOver")]),A._v(" when one of the players' scores is greater than 2.")])]),A._v(" "),a("li",[a("p",[A._v("The "),a("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 "),a("code",[A._v("GameState::Serving")]),A._v(" when the ball goes off the side of the screen.")])]),A._v(" "),a("li",[a("p",[A._v("The "),a("code",[A._v("GameOver")]),A._v(" system updates the "),a("code",[A._v("win_text")]),A._v(" and shifts to "),a("code",[A._v("GameState::MainMenu")]),A._v(" after a delay.")])])]),A._v(" "),a("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(" "),a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[A._v("#")]),A._v(" Input")]),A._v(" "),a("p",[A._v("The "),a("code",[A._v("System")]),A._v(" trait, originally had a "),a("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 "),a("code",[A._v("game_state")]),A._v(" switched from "),a("code",[A._v("Serving")]),A._v(" to "),a("code",[A._v("Playing")]),A._v(" as the inputs were getting stuck. I only called "),a("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(" "),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"}},[A._v("use")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("winit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Default)]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("struct")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("Input")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p1_up_pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p1_down_pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p2_up_pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p2_down_pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" enter_pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("impl")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Input")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Default")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("default")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("update")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Pressed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" key "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Up")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_up_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Down")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_down_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("W")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_up_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("S")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_down_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Return")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("enter_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n _ "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("false")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("ui_up_pressed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_up_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("||")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_up_pressed\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("ui_down_pressed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_down_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("||")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_down_pressed\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("This works really well. I simply pass this struct into the "),a("code",[A._v("update_state")]),A._v(" method.")]),A._v(" "),a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[A._v("#")]),A._v(" Render")]),A._v(" "),a("p",[A._v("I used "),a("a",{attrs:{href:"https://docs.rs/wgpu_glyph",target:"_blank",rel:"noopener noreferrer"}},[A._v("wgpu_glyph"),a("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(" "),a("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(" "),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"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("struct")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("QuadBufferBuilder")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n vertex_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n index_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n current_quad"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("impl")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("QuadBufferBuilder")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n vertex_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n index_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n current_quad"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_ball")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Ball")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("visible "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" min_x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" min_y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" max_x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" max_y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n \n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("push_quad")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_player")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Player")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("visible "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("push_quad")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_quad")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("vertex_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("[")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("max_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("max_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("[")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+=")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("build")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Device")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("vertex_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("len")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("as")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("h2",{attrs:{id:"sound"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sound"}},[A._v("#")]),A._v(" Sound")]),A._v(" "),a("p",[A._v("I used "),a("a",{attrs:{href:"https://docs.rs/rodio",target:"_blank",rel:"noopener noreferrer"}},[A._v("rodio"),a("OutboundLink")],1),A._v(" for sound. I created a "),a("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 "),a("code",[A._v("Vec")]),A._v(" into the "),a("code",[A._v("update_state")]),A._v(" method. The system would then push an event to the "),a("code",[A._v("Vec")]),A._v(". The "),a("code",[A._v("Event")]),A._v(" enum is listed below.")]),A._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"}},[A._v("#[derive(Debug, Copy, Clone)]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("enum")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("Event")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ButtonPressed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("FocusChanged")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("BallBounce")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("cgmath"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vector2")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Score")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("I was going to have "),a("code",[A._v("BallBounce")]),A._v(" play a positioned sound using a "),a("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(" "),a("h2",{attrs:{id:"wasm-support"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wasm-support"}},[A._v("#")]),A._v(" WASM Support")]),A._v(" "),a("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 "),a("code",[A._v("lib.rs")]),A._v(" instead of just "),a("code",[A._v("main.rs")]),A._v(". I opted to use "),a("a",{attrs:{href:"https://rustwasm.github.io/wasm-pack/",target:"_blank",rel:"noopener noreferrer"}},[A._v("wasm-pack"),a("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(" "),a("p",[A._v("In order for wasm-pack to work properly I first needed to add some dependencies:")]),A._v(" "),a("div",{staticClass:"language-toml[dependencies] extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[A._v('cfg-if = "1"\nenv_logger = "0.9"\nwinit = "0.27"\nanyhow = "1.0"\nbytemuck = { version = "1.4", features = [ "derive" ] }\ncgmath = "0.18"\npollster = "0.2"\nwgpu = { version = "0.14", features = ["spirv"]}\nwgpu_glyph = "0.17"\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 = "0.2.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.76"\nweb-sys = { version = "0.3.53", features = [\n "Document",\n "Window",\n "Element",\n]}\nwgpu = { version = "0.14", 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')])])]),a("p",[A._v("I'll highlight a few of these:")]),A._v(" "),a("ul",[a("li",[A._v("rand: If you want to use rand on the web, you need to include getrandom directly and enable its "),a("code",[A._v("js")]),A._v(" feature.")]),A._v(" "),a("li",[A._v("rodio: I had to disable all of the features for the WASM build, and then enabled them separately. The "),a("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(" "),a("li",[A._v("instant: This crate is basically just a wrapper around "),a("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(" "),a("li",[A._v("cfg-if: This is a convenient crate for making platform-specific code less horrible to write.")]),A._v(" "),a("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(" "),a("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 "),a("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(" "),a("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(" "),a("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(" "),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"}},[A._v("#[cfg(target_arch="),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("wasm_bindgen"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("prelude"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg_attr(target_arch="),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(", wasm_bindgen(start))]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// Snipped...")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("The "),a("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(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("cfg_if"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token macro property"}},[A._v("cfg_if!")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch = "),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("console_log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("init_with_level")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Level")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Warn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("expect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Could\'t initialize logger"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("std"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("panic"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("set_hook")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Box")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("console_error_panic_hook"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),A._v("hook"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("env_logger"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("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 "),a("code",[A._v("env_logger")]),A._v(". The "),a("code",[A._v("wasm32")]),A._v(" architecture will use "),a("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(" "),a("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(" "),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"}},[A._v("let")]),A._v(" event_loop "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("EventLoop")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" monitor "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" event_loop"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("primary_monitor")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("unwrap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" video_mode "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" monitor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("video_modes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("next")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" size "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" video_mode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("clone")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("map_or")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("PhysicalSize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("800")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("600")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("vm"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" vm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" window "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("WindowBuilder")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_visible")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_title")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Pong"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_fullscreen")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("video_mode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("vm"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Fullscreen")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Exclusive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("vm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("build")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("event_loop"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("unwrap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// WASM builds don't have access to monitor information, so")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// we should specify a fallback resolution")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("fullscreen")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("is_none")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("set_inner_size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("PhysicalSize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("512")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("512")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("We then have to do some web-specific stuff if we are on that platform.")]),A._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"}},[A._v("#[cfg(target_arch = "),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("winit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("platform"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("web"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("WindowExtWebSys")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("web_sys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("window")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("and_then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("win"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" win"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("document")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("and_then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("doc"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" dst "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" doc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("get_element_by_id")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm-example"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" canvas "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("web_sys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Element")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("from")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("canvas")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n dst"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("append_child")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("ok")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// Request fullscreen, if denied, continue as normal")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("request_fullscreen")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Ok")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("_"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Err")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("_"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("expect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Couldn\'t append canvas to document body."')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("Everything else works the same.")]),A._v(" "),a("h2",{attrs:{id:"summary"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#summary"}},[A._v("#")]),A._v(" Summary")]),A._v(" "),a("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(" "),a("p",[A._v("Try the code down below! (Controls currently require a keyboard.)")]),A._v(" "),a("WasmExample",{attrs:{example:"pong"}})],1)}),[],!1,null,null,null);t.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{538: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"},598:function(A,t,s){"use strict";s.r(t);var a=s(23),n=Object(a.a)({},(function(){var A=this,t=A.$createElement,a=A._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":A.$parent.slotKey}},[a("h1",{attrs:{id:"pong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pong"}},[A._v("#")]),A._v(" Pong")]),A._v(" "),a("p",[a("img",{attrs:{src:s(538),alt:""}})]),A._v(" "),a("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(" "),a("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(" "),a("h2",{attrs:{id:"the-architecture"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-architecture"}},[A._v("#")]),A._v(" The Architecture")]),A._v(" "),a("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(" "),a("p",[A._v("I had a "),a("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. "),a("code",[A._v("State")]),A._v(" also included a "),a("code",[A._v("game_state")]),A._v(" field of type "),a("code",[A._v("GameState")]),A._v(".")]),A._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"}},[A._v("#[derive(Debug, Copy, Clone, Eq, PartialEq)]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("enum")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("GameState")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Quiting")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("The "),a("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 "),a("code",[A._v("System")]),A._v(" trait and created multiple structs that implemented it.")]),A._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"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("trait")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("System")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[allow(unused_variables)]")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("State")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Input")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("State")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Event")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("The systems would be in charge of controlling updating the different objects' states (position, visibility, etc), as well as updating the "),a("code",[A._v("game_state")]),A._v(" field. I created all the systems on startup and used a "),a("code",[A._v("match")]),A._v(" on "),a("code",[A._v("game_state")]),A._v(" to determine which ones should be allowed to run (the "),a("code",[A._v("visiblity_system")]),A._v(" always runs as it is always needed).")]),A._v(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[A._v("visiblity_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n menu_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n play_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n play_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n ball_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n play_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n game_over_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n game_over_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n menu_system"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Quiting")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("It's definitely not the cleanest code, but it works.")]),A._v(" "),a("p",[A._v("I ended up having 6 systems in total.")]),A._v(" "),a("ol",[a("li",[a("p",[A._v("I added the "),a("code",[A._v("VisibilitySystem")]),A._v(" near the end of development. Up to that point, all the systems had to set the "),a("code",[A._v("visible")]),A._v(" field of the objects. That was a pain and cluttered the logic. Instead, I decided to create the "),a("code",[A._v("VisiblitySystem")]),A._v(" to handle that.")])]),A._v(" "),a("li",[a("p",[A._v("The "),a("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 "),a("code",[A._v("Play")]),A._v(" button was focused, pressing enter would change "),a("code",[A._v("game_state")]),A._v(" to "),a("code",[A._v("GameState::Serving")]),A._v(" which would start the game. The "),a("code",[A._v("Quit")]),A._v(" button would shift to "),a("code",[A._v("GameState::Quiting")]),A._v(".")])]),A._v(" "),a("li",[a("p",[A._v("The "),a("code",[A._v("ServingSystem")]),A._v(" sets the ball's position to "),a("code",[A._v("(0.0, 0.0)")]),A._v(", updates the score texts, and shifts into "),a("code",[A._v("GameState::Playing")]),A._v(" after a timer.")])]),A._v(" "),a("li",[a("p",[A._v("The "),a("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 "),a("code",[A._v("GameState::Playing")]),A._v(" as well as "),a("code",[A._v("GameState::Serving")]),A._v(". I did this to allow the players to reposition themselves before the serve. The "),a("code",[A._v("PlaySystem")]),A._v(" also will shift into "),a("code",[A._v("GameState::GameOver")]),A._v(" when one of the players' scores is greater than 2.")])]),A._v(" "),a("li",[a("p",[A._v("The "),a("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 "),a("code",[A._v("GameState::Serving")]),A._v(" when the ball goes off the side of the screen.")])]),A._v(" "),a("li",[a("p",[A._v("The "),a("code",[A._v("GameOver")]),A._v(" system updates the "),a("code",[A._v("win_text")]),A._v(" and shifts to "),a("code",[A._v("GameState::MainMenu")]),A._v(" after a delay.")])])]),A._v(" "),a("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(" "),a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[A._v("#")]),A._v(" Input")]),A._v(" "),a("p",[A._v("The "),a("code",[A._v("System")]),A._v(" trait, originally had a "),a("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 "),a("code",[A._v("game_state")]),A._v(" switched from "),a("code",[A._v("Serving")]),A._v(" to "),a("code",[A._v("Playing")]),A._v(" as the inputs were getting stuck. I only called "),a("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(" "),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"}},[A._v("use")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("winit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Default)]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("struct")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("Input")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p1_up_pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p1_down_pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p2_up_pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p2_down_pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" enter_pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("impl")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Input")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Default")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("default")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("update")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" state "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Pressed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" key "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Up")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_up_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Down")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_down_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("W")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_up_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("S")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_down_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Return")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("enter_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n _ "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("false")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("ui_up_pressed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_up_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("||")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_up_pressed\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("ui_down_pressed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_down_pressed "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("||")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_down_pressed\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("This works really well. I simply pass this struct into the "),a("code",[A._v("update_state")]),A._v(" method.")]),A._v(" "),a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[A._v("#")]),A._v(" Render")]),A._v(" "),a("p",[A._v("I used "),a("a",{attrs:{href:"https://docs.rs/wgpu_glyph",target:"_blank",rel:"noopener noreferrer"}},[A._v("wgpu_glyph"),a("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(" "),a("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(" "),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"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("struct")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("QuadBufferBuilder")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n vertex_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n index_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n current_quad"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("impl")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("QuadBufferBuilder")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n vertex_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n index_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n current_quad"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_ball")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Ball")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("visible "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" min_x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" min_y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" max_x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" max_y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" ball"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n \n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("push_quad")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_player")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Player")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("visible "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("push_quad")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" player"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_quad")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("vertex_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("[")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("max_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("max_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("[")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+=")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("build")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Device")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("vertex_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("len")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("as")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("h2",{attrs:{id:"sound"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sound"}},[A._v("#")]),A._v(" Sound")]),A._v(" "),a("p",[A._v("I used "),a("a",{attrs:{href:"https://docs.rs/rodio",target:"_blank",rel:"noopener noreferrer"}},[A._v("rodio"),a("OutboundLink")],1),A._v(" for sound. I created a "),a("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 "),a("code",[A._v("Vec")]),A._v(" into the "),a("code",[A._v("update_state")]),A._v(" method. The system would then push an event to the "),a("code",[A._v("Vec")]),A._v(". The "),a("code",[A._v("Event")]),A._v(" enum is listed below.")]),A._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"}},[A._v("#[derive(Debug, Copy, Clone)]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("enum")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("Event")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ButtonPressed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("FocusChanged")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("BallBounce")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("cgmath"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vector2")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Score")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("I was going to have "),a("code",[A._v("BallBounce")]),A._v(" play a positioned sound using a "),a("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(" "),a("h2",{attrs:{id:"wasm-support"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wasm-support"}},[A._v("#")]),A._v(" WASM Support")]),A._v(" "),a("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 "),a("code",[A._v("lib.rs")]),A._v(" instead of just "),a("code",[A._v("main.rs")]),A._v(". I opted to use "),a("a",{attrs:{href:"https://rustwasm.github.io/wasm-pack/",target:"_blank",rel:"noopener noreferrer"}},[A._v("wasm-pack"),a("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(" "),a("p",[A._v("In order for wasm-pack to work properly I first needed to add some dependencies:")]),A._v(" "),a("div",{staticClass:"language-toml[dependencies] extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[A._v('cfg-if = "1"\nenv_logger = "0.9"\nwinit = "0.27"\nanyhow = "1.0"\nbytemuck = { version = "1.4", features = [ "derive" ] }\ncgmath = "0.18"\npollster = "0.2"\nwgpu = { version = "0.14", features = ["spirv"]}\nwgpu_glyph = "0.17"\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 = "0.2.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.76"\nweb-sys = { version = "0.3.53", features = [\n "Document",\n "Window",\n "Element",\n]}\nwgpu = { version = "0.14", 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')])])]),a("p",[A._v("I'll highlight a few of these:")]),A._v(" "),a("ul",[a("li",[A._v("rand: If you want to use rand on the web, you need to include getrandom directly and enable its "),a("code",[A._v("js")]),A._v(" feature.")]),A._v(" "),a("li",[A._v("rodio: I had to disable all of the features for the WASM build, and then enabled them separately. The "),a("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(" "),a("li",[A._v("instant: This crate is basically just a wrapper around "),a("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(" "),a("li",[A._v("cfg-if: This is a convenient crate for making platform-specific code less horrible to write.")]),A._v(" "),a("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(" "),a("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 "),a("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(" "),a("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(" "),a("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(" "),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"}},[A._v("#[cfg(target_arch="),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("wasm_bindgen"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("prelude"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg_attr(target_arch="),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(", wasm_bindgen(start))]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("start")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// Snipped...")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("The "),a("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(" "),a("div",{staticClass:"language-rust extra-class"},[a("pre",{pre:!0,attrs:{class:"language-rust"}},[a("code",[a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("cfg_if"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token macro property"}},[A._v("cfg_if!")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch = "),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("console_log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("init_with_level")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Level")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Warn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("expect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Could\'t initialize logger"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("std"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("panic"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("set_hook")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Box")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("console_error_panic_hook"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),A._v("hook"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("env_logger"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("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 "),a("code",[A._v("env_logger")]),A._v(". The "),a("code",[A._v("wasm32")]),A._v(" architecture will use "),a("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(" "),a("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(" "),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"}},[A._v("let")]),A._v(" event_loop "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("EventLoop")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" monitor "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" event_loop"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("primary_monitor")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("unwrap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" video_mode "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" monitor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("video_modes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("next")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" size "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" video_mode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("clone")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("map_or")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("PhysicalSize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("800")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("600")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("vm"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" vm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" window "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("WindowBuilder")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_visible")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_title")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Pong"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_fullscreen")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("video_mode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("vm"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Fullscreen")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Exclusive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("vm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("build")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("event_loop"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("unwrap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// WASM builds don't have access to monitor information, so")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// we should specify a fallback resolution")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("fullscreen")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("is_none")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("set_inner_size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("PhysicalSize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("512")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[A._v("512")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("We then have to do some web-specific stuff if we are on that platform.")]),A._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"}},[A._v("#[cfg(target_arch = "),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("winit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("platform"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("web"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("WindowExtWebSys")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("web_sys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("window")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("and_then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("win"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" win"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("document")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("and_then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("doc"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" dst "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" doc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("get_element_by_id")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm-example"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" canvas "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("web_sys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Element")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("from")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("canvas")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n dst"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("append_child")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("ok")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// Request fullscreen, if denied, continue as normal")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("request_fullscreen")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Ok")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("_"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Err")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("_"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[A._v("expect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Couldn\'t append canvas to document body."')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),a("p",[A._v("Everything else works the same.")]),A._v(" "),a("h2",{attrs:{id:"summary"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#summary"}},[A._v("#")]),A._v(" Summary")]),A._v(" "),a("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(" "),a("p",[A._v("Try the code down below! (Controls currently require a keyboard.)")]),A._v(" "),a("WasmExample",{attrs:{example:"pong"}})],1)}),[],!1,null,null,null);t.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/36.a1365c71.js b/assets/js/37.7a606210.js similarity index 99% rename from assets/js/36.a1365c71.js rename to assets/js/37.7a606210.js index 0c067f17..b6f6270c 100644 --- a/assets/js/36.a1365c71.js +++ b/assets/js/37.7a606210.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{537: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="},597:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"wgpu-without-a-window"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wgpu-without-a-window"}},[t._v("#")]),t._v(" Wgpu without a window")]),t._v(" "),n("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 "),n("em",[t._v("need")]),t._v(" to see what's going on.")]),t._v(" "),n("h2",{attrs:{id:"so-what-do-we-need-to-do"}},[n("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(" "),n("p",[t._v("It's actually quite simple. We don't "),n("em",[t._v("need")]),t._v(" a window to create an "),n("code",[t._v("Instance")]),t._v(", we don't "),n("em",[t._v("need")]),t._v(" a window to select an "),n("code",[t._v("Adapter")]),t._v(", nor do we "),n("em",[t._v("need")]),t._v(" a window to create a "),n("code",[t._v("Device")]),t._v(". We only needed the window to create a "),n("code",[t._v("Surface")]),t._v(" which we needed to create the "),n("code",[t._v("SwapChain")]),t._v(". Once we have a "),n("code",[t._v("Device")]),t._v(", we have all we need to start sending commands to the gpu.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_adapter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RequestAdapterOptions")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n power_preference"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PowerPreference")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compatible_surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" adapter\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"a-triangle-without-a-window"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-triangle-without-a-window"}},[t._v("#")]),t._v(" A triangle without a window")]),t._v(" "),n("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 "),n("RouterLink",{attrs:{to:"/beginner/tutorial2-surface/#render"}},[t._v("surface")]),t._v(" we see that we use "),n("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 "),n("code",[t._v("wgpu::TextureFormat::Rgba8UnormSrgb")]),t._v(" to "),n("code",[t._v("format")]),t._v(" instead of "),n("code",[t._v("surface.get_preferred_format(&adapter)")]),t._v(" since PNG uses RGBA, not BGRA.")],1),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("256u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_desc "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We're using "),n("code",[t._v("TextureUsages::RENDER_ATTACHMENT")]),t._v(" so wgpu can render to our texture. The "),n("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(" "),n("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 "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// we need to store this for later")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" u32_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("u32_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer_desc "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" output_buffer_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),t._v("\n "),n("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 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MAP_READ")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mapped_at_creation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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 "),n("RouterLink",{attrs:{to:"/beginner/tutorial3-pipeline/#writing-the-shaders"}},[t._v("pipeline tutorial")]),t._v(".")],1),t._v(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// shader.vert")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token macro property"}},[n("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),n("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token expression"}},[n("span",{pre:!0,attrs:{class:"token number"}},[t._v("450")])])]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n gl_Position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("gl_VertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// shader.frag")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token macro property"}},[n("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),n("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token expression"}},[n("span",{pre:!0,attrs:{class:"token number"}},[t._v("450")])])]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("location"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),t._v(" f_color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n f_color "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Update dependencies to support SPIR-V module.")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("image")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.23"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("shaderc")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"spirv"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n")])])]),n("p",[t._v("Using that we'll create a simple "),n("code",[t._v("RenderPipeline")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_src "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.vert"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_src "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.frag"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" compiler "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Compiler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_spirv "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compiler\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("compile_into_spirv")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n vs_src"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderKind")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.vert"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_spirv "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compiler\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("compile_into_spirv")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n fs_src"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderKind")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fragment")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.frag"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("make_spirv")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vs_spirv"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_binary_u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("make_spirv")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fs_spirv"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_binary_u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_module "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Shader"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" vs_data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flags"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderFlags")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_module "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Fragment Shader"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fs_data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flags"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderFlags")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vs_module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("fs_module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_blend"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_blend"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrites")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n primitive"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n strip_index_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cull_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multisample"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mask"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_to_coverage_enabled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We're going to need an encoder, so let's do that.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("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 "),n("code",[t._v("TextureView")]),t._v(" to attach to. We used to use a texture from "),n("code",[t._v("SwapChain")]),t._v(" for this, but any "),n("code",[t._v("TextureView")]),t._v(" will do, including our "),n("code",[t._v("texture_view")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pass_desc "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pass_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("There's not much we can do with the data when it's stuck in a "),n("code",[t._v("Texture")]),t._v(", so let's copy it into our "),n("code",[t._v("output_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_texture_to_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" u32_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now that we've made all our commands, let's submit them to the gpu.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"getting-data-out-of-a-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#getting-data-out-of-a-buffer"}},[t._v("#")]),t._v(" Getting data out of a buffer")]),t._v(" "),n("p",[t._v("In order to get the data out of the buffer, we need to first map it, then we can get a "),n("code",[t._v("BufferView")]),t._v(" that we can treat like a "),n("code",[t._v("&[u8]")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need to scope the mapping variables so that we can")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unmap the buffer")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_slice "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NOTE: We have to create the mapping THEN device.poll() before await")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the future. Otherwise the application will freeze.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("futures_intrusive"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("channel"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("shared"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("oneshot_channel")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n buffer_slice"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("result"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("send")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Maintain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("receive")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_raw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("save")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"image.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\noutput_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("I used "),n("a",{attrs:{href:"https://docs.rs/futures-intrusive",target:"_blank",rel:"noopener noreferrer"}},[t._v("futures-intrusive"),n("OutboundLink")],1),t._v(" as that's the crate they use in the "),n("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"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("h2",{attrs:{id:"main-is-not-asyncable"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#main-is-not-asyncable"}},[t._v("#")]),t._v(" Main is not asyncable")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("main()")]),t._v(" method can't return a future, so we can't use the "),n("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 "),n("code",[t._v("main()")]),t._v(". You'll need to use a crate that can poll futures such as the "),n("a",{attrs:{href:"https://docs.rs/pollster",target:"_blank",rel:"noopener noreferrer"}},[t._v("pollster crate"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("There are crates such as "),n("a",{attrs:{href:"https://docs.rs/async-std",target:"_blank",rel:"noopener noreferrer"}},[t._v("async-std"),n("OutboundLink")],1),t._v(", and "),n("a",{attrs:{href:"https://docs.rs/tokio",target:"_blank",rel:"noopener noreferrer"}},[t._v("tokio"),n("OutboundLink")],1),t._v(" that you can use to annotate "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Windowless drawing code...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("With all that you should have an image like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(537),alt:"a brown triangle"}})]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{539: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="},600:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"wgpu-without-a-window"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#wgpu-without-a-window"}},[t._v("#")]),t._v(" Wgpu without a window")]),t._v(" "),n("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 "),n("em",[t._v("need")]),t._v(" to see what's going on.")]),t._v(" "),n("h2",{attrs:{id:"so-what-do-we-need-to-do"}},[n("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(" "),n("p",[t._v("It's actually quite simple. We don't "),n("em",[t._v("need")]),t._v(" a window to create an "),n("code",[t._v("Instance")]),t._v(", we don't "),n("em",[t._v("need")]),t._v(" a window to select an "),n("code",[t._v("Adapter")]),t._v(", nor do we "),n("em",[t._v("need")]),t._v(" a window to create a "),n("code",[t._v("Device")]),t._v(". We only needed the window to create a "),n("code",[t._v("Surface")]),t._v(" which we needed to create the "),n("code",[t._v("SwapChain")]),t._v(". Once we have a "),n("code",[t._v("Device")]),t._v(", we have all we need to start sending commands to the gpu.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" adapter "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" instance\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_adapter")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RequestAdapterOptions")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n power_preference"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PowerPreference")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n compatible_surface"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" adapter\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("request_device")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"a-triangle-without-a-window"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-triangle-without-a-window"}},[t._v("#")]),t._v(" A triangle without a window")]),t._v(" "),n("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 "),n("RouterLink",{attrs:{to:"/beginner/tutorial2-surface/#render"}},[t._v("surface")]),t._v(" we see that we use "),n("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 "),n("code",[t._v("wgpu::TextureFormat::Rgba8UnormSrgb")]),t._v(" to "),n("code",[t._v("format")]),t._v(" instead of "),n("code",[t._v("surface.get_preferred_format(&adapter)")]),t._v(" since PNG uses RGBA, not BGRA.")],1),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("256u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_desc "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Extent3d")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n height"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_or_array_layers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n sample_count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dimension"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureDimension")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureFormat")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba8UnormSrgb")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_SRC")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("RENDER_ATTACHMENT")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_texture")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" texture_view "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We're using "),n("code",[t._v("TextureUsages::RENDER_ATTACHMENT")]),t._v(" so wgpu can render to our texture. The "),n("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(" "),n("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 "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// we need to store this for later")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" u32_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("mem"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("size_of")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u32")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("u32_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferAddress")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer_desc "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" output_buffer_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n usage"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("COPY_DST")]),t._v("\n "),n("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 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferUsages")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MAP_READ")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mapped_at_creation"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output_buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("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 "),n("RouterLink",{attrs:{to:"/beginner/tutorial3-pipeline/#writing-the-shaders"}},[t._v("pipeline tutorial")]),t._v(".")],1),t._v(" "),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// shader.vert")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token macro property"}},[n("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),n("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token expression"}},[n("span",{pre:!0,attrs:{class:"token number"}},[t._v("450")])])]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),t._v(" positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.5")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n gl_Position "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("positions"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("gl_VertexIndex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("div",{staticClass:"language-glsl extra-class"},[n("pre",{pre:!0,attrs:{class:"language-glsl"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// shader.frag")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token macro property"}},[n("span",{pre:!0,attrs:{class:"token directive-hash"}},[t._v("#")]),n("span",{pre:!0,attrs:{class:"token directive keyword"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token expression"}},[n("span",{pre:!0,attrs:{class:"token number"}},[t._v("450")])])]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("location"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("out")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),t._v(" f_color"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n f_color "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("vec4")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("Update dependencies to support SPIR-V module.")]),t._v(" "),n("div",{staticClass:"language-toml extra-class"},[n("pre",{pre:!0,attrs:{class:"language-toml"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("image")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.23"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("shaderc")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.7"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"spirv"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token key property"}},[t._v("pollster")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n")])])]),n("p",[t._v("Using that we'll create a simple "),n("code",[t._v("RenderPipeline")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_src "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.vert"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_src "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("include_str!")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.frag"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" compiler "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Compiler")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_spirv "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compiler\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("compile_into_spirv")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n vs_src"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderKind")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vertex")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.vert"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_spirv "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compiler\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("compile_into_spirv")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n fs_src"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("shaderc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderKind")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fragment")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"shader.frag"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("make_spirv")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vs_spirv"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_binary_u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("make_spirv")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fs_spirv"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("as_binary_u8")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" vs_module "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Vertex Shader"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" vs_data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flags"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderFlags")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" fs_module "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_shader_module")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderModuleDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Fragment Shader"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n source"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fs_data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n flags"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ShaderFlags")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline_layout "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_pipeline_layout")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PipelineLayoutDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline Layout"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bind_group_layouts"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n push_constant_ranges"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pipeline "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_render_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPipelineDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pipeline"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline_layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n vertex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VertexState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("vs_module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buffers"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fragment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FragmentState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("fs_module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n entry_point"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"main"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n targets"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorTargetState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_blend"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_blend"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BlendState")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REPLACE")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n write_mask"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ColorWrites")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ALL")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n primitive"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n topology"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PrimitiveTopology")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TriangleList")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n strip_index_format"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n front_face"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrontFace")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ccw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n cull_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Face")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Back")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Setting this to anything other than Fill requires Features::NON_FILL_POLYGON_MODE")]),t._v("\n polygon_mode"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PolygonMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fill")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n multisample"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MultisampleState")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n count"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mask"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n alpha_to_coverage_enabled"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("We're going to need an encoder, so let's do that.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" encoder "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_command_encoder")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CommandEncoderDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("The "),n("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 "),n("code",[t._v("TextureView")]),t._v(" to attach to. We used to use a texture from "),n("code",[t._v("SwapChain")]),t._v(" for this, but any "),n("code",[t._v("TextureView")]),t._v(" will do, including our "),n("code",[t._v("texture_view")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" render_pass_desc "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassDescriptor")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Render Pass"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color_attachments"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RenderPassColorAttachment")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture_view"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n resolve_target"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ops"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Operations")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n load"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadOp")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Clear")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n r"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n g"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.2")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n b"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0.3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n a"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1.0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n store"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n depth_stencil_attachment"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("None")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" render_pass "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("begin_render_pass")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pass_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_pipeline")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("render_pipeline"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n render_pass"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("draw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("There's not much we can do with the data when it's stuck in a "),n("code",[t._v("Texture")]),t._v(", so let's copy it into our "),n("code",[t._v("output_buffer")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("copy_texture_to_buffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyTexture")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n aspect"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("TextureAspect")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("All")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("texture"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n mip_level"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n origin"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Origin3d")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ZERO")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageCopyBuffer")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("output_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageDataLayout")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n offset"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n bytes_per_row"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" u32_size "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n rows_per_image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n texture_desc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("Now that we've made all our commands, let's submit them to the gpu.")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[t._v("queue"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("submit")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("encoder"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("finish")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h2",{attrs:{id:"getting-data-out-of-a-buffer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#getting-data-out-of-a-buffer"}},[t._v("#")]),t._v(" Getting data out of a buffer")]),t._v(" "),n("p",[t._v("In order to get the data out of the buffer, we need to first map it, then we can get a "),n("code",[t._v("BufferView")]),t._v(" that we can treat like a "),n("code",[t._v("&[u8]")]),t._v(".")]),t._v(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We need to scope the mapping variables so that we can")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unmap the buffer")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer_slice "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" output_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("slice")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NOTE: We have to create the mapping THEN device.poll() before await")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the future. Otherwise the application will freeze.")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("futures_intrusive"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("channel"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("shared"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("oneshot_channel")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n buffer_slice"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("map_async")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MapMode")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Read")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("move")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token closure-params"}},[n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),t._v("result"),n("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("send")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n device"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("poll")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Maintain")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Wait")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n rx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("receive")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" buffer_slice"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_mapped_range")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("image"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" buffer "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ImageBuffer")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rgba")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("u8")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("from_raw")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_size"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("save")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"image.png"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwrap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\noutput_buffer"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("unmap")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("div",{staticClass:"note"},[n("p",[t._v("I used "),n("a",{attrs:{href:"https://docs.rs/futures-intrusive",target:"_blank",rel:"noopener noreferrer"}},[t._v("futures-intrusive"),n("OutboundLink")],1),t._v(" as that's the crate they use in the "),n("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"),n("OutboundLink")],1),t._v(".")])]),t._v(" "),n("h2",{attrs:{id:"main-is-not-asyncable"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#main-is-not-asyncable"}},[t._v("#")]),t._v(" Main is not asyncable")]),t._v(" "),n("p",[t._v("The "),n("code",[t._v("main()")]),t._v(" method can't return a future, so we can't use the "),n("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 "),n("code",[t._v("main()")]),t._v(". You'll need to use a crate that can poll futures such as the "),n("a",{attrs:{href:"https://docs.rs/pollster",target:"_blank",rel:"noopener noreferrer"}},[t._v("pollster crate"),n("OutboundLink")],1),t._v(".")]),t._v(" "),n("div",{staticClass:"note"},[n("p",[t._v("There are crates such as "),n("a",{attrs:{href:"https://docs.rs/async-std",target:"_blank",rel:"noopener noreferrer"}},[t._v("async-std"),n("OutboundLink")],1),t._v(", and "),n("a",{attrs:{href:"https://docs.rs/tokio",target:"_blank",rel:"noopener noreferrer"}},[t._v("tokio"),n("OutboundLink")],1),t._v(" that you can use to annotate "),n("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(" "),n("div",{staticClass:"language-rust extra-class"},[n("pre",{pre:!0,attrs:{class:"language-rust"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Windowless drawing code...")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("main")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("pollster"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("block_on")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("With all that you should have an image like this.")]),t._v(" "),n("p",[n("img",{attrs:{src:a(539),alt:"a brown triangle"}})]),t._v(" "),n("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/37.4abf0071.js b/assets/js/38.948c9159.js similarity index 90% rename from assets/js/37.4abf0071.js rename to assets/js/38.948c9159.js index df512e2a..46372697 100644 --- a/assets/js/37.4abf0071.js +++ b/assets/js/38.948c9159.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{567:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(23),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{570:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(23),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]); \ No newline at end of file diff --git a/assets/js/38.9362517c.js b/assets/js/39.c3cb620b.js similarity index 98% rename from assets/js/38.9362517c.js rename to assets/js/39.c3cb620b.js index c54cda3c..7b63b91c 100644 --- a/assets/js/38.9362517c.js +++ b/assets/js/39.c3cb620b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{571:function(t,e,a){"use strict";a.r(e);var r=a(23),n=Object(r.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"introduction"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#introduction"}},[t._v("#")]),t._v(" Introduction")]),t._v(" "),a("h2",{attrs:{id:"what-is-wgpu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#what-is-wgpu"}},[t._v("#")]),t._v(" What is wgpu?")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/gfx-rs/wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Wgpu"),a("OutboundLink")],1),t._v(" is a Rust implementation of the "),a("a",{attrs:{href:"https://gpuweb.github.io/gpuweb/",target:"_blank",rel:"noopener noreferrer"}},[t._v("WebGPU API spec"),a("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(" "),a("p",[t._v("Wgpu is still in development, so some of this doc is subject to change.")]),t._v(" "),a("h2",{attrs:{id:"why-rust"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#why-rust"}},[t._v("#")]),t._v(" Why Rust?")]),t._v(" "),a("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(" "),a("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 "),a("a",{attrs:{href:"https://www.rust-lang.org/learn",target:"_blank",rel:"noopener noreferrer"}},[t._v("Rust tutorial"),a("OutboundLink")],1),t._v(". You should also be familiar with "),a("a",{attrs:{href:"https://doc.rust-lang.org/cargo/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Cargo"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("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(" "),a("h2",{attrs:{id:"contribution-and-support"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contribution-and-support"}},[t._v("#")]),t._v(" Contribution and Support")]),t._v(" "),a("ul",[a("li",[t._v("I accept pull requests ("),a("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("GitHub repo"),a("OutboundLink")],1),t._v(") for fixing issues with this tutorial such as typos, incorrect information, and other inconsistencies.")]),t._v(" "),a("li",[t._v("Due to wgpu's rapidly changing api, I'm not accepting any new pull requests for showcase demos.")]),t._v(" "),a("li",[t._v("If you want to support me directly, check out my "),a("a",{attrs:{href:"https://www.patreon.com/sotrh",target:"_blank",rel:"noopener noreferrer"}},[t._v("patreon"),a("OutboundLink")],1),t._v("!")])]),t._v(" "),a("h2",{attrs:{id:"translations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#translations"}},[t._v("#")]),t._v(" Translations")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://jinleili.github.io/learn-wgpu-zh/",target:"_blank",rel:"noopener noreferrer"}},[t._v("中文版: 增加了与 App 的集成与调试系列章节"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"special-thanks-to-these-patrons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#special-thanks-to-these-patrons"}},[t._v("#")]),t._v(" Special thanks to these patrons!")]),t._v(" "),a("ul",[a("li",[t._v("David Laban")]),t._v(" "),a("li",[t._v("Gunstein Vatnar")]),t._v(" "),a("li",[t._v("Lennart")]),t._v(" "),a("li",[t._v("Ian Gowen")]),t._v(" "),a("li",[t._v("Aron Granberg")]),t._v(" "),a("li",[t._v("Bernard Llanos")]),t._v(" "),a("li",[t._v("Jan Šipr")]),t._v(" "),a("li",[t._v("Zeh Fernando")]),t._v(" "),a("li",[t._v("Felix")]),t._v(" "),a("li",[t._v("Youngsuk Kim")]),t._v(" "),a("li",[t._v("オリトイツキ")]),t._v(" "),a("li",[t._v("Andrea Postal")]),t._v(" "),a("li",[t._v("charlesk")])])])}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{574:function(t,e,a){"use strict";a.r(e);var r=a(23),n=Object(r.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"introduction"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#introduction"}},[t._v("#")]),t._v(" Introduction")]),t._v(" "),a("h2",{attrs:{id:"what-is-wgpu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#what-is-wgpu"}},[t._v("#")]),t._v(" What is wgpu?")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/gfx-rs/wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Wgpu"),a("OutboundLink")],1),t._v(" is a Rust implementation of the "),a("a",{attrs:{href:"https://gpuweb.github.io/gpuweb/",target:"_blank",rel:"noopener noreferrer"}},[t._v("WebGPU API spec"),a("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(" "),a("p",[t._v("Wgpu is still in development, so some of this doc is subject to change.")]),t._v(" "),a("h2",{attrs:{id:"why-rust"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#why-rust"}},[t._v("#")]),t._v(" Why Rust?")]),t._v(" "),a("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(" "),a("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 "),a("a",{attrs:{href:"https://www.rust-lang.org/learn",target:"_blank",rel:"noopener noreferrer"}},[t._v("Rust tutorial"),a("OutboundLink")],1),t._v(". You should also be familiar with "),a("a",{attrs:{href:"https://doc.rust-lang.org/cargo/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Cargo"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("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(" "),a("h2",{attrs:{id:"contribution-and-support"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contribution-and-support"}},[t._v("#")]),t._v(" Contribution and Support")]),t._v(" "),a("ul",[a("li",[t._v("I accept pull requests ("),a("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("GitHub repo"),a("OutboundLink")],1),t._v(") for fixing issues with this tutorial such as typos, incorrect information, and other inconsistencies.")]),t._v(" "),a("li",[t._v("Due to wgpu's rapidly changing api, I'm not accepting any new pull requests for showcase demos.")]),t._v(" "),a("li",[t._v("If you want to support me directly, check out my "),a("a",{attrs:{href:"https://www.patreon.com/sotrh",target:"_blank",rel:"noopener noreferrer"}},[t._v("patreon"),a("OutboundLink")],1),t._v("!")])]),t._v(" "),a("h2",{attrs:{id:"translations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#translations"}},[t._v("#")]),t._v(" Translations")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://jinleili.github.io/learn-wgpu-zh/",target:"_blank",rel:"noopener noreferrer"}},[t._v("中文版: 增加了与 App 的集成与调试系列章节"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"special-thanks-to-these-patrons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#special-thanks-to-these-patrons"}},[t._v("#")]),t._v(" Special thanks to these patrons!")]),t._v(" "),a("ul",[a("li",[t._v("David Laban")]),t._v(" "),a("li",[t._v("Gunstein Vatnar")]),t._v(" "),a("li",[t._v("Lennart")]),t._v(" "),a("li",[t._v("Ian Gowen")]),t._v(" "),a("li",[t._v("Aron Granberg")]),t._v(" "),a("li",[t._v("Bernard Llanos")]),t._v(" "),a("li",[t._v("Jan Šipr")]),t._v(" "),a("li",[t._v("Zeh Fernando")]),t._v(" "),a("li",[t._v("Felix")]),t._v(" "),a("li",[t._v("Youngsuk Kim")]),t._v(" "),a("li",[t._v("オリトイツキ")]),t._v(" "),a("li",[t._v("Andrea Postal")]),t._v(" "),a("li",[t._v("charlesk")])])])}),[],!1,null,null,null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/4.a7a39244.js b/assets/js/4.a7a39244.js new file mode 100644 index 00000000..cb98b91c --- /dev/null +++ b/assets/js/4.a7a39244.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{365:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_object_clone_ref",(function(){return k})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbindgen_string_new",(function(){return O})),t.d(e,"__wbindgen_string_get",(function(){return C})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return U})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return j})),t.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return q})),t.d(e,"__wbindgen_number_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return G})),t.d(e,"__wbindgen_number_new",(function(){return W})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return N})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return H})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return J})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return z})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return Z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return $})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return nn})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return en})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return tn})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return rn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return on})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return dn})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return bn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return gn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return wn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return ln})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return sn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return mn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return vn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return yn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return pn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return hn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return Sn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return An})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Pn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return In})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Dn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return Fn})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return En})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Tn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Bn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Ln})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Mn})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return kn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return Rn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return On})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Un})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return jn})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Gn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Wn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Nn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Jn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return zn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return $n})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return ne})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ee})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return te})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return re})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return ue})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return fe})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return ce})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return _e})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ie})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return oe})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return de})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return be})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ge})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return we})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return le})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return se})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return me})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ve})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ye})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return pe})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return he})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return Se})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Ae})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Pe})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Ie})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return De})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Fe})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Ee})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Te})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Be})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Le})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Me})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return ke})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return Re})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Oe})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ce})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ue})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return je})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Ge})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return We})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ne})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return He})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return Je})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return ze})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return $e})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return nt})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return et})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return tt})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return rt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return ut})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ft})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ct})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return _t})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return it})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return ot})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return dt})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return bt})),t.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return gt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return wt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return lt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return st})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return mt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return vt})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return yt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return pt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return ht})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return xt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return St})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return At})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Pt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return It})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Dt})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Ft})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Et})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Tt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Bt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Lt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Mt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return kt})),t.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return Rt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ot})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ct})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Ut})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Vt})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return jt})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return qt})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return Kt})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Gt})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return Wt})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Nt})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Qt})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Xt})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Yt})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Ht})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Jt})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return zt})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Zt})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return $t})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return nr})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return er})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return tr})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return rr})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ur})),t.d(e,"__wbg_name_2473476082bed625",(function(){return fr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return cr})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return _r})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return ir})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return or})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return dr})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return ar})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return br})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return gr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return wr})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return lr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return sr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return mr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return vr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return yr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return pr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return hr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return xr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return Sr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return Ar})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Pr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Fr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Er})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Tr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Br})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Lr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Mr})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return kr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Rr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Or})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Cr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Ur})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Vr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return jr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return qr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Kr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Gr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Wr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Nr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Qr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Xr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Yr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Hr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Jr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return zr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Zr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return $r})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return nu})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return eu})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return tu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return ru})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return uu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return fu})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return cu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return _u})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return iu})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return ou})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return du})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return au})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return bu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return gu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return wu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return lu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return su})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return mu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return vu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return yu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return pu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return hu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return xu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return Su})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return Au})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Pu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Iu})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Du})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Fu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Eu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Tu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Bu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Lu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Mu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return ku})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Ru})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Ou})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Cu})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Uu})),t.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return Vu})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return ju})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return qu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Ku})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Gu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Wu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Nu})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Qu})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Xu})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Yu})),t.d(e,"__wbg_origin_486b350035be1f11",(function(){return Hu})),t.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return Ju})),t.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return zu})),t.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return Zu})),t.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return $u})),t.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return nf})),t.d(e,"__wbg_text_1169d752cc697903",(function(){return ef})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return tf})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return rf})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return uf})),t.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return ff})),t.d(e,"__wbg_append_de37df908812970d",(function(){return cf})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return _f})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return of})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return df})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return af})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return bf})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return gf})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return wf})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return lf})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return sf})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return mf})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return vf})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return yf})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return pf})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return hf})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return xf})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Sf})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return Af})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return Pf})),t.d(e,"__wbindgen_is_function",(function(){return If})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return Df})),t.d(e,"__wbindgen_is_object",(function(){return Ff})),t.d(e,"__wbg_next_579e583d33566a86",(function(){return Ef})),t.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return Tf})),t.d(e,"__wbg_done_1b73b0672e15f234",(function(){return Bf})),t.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return Lf})),t.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return Mf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return kf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return Rf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return Of})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return Cf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return Uf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return Vf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return jf})),t.d(e,"__wbindgen_is_undefined",(function(){return qf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return Kf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Gf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Wf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Nf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Qf})),t.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return Xf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Yf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Jf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return zf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Zf})),t.d(e,"__wbg_new_8c3f0052272a457a",(function(){return $f})),t.d(e,"__wbg_set_83db9690f9353e79",(function(){return nc})),t.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return ec})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return tc})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return rc})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return uc})),t.d(e,"__wbg_has_8359f114ce042f5a",(function(){return fc})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return cc})),t.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return _c})),t.d(e,"__wbindgen_debug_string",(function(){return ic})),t.d(e,"__wbindgen_throw",(function(){return oc})),t.d(e,"__wbindgen_memory",(function(){return dc})),t.d(e,"__wbindgen_closure_wrapper826",(function(){return ac})),t.d(e,"__wbindgen_closure_wrapper828",(function(){return bc})),t.d(e,"__wbindgen_closure_wrapper830",(function(){return gc})),t.d(e,"__wbindgen_closure_wrapper832",(function(){return wc})),t.d(e,"__wbindgen_closure_wrapper834",(function(){return lc})),t.d(e,"__wbindgen_closure_wrapper836",(function(){return sc})),t.d(e,"__wbindgen_closure_wrapper838",(function(){return mc})),t.d(e,"__wbindgen_closure_wrapper840",(function(){return vc})),t.d(e,"__wbindgen_closure_wrapper842",(function(){return yc})),t.d(e,"__wbindgen_closure_wrapper1147",(function(){return pc}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(61),t(411),t(412),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(97),t(18),t(25),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(418),t(416),t(455)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}function o(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var d=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});d.decode();var a=new Uint8Array;function b(){return 0===a.byteLength&&(a=new Uint8Array(u.j.buffer)),a}function g(n,e){return d.decode(b().subarray(n,n+e))}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,c=e(f),_=b(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var d=b().subarray(c+i,c+f);i+=s(n,d).written}return w=i,c}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function H(n,e){c(n).bindVertexArray(c(e))}function J(n,e,t,r,u,f,_,i,o,d,a){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,d>>>0,a>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function Z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function $(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function nn(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function en(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,F(r,u))}function tn(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,E(r,u))}function rn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function un(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function fn(n,e,t,r,u,f,_,i,o,d){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,d)}function cn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function _n(n,e,t,r,u,f,_,i,o,d,a,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a,b)}function on(n,e,t,r,u,f,_,i,o,d,a){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,c(a))}function dn(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,d){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d)}function bn(n){var e=c(n).createSampler();return v(e)?0:o(e)}function gn(n){var e=c(n).createVertexArray();return v(e)?0:o(e)}function wn(n,e){c(n).deleteQuery(c(e))}function ln(n,e){c(n).deleteSampler(c(e))}function sn(n,e){c(n).deleteSync(c(e))}function mn(n,e){c(n).deleteVertexArray(c(e))}function vn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function yn(n,e){c(n).drawBuffers(c(e))}function pn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function hn(n,e){c(n).endQuery(e>>>0)}function xn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return v(r)?0:o(r)}function Sn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function An(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function Pn(){return L((function(n,e,t){return o(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function In(n,e,t){return o(c(n).getQueryParameter(c(e),t>>>0))}function Dn(n,e,t){return o(c(n).getSyncParameter(c(e),t>>>0))}function Fn(n,e,t,r){return c(n).getUniformBlockIndex(c(e),g(t,r))}function En(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function Tn(n,e){c(n).readBuffer(e>>>0)}function Bn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Ln(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Mn(n,e,t,r,u,f){c(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function kn(n,e,t,r){c(n).samplerParameterf(c(e),t>>>0,r)}function Rn(n,e,t,r){c(n).samplerParameteri(c(e),t>>>0,r)}function On(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Cn(n,e,t,r,u,f,_){c(n).texStorage3D(e>>>0,t,r>>>0,u,f,_)}function Un(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,d)}),arguments)}function jn(){return L((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,c(b))}),arguments)}function Kn(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function Gn(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Wn(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Nn(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Qn(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Xn(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Yn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Hn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Jn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function zn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Zn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function $n(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function ne(n,e){c(n).activeTexture(e>>>0)}function ee(n,e,t){c(n).attachShader(c(e),c(t))}function te(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function re(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function ue(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function fe(n,e,t){c(n).bindTexture(e>>>0,c(t))}function ce(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function _e(n,e){c(n).blendEquation(e>>>0)}function ie(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function oe(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function de(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function be(n,e){c(n).compileShader(c(e))}function ge(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function we(n){var e=c(n).createBuffer();return v(e)?0:o(e)}function le(n){var e=c(n).createFramebuffer();return v(e)?0:o(e)}function se(n){var e=c(n).createProgram();return v(e)?0:o(e)}function me(n){var e=c(n).createRenderbuffer();return v(e)?0:o(e)}function ve(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:o(t)}function ye(n){var e=c(n).createTexture();return v(e)?0:o(e)}function pe(n,e){c(n).cullFace(e>>>0)}function he(n,e){c(n).deleteBuffer(c(e))}function xe(n,e){c(n).deleteFramebuffer(c(e))}function Se(n,e){c(n).deleteProgram(c(e))}function Ae(n,e){c(n).deleteRenderbuffer(c(e))}function Pe(n,e){c(n).deleteShader(c(e))}function Ie(n,e){c(n).deleteTexture(c(e))}function De(n,e){c(n).depthFunc(e>>>0)}function Fe(n,e){c(n).depthMask(0!==e)}function Ee(n,e,t){c(n).depthRange(e,t)}function Te(n,e){c(n).disable(e>>>0)}function Be(n,e){c(n).disableVertexAttribArray(e>>>0)}function Le(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Me(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function ke(n,e){c(n).enable(e>>>0)}function Re(n,e){c(n).enableVertexAttribArray(e>>>0)}function Oe(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Ce(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Ue(n,e){c(n).frontFace(e>>>0)}function Ve(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:o(r)}function je(){return L((function(n,e,t){var r=c(n).getExtension(g(e,t));return v(r)?0:o(r)}),arguments)}function qe(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Ge(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function We(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Ne(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function Qe(n){var e=c(n).getSupportedExtensions();return v(e)?0:o(e)}function Xe(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return v(u)?0:o(u)}function Ye(n,e){c(n).linkProgram(c(e))}function He(n,e,t){c(n).pixelStorei(e>>>0,t)}function Je(n,e,t){c(n).polygonOffset(e,t)}function ze(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Ze(n,e,t,r,u){c(n).scissor(e,t,r,u)}function $e(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function nt(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function et(n,e){c(n).stencilMask(e>>>0)}function tt(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function rt(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ut(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function ft(n,e,t){c(n).uniform1f(c(e),t)}function ct(n,e,t){c(n).uniform1i(c(e),t)}function _t(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function it(n,e){c(n).useProgram(c(e))}function ot(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function dt(n,e,t,r,u){c(n).viewport(e,t,r,u)}function at(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function bt(n){var e=c(n).document;return v(e)?0:o(e)}function gt(n){return o(c(n).location)}function wt(){return L((function(n){return o(c(n).innerWidth)}),arguments)}function lt(){return L((function(n){return o(c(n).innerHeight)}),arguments)}function st(n){return c(n).devicePixelRatio}function mt(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function vt(){return L((function(n,e,t){var r=c(n).matchMedia(g(e,t));return v(r)?0:o(r)}),arguments)}function yt(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function pt(n,e,t){var r=c(n)[g(e,t)];return v(r)?0:o(r)}function ht(n,e){c(n).clearTimeout(e)}function xt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function St(n,e){c(n).bindVertexArrayOES(c(e))}function At(n){var e=c(n).createVertexArrayOES();return v(e)?0:o(e)}function Pt(n,e){c(n).deleteVertexArrayOES(c(e))}function It(n){return c(n).pointerId}function Dt(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Ft(n){return c(n).width}function Et(n,e){c(n).width=e>>>0}function Tt(n){return c(n).height}function Bt(n,e){c(n).height=e>>>0}function Lt(){return L((function(n,e,t,r){var u=c(n).getContext(g(e,t),c(r));return v(u)?0:o(u)}),arguments)}function Mt(n){return c(n).matches}function kt(n){return c(n).now()}function Rt(){return L((function(n,e,t){return o(new Request(g(n,e),c(t)))}),arguments)}function Ot(n,e){c(n).drawBuffersWEBGL(c(e))}function Ct(n){return c(n).charCode}function Ut(n){return c(n).keyCode}function Vt(n){return c(n).altKey}function jt(n){return c(n).ctrlKey}function qt(n){return c(n).shiftKey}function Kt(n){return c(n).metaKey}function Gt(n,e){var t=m(c(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Wt(n,e){var t=m(c(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Nt(n,e,t){return c(n).getModifierState(g(e,t))}function Qt(){return L((function(n,e,t,r){c(n).addEventListener(g(e,t),c(r))}),arguments)}function Xt(){return L((function(n,e,t,r,u){c(n).addEventListener(g(e,t),c(r),c(u))}),arguments)}function Yt(){return L((function(n,e,t,r){c(n).removeEventListener(g(e,t),c(r))}),arguments)}function Ht(){return L((function(n,e){return o(c(n).appendChild(c(e)))}),arguments)}function Jt(n){var e=c(n).target;return v(e)?0:o(e)}function zt(n){return c(n).cancelBubble}function Zt(n){c(n).preventDefault()}function $t(n){c(n).stopPropagation()}function nr(n){return c(n).matches}function er(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function tr(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function rr(n){return c(n).size}function ur(n){return c(n).type}function fr(n,e){var t=m(c(e).name,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function cr(n){var e=c(n).fullscreenElement;return v(e)?0:o(e)}function _r(){return L((function(n,e,t){return o(c(n).createElement(g(e,t)))}),arguments)}function ir(n,e,t){var r=c(n).getElementById(g(e,t));return v(r)?0:o(r)}function or(){return L((function(n,e,t){var r=c(n).querySelector(g(e,t));return v(r)?0:o(r)}),arguments)}function dr(n){return o(c(n).getBoundingClientRect())}function ar(){return L((function(n){c(n).requestFullscreen()}),arguments)}function br(){return L((function(n,e,t,r,u){c(n).setAttribute(g(e,t),g(r,u))}),arguments)}function gr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function wr(n){return o(c(n).style)}function lr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function sr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function mr(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function vr(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function yr(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function pr(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function hr(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function xr(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Sr(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Ar(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Pr(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Ir(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Dr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Fr(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Er(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Tr(n,e){c(n).activeTexture(e>>>0)}function Br(n,e,t){c(n).attachShader(c(e),c(t))}function Lr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Mr(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function kr(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function Rr(n,e,t){c(n).bindTexture(e>>>0,c(t))}function Or(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Cr(n,e){c(n).blendEquation(e>>>0)}function Ur(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Vr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function jr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function qr(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Kr(n,e){c(n).compileShader(c(e))}function Gr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function Wr(n){var e=c(n).createBuffer();return v(e)?0:o(e)}function Nr(n){var e=c(n).createFramebuffer();return v(e)?0:o(e)}function Qr(n){var e=c(n).createProgram();return v(e)?0:o(e)}function Xr(n){var e=c(n).createRenderbuffer();return v(e)?0:o(e)}function Yr(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:o(t)}function Hr(n){var e=c(n).createTexture();return v(e)?0:o(e)}function Jr(n,e){c(n).cullFace(e>>>0)}function zr(n,e){c(n).deleteBuffer(c(e))}function Zr(n,e){c(n).deleteFramebuffer(c(e))}function $r(n,e){c(n).deleteProgram(c(e))}function nu(n,e){c(n).deleteRenderbuffer(c(e))}function eu(n,e){c(n).deleteShader(c(e))}function tu(n,e){c(n).deleteTexture(c(e))}function ru(n,e){c(n).depthFunc(e>>>0)}function uu(n,e){c(n).depthMask(0!==e)}function fu(n,e,t){c(n).depthRange(e,t)}function cu(n,e){c(n).disable(e>>>0)}function _u(n,e){c(n).disableVertexAttribArray(e>>>0)}function iu(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function ou(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function du(n,e){c(n).enable(e>>>0)}function au(n,e){c(n).enableVertexAttribArray(e>>>0)}function bu(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function gu(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function wu(n,e){c(n).frontFace(e>>>0)}function lu(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:o(r)}function su(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function mu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function vu(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function yu(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function pu(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function hu(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return v(u)?0:o(u)}function xu(n,e){c(n).linkProgram(c(e))}function Su(n,e,t){c(n).pixelStorei(e>>>0,t)}function Au(n,e,t){c(n).polygonOffset(e,t)}function Pu(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Iu(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Du(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function Fu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Eu(n,e){c(n).stencilMask(e>>>0)}function Tu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Bu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Lu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Mu(n,e,t){c(n).uniform1f(c(e),t)}function ku(n,e,t){c(n).uniform1i(c(e),t)}function Ru(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function Ou(n,e){c(n).useProgram(c(e))}function Cu(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Uu(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Vu(n,e){return o(c(n).fetch(c(e)))}function ju(n){console.debug(c(n))}function qu(n){console.error(c(n))}function Ku(n,e){console.error(c(n),c(e))}function Gu(n){console.info(c(n))}function Wu(n){console.log(c(n))}function Nu(n){console.warn(c(n))}function Qu(){return L((function(n,e,t,r,u){c(n).setProperty(g(e,t),g(r,u))}),arguments)}function Xu(n){return c(n).x}function Yu(n){return c(n).y}function Hu(){return L((function(n,e){var t=m(c(e).origin,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}),arguments)}function Ju(n){var e;try{e=c(n)instanceof Response}catch(n){e=!1}return e}function zu(n,e){var t=m(c(e).url,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Zu(n){return c(n).status}function $u(n){return o(c(n).headers)}function nf(){return L((function(n){return o(c(n).arrayBuffer())}),arguments)}function ef(){return L((function(n){return o(c(n).text())}),arguments)}function tf(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function rf(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function uf(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function ff(){return L((function(){return o(new Headers)}),arguments)}function cf(){return L((function(n,e,t,r,u){c(n).append(g(e,t),g(r,u))}),arguments)}function _f(n){return c(n).clientX}function of(n){return c(n).clientY}function df(n){return c(n).offsetX}function af(n){return c(n).offsetY}function bf(n){return c(n).ctrlKey}function gf(n){return c(n).shiftKey}function wf(n){return c(n).altKey}function lf(n){return c(n).metaKey}function sf(n){return c(n).button}function mf(n){return c(n).buttons}function vf(n){return c(n).movementX}function yf(n){return c(n).movementY}function pf(n){return c(n).deltaX}function hf(n){return c(n).deltaY}function xf(n){return c(n).deltaMode}function Sf(n,e){return o(c(n)[e>>>0])}function Af(n){return c(n).length}function Pf(){return o(new Array)}function If(n){return"function"==typeof c(n)}function Df(n,e){return o(new Function(g(n,e)))}function Ff(n){var e=c(n);return"object"===Object(r.a)(e)&&null!==e}function Ef(n){return o(c(n).next)}function Tf(){return L((function(n){return o(c(n).next())}),arguments)}function Bf(n){return c(n).done}function Lf(n){return o(c(n).value)}function Mf(){return o(Symbol.iterator)}function kf(){return L((function(n,e){return o(Reflect.get(c(n),c(e)))}),arguments)}function Rf(){return L((function(n,e){return o(c(n).call(c(e)))}),arguments)}function Of(){return o(new Object)}function Cf(){return L((function(){return o(self.self)}),arguments)}function Uf(){return L((function(){return o(window.window)}),arguments)}function Vf(){return L((function(){return o(globalThis.globalThis)}),arguments)}function jf(){return L((function(){return o(global.global)}),arguments)}function qf(n){return void 0===c(n)}function Kf(n){return o(Array.of(c(n)))}function Gf(n,e){return c(n).push(c(e))}function Wf(n,e){return Object.is(c(n),c(e))}function Nf(n){return o(Promise.resolve(c(n)))}function Qf(n,e){return o(c(n).then(c(e)))}function Xf(n,e,t){return o(c(n).then(c(e),c(t)))}function Yf(n){return o(c(n).buffer)}function Hf(n,e,t){return o(new Int8Array(c(n),e>>>0,t>>>0))}function Jf(n,e,t){return o(new Int16Array(c(n),e>>>0,t>>>0))}function zf(n,e,t){return o(new Int32Array(c(n),e>>>0,t>>>0))}function Zf(n,e,t){return o(new Uint8Array(c(n),e>>>0,t>>>0))}function $f(n){return o(new Uint8Array(c(n)))}function nc(n,e,t){c(n).set(c(e),t>>>0)}function ec(n){return c(n).length}function tc(n,e,t){return o(new Uint16Array(c(n),e>>>0,t>>>0))}function rc(n,e,t){return o(new Uint32Array(c(n),e>>>0,t>>>0))}function uc(n,e,t){return o(new Float32Array(c(n),e>>>0,t>>>0))}function fc(){return L((function(n,e){return Reflect.has(c(n),c(e))}),arguments)}function cc(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function _c(){return L((function(n){return o(JSON.stringify(c(n)))}),arguments)}function ic(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=d[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function oc(n,e){throw new Error(g(n,e))}function dc(){return o(u.j)}function ac(n,e,t){return o(x(n,e,180,S))}function bc(n,e,t){return o(x(n,e,180,S))}function gc(n,e,t){return o(x(n,e,180,S))}function wc(n,e,t){return o(x(n,e,180,S))}function lc(n,e,t){return o(x(n,e,180,S))}function sc(n,e,t){return o(x(n,e,180,S))}function mc(n,e,t){return o(x(n,e,180,S))}function vc(n,e,t){return o(x(n,e,180,S))}function yc(n,e,t){return o(x(n,e,180,A))}function pc(n,e,t){return o(x(n,e,342,P))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},418:function(n,e,t){t(1)({target:"Reflect",stat:!0},{has:function(n,e){return e in n}})},455:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(365);r.l()}}]); \ No newline at end of file diff --git a/assets/js/4.e0694e30.js b/assets/js/4.e0694e30.js deleted file mode 100644 index 496d9611..00000000 --- a/assets/js/4.e0694e30.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{365:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return D})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_object_clone_ref",(function(){return k})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbindgen_string_new",(function(){return O})),t.d(e,"__wbindgen_string_get",(function(){return C})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return V})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return j})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return q})),t.d(e,"__wbindgen_number_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return G})),t.d(e,"__wbindgen_number_new",(function(){return W})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return N})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return H})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return J})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return z})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return Z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return $})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return nn})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return en})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return tn})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return rn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return on})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return dn})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return bn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return gn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return wn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return ln})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return sn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return mn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return vn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return yn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return pn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return hn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return Sn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return An})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Pn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Dn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return In})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return En})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Fn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Tn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Bn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Ln})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Mn})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return kn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return Rn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return On})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Vn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return jn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Gn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Wn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Nn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Jn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return zn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return $n})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return ne})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ee})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return te})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return re})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return ue})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return fe})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return _e})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ce})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ie})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return oe})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return de})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return be})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ge})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return we})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return le})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return se})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return me})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ve})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ye})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return pe})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return he})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return Se})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Ae})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Pe})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return De})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return Ie})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Ee})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Fe})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Te})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Be})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Le})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Me})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return ke})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return Re})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Oe})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ce})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ve})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return je})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Ge})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return We})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ne})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return He})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return Je})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return ze})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return $e})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return nt})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return et})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return tt})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return rt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return ut})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ft})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return _t})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return ct})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return it})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return ot})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return dt})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return bt})),t.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return gt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return wt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return lt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return st})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return mt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return vt})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return yt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return pt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return ht})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return xt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return St})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return At})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Pt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Dt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return It})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Et})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Ft})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Tt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Bt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Lt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Mt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return kt})),t.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return Rt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ot})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ct})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Vt})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return jt})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Ut})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return qt})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return Kt})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Gt})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return Wt})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Nt})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Qt})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Xt})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Yt})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Ht})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Jt})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return zt})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Zt})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return $t})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return nr})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return er})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return tr})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return rr})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ur})),t.d(e,"__wbg_name_2473476082bed625",(function(){return fr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return _r})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return cr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return ir})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return or})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return dr})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return ar})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return br})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return gr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return wr})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return lr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return sr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return mr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return vr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return yr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return pr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return hr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return xr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return Sr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return Ar})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Pr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Er})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Fr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Tr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Br})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Lr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Mr})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return kr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Rr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Or})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Cr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Vr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return jr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Ur})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return qr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Kr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Gr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Wr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Nr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Qr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Xr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Yr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Hr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Jr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return zr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Zr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return $r})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return nu})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return eu})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return tu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return ru})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return uu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return fu})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return _u})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return cu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return iu})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return ou})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return du})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return au})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return bu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return gu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return wu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return lu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return su})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return mu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return vu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return yu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return pu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return hu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return xu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return Su})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return Au})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Pu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Du})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Iu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Eu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Fu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Tu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Bu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Lu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Mu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return ku})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Ru})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Ou})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Cu})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Vu})),t.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return ju})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Uu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return qu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Ku})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Gu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Wu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Nu})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Qu})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Xu})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Yu})),t.d(e,"__wbg_origin_486b350035be1f11",(function(){return Hu})),t.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return Ju})),t.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return zu})),t.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return Zu})),t.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return $u})),t.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return nf})),t.d(e,"__wbg_text_1169d752cc697903",(function(){return ef})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return tf})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return rf})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return uf})),t.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return ff})),t.d(e,"__wbg_append_de37df908812970d",(function(){return _f})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return cf})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return of})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return df})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return af})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return bf})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return gf})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return wf})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return lf})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return sf})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return mf})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return vf})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return yf})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return pf})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return hf})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return xf})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Sf})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return Af})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return Pf})),t.d(e,"__wbindgen_is_function",(function(){return Df})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return If})),t.d(e,"__wbindgen_is_object",(function(){return Ef})),t.d(e,"__wbg_next_579e583d33566a86",(function(){return Ff})),t.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return Tf})),t.d(e,"__wbg_done_1b73b0672e15f234",(function(){return Bf})),t.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return Lf})),t.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return Mf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return kf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return Rf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return Of})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return Cf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return Vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return jf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return Uf})),t.d(e,"__wbindgen_is_undefined",(function(){return qf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return Kf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Gf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Wf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Nf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Qf})),t.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return Xf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Yf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Jf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return zf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Zf})),t.d(e,"__wbg_new_8c3f0052272a457a",(function(){return $f})),t.d(e,"__wbg_set_83db9690f9353e79",(function(){return n_})),t.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return e_})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return t_})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r_})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return u_})),t.d(e,"__wbg_has_8359f114ce042f5a",(function(){return f_})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return __})),t.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return c_})),t.d(e,"__wbindgen_debug_string",(function(){return i_})),t.d(e,"__wbindgen_throw",(function(){return o_})),t.d(e,"__wbindgen_memory",(function(){return d_})),t.d(e,"__wbindgen_closure_wrapper826",(function(){return a_})),t.d(e,"__wbindgen_closure_wrapper828",(function(){return b_})),t.d(e,"__wbindgen_closure_wrapper830",(function(){return g_})),t.d(e,"__wbindgen_closure_wrapper832",(function(){return w_})),t.d(e,"__wbindgen_closure_wrapper834",(function(){return l_})),t.d(e,"__wbindgen_closure_wrapper836",(function(){return s_})),t.d(e,"__wbindgen_closure_wrapper838",(function(){return m_})),t.d(e,"__wbindgen_closure_wrapper840",(function(){return v_})),t.d(e,"__wbindgen_closure_wrapper842",(function(){return y_})),t.d(e,"__wbindgen_closure_wrapper1147",(function(){return p_}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(61),t(403),t(404),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(97),t(18),t(25),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(417),t(414),t(454)),f=new Array(32).fill(void 0);function _(n){return f[n]}f.push(void 0,null,!0,!1);var c=f.length;function i(n){var e=_(n);return function(n){n<36||(f[n]=c,c=n)}(n),e}function o(n){c===f.length&&f.push(f.length+1);var e=c;return c=f[e],f[e]=n,e}var d=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});d.decode();var a=new Uint8Array;function b(){return 0===a.byteLength&&(a=new Uint8Array(u.j.buffer)),a}function g(n,e){return d.decode(b().subarray(n,n+e))}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,_=e(f),c=b(),i=0;i127)break;c[_+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),_=t(_,f,f=i+3*n.length);var d=b().subarray(_+i,_+f);i+=s(n,d).written}return w=i,_}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},_=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),_=0;_>>0,_(t))}function X(n,e,t,r,u,f){_(n).bindBufferRange(e>>>0,t>>>0,_(r),u,f)}function Y(n,e,t){_(n).bindSampler(e>>>0,_(t))}function H(n,e){_(n).bindVertexArray(_(e))}function J(n,e,t,r,u,f,c,i,o,d,a){_(n).blitFramebuffer(e,t,r,u,f,c,i,o,d>>>0,a>>>0)}function z(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function Z(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function $(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function nn(n,e,t,r,u){_(n).clearBufferfi(e>>>0,t,r,u)}function en(n,e,t,r,u){_(n).clearBufferfv(e>>>0,t,E(r,u))}function tn(n,e,t,r,u){_(n).clearBufferiv(e>>>0,t,F(r,u))}function rn(n,e,t,r,u){_(n).clearBufferuiv(e>>>0,t,B(r,u))}function un(n,e,t,r){return _(n).clientWaitSync(_(e),t>>>0,r>>>0)}function fn(n,e,t,r,u,f,c,i,o,d){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o,d)}function _n(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function cn(n,e,t,r,u,f,c,i,o,d,a,b){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a,b)}function on(n,e,t,r,u,f,c,i,o,d,a){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,_(a))}function dn(n,e,t,r,u,f){_(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,c,i,o,d){_(n).copyTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d)}function bn(n){var e=_(n).createSampler();return v(e)?0:o(e)}function gn(n){var e=_(n).createVertexArray();return v(e)?0:o(e)}function wn(n,e){_(n).deleteQuery(_(e))}function ln(n,e){_(n).deleteSampler(_(e))}function sn(n,e){_(n).deleteSync(_(e))}function mn(n,e){_(n).deleteVertexArray(_(e))}function vn(n,e,t,r,u){_(n).drawArraysInstanced(e>>>0,t,r,u)}function yn(n,e){_(n).drawBuffers(_(e))}function pn(n,e,t,r,u,f){_(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function hn(n,e){_(n).endQuery(e>>>0)}function xn(n,e,t){var r=_(n).fenceSync(e>>>0,t>>>0);return v(r)?0:o(r)}function Sn(n,e,t,r,u,f){_(n).framebufferTextureLayer(e>>>0,t>>>0,_(r),u,f)}function An(n,e,t,r){_(n).getBufferSubData(e>>>0,t,_(r))}function Pn(){return L((function(n,e,t){return o(_(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Dn(n,e,t){return o(_(n).getQueryParameter(_(e),t>>>0))}function In(n,e,t){return o(_(n).getSyncParameter(_(e),t>>>0))}function En(n,e,t,r){return _(n).getUniformBlockIndex(_(e),g(t,r))}function Fn(){return L((function(n,e,t){_(n).invalidateFramebuffer(e>>>0,_(t))}),arguments)}function Tn(n,e){_(n).readBuffer(e>>>0)}function Bn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function Ln(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,i)}),arguments)}function Mn(n,e,t,r,u,f){_(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function kn(n,e,t,r){_(n).samplerParameterf(_(e),t>>>0,r)}function Rn(n,e,t,r){_(n).samplerParameteri(_(e),t>>>0,r)}function On(n,e,t,r,u,f){_(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Cn(n,e,t,r,u,f,c){_(n).texStorage3D(e>>>0,t,r>>>0,u,f,c)}function Vn(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(d))}),arguments)}function jn(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,d)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,c,i,o,d,a,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,c,i,o,d,a,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a>>>0,_(b))}),arguments)}function Kn(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function Gn(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Wn(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Nn(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Qn(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Xn(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Yn(n,e,t,r){_(n).uniformBlockBinding(_(e),t>>>0,r>>>0)}function Hn(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Jn(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function zn(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Zn(n,e,t){_(n).vertexAttribDivisor(e>>>0,t>>>0)}function $n(n,e,t,r,u,f){_(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function ne(n,e){_(n).activeTexture(e>>>0)}function ee(n,e,t){_(n).attachShader(_(e),_(t))}function te(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function re(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function ue(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function fe(n,e,t){_(n).bindTexture(e>>>0,_(t))}function _e(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function ce(n,e){_(n).blendEquation(e>>>0)}function ie(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function oe(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function de(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function be(n,e){_(n).compileShader(_(e))}function ge(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function we(n){var e=_(n).createBuffer();return v(e)?0:o(e)}function le(n){var e=_(n).createFramebuffer();return v(e)?0:o(e)}function se(n){var e=_(n).createProgram();return v(e)?0:o(e)}function me(n){var e=_(n).createRenderbuffer();return v(e)?0:o(e)}function ve(n,e){var t=_(n).createShader(e>>>0);return v(t)?0:o(t)}function ye(n){var e=_(n).createTexture();return v(e)?0:o(e)}function pe(n,e){_(n).cullFace(e>>>0)}function he(n,e){_(n).deleteBuffer(_(e))}function xe(n,e){_(n).deleteFramebuffer(_(e))}function Se(n,e){_(n).deleteProgram(_(e))}function Ae(n,e){_(n).deleteRenderbuffer(_(e))}function Pe(n,e){_(n).deleteShader(_(e))}function De(n,e){_(n).deleteTexture(_(e))}function Ie(n,e){_(n).depthFunc(e>>>0)}function Ee(n,e){_(n).depthMask(0!==e)}function Fe(n,e,t){_(n).depthRange(e,t)}function Te(n,e){_(n).disable(e>>>0)}function Be(n,e){_(n).disableVertexAttribArray(e>>>0)}function Le(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function Me(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function ke(n,e){_(n).enable(e>>>0)}function Re(n,e){_(n).enableVertexAttribArray(e>>>0)}function Oe(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function Ce(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function Ve(n,e){_(n).frontFace(e>>>0)}function je(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return v(r)?0:o(r)}function Ue(){return L((function(n,e,t){var r=_(n).getExtension(g(e,t));return v(r)?0:o(r)}),arguments)}function qe(){return L((function(n,e){return o(_(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function Ge(n,e,t){return o(_(n).getProgramParameter(_(e),t>>>0))}function We(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function Ne(n,e,t){return o(_(n).getShaderParameter(_(e),t>>>0))}function Qe(n){var e=_(n).getSupportedExtensions();return v(e)?0:o(e)}function Xe(n,e,t,r){var u=_(n).getUniformLocation(_(e),g(t,r));return v(u)?0:o(u)}function Ye(n,e){_(n).linkProgram(_(e))}function He(n,e,t){_(n).pixelStorei(e>>>0,t)}function Je(n,e,t){_(n).polygonOffset(e,t)}function ze(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Ze(n,e,t,r,u){_(n).scissor(e,t,r,u)}function $e(n,e,t,r){_(n).shaderSource(_(e),g(t,r))}function nt(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function et(n,e){_(n).stencilMask(e>>>0)}function tt(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function rt(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ut(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function ft(n,e,t){_(n).uniform1f(_(e),t)}function _t(n,e,t){_(n).uniform1i(_(e),t)}function ct(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function it(n,e){_(n).useProgram(_(e))}function ot(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function dt(n,e,t,r,u){_(n).viewport(e,t,r,u)}function at(n){var e;try{e=_(n)instanceof Window}catch(n){e=!1}return e}function bt(n){var e=_(n).document;return v(e)?0:o(e)}function gt(n){return o(_(n).location)}function wt(){return L((function(n){return o(_(n).innerWidth)}),arguments)}function lt(){return L((function(n){return o(_(n).innerHeight)}),arguments)}function st(n){return _(n).devicePixelRatio}function mt(){return L((function(n,e){_(n).cancelAnimationFrame(e)}),arguments)}function vt(){return L((function(n,e,t){var r=_(n).matchMedia(g(e,t));return v(r)?0:o(r)}),arguments)}function yt(){return L((function(n,e){return _(n).requestAnimationFrame(_(e))}),arguments)}function pt(n,e,t){var r=_(n)[g(e,t)];return v(r)?0:o(r)}function ht(n,e){_(n).clearTimeout(e)}function xt(){return L((function(n,e,t){return _(n).setTimeout(_(e),t)}),arguments)}function St(n,e){_(n).bindVertexArrayOES(_(e))}function At(n){var e=_(n).createVertexArrayOES();return v(e)?0:o(e)}function Pt(n,e){_(n).deleteVertexArrayOES(_(e))}function Dt(n){return _(n).pointerId}function It(n){var e;try{e=_(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Et(n){return _(n).width}function Ft(n,e){_(n).width=e>>>0}function Tt(n){return _(n).height}function Bt(n,e){_(n).height=e>>>0}function Lt(){return L((function(n,e,t,r){var u=_(n).getContext(g(e,t),_(r));return v(u)?0:o(u)}),arguments)}function Mt(n){return _(n).matches}function kt(n){return _(n).now()}function Rt(){return L((function(n,e,t){return o(new Request(g(n,e),_(t)))}),arguments)}function Ot(n,e){_(n).drawBuffersWEBGL(_(e))}function Ct(n){return _(n).charCode}function Vt(n){return _(n).keyCode}function jt(n){return _(n).altKey}function Ut(n){return _(n).ctrlKey}function qt(n){return _(n).shiftKey}function Kt(n){return _(n).metaKey}function Gt(n,e){var t=m(_(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Wt(n,e){var t=m(_(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Nt(n,e,t){return _(n).getModifierState(g(e,t))}function Qt(){return L((function(n,e,t,r){_(n).addEventListener(g(e,t),_(r))}),arguments)}function Xt(){return L((function(n,e,t,r,u){_(n).addEventListener(g(e,t),_(r),_(u))}),arguments)}function Yt(){return L((function(n,e,t,r){_(n).removeEventListener(g(e,t),_(r))}),arguments)}function Ht(){return L((function(n,e){return o(_(n).appendChild(_(e)))}),arguments)}function Jt(n){var e=_(n).target;return v(e)?0:o(e)}function zt(n){return _(n).cancelBubble}function Zt(n){_(n).preventDefault()}function $t(n){_(n).stopPropagation()}function nr(n){return _(n).matches}function er(){return L((function(n,e){_(n).addListener(_(e))}),arguments)}function tr(){return L((function(n,e){_(n).removeListener(_(e))}),arguments)}function rr(n){return _(n).size}function ur(n){return _(n).type}function fr(n,e){var t=m(_(e).name,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function _r(n){var e=_(n).fullscreenElement;return v(e)?0:o(e)}function cr(){return L((function(n,e,t){return o(_(n).createElement(g(e,t)))}),arguments)}function ir(n,e,t){var r=_(n).getElementById(g(e,t));return v(r)?0:o(r)}function or(){return L((function(n,e,t){var r=_(n).querySelector(g(e,t));return v(r)?0:o(r)}),arguments)}function dr(n){return o(_(n).getBoundingClientRect())}function ar(){return L((function(n){_(n).requestFullscreen()}),arguments)}function br(){return L((function(n,e,t,r,u){_(n).setAttribute(g(e,t),g(r,u))}),arguments)}function gr(){return L((function(n,e){_(n).setPointerCapture(e)}),arguments)}function wr(n){return o(_(n).style)}function lr(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function sr(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function mr(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function vr(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function yr(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function pr(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(d))}),arguments)}function hr(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function xr(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Sr(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Ar(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Pr(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Dr(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Ir(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Er(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Fr(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Tr(n,e){_(n).activeTexture(e>>>0)}function Br(n,e,t){_(n).attachShader(_(e),_(t))}function Lr(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function Mr(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function kr(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function Rr(n,e,t){_(n).bindTexture(e>>>0,_(t))}function Or(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function Cr(n,e){_(n).blendEquation(e>>>0)}function Vr(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function jr(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function Ur(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function qr(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Kr(n,e){_(n).compileShader(_(e))}function Gr(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function Wr(n){var e=_(n).createBuffer();return v(e)?0:o(e)}function Nr(n){var e=_(n).createFramebuffer();return v(e)?0:o(e)}function Qr(n){var e=_(n).createProgram();return v(e)?0:o(e)}function Xr(n){var e=_(n).createRenderbuffer();return v(e)?0:o(e)}function Yr(n,e){var t=_(n).createShader(e>>>0);return v(t)?0:o(t)}function Hr(n){var e=_(n).createTexture();return v(e)?0:o(e)}function Jr(n,e){_(n).cullFace(e>>>0)}function zr(n,e){_(n).deleteBuffer(_(e))}function Zr(n,e){_(n).deleteFramebuffer(_(e))}function $r(n,e){_(n).deleteProgram(_(e))}function nu(n,e){_(n).deleteRenderbuffer(_(e))}function eu(n,e){_(n).deleteShader(_(e))}function tu(n,e){_(n).deleteTexture(_(e))}function ru(n,e){_(n).depthFunc(e>>>0)}function uu(n,e){_(n).depthMask(0!==e)}function fu(n,e,t){_(n).depthRange(e,t)}function _u(n,e){_(n).disable(e>>>0)}function cu(n,e){_(n).disableVertexAttribArray(e>>>0)}function iu(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function ou(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function du(n,e){_(n).enable(e>>>0)}function au(n,e){_(n).enableVertexAttribArray(e>>>0)}function bu(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function gu(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function wu(n,e){_(n).frontFace(e>>>0)}function lu(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return v(r)?0:o(r)}function su(){return L((function(n,e){return o(_(n).getParameter(e>>>0))}),arguments)}function mu(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function vu(n,e,t){return o(_(n).getProgramParameter(_(e),t>>>0))}function yu(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function pu(n,e,t){return o(_(n).getShaderParameter(_(e),t>>>0))}function hu(n,e,t,r){var u=_(n).getUniformLocation(_(e),g(t,r));return v(u)?0:o(u)}function xu(n,e){_(n).linkProgram(_(e))}function Su(n,e,t){_(n).pixelStorei(e>>>0,t)}function Au(n,e,t){_(n).polygonOffset(e,t)}function Pu(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Du(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Iu(n,e,t,r){_(n).shaderSource(_(e),g(t,r))}function Eu(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Fu(n,e){_(n).stencilMask(e>>>0)}function Tu(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function Bu(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Lu(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function Mu(n,e,t){_(n).uniform1f(_(e),t)}function ku(n,e,t){_(n).uniform1i(_(e),t)}function Ru(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function Ou(n,e){_(n).useProgram(_(e))}function Cu(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function Vu(n,e,t,r,u){_(n).viewport(e,t,r,u)}function ju(n,e){return o(_(n).fetch(_(e)))}function Uu(n){console.debug(_(n))}function qu(n){console.error(_(n))}function Ku(n,e){console.error(_(n),_(e))}function Gu(n){console.info(_(n))}function Wu(n){console.log(_(n))}function Nu(n){console.warn(_(n))}function Qu(){return L((function(n,e,t,r,u){_(n).setProperty(g(e,t),g(r,u))}),arguments)}function Xu(n){return _(n).x}function Yu(n){return _(n).y}function Hu(){return L((function(n,e){var t=m(_(e).origin,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}),arguments)}function Ju(n){var e;try{e=_(n)instanceof Response}catch(n){e=!1}return e}function zu(n,e){var t=m(_(e).url,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Zu(n){return _(n).status}function $u(n){return o(_(n).headers)}function nf(){return L((function(n){return o(_(n).arrayBuffer())}),arguments)}function ef(){return L((function(n){return o(_(n).text())}),arguments)}function tf(n,e,t,r,u){_(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function rf(n,e,t,r,u,f){_(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function uf(n,e,t){_(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function ff(){return L((function(){return o(new Headers)}),arguments)}function _f(){return L((function(n,e,t,r,u){_(n).append(g(e,t),g(r,u))}),arguments)}function cf(n){return _(n).clientX}function of(n){return _(n).clientY}function df(n){return _(n).offsetX}function af(n){return _(n).offsetY}function bf(n){return _(n).ctrlKey}function gf(n){return _(n).shiftKey}function wf(n){return _(n).altKey}function lf(n){return _(n).metaKey}function sf(n){return _(n).button}function mf(n){return _(n).buttons}function vf(n){return _(n).movementX}function yf(n){return _(n).movementY}function pf(n){return _(n).deltaX}function hf(n){return _(n).deltaY}function xf(n){return _(n).deltaMode}function Sf(n,e){return o(_(n)[e>>>0])}function Af(n){return _(n).length}function Pf(){return o(new Array)}function Df(n){return"function"==typeof _(n)}function If(n,e){return o(new Function(g(n,e)))}function Ef(n){var e=_(n);return"object"===Object(r.a)(e)&&null!==e}function Ff(n){return o(_(n).next)}function Tf(){return L((function(n){return o(_(n).next())}),arguments)}function Bf(n){return _(n).done}function Lf(n){return o(_(n).value)}function Mf(){return o(Symbol.iterator)}function kf(){return L((function(n,e){return o(Reflect.get(_(n),_(e)))}),arguments)}function Rf(){return L((function(n,e){return o(_(n).call(_(e)))}),arguments)}function Of(){return o(new Object)}function Cf(){return L((function(){return o(self.self)}),arguments)}function Vf(){return L((function(){return o(window.window)}),arguments)}function jf(){return L((function(){return o(globalThis.globalThis)}),arguments)}function Uf(){return L((function(){return o(global.global)}),arguments)}function qf(n){return void 0===_(n)}function Kf(n){return o(Array.of(_(n)))}function Gf(n,e){return _(n).push(_(e))}function Wf(n,e){return Object.is(_(n),_(e))}function Nf(n){return o(Promise.resolve(_(n)))}function Qf(n,e){return o(_(n).then(_(e)))}function Xf(n,e,t){return o(_(n).then(_(e),_(t)))}function Yf(n){return o(_(n).buffer)}function Hf(n,e,t){return o(new Int8Array(_(n),e>>>0,t>>>0))}function Jf(n,e,t){return o(new Int16Array(_(n),e>>>0,t>>>0))}function zf(n,e,t){return o(new Int32Array(_(n),e>>>0,t>>>0))}function Zf(n,e,t){return o(new Uint8Array(_(n),e>>>0,t>>>0))}function $f(n){return o(new Uint8Array(_(n)))}function n_(n,e,t){_(n).set(_(e),t>>>0)}function e_(n){return _(n).length}function t_(n,e,t){return o(new Uint16Array(_(n),e>>>0,t>>>0))}function r_(n,e,t){return o(new Uint32Array(_(n),e>>>0,t>>>0))}function u_(n,e,t){return o(new Float32Array(_(n),e>>>0,t>>>0))}function f_(){return L((function(n,e){return Reflect.has(_(n),_(e))}),arguments)}function __(){return L((function(n,e,t){return Reflect.set(_(n),_(e),_(t))}),arguments)}function c_(){return L((function(n){return o(JSON.stringify(_(n)))}),arguments)}function i_(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var _=e.length,c="[";_>0&&(c+=n(e[0]));for(var i=1;i<_;i++)c+=", "+n(e[i]);return c+="]"}var o,d=/\[object ([^\]]+)\]/.exec(toString.call(e));if(!(d.length>1))return toString.call(e);if("Object"==(o=d[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(_(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function o_(n,e){throw new Error(g(n,e))}function d_(){return o(u.j)}function a_(n,e,t){return o(x(n,e,180,S))}function b_(n,e,t){return o(x(n,e,180,S))}function g_(n,e,t){return o(x(n,e,180,S))}function w_(n,e,t){return o(x(n,e,180,S))}function l_(n,e,t){return o(x(n,e,180,S))}function s_(n,e,t){return o(x(n,e,180,S))}function m_(n,e,t){return o(x(n,e,180,S))}function v_(n,e,t){return o(x(n,e,180,S))}function y_(n,e,t){return o(x(n,e,180,A))}function p_(n,e,t){return o(x(n,e,342,P))}}.call(this,t(375)(n))},417:function(n,e,t){t(1)({target:"Reflect",stat:!0},{has:function(n,e){return e in n}})},454:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(365);r.l()}}]); \ No newline at end of file diff --git a/assets/js/39.4aa63fe8.js b/assets/js/40.d38c5ac2.js similarity index 99% rename from assets/js/39.4aa63fe8.js rename to assets/js/40.d38c5ac2.js index 7260eeb0..0096fab9 100644 --- a/assets/js/39.4aa63fe8.js +++ b/assets/js/40.d38c5ac2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{572:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"dependencies-and-the-window"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dependencies-and-the-window"}},[t._v("#")]),t._v(" Dependencies and the window")]),t._v(" "),a("h2",{attrs:{id:"boring-i-know"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boring-i-know"}},[t._v("#")]),t._v(" Boring, I know")]),t._v(" "),a("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 "),a("a",{attrs:{href:"https://github.com/rust-windowing/raw-window-handle",target:"_blank",rel:"noopener noreferrer"}},[t._v("raw-window-handle"),a("OutboundLink")],1),t._v(" crate.")]),t._v(" "),a("h2",{attrs:{id:"what-crates-are-we-using"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#what-crates-are-we-using"}},[t._v("#")]),t._v(" What crates are we using?")]),t._v(" "),a("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 "),a("code",[t._v("Cargo.toml")]),t._v(" bits below.")]),t._v(" "),a("div",{staticClass:"language-toml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-toml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.27"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.9"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),t._v("\n")])])]),a("h2",{attrs:{id:"using-rust-s-new-resolver"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#using-rust-s-new-resolver"}},[t._v("#")]),t._v(" Using Rust's new resolver")]),t._v(" "),a("p",[t._v("As of version 0.10, wgpu requires cargo's "),a("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"),a("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 "),a("code",[t._v('resolver = "2"')]),t._v(" in either the "),a("code",[t._v("[package]")]),t._v(" section of "),a("code",[t._v("Cargo.toml")]),t._v(" if you are working on a single crate, or the "),a("code",[t._v("[workspace]")]),t._v(" section of the root "),a("code",[t._v("Cargo.toml")]),t._v(" in a workspace.")]),t._v(" "),a("h2",{attrs:{id:"env-logger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#env-logger"}},[t._v("#")]),t._v(" env_logger")]),t._v(" "),a("p",[t._v("It is very important to enable logging via "),a("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 "),a("code",[t._v("env_logger::init()")]),t._v(", wgpu will fail silently, leaving you very confused!"),a("br"),t._v("\n(This has been done in the code below)")]),t._v(" "),a("h2",{attrs:{id:"create-a-new-project"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#create-a-new-project"}},[t._v("#")]),t._v(" Create a new project")]),t._v(" "),a("p",[t._v("run "),a("code",[t._v("cargo new project_name")]),t._v(" where project_name is the name of the project."),a("br"),t._v("\n(In the example below I have used 'tutorial1_window')")]),t._v(" "),a("h2",{attrs:{id:"the-code"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-code"}},[t._v("#")]),t._v(" The code")]),t._v(" "),a("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 "),a("code",[t._v("lib.rs")]),t._v(" or equivalent.")]),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("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),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 namespace"}},[t._v("event"),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 punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("event_loop"),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("ControlFlow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EventLoop")]),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 namespace"}},[t._v("window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowBuilder")]),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\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),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 "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("env_logger"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),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(" event_loop "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EventLoop")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),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(" window "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowBuilder")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),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("build")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("event_loop"),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 event_loop"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),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("ref")]),t._v(" event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n window_id"),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 keyword"}},[t._v("if")]),t._v(" window_id "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),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 keyword"}},[t._v("match")]),t._v(" event "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),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("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("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 operator"}},[t._v("*")]),t._v("control_flow "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),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("{")]),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 operator"}},[t._v("=>")]),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"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),a("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 "),a("code",[t._v("main.rs")]),t._v(" to run the code. It's quite simple, it just imports "),a("code",[t._v("run()")]),t._v(" and, well, runs it!")]),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("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tutorial1_window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("run"),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 function-definition function"}},[t._v("main")]),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 "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),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("\n")])])]),a("p",[t._v("(Where 'tutorial1_window' is the name of the project you created with cargo earlier)")]),t._v(" "),a("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(" "),a("h2",{attrs:{id:"added-support-for-the-web"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#added-support-for-the-web"}},[t._v("#")]),t._v(" Added support for the web")]),t._v(" "),a("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(" "),a("p",[t._v("Let's start with the changes we need to make to are "),a("code",[t._v("Cargo.toml")]),t._v(":")]),t._v(" "),a("div",{staticClass:"language-toml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-toml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("lib")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("crate-type")]),t._v(" "),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 string"}},[t._v('"cdylib"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rlib"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),a("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(" "),a("div",{staticClass:"note"},[a("h2",{attrs:{id:"web-assembly"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#web-assembly"}},[t._v("#")]),t._v(" Web Assembly")]),t._v(" "),a("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(" "),a("p",[t._v("Now, all we need are some more dependencies that are specific to running in WASM:")]),t._v(" "),a("div",{staticClass:"language-toml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-toml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cfg-if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# the other regular dependencies...")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("target.'cfg(target_arch = \"wasm32\")'.dependencies")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_error_panic_hook")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.1.6"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_log")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2.0"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),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(" "),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),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 string"}},[t._v('"webgl"')]),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 key property"}},[t._v("wasm-bindgen")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wasm-bindgen-futures")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4.30"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("web-sys")]),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(" "),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),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 "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Document"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Window"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Element"')]),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("p",[t._v("The "),a("a",{attrs:{href:"https://docs.rs/cfg-if",target:"_blank",rel:"noopener noreferrer"}},[t._v("cfg-if"),a("OutboundLink")],1),t._v(" crate adds a macro that makes using platform-specific code more manageable.")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("[target.'cfg(target_arch = \"wasm32\")'.dependencies]")]),t._v(" line tells cargo to only include these dependencies if we are targeting the "),a("code",[t._v("wasm32")]),t._v(" architecture. The next few dependencies just make interfacing with javascript a lot easier.")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://docs.rs/console_error_panic_hook",target:"_blank",rel:"noopener noreferrer"}},[t._v("console_error_panic_hook"),a("OutboundLink")],1),t._v(" configures the "),a("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(" "),a("li",[a("a",{attrs:{href:"https://docs.rs/console_log",target:"_blank",rel:"noopener noreferrer"}},[t._v("console_log"),a("OutboundLink")],1),t._v(" implements the "),a("a",{attrs:{href:"https://docs.rs/log",target:"_blank",rel:"noopener noreferrer"}},[t._v("log"),a("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(" "),a("li",[t._v("We need to enable 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."),a("br"),t._v("\nYou're welcome to test this code on these browsers (and the wgpu devs would appreciate it as well), but for sake of simplicity, I'm going to stick to using the WebGL feature until the WebGPU api gets to a more stable state."),a("br"),t._v("\nIf you want more details check out the guide for compiling for the web on "),a("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"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://docs.rs/wasm-bindgen",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen"),a("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."),a("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 "),a("a",{attrs:{href:"https://rustwasm.github.io/wasm-bindgen/",target:"_blank",rel:"noopener noreferrer"}},[t._v("this"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://docs.rs/web-sys",target:"_blank",rel:"noopener noreferrer"}},[t._v("web-sys"),a("OutboundLink")],1),t._v(" is a crate that includes many methods and structures that are available in a normal javascript application: "),a("code",[t._v("get_element_by_id")]),t._v(", "),a("code",[t._v("append_child")]),t._v(". The features listed are only the bare minimum of what we need currently.")])]),t._v(" "),a("h2",{attrs:{id:"more-code"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-code"}},[t._v("#")]),t._v(" More code")]),t._v(" "),a("p",[t._v("First, we need to import "),a("code",[t._v("wasm-bindgen")]),t._v(" in "),a("code",[t._v("lib.rs")]),t._v(":")]),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("#[cfg(target_arch="),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wasm_bindgen"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("prelude"),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 punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Next, we need to tell wasm-bindgen to run our "),a("code",[t._v("run()")]),t._v(" function when the WASM is loaded:")]),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("#[cfg_attr(target_arch="),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(", wasm_bindgen(start))]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),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 "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// same as above for now...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Then we need to toggle what logger we are using based on if we are in WASM land or not. Add the following to the top of the run function replacing the "),a("code",[t._v("env_logger::init()")]),t._v(" line:")]),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 namespace"}},[t._v("cfg_if"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg_if!")]),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("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("panic"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_hook")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Box")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("console_error_panic_hook"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("hook"),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 namespace"}},[t._v("console_log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init_with_level")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Level")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Warn")]),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("expect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Couldn\'t initialize logger"')]),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(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("env_logger"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),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("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("This will set up "),a("code",[t._v("console_log")]),t._v(" and "),a("code",[t._v("console_error_panic_hook")]),t._v(" in a web build, and will initialize "),a("code",[t._v("env_logger")]),t._v(" in a normal build. This is important as "),a("code",[t._v("env_logger")]),t._v(" doesn't support Web Assembly at the moment.")]),t._v(" "),a("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(" "),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("#[cfg(target_arch = "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Winit prevents sizing with CSS, so we have to set")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the size manually when on web.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_inner_size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("450")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("400")]),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("winit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("platform"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("web"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowExtWebSys")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("web_sys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),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 function"}},[t._v("and_then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("win"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" win"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("document")]),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 function"}},[t._v("and_then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("doc"),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 "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dst "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" doc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_element_by_id")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm-example"')]),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 punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" canvas "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("web_sys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Element")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("canvas")]),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 dst"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append_child")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("canvas"),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("ok")]),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 punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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 "),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 function"}},[t._v("expect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Couldn\'t append canvas to document body."')]),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("div",{staticClass:"note"},[a("p",[t._v("The "),a("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 "),a("code",[t._v("")]),t._v(" as they do in the wgpu repo. This part is ultimately up to you.")])]),t._v(" "),a("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(" "),a("h2",{attrs:{id:"wasm-pack"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wasm-pack"}},[t._v("#")]),t._v(" Wasm Pack")]),t._v(" "),a("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 "),a("strong",[t._v("needs")]),t._v(" to exactly match the version you installed, otherwise, your build will fail.")]),t._v(" "),a("p",[t._v("To get around this shortcoming, and to make the lives of everyone reading this easier, I opted to add "),a("a",{attrs:{href:"https://rustwasm.github.io/docs/wasm-pack/",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-pack"),a("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(" "),a("p",[t._v("To use wasm-pack, first, you need to "),a("a",{attrs:{href:"https://rustwasm.github.io/wasm-pack/installer/",target:"_blank",rel:"noopener noreferrer"}},[t._v("install it"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("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 "),a("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 "),a("code",[t._v("game")]),t._v(", you would use:")]),t._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[t._v("wasm-pack build game\n")])])]),a("p",[t._v("Once wasm-pack is done building you'll have a "),a("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(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" init "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./pkg/game.js'")]),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 function"}},[t._v("init")]),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("then")]),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 operator"}},[t._v("=>")]),t._v(" console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WASM Loaded"')]),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("This site uses "),a("a",{attrs:{href:"https://vuepress.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vuepress"),a("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 "),a("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/blob/master/docs/.vuepress/components/WasmExample.vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("this"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("div",{staticClass:"note"},[a("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(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[t._v("wasm-pack build --target web\n")])])]),a("p",[t._v("You'll then need to run the WASM code in an ES6 Module:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token doctype"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),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 tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("charset")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("UTF-8"),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 tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("http-equiv")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("X-UA-Compatible"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("IE=edge"),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 tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("viewport"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("width=device-width, initial-scale=1.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 tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Learn WGPU"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v("canvas")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" black"),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("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wasm-example"),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 tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("module"),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 script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" init "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pkg/pong.js"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),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("then")]),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 operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WASM Loaded"')]),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 ")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])]),t._v(" "),a("p",[t._v("Press the button below and you will see the code running!")]),t._v(" "),a("WasmExample",{attrs:{example:"tutorial1_window"}}),t._v(" "),a("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{575:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"dependencies-and-the-window"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dependencies-and-the-window"}},[t._v("#")]),t._v(" Dependencies and the window")]),t._v(" "),a("h2",{attrs:{id:"boring-i-know"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#boring-i-know"}},[t._v("#")]),t._v(" Boring, I know")]),t._v(" "),a("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 "),a("a",{attrs:{href:"https://github.com/rust-windowing/raw-window-handle",target:"_blank",rel:"noopener noreferrer"}},[t._v("raw-window-handle"),a("OutboundLink")],1),t._v(" crate.")]),t._v(" "),a("h2",{attrs:{id:"what-crates-are-we-using"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#what-crates-are-we-using"}},[t._v("#")]),t._v(" What crates are we using?")]),t._v(" "),a("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 "),a("code",[t._v("Cargo.toml")]),t._v(" bits below.")]),t._v(" "),a("div",{staticClass:"language-toml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-toml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("winit")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.27"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("env_logger")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.9"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("log")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),t._v("\n")])])]),a("h2",{attrs:{id:"using-rust-s-new-resolver"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#using-rust-s-new-resolver"}},[t._v("#")]),t._v(" Using Rust's new resolver")]),t._v(" "),a("p",[t._v("As of version 0.10, wgpu requires cargo's "),a("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"),a("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 "),a("code",[t._v('resolver = "2"')]),t._v(" in either the "),a("code",[t._v("[package]")]),t._v(" section of "),a("code",[t._v("Cargo.toml")]),t._v(" if you are working on a single crate, or the "),a("code",[t._v("[workspace]")]),t._v(" section of the root "),a("code",[t._v("Cargo.toml")]),t._v(" in a workspace.")]),t._v(" "),a("h2",{attrs:{id:"env-logger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#env-logger"}},[t._v("#")]),t._v(" env_logger")]),t._v(" "),a("p",[t._v("It is very important to enable logging via "),a("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 "),a("code",[t._v("env_logger::init()")]),t._v(", wgpu will fail silently, leaving you very confused!"),a("br"),t._v("\n(This has been done in the code below)")]),t._v(" "),a("h2",{attrs:{id:"create-a-new-project"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#create-a-new-project"}},[t._v("#")]),t._v(" Create a new project")]),t._v(" "),a("p",[t._v("run "),a("code",[t._v("cargo new project_name")]),t._v(" where project_name is the name of the project."),a("br"),t._v("\n(In the example below I have used 'tutorial1_window')")]),t._v(" "),a("h2",{attrs:{id:"the-code"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-code"}},[t._v("#")]),t._v(" The code")]),t._v(" "),a("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 "),a("code",[t._v("lib.rs")]),t._v(" or equivalent.")]),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("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),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 namespace"}},[t._v("event"),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 punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("event_loop"),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("ControlFlow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EventLoop")]),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 namespace"}},[t._v("window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowBuilder")]),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\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),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 "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("env_logger"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),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(" event_loop "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EventLoop")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),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(" window "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowBuilder")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),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("build")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("event_loop"),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 event_loop"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" _"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" control_flow"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("match")]),t._v(" event "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),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("ref")]),t._v(" event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n window_id"),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 keyword"}},[t._v("if")]),t._v(" window_id "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("id")]),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 keyword"}},[t._v("match")]),t._v(" event "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CloseRequested")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n input"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("KeyboardInput")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ElementState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Pressed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n virtual_keycode"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VirtualKeyCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Escape")]),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("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("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 operator"}},[t._v("*")]),t._v("control_flow "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ControlFlow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Exit")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),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("{")]),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 operator"}},[t._v("=>")]),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"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),a("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 "),a("code",[t._v("main.rs")]),t._v(" to run the code. It's quite simple, it just imports "),a("code",[t._v("run()")]),t._v(" and, well, runs it!")]),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("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("tutorial1_window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("run"),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 function-definition function"}},[t._v("main")]),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 "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),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("\n")])])]),a("p",[t._v("(Where 'tutorial1_window' is the name of the project you created with cargo earlier)")]),t._v(" "),a("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(" "),a("h2",{attrs:{id:"added-support-for-the-web"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#added-support-for-the-web"}},[t._v("#")]),t._v(" Added support for the web")]),t._v(" "),a("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(" "),a("p",[t._v("Let's start with the changes we need to make to are "),a("code",[t._v("Cargo.toml")]),t._v(":")]),t._v(" "),a("div",{staticClass:"language-toml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-toml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("lib")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("crate-type")]),t._v(" "),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 string"}},[t._v('"cdylib"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rlib"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),a("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(" "),a("div",{staticClass:"note"},[a("h2",{attrs:{id:"web-assembly"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#web-assembly"}},[t._v("#")]),t._v(" Web Assembly")]),t._v(" "),a("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(" "),a("p",[t._v("Now, all we need are some more dependencies that are specific to running in WASM:")]),t._v(" "),a("div",{staticClass:"language-toml extra-class"},[a("pre",{pre:!0,attrs:{class:"language-toml"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("dependencies")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("cfg-if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"1"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# the other regular dependencies...")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token table class-name"}},[t._v("target.'cfg(target_arch = \"wasm32\")'.dependencies")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_error_panic_hook")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.1.6"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("console_log")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2.0"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wgpu")]),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(" "),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.14"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),t._v(" "),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 string"}},[t._v('"webgl"')]),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 key property"}},[t._v("wasm-bindgen")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.2"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("wasm-bindgen-futures")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.4.30"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("web-sys")]),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(" "),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("version")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.3"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token key property"}},[t._v("features")]),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 "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Document"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Window"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Element"')]),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("p",[t._v("The "),a("a",{attrs:{href:"https://docs.rs/cfg-if",target:"_blank",rel:"noopener noreferrer"}},[t._v("cfg-if"),a("OutboundLink")],1),t._v(" crate adds a macro that makes using platform-specific code more manageable.")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("[target.'cfg(target_arch = \"wasm32\")'.dependencies]")]),t._v(" line tells cargo to only include these dependencies if we are targeting the "),a("code",[t._v("wasm32")]),t._v(" architecture. The next few dependencies just make interfacing with javascript a lot easier.")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://docs.rs/console_error_panic_hook",target:"_blank",rel:"noopener noreferrer"}},[t._v("console_error_panic_hook"),a("OutboundLink")],1),t._v(" configures the "),a("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(" "),a("li",[a("a",{attrs:{href:"https://docs.rs/console_log",target:"_blank",rel:"noopener noreferrer"}},[t._v("console_log"),a("OutboundLink")],1),t._v(" implements the "),a("a",{attrs:{href:"https://docs.rs/log",target:"_blank",rel:"noopener noreferrer"}},[t._v("log"),a("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(" "),a("li",[t._v("We need to enable 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."),a("br"),t._v("\nYou're welcome to test this code on these browsers (and the wgpu devs would appreciate it as well), but for sake of simplicity, I'm going to stick to using the WebGL feature until the WebGPU api gets to a more stable state."),a("br"),t._v("\nIf you want more details check out the guide for compiling for the web on "),a("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"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://docs.rs/wasm-bindgen",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen"),a("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."),a("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 "),a("a",{attrs:{href:"https://rustwasm.github.io/wasm-bindgen/",target:"_blank",rel:"noopener noreferrer"}},[t._v("this"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://docs.rs/web-sys",target:"_blank",rel:"noopener noreferrer"}},[t._v("web-sys"),a("OutboundLink")],1),t._v(" is a crate that includes many methods and structures that are available in a normal javascript application: "),a("code",[t._v("get_element_by_id")]),t._v(", "),a("code",[t._v("append_child")]),t._v(". The features listed are only the bare minimum of what we need currently.")])]),t._v(" "),a("h2",{attrs:{id:"more-code"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-code"}},[t._v("#")]),t._v(" More code")]),t._v(" "),a("p",[t._v("First, we need to import "),a("code",[t._v("wasm-bindgen")]),t._v(" in "),a("code",[t._v("lib.rs")]),t._v(":")]),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("#[cfg(target_arch="),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wasm_bindgen"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("prelude"),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 punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Next, we need to tell wasm-bindgen to run our "),a("code",[t._v("run()")]),t._v(" function when the WASM is loaded:")]),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("#[cfg_attr(target_arch="),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(", wasm_bindgen(start))]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("pub")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("run")]),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 "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// same as above for now...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Then we need to toggle what logger we are using based on if we are in WASM land or not. Add the following to the top of the run function replacing the "),a("code",[t._v("env_logger::init()")]),t._v(" line:")]),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 namespace"}},[t._v("cfg_if"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token macro property"}},[t._v("cfg_if!")]),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("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(target_arch = "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("std"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("panic"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_hook")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Box")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("console_error_panic_hook"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),t._v("hook"),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 namespace"}},[t._v("console_log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init_with_level")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Level")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Warn")]),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("expect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Couldn\'t initialize logger"')]),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(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("env_logger"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),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("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("This will set up "),a("code",[t._v("console_log")]),t._v(" and "),a("code",[t._v("console_error_panic_hook")]),t._v(" in a web build, and will initialize "),a("code",[t._v("env_logger")]),t._v(" in a normal build. This is important as "),a("code",[t._v("env_logger")]),t._v(" doesn't support Web Assembly at the moment.")]),t._v(" "),a("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(" "),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("#[cfg(target_arch = "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v(")]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Winit prevents sizing with CSS, so we have to set")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the size manually when on web.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("winit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("dpi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set_inner_size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PhysicalSize")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("450")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("400")]),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("winit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("platform"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("web"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WindowExtWebSys")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("web_sys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("window")]),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 function"}},[t._v("and_then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("win"),a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")])]),t._v(" win"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("document")]),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 function"}},[t._v("and_then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("doc"),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 "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" dst "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" doc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_element_by_id")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm-example"')]),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 punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" canvas "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("web_sys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Element")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("from")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("window"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("canvas")]),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 dst"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append_child")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("canvas"),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("ok")]),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 punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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 "),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 function"}},[t._v("expect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Couldn\'t append canvas to document body."')]),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("div",{staticClass:"note"},[a("p",[t._v("The "),a("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 "),a("code",[t._v("")]),t._v(" as they do in the wgpu repo. This part is ultimately up to you.")])]),t._v(" "),a("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(" "),a("h2",{attrs:{id:"wasm-pack"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wasm-pack"}},[t._v("#")]),t._v(" Wasm Pack")]),t._v(" "),a("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 "),a("strong",[t._v("needs")]),t._v(" to exactly match the version you installed, otherwise, your build will fail.")]),t._v(" "),a("p",[t._v("To get around this shortcoming, and to make the lives of everyone reading this easier, I opted to add "),a("a",{attrs:{href:"https://rustwasm.github.io/docs/wasm-pack/",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-pack"),a("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(" "),a("p",[t._v("To use wasm-pack, first, you need to "),a("a",{attrs:{href:"https://rustwasm.github.io/wasm-pack/installer/",target:"_blank",rel:"noopener noreferrer"}},[t._v("install it"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("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 "),a("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 "),a("code",[t._v("game")]),t._v(", you would use:")]),t._v(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[t._v("wasm-pack build game\n")])])]),a("p",[t._v("Once wasm-pack is done building you'll have a "),a("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(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" init "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./pkg/game.js'")]),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 function"}},[t._v("init")]),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("then")]),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 operator"}},[t._v("=>")]),t._v(" console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WASM Loaded"')]),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("This site uses "),a("a",{attrs:{href:"https://vuepress.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vuepress"),a("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 "),a("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu/blob/master/docs/.vuepress/components/WasmExample.vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("this"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("div",{staticClass:"note"},[a("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(" "),a("div",{staticClass:"language-bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[t._v("wasm-pack build --target web\n")])])]),a("p",[t._v("You'll then need to run the WASM code in an ES6 Module:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token doctype"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),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 tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("charset")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("UTF-8"),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 tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("http-equiv")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("X-UA-Compatible"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("IE=edge"),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 tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("meta")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("viewport"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("width=device-width, initial-scale=1.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 tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Learn WGPU"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v("canvas")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" black"),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("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wasm-example"),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 tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("module"),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 script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" init "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pkg/pong.js"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),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("then")]),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 operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WASM Loaded"')]),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 ")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])]),t._v(" "),a("p",[t._v("Press the button below and you will see the code running!")]),t._v(" "),a("WasmExample",{attrs:{example:"tutorial1_window"}}),t._v(" "),a("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/40.8f1c5e70.js b/assets/js/41.9da478f5.js similarity index 90% rename from assets/js/40.8f1c5e70.js rename to assets/js/41.9da478f5.js index e0fe63d8..798e2c36 100644 --- a/assets/js/40.8f1c5e70.js +++ b/assets/js/41.9da478f5.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{581:function(t,s,e){"use strict";e.r(s);var i=e(23),n=Object(i.a)({},(function(){var t=this.$createElement,s=this._self._c||t;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);s.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{584:function(t,s,e){"use strict";e.r(s);var i=e(23),n=Object(i.a)({},(function(){var t=this.$createElement,s=this._self._c||t;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);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/41.f2ce7221.js b/assets/js/42.e5816a32.js similarity index 98% rename from assets/js/41.f2ce7221.js rename to assets/js/42.e5816a32.js index 8860cec9..aa1a1a2b 100644 --- a/assets/js/41.f2ce7221.js +++ b/assets/js/42.e5816a32.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{586:function(t,e,a){"use strict";a.r(e);var s=a(23),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;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-text"}},[a("code",[t._v("[[block]]\nstruct Camera {\n view_pos: vec4,\n view_proj: mat4x4,\n}\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-text"}},[a("code",[t._v("struct Camera {\n view_pos: vec4,\n view_proj: mat4x4,\n}\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);e.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{589:function(t,e,a){"use strict";a.r(e);var s=a(23),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;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-text"}},[a("code",[t._v("[[block]]\nstruct Camera {\n view_pos: vec4,\n view_proj: mat4x4,\n}\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-text"}},[a("code",[t._v("struct Camera {\n view_pos: vec4,\n view_proj: mat4x4,\n}\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);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/42.9444bcb9.js b/assets/js/43.924905ff.js similarity index 99% rename from assets/js/42.9444bcb9.js rename to assets/js/43.924905ff.js index 49cc3eae..090950a5 100644 --- a/assets/js/42.9444bcb9.js +++ b/assets/js/43.924905ff.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{587:function(t,a,s){"use strict";s.r(a);var n=s(23),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"update-to-0-13"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-13"}},[t._v("#")]),t._v(" Update to 0.13!")]),t._v(" "),s("p",[s("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"),s("OutboundLink")],1)]),t._v(" "),s("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 "),s("code",[t._v("map_async()")]),t._v(" as that has changed. Previously "),s("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 "),s("code",[t._v("'static")]),t._v(" callback that takes the "),s("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(" "),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 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 keyword"}},[t._v("let")]),t._v(" mapping "),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 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 mapping"),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\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"),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("p",[t._v("We would do 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 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 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("p",[t._v("You can explore the reasoning for the change to "),s("code",[t._v("map_async")]),t._v(" in "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/pull/2698",target:"_blank",rel:"noopener noreferrer"}},[t._v("this PR"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("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 "),s("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()"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("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 "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn Wgpu repo"),s("OutboundLink")],1),t._v("!")])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{590:function(t,a,s){"use strict";s.r(a);var n=s(23),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"update-to-0-13"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-13"}},[t._v("#")]),t._v(" Update to 0.13!")]),t._v(" "),s("p",[s("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"),s("OutboundLink")],1)]),t._v(" "),s("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 "),s("code",[t._v("map_async()")]),t._v(" as that has changed. Previously "),s("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 "),s("code",[t._v("'static")]),t._v(" callback that takes the "),s("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(" "),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 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 keyword"}},[t._v("let")]),t._v(" mapping "),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 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 mapping"),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\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"),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("p",[t._v("We would do 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 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 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("p",[t._v("You can explore the reasoning for the change to "),s("code",[t._v("map_async")]),t._v(" in "),s("a",{attrs:{href:"https://github.com/gfx-rs/wgpu/pull/2698",target:"_blank",rel:"noopener noreferrer"}},[t._v("this PR"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("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 "),s("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()"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("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 "),s("a",{attrs:{href:"https://github.com/sotrh/learn-wgpu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Learn Wgpu repo"),s("OutboundLink")],1),t._v("!")])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/43.e076a900.js b/assets/js/44.1b27deea.js similarity index 98% rename from assets/js/43.e076a900.js rename to assets/js/44.1b27deea.js index 73bbab6a..b6ecddf7 100644 --- a/assets/js/43.e076a900.js +++ b/assets/js/44.1b27deea.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{588:function(t,a,s){"use strict";s.r(a);var n=s(23),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"update-to-0-14"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-14"}},[t._v("#")]),t._v(" Update to 0.14!")]),t._v(" "),s("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(" "),s("h2",{attrs:{id:"surfaceconfiguration-changes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#surfaceconfiguration-changes"}},[t._v("#")]),t._v(" SurfaceConfiguration changes")]),t._v(" "),s("p",[s("code",[t._v("SurfaceConfiguration")]),t._v(" now expects an "),s("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(" "),s("div",{staticClass:"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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),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("[")]),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 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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PresentMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompositeAlphaMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Auto")]),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("h2",{attrs:{id:"winit-updated"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#winit-updated"}},[t._v("#")]),t._v(" Winit updated")]),t._v(" "),s("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(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sudo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("apt")]),t._v(" "),s("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([[44],{591:function(t,a,s){"use strict";s.r(a);var n=s(23),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"update-to-0-14"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update-to-0-14"}},[t._v("#")]),t._v(" Update to 0.14!")]),t._v(" "),s("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(" "),s("h2",{attrs:{id:"surfaceconfiguration-changes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#surfaceconfiguration-changes"}},[t._v("#")]),t._v(" SurfaceConfiguration changes")]),t._v(" "),s("p",[s("code",[t._v("SurfaceConfiguration")]),t._v(" now expects an "),s("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(" "),s("div",{staticClass:"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"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get_supported_formats")]),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("[")]),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 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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PresentMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fifo")]),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(" "),s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CompositeAlphaMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Auto")]),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("h2",{attrs:{id:"winit-updated"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#winit-updated"}},[t._v("#")]),t._v(" Winit updated")]),t._v(" "),s("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(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sudo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("apt")]),t._v(" "),s("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/44.1fffcec3.js b/assets/js/45.582f637d.js similarity index 92% rename from assets/js/44.1fffcec3.js rename to assets/js/45.582f637d.js index abc4cf79..9a832259 100644 --- a/assets/js/44.1fffcec3.js +++ b/assets/js/45.582f637d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{590:function(e,t,o){"use strict";o.r(t);var s=o(23),r=Object(s.a)({},(function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[o("h1",{attrs:{id:"foreword"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#foreword"}},[e._v("#")]),e._v(" Foreword")]),e._v(" "),o("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 "),o("code",[e._v("wgpu")]),e._v(". I won't go over the specifics of creating "),o("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([[45],{593:function(e,t,o){"use strict";o.r(t);var s=o(23),r=Object(s.a)({},(function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[o("h1",{attrs:{id:"foreword"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#foreword"}},[e._v("#")]),e._v(" Foreword")]),e._v(" "),o("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 "),o("code",[e._v("wgpu")]),e._v(". I won't go over the specifics of creating "),o("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/45.9a1f2d9a.js b/assets/js/46.1b5427a5.js similarity index 99% rename from assets/js/45.9a1f2d9a.js rename to assets/js/46.1b5427a5.js index ab920331..91e7c996 100644 --- a/assets/js/45.9a1f2d9a.js +++ b/assets/js/46.1b5427a5.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{591:function(t,e,a){"use strict";a.r(e);var s=a(23),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"memory-layout-in-wgsl"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#memory-layout-in-wgsl"}},[t._v("#")]),t._v(" Memory Layout in WGSL")]),t._v(" "),a("div",{staticClass:"warn"},[a("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(" "),a("h2",{attrs:{id:"alignment-of-vertex-and-index-buffers"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment-of-vertex-and-index-buffers"}},[t._v("#")]),t._v(" Alignment of vertex and index buffers")]),t._v(" "),a("p",[t._v("Vertex buffers require defining a "),a("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(" "),a("p",[t._v("The Index Buffer uses the alignment of whatever primitive type you specify via the "),a("code",[t._v("IndexFormat")]),t._v(" you pass into "),a("code",[t._v("RenderEncoder::set_index_buffer()")]),t._v(".")]),t._v(" "),a("h2",{attrs:{id:"alignment-of-uniform-and-storage-buffers"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment-of-uniform-and-storage-buffers"}},[t._v("#")]),t._v(" Alignment of Uniform and Storage buffers")]),t._v(" "),a("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(" "),a("p",[t._v("Let's take a look at the following table:")]),t._v(" "),a("hr"),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Alignment in Bytes")]),t._v(" "),a("th",[t._v("Size in Bytes")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("scalar (i32, u32, f32)")]),t._v(" "),a("td",[t._v("4")]),t._v(" "),a("td",[t._v("4")])]),t._v(" "),a("tr",[a("td",[t._v("vec2")]),t._v(" "),a("td",[t._v("8")]),t._v(" "),a("td",[t._v("8")])]),t._v(" "),a("tr",[a("td",[t._v("vec3")]),t._v(" "),a("td",[a("strong",[t._v("16")])]),t._v(" "),a("td",[t._v("12")])]),t._v(" "),a("tr",[a("td",[t._v("vec4")]),t._v(" "),a("td",[t._v("16")]),t._v(" "),a("td",[t._v("16")])])])]),t._v(" "),a("p",[t._v("You can see for "),a("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 "),a("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/#seeing-the-light"}},[t._v("lighting tutorial")]),t._v(":")],1),t._v(" "),a("p",[t._v("You can see the full table of the alignments in section "),a("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"),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("struct Light {\n position: vec3,\n color: vec3,\n}\n")])])]),a("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(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("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")])])]),a("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(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("AlignOf(Light) \n = max(AlignOfMember(Light, position), AlignOfMember(Light, color))\n = max(16, 16)\n = 16\n")])])]),a("p",[t._v("This is why the "),a("code",[t._v("LightUniform")]),t._v(" has those padding fields. WGPU won't accept it if the data is not aligned correctly.")]),t._v(" "),a("h2",{attrs:{id:"how-to-deal-with-alignment-issues"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-to-deal-with-alignment-issues"}},[t._v("#")]),t._v(" How to deal with alignment issues")]),t._v(" "),a("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(" "),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("#[repr(C, align(16))]")]),t._v("\n"),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 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 punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("But this won't compile. The "),a("a",{attrs:{href:"https://docs.rs/bytemuck/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck crate"),a("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(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("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")])])]),a("h2",{attrs:{id:"additional-resources"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#additional-resources"}},[t._v("#")]),t._v(" Additional resources")]),t._v(" "),a("p",[t._v("If you're looking for more information check out the "),a("a",{attrs:{href:"https://gist.github.com/teoxoy/936891c16c2a3d1c3c5e7204ac6cd76c",target:"_blank",rel:"noopener noreferrer"}},[t._v("write-up"),a("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([[46],{594:function(t,e,a){"use strict";a.r(e);var s=a(23),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"memory-layout-in-wgsl"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#memory-layout-in-wgsl"}},[t._v("#")]),t._v(" Memory Layout in WGSL")]),t._v(" "),a("div",{staticClass:"warn"},[a("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(" "),a("h2",{attrs:{id:"alignment-of-vertex-and-index-buffers"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment-of-vertex-and-index-buffers"}},[t._v("#")]),t._v(" Alignment of vertex and index buffers")]),t._v(" "),a("p",[t._v("Vertex buffers require defining a "),a("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(" "),a("p",[t._v("The Index Buffer uses the alignment of whatever primitive type you specify via the "),a("code",[t._v("IndexFormat")]),t._v(" you pass into "),a("code",[t._v("RenderEncoder::set_index_buffer()")]),t._v(".")]),t._v(" "),a("h2",{attrs:{id:"alignment-of-uniform-and-storage-buffers"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment-of-uniform-and-storage-buffers"}},[t._v("#")]),t._v(" Alignment of Uniform and Storage buffers")]),t._v(" "),a("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(" "),a("p",[t._v("Let's take a look at the following table:")]),t._v(" "),a("hr"),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Alignment in Bytes")]),t._v(" "),a("th",[t._v("Size in Bytes")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("scalar (i32, u32, f32)")]),t._v(" "),a("td",[t._v("4")]),t._v(" "),a("td",[t._v("4")])]),t._v(" "),a("tr",[a("td",[t._v("vec2")]),t._v(" "),a("td",[t._v("8")]),t._v(" "),a("td",[t._v("8")])]),t._v(" "),a("tr",[a("td",[t._v("vec3")]),t._v(" "),a("td",[a("strong",[t._v("16")])]),t._v(" "),a("td",[t._v("12")])]),t._v(" "),a("tr",[a("td",[t._v("vec4")]),t._v(" "),a("td",[t._v("16")]),t._v(" "),a("td",[t._v("16")])])])]),t._v(" "),a("p",[t._v("You can see for "),a("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 "),a("RouterLink",{attrs:{to:"/intermediate/tutorial10-lighting/#seeing-the-light"}},[t._v("lighting tutorial")]),t._v(":")],1),t._v(" "),a("p",[t._v("You can see the full table of the alignments in section "),a("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"),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language-wgsl extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("struct Light {\n position: vec3,\n color: vec3,\n}\n")])])]),a("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(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("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")])])]),a("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(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("AlignOf(Light) \n = max(AlignOfMember(Light, position), AlignOfMember(Light, color))\n = max(16, 16)\n = 16\n")])])]),a("p",[t._v("This is why the "),a("code",[t._v("LightUniform")]),t._v(" has those padding fields. WGPU won't accept it if the data is not aligned correctly.")]),t._v(" "),a("h2",{attrs:{id:"how-to-deal-with-alignment-issues"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-to-deal-with-alignment-issues"}},[t._v("#")]),t._v(" How to deal with alignment issues")]),t._v(" "),a("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(" "),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("#[repr(C, align(16))]")]),t._v("\n"),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 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 punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("But this won't compile. The "),a("a",{attrs:{href:"https://docs.rs/bytemuck/",target:"_blank",rel:"noopener noreferrer"}},[t._v("bytemuck crate"),a("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(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("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")])])]),a("h2",{attrs:{id:"additional-resources"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#additional-resources"}},[t._v("#")]),t._v(" Additional resources")]),t._v(" "),a("p",[t._v("If you're looking for more information check out the "),a("a",{attrs:{href:"https://gist.github.com/teoxoy/936891c16c2a3d1c3c5e7204ac6cd76c",target:"_blank",rel:"noopener noreferrer"}},[t._v("write-up"),a("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/46.62b4be7a.js b/assets/js/47.4573b85b.js similarity index 99% rename from assets/js/46.62b4be7a.js rename to assets/js/47.4573b85b.js index 575cf2cc..42524230 100644 --- a/assets/js/46.62b4be7a.js +++ b/assets/js/47.4573b85b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{596:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"multi-threading-with-wgpu-and-rayon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multi-threading-with-wgpu-and-rayon"}},[t._v("#")]),t._v(" Multi-threading with Wgpu and Rayon")]),t._v(" "),a("div",{staticClass:"warn"},[a("p",[t._v("This example has not been tested on WASM. Rayon has support for multi threading on WASM via "),a("a",{attrs:{href:"https://docs.rs/crate/wasm-bindgen-rayon/latest",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen-rayon"),a("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(" "),a("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(" "),a("div",{staticClass:"note"},[a("p",[t._v("This example is based on the code for "),a("a",{attrs:{href:"../intermediate/tutorial12-camera"}},[t._v("tutorial12-camera")])])]),t._v(" "),a("div",{staticClass:"note"},[a("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(" "),a("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(" "),a("h2",{attrs:{id:"parallelizing-loading-models-and-textures"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parallelizing-loading-models-and-textures"}},[t._v("#")]),t._v(" Parallelizing loading models and textures")]),t._v(" "),a("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 "),a("code",[t._v("model.rs")]),t._v(". Let's first start with the materials. We'll convert the regular for loop into a "),a("code",[t._v("par_iter().map()")]),t._v(".")]),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 comment"}},[t._v("// resources.rs")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(not(target_arch="),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v("))]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("rayon"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IntoParallelIterator")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),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("pub")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AsRef")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[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("Device")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),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 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("Queue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),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 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("BindGroupLayout")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),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(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" materials "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" obj_materials"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("par_iter")]),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("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("mat"),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 "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We can also parallelize loading the textures!")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" textures "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),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("containing_folder"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),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 boolean"}},[t._v("false")]),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("containing_folder"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),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 boolean"}},[t._v("true")]),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 function"}},[t._v("par_iter")]),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("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),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 "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("is_normal_map"),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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),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("Result")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),a("span",{pre:!0,attrs:{class:"token operator"}},[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 punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Pop removes from the end of the list.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" textures"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pop")]),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 "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" textures"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pop")]),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 class-name"}},[t._v("Ok")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),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("}")]),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("collect")]),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("Result")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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 punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Next, we can update the meshes to be loaded in parallel.")]),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("impl")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),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("pub")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AsRef")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[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("Device")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),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 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("Queue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),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 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("BindGroupLayout")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),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(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" obj_models"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("par_iter")]),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("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("m"),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 "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices "),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 number"}},[t._v("0")]),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("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),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 number"}},[t._v("3")]),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("into_par_iter")]),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("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("i"),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 "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),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("[")]),t._v("\n m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),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(" "),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 m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),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(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token 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("\n m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),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(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),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 function"}},[t._v("into")]),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 tex_coords"),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 m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),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(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),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 punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),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(" "),a("span",{pre:!0,attrs:{class:"token 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 number"}},[t._v("1")]),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 function"}},[t._v("into")]),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 normal"),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 m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),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(" "),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 m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),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(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token 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("\n m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),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(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),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 function"}},[t._v("into")]),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 comment"}},[t._v("// We'll calculate these later")]),t._v("\n tangent"),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 number"}},[t._v("0.0")]),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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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 bitangent"),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 number"}},[t._v("0.0")]),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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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("\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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),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("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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 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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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 macro property"}},[t._v("format!")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),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("name"),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 comment"}},[t._v("// UPDATED!")]),t._v("\n contents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),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("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("BufferUsages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),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("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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),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("// ...")]),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("}")]),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("collect")]),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("Result")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),a("span",{pre:!0,attrs:{class:"token operator"}},[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 punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("We've parallelized loading the meshes, and making the vertex array for them. Probably a bit overkill, but "),a("code",[t._v("rayon")]),t._v(" should prevent us from using too many threads.")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("You'll notice that we didn't use "),a("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 "),a("code",[t._v("vertices")]),t._v(". I don't feel like introducing a "),a("code",[t._v("std::sync::Mutex")]),t._v(", so I'll leave it for now.")]),t._v(" "),a("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(" "),a("h2",{attrs:{id:"it-s-that-easy"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#it-s-that-easy"}},[t._v("#")]),t._v(" It's that easy!")]),t._v(" "),a("p",[t._v("Most of the "),a("code",[t._v("wgpu")]),t._v(" types are "),a("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(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("Elapsed (Original): 309.596382ms\nElapsed (Threaded): 199.645027ms\n")])])]),a("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(" "),a("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{599:function(t,s,a){"use strict";a.r(s);var n=a(23),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"multi-threading-with-wgpu-and-rayon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multi-threading-with-wgpu-and-rayon"}},[t._v("#")]),t._v(" Multi-threading with Wgpu and Rayon")]),t._v(" "),a("div",{staticClass:"warn"},[a("p",[t._v("This example has not been tested on WASM. Rayon has support for multi threading on WASM via "),a("a",{attrs:{href:"https://docs.rs/crate/wasm-bindgen-rayon/latest",target:"_blank",rel:"noopener noreferrer"}},[t._v("wasm-bindgen-rayon"),a("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(" "),a("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(" "),a("div",{staticClass:"note"},[a("p",[t._v("This example is based on the code for "),a("a",{attrs:{href:"../intermediate/tutorial12-camera"}},[t._v("tutorial12-camera")])])]),t._v(" "),a("div",{staticClass:"note"},[a("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(" "),a("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(" "),a("h2",{attrs:{id:"parallelizing-loading-models-and-textures"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parallelizing-loading-models-and-textures"}},[t._v("#")]),t._v(" Parallelizing loading models and textures")]),t._v(" "),a("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 "),a("code",[t._v("model.rs")]),t._v(". Let's first start with the materials. We'll convert the regular for loop into a "),a("code",[t._v("par_iter().map()")]),t._v(".")]),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 comment"}},[t._v("// resources.rs")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[t._v("#[cfg(not(target_arch="),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wasm32"')]),t._v("))]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("use")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("rayon"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("iter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IntoParallelIterator")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("impl")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),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("pub")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AsRef")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[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("Device")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),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 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("Queue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),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 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("BindGroupLayout")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),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(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" materials "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" obj_materials"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("par_iter")]),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("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("mat"),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 "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// We can also parallelize loading the textures!")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" textures "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),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("containing_folder"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("diffuse_texture"),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 boolean"}},[t._v("false")]),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("containing_folder"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normal_texture"),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 boolean"}},[t._v("true")]),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 function"}},[t._v("par_iter")]),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("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token closure-params"}},[a("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[t._v("|")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("texture_path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" is_normal_map"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),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 "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("texture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Texture")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" queue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" texture_path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v("is_normal_map"),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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),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("Result")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),a("span",{pre:!0,attrs:{class:"token operator"}},[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 punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Pop removes from the end of the list.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" normal_texture "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" textures"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pop")]),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 "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" diffuse_texture "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" textures"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pop")]),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 class-name"}},[t._v("Ok")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("new")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v("mat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n diffuse_texture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n normal_texture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),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("}")]),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("collect")]),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("Result")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Material")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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 punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Next, we can update the meshes to be loaded in parallel.")]),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("impl")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Model")]),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("pub")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("fn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-definition function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AsRef")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[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("Device")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n queue"),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 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("Queue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n layout"),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 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("BindGroupLayout")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("P")]),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(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Result")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("Self")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" meshes "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" obj_models"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("par_iter")]),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("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("m"),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 "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("mut")]),t._v(" vertices "),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 number"}},[t._v("0")]),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("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("len")]),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 number"}},[t._v("3")]),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("into_par_iter")]),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("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("i"),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 "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModelVertex")]),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("[")]),t._v("\n m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),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(" "),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 m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),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(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token 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("\n m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("positions"),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(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),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 function"}},[t._v("into")]),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 tex_coords"),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 m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),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(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),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 punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("texcoords"),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(" "),a("span",{pre:!0,attrs:{class:"token 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 number"}},[t._v("1")]),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 function"}},[t._v("into")]),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 normal"),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 m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),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(" "),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 m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),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(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token 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("\n m"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normals"),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(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),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 function"}},[t._v("into")]),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 comment"}},[t._v("// We'll calculate these later")]),t._v("\n tangent"),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 number"}},[t._v("0.0")]),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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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 bitangent"),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 number"}},[t._v("0.0")]),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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("into")]),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("\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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("collect")]),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("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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 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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" index_buffer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("create_buffer_init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wgpu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),t._v("util"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BufferInitDescriptor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Some")]),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 macro property"}},[t._v("format!")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{:?} Index Buffer"')]),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("name"),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 comment"}},[t._v("// UPDATED!")]),t._v("\n contents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bytemuck"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")])]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("cast_slice")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),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("mesh"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("indices"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("BufferUsages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("::")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INDEX")]),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("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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// UPDATED!")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ok")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mesh")]),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("// ...")]),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("}")]),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("collect")]),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("Result")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vec")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("_"),a("span",{pre:!0,attrs:{class:"token operator"}},[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 punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[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("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("We've parallelized loading the meshes, and making the vertex array for them. Probably a bit overkill, but "),a("code",[t._v("rayon")]),t._v(" should prevent us from using too many threads.")]),t._v(" "),a("div",{staticClass:"note"},[a("p",[t._v("You'll notice that we didn't use "),a("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 "),a("code",[t._v("vertices")]),t._v(". I don't feel like introducing a "),a("code",[t._v("std::sync::Mutex")]),t._v(", so I'll leave it for now.")]),t._v(" "),a("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(" "),a("h2",{attrs:{id:"it-s-that-easy"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#it-s-that-easy"}},[t._v("#")]),t._v(" It's that easy!")]),t._v(" "),a("p",[t._v("Most of the "),a("code",[t._v("wgpu")]),t._v(" types are "),a("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(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("Elapsed (Original): 309.596382ms\nElapsed (Threaded): 199.645027ms\n")])])]),a("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(" "),a("AutoGithubLink")],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/47.5bfa960c.js b/assets/js/48.2512ae5c.js similarity index 87% rename from assets/js/47.5bfa960c.js rename to assets/js/48.2512ae5c.js index 9731355a..080441e3 100644 --- a/assets/js/47.5bfa960c.js +++ b/assets/js/48.2512ae5c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{598:function(t,s,n){"use strict";n.r(s);var e=n(23),o=Object(e.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"coming-soon"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#coming-soon"}},[this._v("#")]),this._v(" Coming Soon!")]),this._v(" "),s("p",[this._v("This section has not yet been completed.")])])}),[],!1,null,null,null);s.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{601:function(t,s,n){"use strict";n.r(s);var e=n(23),o=Object(e.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"coming-soon"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#coming-soon"}},[this._v("#")]),this._v(" Coming Soon!")]),this._v(" "),s("p",[this._v("This section has not yet been completed.")])])}),[],!1,null,null,null);s.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/48.4502bb84.js b/assets/js/49.b549b904.js similarity index 99% rename from assets/js/48.4502bb84.js rename to assets/js/49.b549b904.js index 7486ff15..bc5ac9a9 100644 --- a/assets/js/48.4502bb84.js +++ b/assets/js/49.b549b904.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{545:function(_,e,n){"use strict";n.r(e);var b=n(452),r=n(363);n.d(e,"run",(function(){return r.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return r.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_string_new",(function(){return r.__wbindgen_string_new})),n.d(e,"__wbindgen_object_clone_ref",(function(){return r.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return r.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_get",(function(){return r.__wbindgen_string_get})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return r.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return r.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return r.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return r.__wbg_fetch_386f87a3ebf5003c})),n.d(e,"__wbindgen_number_get",(function(){return r.__wbindgen_number_get})),n.d(e,"__wbindgen_boolean_get",(function(){return r.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return r.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return r.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return r.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return r.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return r.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return r.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return r.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return r.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return r.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return r.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return r.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return r.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return r.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return r.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return r.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return r.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return r.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return r.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return r.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return r.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return r.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return r.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return r.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return r.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return r.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return r.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return r.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return r.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return r.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return r.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return r.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return r.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return r.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return r.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return r.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return r.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return r.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return r.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return r.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return r.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return r.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return r.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return r.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return r.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return r.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return r.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return r.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return r.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return r.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return r.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return r.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return r.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return r.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return r.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return r.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return r.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return r.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return r.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return r.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return r.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return r.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return r.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return r.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return r.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return r.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return r.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return r.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return r.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return r.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return r.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return r.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return r.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return r.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return r.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return r.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return r.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return r.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return r.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return r.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return r.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return r.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return r.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return r.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return r.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return r.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return r.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return r.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return r.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return r.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return r.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return r.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return r.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return r.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return r.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return r.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return r.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return r.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return r.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return r.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return r.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return r.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return r.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return r.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return r.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return r.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return r.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return r.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return r.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return r.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return r.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return r.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return r.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return r.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return r.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return r.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return r.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return r.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return r.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return r.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return r.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return r.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return r.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return r.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return r.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return r.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return r.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return r.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return r.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return r.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return r.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return r.__wbg_location_8cc8ccf27e342c0a})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return r.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return r.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return r.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return r.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return r.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return r.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return r.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return r.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return r.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return r.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return r.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return r.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return r.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return r.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return r.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return r.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return r.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return r.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return r.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return r.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return r.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return r.__wbg_newwithstrandinit_05d7180788420c40})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return r.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return r.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return r.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return r.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return r.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return r.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return r.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return r.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return r.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return r.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return r.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return r.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return r.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return r.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return r.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return r.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return r.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return r.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return r.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return r.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return r.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return r.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return r.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return r.__wbg_name_2473476082bed625})),n.d(e,"__wbg_body_3cb4b4042b9a632b",(function(){return r.__wbg_body_3cb4b4042b9a632b})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return r.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return r.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return r.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return r.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return r.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return r.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return r.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return r.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return r.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return r.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return r.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return r.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return r.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return r.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return r.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return r.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return r.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return r.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return r.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return r.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return r.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return r.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return r.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return r.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return r.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return r.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return r.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return r.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return r.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return r.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return r.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return r.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return r.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return r.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return r.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return r.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return r.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return r.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return r.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return r.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return r.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return r.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return r.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return r.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return r.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return r.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return r.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return r.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return r.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return r.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return r.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return r.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return r.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return r.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return r.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return r.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return r.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return r.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return r.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return r.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return r.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return r.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return r.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return r.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return r.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return r.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return r.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return r.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return r.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return r.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return r.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return r.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return r.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return r.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return r.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return r.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return r.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return r.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return r.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return r.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return r.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return r.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return r.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return r.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return r.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return r.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return r.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return r.__wbg_fetch_749a56934f95c96c})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return r.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return r.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return r.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return r.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return r.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return r.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return r.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return r.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return r.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_origin_486b350035be1f11",(function(){return r.__wbg_origin_486b350035be1f11})),n.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return r.__wbg_instanceof_Response_eaa426220848a39e})),n.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return r.__wbg_url_74285ddf2747cb3d})),n.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return r.__wbg_status_c4ef3dd591e63435})),n.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return r.__wbg_headers_fd64ad685cf22e5d})),n.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return r.__wbg_arrayBuffer_4c27b6f00c530232})),n.d(e,"__wbg_text_1169d752cc697903",(function(){return r.__wbg_text_1169d752cc697903})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return r.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return r.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return r.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return r.__wbg_new_2d0053ee81e4dd2a})),n.d(e,"__wbg_append_de37df908812970d",(function(){return r.__wbg_append_de37df908812970d})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return r.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return r.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return r.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return r.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return r.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return r.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return r.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return r.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return r.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return r.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return r.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return r.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return r.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return r.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return r.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return r.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return r.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return r.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbindgen_is_function",(function(){return r.__wbindgen_is_function})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return r.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbindgen_is_object",(function(){return r.__wbindgen_is_object})),n.d(e,"__wbg_next_579e583d33566a86",(function(){return r.__wbg_next_579e583d33566a86})),n.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return r.__wbg_next_aaef7c8aa5e212ac})),n.d(e,"__wbg_done_1b73b0672e15f234",(function(){return r.__wbg_done_1b73b0672e15f234})),n.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return r.__wbg_value_1ccc36bc03462d71})),n.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return r.__wbg_iterator_6f9d4f28845f426c})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return r.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return r.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return r.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return r.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return r.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return r.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return r.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return r.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return r.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return r.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return r.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return r.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return r.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return r.__wbg_then_cedad20fbbd9418a})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return r.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return r.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return r.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return r.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return r.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_new_8c3f0052272a457a",(function(){return r.__wbg_new_8c3f0052272a457a})),n.d(e,"__wbg_set_83db9690f9353e79",(function(){return r.__wbg_set_83db9690f9353e79})),n.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return r.__wbg_length_9e1ae1900cb0fbd5})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return r.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return r.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_has_8359f114ce042f5a",(function(){return r.__wbg_has_8359f114ce042f5a})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return r.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return r.__wbg_stringify_d6471d300ded9b68})),n.d(e,"__wbindgen_debug_string",(function(){return r.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return r.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return r.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper836",(function(){return r.__wbindgen_closure_wrapper836})),n.d(e,"__wbindgen_closure_wrapper838",(function(){return r.__wbindgen_closure_wrapper838})),n.d(e,"__wbindgen_closure_wrapper840",(function(){return r.__wbindgen_closure_wrapper840})),n.d(e,"__wbindgen_closure_wrapper842",(function(){return r.__wbindgen_closure_wrapper842})),n.d(e,"__wbindgen_closure_wrapper844",(function(){return r.__wbindgen_closure_wrapper844})),n.d(e,"__wbindgen_closure_wrapper846",(function(){return r.__wbindgen_closure_wrapper846})),n.d(e,"__wbindgen_closure_wrapper848",(function(){return r.__wbindgen_closure_wrapper848})),n.d(e,"__wbindgen_closure_wrapper850",(function(){return r.__wbindgen_closure_wrapper850})),n.d(e,"__wbindgen_closure_wrapper852",(function(){return r.__wbindgen_closure_wrapper852})),n.d(e,"__wbindgen_closure_wrapper1140",(function(){return r.__wbindgen_closure_wrapper1140})),b.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{547:function(_,e,n){"use strict";n.r(e);var b=n(453),r=n(363);n.d(e,"run",(function(){return r.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return r.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_string_new",(function(){return r.__wbindgen_string_new})),n.d(e,"__wbindgen_object_clone_ref",(function(){return r.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return r.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_get",(function(){return r.__wbindgen_string_get})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return r.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return r.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return r.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return r.__wbg_fetch_386f87a3ebf5003c})),n.d(e,"__wbindgen_number_get",(function(){return r.__wbindgen_number_get})),n.d(e,"__wbindgen_boolean_get",(function(){return r.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return r.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return r.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return r.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return r.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return r.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return r.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return r.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return r.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return r.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return r.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return r.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return r.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return r.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return r.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return r.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return r.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return r.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return r.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return r.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return r.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return r.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return r.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return r.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return r.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return r.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return r.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return r.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return r.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return r.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return r.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return r.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return r.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return r.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return r.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return r.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return r.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return r.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return r.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return r.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return r.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return r.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return r.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return r.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return r.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return r.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return r.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return r.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return r.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return r.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return r.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return r.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return r.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return r.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return r.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return r.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return r.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return r.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return r.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return r.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return r.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return r.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return r.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return r.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return r.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return r.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return r.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return r.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return r.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return r.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return r.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return r.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return r.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return r.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return r.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return r.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return r.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return r.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return r.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return r.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return r.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return r.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return r.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return r.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return r.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return r.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return r.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return r.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return r.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return r.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return r.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return r.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return r.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return r.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return r.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return r.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return r.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return r.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return r.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return r.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return r.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return r.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return r.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return r.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return r.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return r.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return r.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return r.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return r.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return r.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return r.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return r.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return r.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return r.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return r.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return r.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return r.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return r.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return r.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return r.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return r.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return r.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return r.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return r.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return r.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return r.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return r.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return r.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return r.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return r.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return r.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return r.__wbg_location_8cc8ccf27e342c0a})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return r.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return r.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return r.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return r.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return r.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return r.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return r.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return r.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return r.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return r.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return r.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return r.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return r.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return r.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return r.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return r.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return r.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return r.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return r.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return r.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return r.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return r.__wbg_newwithstrandinit_05d7180788420c40})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return r.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return r.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return r.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return r.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return r.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return r.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return r.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return r.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return r.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return r.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return r.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return r.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return r.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return r.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return r.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return r.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return r.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return r.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return r.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return r.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return r.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return r.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return r.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return r.__wbg_name_2473476082bed625})),n.d(e,"__wbg_body_3cb4b4042b9a632b",(function(){return r.__wbg_body_3cb4b4042b9a632b})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return r.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return r.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return r.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return r.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return r.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return r.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return r.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return r.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return r.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return r.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return r.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return r.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return r.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return r.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return r.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return r.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return r.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return r.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return r.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return r.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return r.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return r.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return r.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return r.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return r.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return r.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return r.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return r.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return r.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return r.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return r.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return r.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return r.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return r.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return r.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return r.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return r.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return r.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return r.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return r.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return r.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return r.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return r.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return r.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return r.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return r.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return r.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return r.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return r.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return r.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return r.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return r.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return r.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return r.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return r.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return r.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return r.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return r.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return r.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return r.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return r.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return r.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return r.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return r.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return r.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return r.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return r.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return r.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return r.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return r.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return r.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return r.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return r.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return r.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return r.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return r.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return r.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return r.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return r.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return r.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return r.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return r.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return r.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return r.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return r.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return r.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return r.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return r.__wbg_fetch_749a56934f95c96c})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return r.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return r.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return r.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return r.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return r.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return r.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return r.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return r.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return r.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_origin_486b350035be1f11",(function(){return r.__wbg_origin_486b350035be1f11})),n.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return r.__wbg_instanceof_Response_eaa426220848a39e})),n.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return r.__wbg_url_74285ddf2747cb3d})),n.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return r.__wbg_status_c4ef3dd591e63435})),n.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return r.__wbg_headers_fd64ad685cf22e5d})),n.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return r.__wbg_arrayBuffer_4c27b6f00c530232})),n.d(e,"__wbg_text_1169d752cc697903",(function(){return r.__wbg_text_1169d752cc697903})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return r.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return r.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return r.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return r.__wbg_new_2d0053ee81e4dd2a})),n.d(e,"__wbg_append_de37df908812970d",(function(){return r.__wbg_append_de37df908812970d})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return r.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return r.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return r.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return r.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return r.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return r.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return r.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return r.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return r.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return r.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return r.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return r.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return r.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return r.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return r.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return r.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return r.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return r.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbindgen_is_function",(function(){return r.__wbindgen_is_function})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return r.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbindgen_is_object",(function(){return r.__wbindgen_is_object})),n.d(e,"__wbg_next_579e583d33566a86",(function(){return r.__wbg_next_579e583d33566a86})),n.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return r.__wbg_next_aaef7c8aa5e212ac})),n.d(e,"__wbg_done_1b73b0672e15f234",(function(){return r.__wbg_done_1b73b0672e15f234})),n.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return r.__wbg_value_1ccc36bc03462d71})),n.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return r.__wbg_iterator_6f9d4f28845f426c})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return r.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return r.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return r.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return r.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return r.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return r.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return r.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return r.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return r.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return r.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return r.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return r.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return r.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return r.__wbg_then_cedad20fbbd9418a})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return r.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return r.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return r.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return r.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return r.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_new_8c3f0052272a457a",(function(){return r.__wbg_new_8c3f0052272a457a})),n.d(e,"__wbg_set_83db9690f9353e79",(function(){return r.__wbg_set_83db9690f9353e79})),n.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return r.__wbg_length_9e1ae1900cb0fbd5})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return r.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return r.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_has_8359f114ce042f5a",(function(){return r.__wbg_has_8359f114ce042f5a})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return r.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return r.__wbg_stringify_d6471d300ded9b68})),n.d(e,"__wbindgen_debug_string",(function(){return r.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return r.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return r.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper836",(function(){return r.__wbindgen_closure_wrapper836})),n.d(e,"__wbindgen_closure_wrapper838",(function(){return r.__wbindgen_closure_wrapper838})),n.d(e,"__wbindgen_closure_wrapper840",(function(){return r.__wbindgen_closure_wrapper840})),n.d(e,"__wbindgen_closure_wrapper842",(function(){return r.__wbindgen_closure_wrapper842})),n.d(e,"__wbindgen_closure_wrapper844",(function(){return r.__wbindgen_closure_wrapper844})),n.d(e,"__wbindgen_closure_wrapper846",(function(){return r.__wbindgen_closure_wrapper846})),n.d(e,"__wbindgen_closure_wrapper848",(function(){return r.__wbindgen_closure_wrapper848})),n.d(e,"__wbindgen_closure_wrapper850",(function(){return r.__wbindgen_closure_wrapper850})),n.d(e,"__wbindgen_closure_wrapper852",(function(){return r.__wbindgen_closure_wrapper852})),n.d(e,"__wbindgen_closure_wrapper1140",(function(){return r.__wbindgen_closure_wrapper1140})),b.f()}}]); \ No newline at end of file diff --git a/assets/js/5.62e47561.js b/assets/js/5.62e47561.js new file mode 100644 index 00000000..397c0655 --- /dev/null +++ b/assets/js/5.62e47561.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{366:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_string_new",(function(){return k})),t.d(e,"__wbindgen_object_clone_ref",(function(){return R})),t.d(e,"__wbindgen_cb_drop",(function(){return O})),t.d(e,"__wbindgen_string_get",(function(){return C})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return U})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return j})),t.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return q})),t.d(e,"__wbindgen_number_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return G})),t.d(e,"__wbindgen_number_new",(function(){return W})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return N})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return H})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return J})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return z})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return Z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return $})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return nn})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return en})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return tn})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return rn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return on})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return dn})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return bn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return gn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return wn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return ln})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return sn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return mn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return vn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return yn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return pn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return hn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return Sn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return An})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Pn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return In})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Dn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return Fn})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return En})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Tn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Bn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Ln})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Mn})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return kn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return Rn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return On})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Un})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return jn})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Gn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Wn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Nn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Jn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return zn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return $n})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return ne})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ee})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return te})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return re})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return ue})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return fe})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return ce})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return _e})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ie})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return oe})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return de})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return be})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ge})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return we})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return le})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return se})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return me})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ve})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ye})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return pe})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return he})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return Se})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Ae})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Pe})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Ie})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return De})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Fe})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Ee})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Te})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Be})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Le})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Me})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return ke})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return Re})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Oe})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ce})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ue})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return je})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Ge})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return We})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ne})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return He})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return Je})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return ze})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return $e})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return nt})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return et})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return tt})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return rt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return ut})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ft})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ct})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return _t})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return it})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return ot})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return dt})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return bt})),t.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return gt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return wt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return lt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return st})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return mt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return vt})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return yt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return pt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return ht})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return xt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return St})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return At})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Pt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return It})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Dt})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Ft})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Et})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Tt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Bt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Lt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Mt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return kt})),t.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return Rt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ot})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ct})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Ut})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Vt})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return jt})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return qt})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return Kt})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Gt})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return Wt})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Nt})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Qt})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Xt})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Yt})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Ht})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Jt})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return zt})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Zt})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return $t})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return nr})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return er})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return tr})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return rr})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ur})),t.d(e,"__wbg_name_2473476082bed625",(function(){return fr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return cr})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return _r})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return ir})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return or})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return dr})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return ar})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return br})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return gr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return wr})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return lr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return sr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return mr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return vr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return yr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return pr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return hr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return xr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return Sr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return Ar})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Pr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Fr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Er})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Tr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Br})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Lr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Mr})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return kr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Rr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Or})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Cr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Ur})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Vr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return jr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return qr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Kr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Gr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Wr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Nr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Qr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Xr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Yr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Hr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Jr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return zr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Zr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return $r})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return nu})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return eu})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return tu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return ru})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return uu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return fu})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return cu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return _u})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return iu})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return ou})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return du})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return au})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return bu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return gu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return wu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return lu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return su})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return mu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return vu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return yu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return pu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return hu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return xu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return Su})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return Au})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Pu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Iu})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Du})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Fu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Eu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Tu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Bu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Lu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Mu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return ku})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Ru})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Ou})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Cu})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Uu})),t.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return Vu})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return ju})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return qu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Ku})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Gu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Wu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Nu})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Qu})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Xu})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Yu})),t.d(e,"__wbg_origin_486b350035be1f11",(function(){return Hu})),t.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return Ju})),t.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return zu})),t.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return Zu})),t.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return $u})),t.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return nf})),t.d(e,"__wbg_text_1169d752cc697903",(function(){return ef})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return tf})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return rf})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return uf})),t.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return ff})),t.d(e,"__wbg_append_de37df908812970d",(function(){return cf})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return _f})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return of})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return df})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return af})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return bf})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return gf})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return wf})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return lf})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return sf})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return mf})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return vf})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return yf})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return pf})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return hf})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return xf})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Sf})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return Af})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return Pf})),t.d(e,"__wbindgen_is_function",(function(){return If})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return Df})),t.d(e,"__wbindgen_is_object",(function(){return Ff})),t.d(e,"__wbg_next_579e583d33566a86",(function(){return Ef})),t.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return Tf})),t.d(e,"__wbg_done_1b73b0672e15f234",(function(){return Bf})),t.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return Lf})),t.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return Mf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return kf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return Rf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return Of})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return Cf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return Uf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return Vf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return jf})),t.d(e,"__wbindgen_is_undefined",(function(){return qf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return Kf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Gf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Wf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Nf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Qf})),t.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return Xf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Yf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Jf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return zf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Zf})),t.d(e,"__wbg_new_8c3f0052272a457a",(function(){return $f})),t.d(e,"__wbg_set_83db9690f9353e79",(function(){return nc})),t.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return ec})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return tc})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return rc})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return uc})),t.d(e,"__wbg_has_8359f114ce042f5a",(function(){return fc})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return cc})),t.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return _c})),t.d(e,"__wbindgen_debug_string",(function(){return ic})),t.d(e,"__wbindgen_throw",(function(){return oc})),t.d(e,"__wbindgen_memory",(function(){return dc})),t.d(e,"__wbindgen_closure_wrapper765",(function(){return ac})),t.d(e,"__wbindgen_closure_wrapper767",(function(){return bc})),t.d(e,"__wbindgen_closure_wrapper769",(function(){return gc})),t.d(e,"__wbindgen_closure_wrapper771",(function(){return wc})),t.d(e,"__wbindgen_closure_wrapper773",(function(){return lc})),t.d(e,"__wbindgen_closure_wrapper775",(function(){return sc})),t.d(e,"__wbindgen_closure_wrapper777",(function(){return mc})),t.d(e,"__wbindgen_closure_wrapper779",(function(){return vc})),t.d(e,"__wbindgen_closure_wrapper781",(function(){return yc})),t.d(e,"__wbindgen_closure_wrapper1116",(function(){return pc}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(61),t(411),t(412),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(97),t(18),t(25),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(418),t(416),t(464)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}var o=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});o.decode();var d=new Uint8Array;function a(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function b(n,e){return o.decode(a().subarray(n,n+e))}function g(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return a().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,c=e(f),_=a(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var d=a().subarray(c+i,c+f);i+=s(n,d).written}return w=i,c}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function H(n,e){c(n).bindVertexArray(c(e))}function J(n,e,t,r,u,f,_,i,o,d,a){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,d>>>0,a>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function Z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function $(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function nn(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function en(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,F(r,u))}function tn(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,E(r,u))}function rn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function un(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function fn(n,e,t,r,u,f,_,i,o,d){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,d)}function cn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function _n(n,e,t,r,u,f,_,i,o,d,a,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a,b)}function on(n,e,t,r,u,f,_,i,o,d,a){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,c(a))}function dn(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,d){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d)}function bn(n){var e=c(n).createSampler();return v(e)?0:g(e)}function gn(n){var e=c(n).createVertexArray();return v(e)?0:g(e)}function wn(n,e){c(n).deleteQuery(c(e))}function ln(n,e){c(n).deleteSampler(c(e))}function sn(n,e){c(n).deleteSync(c(e))}function mn(n,e){c(n).deleteVertexArray(c(e))}function vn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function yn(n,e){c(n).drawBuffers(c(e))}function pn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function hn(n,e){c(n).endQuery(e>>>0)}function xn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return v(r)?0:g(r)}function Sn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function An(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function Pn(){return L((function(n,e,t){return g(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function In(n,e,t){return g(c(n).getQueryParameter(c(e),t>>>0))}function Dn(n,e,t){return g(c(n).getSyncParameter(c(e),t>>>0))}function Fn(n,e,t,r){return c(n).getUniformBlockIndex(c(e),b(t,r))}function En(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function Tn(n,e){c(n).readBuffer(e>>>0)}function Bn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Ln(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Mn(n,e,t,r,u,f){c(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function kn(n,e,t,r){c(n).samplerParameterf(c(e),t>>>0,r)}function Rn(n,e,t,r){c(n).samplerParameteri(c(e),t>>>0,r)}function On(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Cn(n,e,t,r,u,f,_){c(n).texStorage3D(e>>>0,t,r>>>0,u,f,_)}function Un(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,d)}),arguments)}function jn(){return L((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,c(b))}),arguments)}function Kn(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function Gn(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Wn(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Nn(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Qn(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Xn(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Yn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Hn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Jn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function zn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Zn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function $n(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function ne(n,e){c(n).activeTexture(e>>>0)}function ee(n,e,t){c(n).attachShader(c(e),c(t))}function te(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function re(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function ue(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function fe(n,e,t){c(n).bindTexture(e>>>0,c(t))}function ce(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function _e(n,e){c(n).blendEquation(e>>>0)}function ie(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function oe(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function de(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function be(n,e){c(n).compileShader(c(e))}function ge(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function we(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function le(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function se(n){var e=c(n).createProgram();return v(e)?0:g(e)}function me(n){var e=c(n).createRenderbuffer();return v(e)?0:g(e)}function ve(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function ye(n){var e=c(n).createTexture();return v(e)?0:g(e)}function pe(n,e){c(n).cullFace(e>>>0)}function he(n,e){c(n).deleteBuffer(c(e))}function xe(n,e){c(n).deleteFramebuffer(c(e))}function Se(n,e){c(n).deleteProgram(c(e))}function Ae(n,e){c(n).deleteRenderbuffer(c(e))}function Pe(n,e){c(n).deleteShader(c(e))}function Ie(n,e){c(n).deleteTexture(c(e))}function De(n,e){c(n).depthFunc(e>>>0)}function Fe(n,e){c(n).depthMask(0!==e)}function Ee(n,e,t){c(n).depthRange(e,t)}function Te(n,e){c(n).disable(e>>>0)}function Be(n,e){c(n).disableVertexAttribArray(e>>>0)}function Le(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Me(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function ke(n,e){c(n).enable(e>>>0)}function Re(n,e){c(n).enableVertexAttribArray(e>>>0)}function Oe(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Ce(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Ue(n,e){c(n).frontFace(e>>>0)}function Ve(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:g(r)}function je(){return L((function(n,e,t){var r=c(n).getExtension(b(e,t));return v(r)?0:g(r)}),arguments)}function qe(){return L((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Ge(n,e,t){return g(c(n).getProgramParameter(c(e),t>>>0))}function We(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Ne(n,e,t){return g(c(n).getShaderParameter(c(e),t>>>0))}function Qe(n){var e=c(n).getSupportedExtensions();return v(e)?0:g(e)}function Xe(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function Ye(n,e){c(n).linkProgram(c(e))}function He(n,e,t){c(n).pixelStorei(e>>>0,t)}function Je(n,e,t){c(n).polygonOffset(e,t)}function ze(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Ze(n,e,t,r,u){c(n).scissor(e,t,r,u)}function $e(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function nt(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function et(n,e){c(n).stencilMask(e>>>0)}function tt(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function rt(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ut(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function ft(n,e,t){c(n).uniform1f(c(e),t)}function ct(n,e,t){c(n).uniform1i(c(e),t)}function _t(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function it(n,e){c(n).useProgram(c(e))}function ot(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function dt(n,e,t,r,u){c(n).viewport(e,t,r,u)}function at(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function bt(n){var e=c(n).document;return v(e)?0:g(e)}function gt(n){return g(c(n).location)}function wt(){return L((function(n){return g(c(n).innerWidth)}),arguments)}function lt(){return L((function(n){return g(c(n).innerHeight)}),arguments)}function st(n){return c(n).devicePixelRatio}function mt(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function vt(){return L((function(n,e,t){var r=c(n).matchMedia(b(e,t));return v(r)?0:g(r)}),arguments)}function yt(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function pt(n,e,t){var r=c(n)[b(e,t)];return v(r)?0:g(r)}function ht(n,e){c(n).clearTimeout(e)}function xt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function St(n,e){c(n).bindVertexArrayOES(c(e))}function At(n){var e=c(n).createVertexArrayOES();return v(e)?0:g(e)}function Pt(n,e){c(n).deleteVertexArrayOES(c(e))}function It(n){return c(n).pointerId}function Dt(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Ft(n){return c(n).width}function Et(n,e){c(n).width=e>>>0}function Tt(n){return c(n).height}function Bt(n,e){c(n).height=e>>>0}function Lt(){return L((function(n,e,t,r){var u=c(n).getContext(b(e,t),c(r));return v(u)?0:g(u)}),arguments)}function Mt(n){return c(n).matches}function kt(n){return c(n).now()}function Rt(){return L((function(n,e,t){return g(new Request(b(n,e),c(t)))}),arguments)}function Ot(n,e){c(n).drawBuffersWEBGL(c(e))}function Ct(n){return c(n).charCode}function Ut(n){return c(n).keyCode}function Vt(n){return c(n).altKey}function jt(n){return c(n).ctrlKey}function qt(n){return c(n).shiftKey}function Kt(n){return c(n).metaKey}function Gt(n,e){var t=m(c(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Wt(n,e){var t=m(c(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Nt(n,e,t){return c(n).getModifierState(b(e,t))}function Qt(){return L((function(n,e,t,r){c(n).addEventListener(b(e,t),c(r))}),arguments)}function Xt(){return L((function(n,e,t,r,u){c(n).addEventListener(b(e,t),c(r),c(u))}),arguments)}function Yt(){return L((function(n,e,t,r){c(n).removeEventListener(b(e,t),c(r))}),arguments)}function Ht(){return L((function(n,e){return g(c(n).appendChild(c(e)))}),arguments)}function Jt(n){var e=c(n).target;return v(e)?0:g(e)}function zt(n){return c(n).cancelBubble}function Zt(n){c(n).preventDefault()}function $t(n){c(n).stopPropagation()}function nr(n){return c(n).matches}function er(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function tr(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function rr(n){return c(n).size}function ur(n){return c(n).type}function fr(n,e){var t=m(c(e).name,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function cr(n){var e=c(n).fullscreenElement;return v(e)?0:g(e)}function _r(){return L((function(n,e,t){return g(c(n).createElement(b(e,t)))}),arguments)}function ir(n,e,t){var r=c(n).getElementById(b(e,t));return v(r)?0:g(r)}function or(){return L((function(n,e,t){var r=c(n).querySelector(b(e,t));return v(r)?0:g(r)}),arguments)}function dr(n){return g(c(n).getBoundingClientRect())}function ar(){return L((function(n){c(n).requestFullscreen()}),arguments)}function br(){return L((function(n,e,t,r,u){c(n).setAttribute(b(e,t),b(r,u))}),arguments)}function gr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function wr(n){return g(c(n).style)}function lr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function sr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function mr(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function vr(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function yr(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function pr(){return L((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function hr(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function xr(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Sr(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Ar(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Pr(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Ir(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Dr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Fr(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Er(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Tr(n,e){c(n).activeTexture(e>>>0)}function Br(n,e,t){c(n).attachShader(c(e),c(t))}function Lr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Mr(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function kr(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function Rr(n,e,t){c(n).bindTexture(e>>>0,c(t))}function Or(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Cr(n,e){c(n).blendEquation(e>>>0)}function Ur(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Vr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function jr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function qr(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Kr(n,e){c(n).compileShader(c(e))}function Gr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function Wr(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function Nr(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function Qr(n){var e=c(n).createProgram();return v(e)?0:g(e)}function Xr(n){var e=c(n).createRenderbuffer();return v(e)?0:g(e)}function Yr(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function Hr(n){var e=c(n).createTexture();return v(e)?0:g(e)}function Jr(n,e){c(n).cullFace(e>>>0)}function zr(n,e){c(n).deleteBuffer(c(e))}function Zr(n,e){c(n).deleteFramebuffer(c(e))}function $r(n,e){c(n).deleteProgram(c(e))}function nu(n,e){c(n).deleteRenderbuffer(c(e))}function eu(n,e){c(n).deleteShader(c(e))}function tu(n,e){c(n).deleteTexture(c(e))}function ru(n,e){c(n).depthFunc(e>>>0)}function uu(n,e){c(n).depthMask(0!==e)}function fu(n,e,t){c(n).depthRange(e,t)}function cu(n,e){c(n).disable(e>>>0)}function _u(n,e){c(n).disableVertexAttribArray(e>>>0)}function iu(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function ou(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function du(n,e){c(n).enable(e>>>0)}function au(n,e){c(n).enableVertexAttribArray(e>>>0)}function bu(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function gu(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function wu(n,e){c(n).frontFace(e>>>0)}function lu(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:g(r)}function su(){return L((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function mu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function vu(n,e,t){return g(c(n).getProgramParameter(c(e),t>>>0))}function yu(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function pu(n,e,t){return g(c(n).getShaderParameter(c(e),t>>>0))}function hu(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function xu(n,e){c(n).linkProgram(c(e))}function Su(n,e,t){c(n).pixelStorei(e>>>0,t)}function Au(n,e,t){c(n).polygonOffset(e,t)}function Pu(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Iu(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Du(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function Fu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Eu(n,e){c(n).stencilMask(e>>>0)}function Tu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Bu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Lu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Mu(n,e,t){c(n).uniform1f(c(e),t)}function ku(n,e,t){c(n).uniform1i(c(e),t)}function Ru(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function Ou(n,e){c(n).useProgram(c(e))}function Cu(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Uu(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Vu(n,e){return g(c(n).fetch(c(e)))}function ju(n){console.debug(c(n))}function qu(n){console.error(c(n))}function Ku(n,e){console.error(c(n),c(e))}function Gu(n){console.info(c(n))}function Wu(n){console.log(c(n))}function Nu(n){console.warn(c(n))}function Qu(){return L((function(n,e,t,r,u){c(n).setProperty(b(e,t),b(r,u))}),arguments)}function Xu(n){return c(n).x}function Yu(n){return c(n).y}function Hu(){return L((function(n,e){var t=m(c(e).origin,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}),arguments)}function Ju(n){var e;try{e=c(n)instanceof Response}catch(n){e=!1}return e}function zu(n,e){var t=m(c(e).url,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Zu(n){return c(n).status}function $u(n){return g(c(n).headers)}function nf(){return L((function(n){return g(c(n).arrayBuffer())}),arguments)}function ef(){return L((function(n){return g(c(n).text())}),arguments)}function tf(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function rf(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function uf(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function ff(){return L((function(){return g(new Headers)}),arguments)}function cf(){return L((function(n,e,t,r,u){c(n).append(b(e,t),b(r,u))}),arguments)}function _f(n){return c(n).clientX}function of(n){return c(n).clientY}function df(n){return c(n).offsetX}function af(n){return c(n).offsetY}function bf(n){return c(n).ctrlKey}function gf(n){return c(n).shiftKey}function wf(n){return c(n).altKey}function lf(n){return c(n).metaKey}function sf(n){return c(n).button}function mf(n){return c(n).buttons}function vf(n){return c(n).movementX}function yf(n){return c(n).movementY}function pf(n){return c(n).deltaX}function hf(n){return c(n).deltaY}function xf(n){return c(n).deltaMode}function Sf(n,e){return g(c(n)[e>>>0])}function Af(n){return c(n).length}function Pf(){return g(new Array)}function If(n){return"function"==typeof c(n)}function Df(n,e){return g(new Function(b(n,e)))}function Ff(n){var e=c(n);return"object"===Object(r.a)(e)&&null!==e}function Ef(n){return g(c(n).next)}function Tf(){return L((function(n){return g(c(n).next())}),arguments)}function Bf(n){return c(n).done}function Lf(n){return g(c(n).value)}function Mf(){return g(Symbol.iterator)}function kf(){return L((function(n,e){return g(Reflect.get(c(n),c(e)))}),arguments)}function Rf(){return L((function(n,e){return g(c(n).call(c(e)))}),arguments)}function Of(){return g(new Object)}function Cf(){return L((function(){return g(self.self)}),arguments)}function Uf(){return L((function(){return g(window.window)}),arguments)}function Vf(){return L((function(){return g(globalThis.globalThis)}),arguments)}function jf(){return L((function(){return g(global.global)}),arguments)}function qf(n){return void 0===c(n)}function Kf(n){return g(Array.of(c(n)))}function Gf(n,e){return c(n).push(c(e))}function Wf(n,e){return Object.is(c(n),c(e))}function Nf(n){return g(Promise.resolve(c(n)))}function Qf(n,e){return g(c(n).then(c(e)))}function Xf(n,e,t){return g(c(n).then(c(e),c(t)))}function Yf(n){return g(c(n).buffer)}function Hf(n,e,t){return g(new Int8Array(c(n),e>>>0,t>>>0))}function Jf(n,e,t){return g(new Int16Array(c(n),e>>>0,t>>>0))}function zf(n,e,t){return g(new Int32Array(c(n),e>>>0,t>>>0))}function Zf(n,e,t){return g(new Uint8Array(c(n),e>>>0,t>>>0))}function $f(n){return g(new Uint8Array(c(n)))}function nc(n,e,t){c(n).set(c(e),t>>>0)}function ec(n){return c(n).length}function tc(n,e,t){return g(new Uint16Array(c(n),e>>>0,t>>>0))}function rc(n,e,t){return g(new Uint32Array(c(n),e>>>0,t>>>0))}function uc(n,e,t){return g(new Float32Array(c(n),e>>>0,t>>>0))}function fc(){return L((function(n,e){return Reflect.has(c(n),c(e))}),arguments)}function cc(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function _c(){return L((function(n){return g(JSON.stringify(c(n)))}),arguments)}function ic(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=d[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function oc(n,e){throw new Error(b(n,e))}function dc(){return g(u.j)}function ac(n,e,t){return g(x(n,e,145,S))}function bc(n,e,t){return g(x(n,e,145,A))}function gc(n,e,t){return g(x(n,e,145,A))}function wc(n,e,t){return g(x(n,e,145,A))}function lc(n,e,t){return g(x(n,e,145,A))}function sc(n,e,t){return g(x(n,e,145,A))}function mc(n,e,t){return g(x(n,e,145,A))}function vc(n,e,t){return g(x(n,e,145,A))}function yc(n,e,t){return g(x(n,e,145,A))}function pc(n,e,t){return g(x(n,e,337,P))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},418:function(n,e,t){t(1)({target:"Reflect",stat:!0},{has:function(n,e){return e in n}})},464:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(366);r.l()}}]); \ No newline at end of file diff --git a/assets/js/5.e1d8f41b.js b/assets/js/5.e1d8f41b.js deleted file mode 100644 index 45a61570..00000000 --- a/assets/js/5.e1d8f41b.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{366:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return D})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_string_new",(function(){return k})),t.d(e,"__wbindgen_object_clone_ref",(function(){return R})),t.d(e,"__wbindgen_cb_drop",(function(){return O})),t.d(e,"__wbindgen_string_get",(function(){return C})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return V})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return j})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return q})),t.d(e,"__wbindgen_number_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return G})),t.d(e,"__wbindgen_number_new",(function(){return W})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return N})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return H})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return J})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return z})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return Z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return $})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return nn})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return en})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return tn})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return rn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return on})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return dn})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return bn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return gn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return wn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return ln})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return sn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return mn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return vn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return yn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return pn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return hn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return Sn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return An})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Pn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Dn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return In})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return En})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Fn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Tn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Bn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Ln})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Mn})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return kn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return Rn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return On})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Vn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return jn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Gn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Wn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Nn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Jn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return zn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return $n})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return ne})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ee})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return te})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return re})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return ue})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return fe})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return _e})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ce})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ie})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return oe})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return de})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return be})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ge})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return we})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return le})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return se})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return me})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ve})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ye})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return pe})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return he})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return Se})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Ae})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Pe})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return De})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return Ie})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Ee})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Fe})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Te})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Be})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Le})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Me})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return ke})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return Re})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Oe})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ce})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ve})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return je})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Ge})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return We})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ne})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return He})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return Je})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return ze})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return $e})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return nt})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return et})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return tt})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return rt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return ut})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ft})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return _t})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return ct})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return it})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return ot})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return dt})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return bt})),t.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return gt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return wt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return lt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return st})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return mt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return vt})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return yt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return pt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return ht})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return xt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return St})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return At})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Pt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Dt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return It})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Et})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Ft})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Tt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Bt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Lt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Mt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return kt})),t.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return Rt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ot})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ct})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Vt})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return jt})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Ut})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return qt})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return Kt})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Gt})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return Wt})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Nt})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Qt})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Xt})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Yt})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Ht})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Jt})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return zt})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Zt})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return $t})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return nr})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return er})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return tr})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return rr})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ur})),t.d(e,"__wbg_name_2473476082bed625",(function(){return fr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return _r})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return cr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return ir})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return or})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return dr})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return ar})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return br})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return gr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return wr})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return lr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return sr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return mr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return vr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return yr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return pr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return hr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return xr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return Sr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return Ar})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Pr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Er})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Fr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Tr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Br})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Lr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Mr})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return kr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Rr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Or})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Cr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Vr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return jr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Ur})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return qr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Kr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Gr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Wr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Nr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Qr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Xr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Yr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Hr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Jr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return zr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Zr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return $r})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return nu})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return eu})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return tu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return ru})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return uu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return fu})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return _u})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return cu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return iu})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return ou})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return du})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return au})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return bu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return gu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return wu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return lu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return su})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return mu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return vu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return yu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return pu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return hu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return xu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return Su})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return Au})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Pu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Du})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Iu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Eu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Fu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Tu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Bu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Lu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Mu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return ku})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Ru})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Ou})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Cu})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Vu})),t.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return ju})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Uu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return qu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Ku})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Gu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Wu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Nu})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Qu})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Xu})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Yu})),t.d(e,"__wbg_origin_486b350035be1f11",(function(){return Hu})),t.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return Ju})),t.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return zu})),t.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return Zu})),t.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return $u})),t.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return nf})),t.d(e,"__wbg_text_1169d752cc697903",(function(){return ef})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return tf})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return rf})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return uf})),t.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return ff})),t.d(e,"__wbg_append_de37df908812970d",(function(){return _f})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return cf})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return of})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return df})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return af})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return bf})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return gf})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return wf})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return lf})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return sf})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return mf})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return vf})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return yf})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return pf})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return hf})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return xf})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Sf})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return Af})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return Pf})),t.d(e,"__wbindgen_is_function",(function(){return Df})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return If})),t.d(e,"__wbindgen_is_object",(function(){return Ef})),t.d(e,"__wbg_next_579e583d33566a86",(function(){return Ff})),t.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return Tf})),t.d(e,"__wbg_done_1b73b0672e15f234",(function(){return Bf})),t.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return Lf})),t.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return Mf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return kf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return Rf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return Of})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return Cf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return Vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return jf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return Uf})),t.d(e,"__wbindgen_is_undefined",(function(){return qf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return Kf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Gf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Wf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Nf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Qf})),t.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return Xf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Yf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Jf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return zf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Zf})),t.d(e,"__wbg_new_8c3f0052272a457a",(function(){return $f})),t.d(e,"__wbg_set_83db9690f9353e79",(function(){return n_})),t.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return e_})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return t_})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r_})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return u_})),t.d(e,"__wbg_has_8359f114ce042f5a",(function(){return f_})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return __})),t.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return c_})),t.d(e,"__wbindgen_debug_string",(function(){return i_})),t.d(e,"__wbindgen_throw",(function(){return o_})),t.d(e,"__wbindgen_memory",(function(){return d_})),t.d(e,"__wbindgen_closure_wrapper765",(function(){return a_})),t.d(e,"__wbindgen_closure_wrapper767",(function(){return b_})),t.d(e,"__wbindgen_closure_wrapper769",(function(){return g_})),t.d(e,"__wbindgen_closure_wrapper771",(function(){return w_})),t.d(e,"__wbindgen_closure_wrapper773",(function(){return l_})),t.d(e,"__wbindgen_closure_wrapper775",(function(){return s_})),t.d(e,"__wbindgen_closure_wrapper777",(function(){return m_})),t.d(e,"__wbindgen_closure_wrapper779",(function(){return v_})),t.d(e,"__wbindgen_closure_wrapper781",(function(){return y_})),t.d(e,"__wbindgen_closure_wrapper1116",(function(){return p_}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(61),t(403),t(404),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(97),t(18),t(25),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(417),t(414),t(462)),f=new Array(32).fill(void 0);function _(n){return f[n]}f.push(void 0,null,!0,!1);var c=f.length;function i(n){var e=_(n);return function(n){n<36||(f[n]=c,c=n)}(n),e}var o=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});o.decode();var d=new Uint8Array;function a(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function b(n,e){return o.decode(a().subarray(n,n+e))}function g(n){c===f.length&&f.push(f.length+1);var e=c;return c=f[e],f[e]=n,e}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return a().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,_=e(f),c=a(),i=0;i127)break;c[_+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),_=t(_,f,f=i+3*n.length);var d=a().subarray(_+i,_+f);i+=s(n,d).written}return w=i,_}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},_=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),_=0;_>>0,_(t))}function X(n,e,t,r,u,f){_(n).bindBufferRange(e>>>0,t>>>0,_(r),u,f)}function Y(n,e,t){_(n).bindSampler(e>>>0,_(t))}function H(n,e){_(n).bindVertexArray(_(e))}function J(n,e,t,r,u,f,c,i,o,d,a){_(n).blitFramebuffer(e,t,r,u,f,c,i,o,d>>>0,a>>>0)}function z(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function Z(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function $(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function nn(n,e,t,r,u){_(n).clearBufferfi(e>>>0,t,r,u)}function en(n,e,t,r,u){_(n).clearBufferfv(e>>>0,t,E(r,u))}function tn(n,e,t,r,u){_(n).clearBufferiv(e>>>0,t,F(r,u))}function rn(n,e,t,r,u){_(n).clearBufferuiv(e>>>0,t,B(r,u))}function un(n,e,t,r){return _(n).clientWaitSync(_(e),t>>>0,r>>>0)}function fn(n,e,t,r,u,f,c,i,o,d){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o,d)}function _n(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function cn(n,e,t,r,u,f,c,i,o,d,a,b){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a,b)}function on(n,e,t,r,u,f,c,i,o,d,a){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,_(a))}function dn(n,e,t,r,u,f){_(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,c,i,o,d){_(n).copyTexSubImage3D(e>>>0,t,r,u,f,c,i,o,d)}function bn(n){var e=_(n).createSampler();return v(e)?0:g(e)}function gn(n){var e=_(n).createVertexArray();return v(e)?0:g(e)}function wn(n,e){_(n).deleteQuery(_(e))}function ln(n,e){_(n).deleteSampler(_(e))}function sn(n,e){_(n).deleteSync(_(e))}function mn(n,e){_(n).deleteVertexArray(_(e))}function vn(n,e,t,r,u){_(n).drawArraysInstanced(e>>>0,t,r,u)}function yn(n,e){_(n).drawBuffers(_(e))}function pn(n,e,t,r,u,f){_(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function hn(n,e){_(n).endQuery(e>>>0)}function xn(n,e,t){var r=_(n).fenceSync(e>>>0,t>>>0);return v(r)?0:g(r)}function Sn(n,e,t,r,u,f){_(n).framebufferTextureLayer(e>>>0,t>>>0,_(r),u,f)}function An(n,e,t,r){_(n).getBufferSubData(e>>>0,t,_(r))}function Pn(){return L((function(n,e,t){return g(_(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Dn(n,e,t){return g(_(n).getQueryParameter(_(e),t>>>0))}function In(n,e,t){return g(_(n).getSyncParameter(_(e),t>>>0))}function En(n,e,t,r){return _(n).getUniformBlockIndex(_(e),b(t,r))}function Fn(){return L((function(n,e,t){_(n).invalidateFramebuffer(e>>>0,_(t))}),arguments)}function Tn(n,e){_(n).readBuffer(e>>>0)}function Bn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function Ln(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,i)}),arguments)}function Mn(n,e,t,r,u,f){_(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function kn(n,e,t,r){_(n).samplerParameterf(_(e),t>>>0,r)}function Rn(n,e,t,r){_(n).samplerParameteri(_(e),t>>>0,r)}function On(n,e,t,r,u,f){_(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Cn(n,e,t,r,u,f,c){_(n).texStorage3D(e>>>0,t,r>>>0,u,f,c)}function Vn(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(d))}),arguments)}function jn(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,d)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,c,i,o,d,a,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,c,i,o,d,a,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,d>>>0,a>>>0,_(b))}),arguments)}function Kn(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function Gn(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Wn(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Nn(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Qn(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Xn(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Yn(n,e,t,r){_(n).uniformBlockBinding(_(e),t>>>0,r>>>0)}function Hn(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Jn(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function zn(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Zn(n,e,t){_(n).vertexAttribDivisor(e>>>0,t>>>0)}function $n(n,e,t,r,u,f){_(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function ne(n,e){_(n).activeTexture(e>>>0)}function ee(n,e,t){_(n).attachShader(_(e),_(t))}function te(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function re(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function ue(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function fe(n,e,t){_(n).bindTexture(e>>>0,_(t))}function _e(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function ce(n,e){_(n).blendEquation(e>>>0)}function ie(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function oe(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function de(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function be(n,e){_(n).compileShader(_(e))}function ge(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function we(n){var e=_(n).createBuffer();return v(e)?0:g(e)}function le(n){var e=_(n).createFramebuffer();return v(e)?0:g(e)}function se(n){var e=_(n).createProgram();return v(e)?0:g(e)}function me(n){var e=_(n).createRenderbuffer();return v(e)?0:g(e)}function ve(n,e){var t=_(n).createShader(e>>>0);return v(t)?0:g(t)}function ye(n){var e=_(n).createTexture();return v(e)?0:g(e)}function pe(n,e){_(n).cullFace(e>>>0)}function he(n,e){_(n).deleteBuffer(_(e))}function xe(n,e){_(n).deleteFramebuffer(_(e))}function Se(n,e){_(n).deleteProgram(_(e))}function Ae(n,e){_(n).deleteRenderbuffer(_(e))}function Pe(n,e){_(n).deleteShader(_(e))}function De(n,e){_(n).deleteTexture(_(e))}function Ie(n,e){_(n).depthFunc(e>>>0)}function Ee(n,e){_(n).depthMask(0!==e)}function Fe(n,e,t){_(n).depthRange(e,t)}function Te(n,e){_(n).disable(e>>>0)}function Be(n,e){_(n).disableVertexAttribArray(e>>>0)}function Le(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function Me(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function ke(n,e){_(n).enable(e>>>0)}function Re(n,e){_(n).enableVertexAttribArray(e>>>0)}function Oe(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function Ce(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function Ve(n,e){_(n).frontFace(e>>>0)}function je(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return v(r)?0:g(r)}function Ue(){return L((function(n,e,t){var r=_(n).getExtension(b(e,t));return v(r)?0:g(r)}),arguments)}function qe(){return L((function(n,e){return g(_(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function Ge(n,e,t){return g(_(n).getProgramParameter(_(e),t>>>0))}function We(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function Ne(n,e,t){return g(_(n).getShaderParameter(_(e),t>>>0))}function Qe(n){var e=_(n).getSupportedExtensions();return v(e)?0:g(e)}function Xe(n,e,t,r){var u=_(n).getUniformLocation(_(e),b(t,r));return v(u)?0:g(u)}function Ye(n,e){_(n).linkProgram(_(e))}function He(n,e,t){_(n).pixelStorei(e>>>0,t)}function Je(n,e,t){_(n).polygonOffset(e,t)}function ze(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Ze(n,e,t,r,u){_(n).scissor(e,t,r,u)}function $e(n,e,t,r){_(n).shaderSource(_(e),b(t,r))}function nt(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function et(n,e){_(n).stencilMask(e>>>0)}function tt(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function rt(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ut(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function ft(n,e,t){_(n).uniform1f(_(e),t)}function _t(n,e,t){_(n).uniform1i(_(e),t)}function ct(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function it(n,e){_(n).useProgram(_(e))}function ot(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function dt(n,e,t,r,u){_(n).viewport(e,t,r,u)}function at(n){var e;try{e=_(n)instanceof Window}catch(n){e=!1}return e}function bt(n){var e=_(n).document;return v(e)?0:g(e)}function gt(n){return g(_(n).location)}function wt(){return L((function(n){return g(_(n).innerWidth)}),arguments)}function lt(){return L((function(n){return g(_(n).innerHeight)}),arguments)}function st(n){return _(n).devicePixelRatio}function mt(){return L((function(n,e){_(n).cancelAnimationFrame(e)}),arguments)}function vt(){return L((function(n,e,t){var r=_(n).matchMedia(b(e,t));return v(r)?0:g(r)}),arguments)}function yt(){return L((function(n,e){return _(n).requestAnimationFrame(_(e))}),arguments)}function pt(n,e,t){var r=_(n)[b(e,t)];return v(r)?0:g(r)}function ht(n,e){_(n).clearTimeout(e)}function xt(){return L((function(n,e,t){return _(n).setTimeout(_(e),t)}),arguments)}function St(n,e){_(n).bindVertexArrayOES(_(e))}function At(n){var e=_(n).createVertexArrayOES();return v(e)?0:g(e)}function Pt(n,e){_(n).deleteVertexArrayOES(_(e))}function Dt(n){return _(n).pointerId}function It(n){var e;try{e=_(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Et(n){return _(n).width}function Ft(n,e){_(n).width=e>>>0}function Tt(n){return _(n).height}function Bt(n,e){_(n).height=e>>>0}function Lt(){return L((function(n,e,t,r){var u=_(n).getContext(b(e,t),_(r));return v(u)?0:g(u)}),arguments)}function Mt(n){return _(n).matches}function kt(n){return _(n).now()}function Rt(){return L((function(n,e,t){return g(new Request(b(n,e),_(t)))}),arguments)}function Ot(n,e){_(n).drawBuffersWEBGL(_(e))}function Ct(n){return _(n).charCode}function Vt(n){return _(n).keyCode}function jt(n){return _(n).altKey}function Ut(n){return _(n).ctrlKey}function qt(n){return _(n).shiftKey}function Kt(n){return _(n).metaKey}function Gt(n,e){var t=m(_(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Wt(n,e){var t=m(_(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Nt(n,e,t){return _(n).getModifierState(b(e,t))}function Qt(){return L((function(n,e,t,r){_(n).addEventListener(b(e,t),_(r))}),arguments)}function Xt(){return L((function(n,e,t,r,u){_(n).addEventListener(b(e,t),_(r),_(u))}),arguments)}function Yt(){return L((function(n,e,t,r){_(n).removeEventListener(b(e,t),_(r))}),arguments)}function Ht(){return L((function(n,e){return g(_(n).appendChild(_(e)))}),arguments)}function Jt(n){var e=_(n).target;return v(e)?0:g(e)}function zt(n){return _(n).cancelBubble}function Zt(n){_(n).preventDefault()}function $t(n){_(n).stopPropagation()}function nr(n){return _(n).matches}function er(){return L((function(n,e){_(n).addListener(_(e))}),arguments)}function tr(){return L((function(n,e){_(n).removeListener(_(e))}),arguments)}function rr(n){return _(n).size}function ur(n){return _(n).type}function fr(n,e){var t=m(_(e).name,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function _r(n){var e=_(n).fullscreenElement;return v(e)?0:g(e)}function cr(){return L((function(n,e,t){return g(_(n).createElement(b(e,t)))}),arguments)}function ir(n,e,t){var r=_(n).getElementById(b(e,t));return v(r)?0:g(r)}function or(){return L((function(n,e,t){var r=_(n).querySelector(b(e,t));return v(r)?0:g(r)}),arguments)}function dr(n){return g(_(n).getBoundingClientRect())}function ar(){return L((function(n){_(n).requestFullscreen()}),arguments)}function br(){return L((function(n,e,t,r,u){_(n).setAttribute(b(e,t),b(r,u))}),arguments)}function gr(){return L((function(n,e){_(n).setPointerCapture(e)}),arguments)}function wr(n){return g(_(n).style)}function lr(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function sr(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function mr(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function vr(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function yr(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function pr(){return L((function(n,e,t,r,u,f,c,i,o,d){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(d))}),arguments)}function hr(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function xr(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Sr(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Ar(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Pr(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Dr(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Ir(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Er(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Fr(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Tr(n,e){_(n).activeTexture(e>>>0)}function Br(n,e,t){_(n).attachShader(_(e),_(t))}function Lr(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function Mr(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function kr(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function Rr(n,e,t){_(n).bindTexture(e>>>0,_(t))}function Or(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function Cr(n,e){_(n).blendEquation(e>>>0)}function Vr(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function jr(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function Ur(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function qr(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Kr(n,e){_(n).compileShader(_(e))}function Gr(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function Wr(n){var e=_(n).createBuffer();return v(e)?0:g(e)}function Nr(n){var e=_(n).createFramebuffer();return v(e)?0:g(e)}function Qr(n){var e=_(n).createProgram();return v(e)?0:g(e)}function Xr(n){var e=_(n).createRenderbuffer();return v(e)?0:g(e)}function Yr(n,e){var t=_(n).createShader(e>>>0);return v(t)?0:g(t)}function Hr(n){var e=_(n).createTexture();return v(e)?0:g(e)}function Jr(n,e){_(n).cullFace(e>>>0)}function zr(n,e){_(n).deleteBuffer(_(e))}function Zr(n,e){_(n).deleteFramebuffer(_(e))}function $r(n,e){_(n).deleteProgram(_(e))}function nu(n,e){_(n).deleteRenderbuffer(_(e))}function eu(n,e){_(n).deleteShader(_(e))}function tu(n,e){_(n).deleteTexture(_(e))}function ru(n,e){_(n).depthFunc(e>>>0)}function uu(n,e){_(n).depthMask(0!==e)}function fu(n,e,t){_(n).depthRange(e,t)}function _u(n,e){_(n).disable(e>>>0)}function cu(n,e){_(n).disableVertexAttribArray(e>>>0)}function iu(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function ou(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function du(n,e){_(n).enable(e>>>0)}function au(n,e){_(n).enableVertexAttribArray(e>>>0)}function bu(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function gu(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function wu(n,e){_(n).frontFace(e>>>0)}function lu(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return v(r)?0:g(r)}function su(){return L((function(n,e){return g(_(n).getParameter(e>>>0))}),arguments)}function mu(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function vu(n,e,t){return g(_(n).getProgramParameter(_(e),t>>>0))}function yu(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=v(r)?0:m(r,u.d,u.e),c=w;p()[n/4+1]=c,p()[n/4+0]=f}function pu(n,e,t){return g(_(n).getShaderParameter(_(e),t>>>0))}function hu(n,e,t,r){var u=_(n).getUniformLocation(_(e),b(t,r));return v(u)?0:g(u)}function xu(n,e){_(n).linkProgram(_(e))}function Su(n,e,t){_(n).pixelStorei(e>>>0,t)}function Au(n,e,t){_(n).polygonOffset(e,t)}function Pu(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Du(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Iu(n,e,t,r){_(n).shaderSource(_(e),b(t,r))}function Eu(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Fu(n,e){_(n).stencilMask(e>>>0)}function Tu(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function Bu(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Lu(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function Mu(n,e,t){_(n).uniform1f(_(e),t)}function ku(n,e,t){_(n).uniform1i(_(e),t)}function Ru(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function Ou(n,e){_(n).useProgram(_(e))}function Cu(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function Vu(n,e,t,r,u){_(n).viewport(e,t,r,u)}function ju(n,e){return g(_(n).fetch(_(e)))}function Uu(n){console.debug(_(n))}function qu(n){console.error(_(n))}function Ku(n,e){console.error(_(n),_(e))}function Gu(n){console.info(_(n))}function Wu(n){console.log(_(n))}function Nu(n){console.warn(_(n))}function Qu(){return L((function(n,e,t,r,u){_(n).setProperty(b(e,t),b(r,u))}),arguments)}function Xu(n){return _(n).x}function Yu(n){return _(n).y}function Hu(){return L((function(n,e){var t=m(_(e).origin,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}),arguments)}function Ju(n){var e;try{e=_(n)instanceof Response}catch(n){e=!1}return e}function zu(n,e){var t=m(_(e).url,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Zu(n){return _(n).status}function $u(n){return g(_(n).headers)}function nf(){return L((function(n){return g(_(n).arrayBuffer())}),arguments)}function ef(){return L((function(n){return g(_(n).text())}),arguments)}function tf(n,e,t,r,u){_(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function rf(n,e,t,r,u,f){_(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function uf(n,e,t){_(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function ff(){return L((function(){return g(new Headers)}),arguments)}function _f(){return L((function(n,e,t,r,u){_(n).append(b(e,t),b(r,u))}),arguments)}function cf(n){return _(n).clientX}function of(n){return _(n).clientY}function df(n){return _(n).offsetX}function af(n){return _(n).offsetY}function bf(n){return _(n).ctrlKey}function gf(n){return _(n).shiftKey}function wf(n){return _(n).altKey}function lf(n){return _(n).metaKey}function sf(n){return _(n).button}function mf(n){return _(n).buttons}function vf(n){return _(n).movementX}function yf(n){return _(n).movementY}function pf(n){return _(n).deltaX}function hf(n){return _(n).deltaY}function xf(n){return _(n).deltaMode}function Sf(n,e){return g(_(n)[e>>>0])}function Af(n){return _(n).length}function Pf(){return g(new Array)}function Df(n){return"function"==typeof _(n)}function If(n,e){return g(new Function(b(n,e)))}function Ef(n){var e=_(n);return"object"===Object(r.a)(e)&&null!==e}function Ff(n){return g(_(n).next)}function Tf(){return L((function(n){return g(_(n).next())}),arguments)}function Bf(n){return _(n).done}function Lf(n){return g(_(n).value)}function Mf(){return g(Symbol.iterator)}function kf(){return L((function(n,e){return g(Reflect.get(_(n),_(e)))}),arguments)}function Rf(){return L((function(n,e){return g(_(n).call(_(e)))}),arguments)}function Of(){return g(new Object)}function Cf(){return L((function(){return g(self.self)}),arguments)}function Vf(){return L((function(){return g(window.window)}),arguments)}function jf(){return L((function(){return g(globalThis.globalThis)}),arguments)}function Uf(){return L((function(){return g(global.global)}),arguments)}function qf(n){return void 0===_(n)}function Kf(n){return g(Array.of(_(n)))}function Gf(n,e){return _(n).push(_(e))}function Wf(n,e){return Object.is(_(n),_(e))}function Nf(n){return g(Promise.resolve(_(n)))}function Qf(n,e){return g(_(n).then(_(e)))}function Xf(n,e,t){return g(_(n).then(_(e),_(t)))}function Yf(n){return g(_(n).buffer)}function Hf(n,e,t){return g(new Int8Array(_(n),e>>>0,t>>>0))}function Jf(n,e,t){return g(new Int16Array(_(n),e>>>0,t>>>0))}function zf(n,e,t){return g(new Int32Array(_(n),e>>>0,t>>>0))}function Zf(n,e,t){return g(new Uint8Array(_(n),e>>>0,t>>>0))}function $f(n){return g(new Uint8Array(_(n)))}function n_(n,e,t){_(n).set(_(e),t>>>0)}function e_(n){return _(n).length}function t_(n,e,t){return g(new Uint16Array(_(n),e>>>0,t>>>0))}function r_(n,e,t){return g(new Uint32Array(_(n),e>>>0,t>>>0))}function u_(n,e,t){return g(new Float32Array(_(n),e>>>0,t>>>0))}function f_(){return L((function(n,e){return Reflect.has(_(n),_(e))}),arguments)}function __(){return L((function(n,e,t){return Reflect.set(_(n),_(e),_(t))}),arguments)}function c_(){return L((function(n){return g(JSON.stringify(_(n)))}),arguments)}function i_(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var _=e.length,c="[";_>0&&(c+=n(e[0]));for(var i=1;i<_;i++)c+=", "+n(e[i]);return c+="]"}var o,d=/\[object ([^\]]+)\]/.exec(toString.call(e));if(!(d.length>1))return toString.call(e);if("Object"==(o=d[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(_(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function o_(n,e){throw new Error(b(n,e))}function d_(){return g(u.j)}function a_(n,e,t){return g(x(n,e,145,S))}function b_(n,e,t){return g(x(n,e,145,A))}function g_(n,e,t){return g(x(n,e,145,A))}function w_(n,e,t){return g(x(n,e,145,A))}function l_(n,e,t){return g(x(n,e,145,A))}function s_(n,e,t){return g(x(n,e,145,A))}function m_(n,e,t){return g(x(n,e,145,A))}function v_(n,e,t){return g(x(n,e,145,A))}function y_(n,e,t){return g(x(n,e,145,A))}function p_(n,e,t){return g(x(n,e,337,P))}}.call(this,t(375)(n))},417:function(n,e,t){t(1)({target:"Reflect",stat:!0},{has:function(n,e){return e in n}})},462:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(366);r.l()}}]); \ No newline at end of file diff --git a/assets/js/49.24a0758c.js b/assets/js/50.69b61f89.js similarity index 99% rename from assets/js/49.24a0758c.js rename to assets/js/50.69b61f89.js index 07491e94..4f837b4f 100644 --- a/assets/js/49.24a0758c.js +++ b/assets/js/50.69b61f89.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{556:function(_,e,n){"use strict";n.r(e);var r=n(453),b=n(364);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return b.__wbg_fetch_386f87a3ebf5003c})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return b.__wbg_location_8cc8ccf27e342c0a})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return b.__wbg_newwithstrandinit_05d7180788420c40})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return b.__wbg_fetch_749a56934f95c96c})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_origin_486b350035be1f11",(function(){return b.__wbg_origin_486b350035be1f11})),n.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return b.__wbg_instanceof_Response_eaa426220848a39e})),n.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return b.__wbg_url_74285ddf2747cb3d})),n.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return b.__wbg_status_c4ef3dd591e63435})),n.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return b.__wbg_headers_fd64ad685cf22e5d})),n.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return b.__wbg_arrayBuffer_4c27b6f00c530232})),n.d(e,"__wbg_text_1169d752cc697903",(function(){return b.__wbg_text_1169d752cc697903})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return b.__wbg_new_2d0053ee81e4dd2a})),n.d(e,"__wbg_append_de37df908812970d",(function(){return b.__wbg_append_de37df908812970d})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbindgen_is_function",(function(){return b.__wbindgen_is_function})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbindgen_is_object",(function(){return b.__wbindgen_is_object})),n.d(e,"__wbg_next_579e583d33566a86",(function(){return b.__wbg_next_579e583d33566a86})),n.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return b.__wbg_next_aaef7c8aa5e212ac})),n.d(e,"__wbg_done_1b73b0672e15f234",(function(){return b.__wbg_done_1b73b0672e15f234})),n.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return b.__wbg_value_1ccc36bc03462d71})),n.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return b.__wbg_iterator_6f9d4f28845f426c})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return b.__wbg_then_cedad20fbbd9418a})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_new_8c3f0052272a457a",(function(){return b.__wbg_new_8c3f0052272a457a})),n.d(e,"__wbg_set_83db9690f9353e79",(function(){return b.__wbg_set_83db9690f9353e79})),n.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return b.__wbg_length_9e1ae1900cb0fbd5})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_has_8359f114ce042f5a",(function(){return b.__wbg_has_8359f114ce042f5a})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return b.__wbg_stringify_d6471d300ded9b68})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper815",(function(){return b.__wbindgen_closure_wrapper815})),n.d(e,"__wbindgen_closure_wrapper817",(function(){return b.__wbindgen_closure_wrapper817})),n.d(e,"__wbindgen_closure_wrapper819",(function(){return b.__wbindgen_closure_wrapper819})),n.d(e,"__wbindgen_closure_wrapper821",(function(){return b.__wbindgen_closure_wrapper821})),n.d(e,"__wbindgen_closure_wrapper823",(function(){return b.__wbindgen_closure_wrapper823})),n.d(e,"__wbindgen_closure_wrapper825",(function(){return b.__wbindgen_closure_wrapper825})),n.d(e,"__wbindgen_closure_wrapper827",(function(){return b.__wbindgen_closure_wrapper827})),n.d(e,"__wbindgen_closure_wrapper829",(function(){return b.__wbindgen_closure_wrapper829})),n.d(e,"__wbindgen_closure_wrapper831",(function(){return b.__wbindgen_closure_wrapper831})),n.d(e,"__wbindgen_closure_wrapper1124",(function(){return b.__wbindgen_closure_wrapper1124})),r.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{558:function(_,e,n){"use strict";n.r(e);var r=n(454),b=n(364);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return b.__wbg_fetch_386f87a3ebf5003c})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return b.__wbg_location_8cc8ccf27e342c0a})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return b.__wbg_newwithstrandinit_05d7180788420c40})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return b.__wbg_fetch_749a56934f95c96c})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_origin_486b350035be1f11",(function(){return b.__wbg_origin_486b350035be1f11})),n.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return b.__wbg_instanceof_Response_eaa426220848a39e})),n.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return b.__wbg_url_74285ddf2747cb3d})),n.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return b.__wbg_status_c4ef3dd591e63435})),n.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return b.__wbg_headers_fd64ad685cf22e5d})),n.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return b.__wbg_arrayBuffer_4c27b6f00c530232})),n.d(e,"__wbg_text_1169d752cc697903",(function(){return b.__wbg_text_1169d752cc697903})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return b.__wbg_new_2d0053ee81e4dd2a})),n.d(e,"__wbg_append_de37df908812970d",(function(){return b.__wbg_append_de37df908812970d})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbindgen_is_function",(function(){return b.__wbindgen_is_function})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbindgen_is_object",(function(){return b.__wbindgen_is_object})),n.d(e,"__wbg_next_579e583d33566a86",(function(){return b.__wbg_next_579e583d33566a86})),n.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return b.__wbg_next_aaef7c8aa5e212ac})),n.d(e,"__wbg_done_1b73b0672e15f234",(function(){return b.__wbg_done_1b73b0672e15f234})),n.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return b.__wbg_value_1ccc36bc03462d71})),n.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return b.__wbg_iterator_6f9d4f28845f426c})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return b.__wbg_then_cedad20fbbd9418a})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_new_8c3f0052272a457a",(function(){return b.__wbg_new_8c3f0052272a457a})),n.d(e,"__wbg_set_83db9690f9353e79",(function(){return b.__wbg_set_83db9690f9353e79})),n.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return b.__wbg_length_9e1ae1900cb0fbd5})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_has_8359f114ce042f5a",(function(){return b.__wbg_has_8359f114ce042f5a})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return b.__wbg_stringify_d6471d300ded9b68})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper815",(function(){return b.__wbindgen_closure_wrapper815})),n.d(e,"__wbindgen_closure_wrapper817",(function(){return b.__wbindgen_closure_wrapper817})),n.d(e,"__wbindgen_closure_wrapper819",(function(){return b.__wbindgen_closure_wrapper819})),n.d(e,"__wbindgen_closure_wrapper821",(function(){return b.__wbindgen_closure_wrapper821})),n.d(e,"__wbindgen_closure_wrapper823",(function(){return b.__wbindgen_closure_wrapper823})),n.d(e,"__wbindgen_closure_wrapper825",(function(){return b.__wbindgen_closure_wrapper825})),n.d(e,"__wbindgen_closure_wrapper827",(function(){return b.__wbindgen_closure_wrapper827})),n.d(e,"__wbindgen_closure_wrapper829",(function(){return b.__wbindgen_closure_wrapper829})),n.d(e,"__wbindgen_closure_wrapper831",(function(){return b.__wbindgen_closure_wrapper831})),n.d(e,"__wbindgen_closure_wrapper1124",(function(){return b.__wbindgen_closure_wrapper1124})),r.f()}}]); \ No newline at end of file diff --git a/assets/js/50.9008cb75.js b/assets/js/51.f14521a6.js similarity index 99% rename from assets/js/50.9008cb75.js rename to assets/js/51.f14521a6.js index 31b5962b..2a7fbccb 100644 --- a/assets/js/50.9008cb75.js +++ b/assets/js/51.f14521a6.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{557:function(_,e,n){"use strict";n.r(e);var r=n(454),b=n(365);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return b.__wbg_fetch_386f87a3ebf5003c})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return b.__wbg_location_8cc8ccf27e342c0a})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return b.__wbg_newwithstrandinit_05d7180788420c40})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return b.__wbg_fetch_749a56934f95c96c})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_origin_486b350035be1f11",(function(){return b.__wbg_origin_486b350035be1f11})),n.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return b.__wbg_instanceof_Response_eaa426220848a39e})),n.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return b.__wbg_url_74285ddf2747cb3d})),n.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return b.__wbg_status_c4ef3dd591e63435})),n.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return b.__wbg_headers_fd64ad685cf22e5d})),n.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return b.__wbg_arrayBuffer_4c27b6f00c530232})),n.d(e,"__wbg_text_1169d752cc697903",(function(){return b.__wbg_text_1169d752cc697903})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return b.__wbg_new_2d0053ee81e4dd2a})),n.d(e,"__wbg_append_de37df908812970d",(function(){return b.__wbg_append_de37df908812970d})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbindgen_is_function",(function(){return b.__wbindgen_is_function})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbindgen_is_object",(function(){return b.__wbindgen_is_object})),n.d(e,"__wbg_next_579e583d33566a86",(function(){return b.__wbg_next_579e583d33566a86})),n.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return b.__wbg_next_aaef7c8aa5e212ac})),n.d(e,"__wbg_done_1b73b0672e15f234",(function(){return b.__wbg_done_1b73b0672e15f234})),n.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return b.__wbg_value_1ccc36bc03462d71})),n.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return b.__wbg_iterator_6f9d4f28845f426c})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return b.__wbg_then_cedad20fbbd9418a})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_new_8c3f0052272a457a",(function(){return b.__wbg_new_8c3f0052272a457a})),n.d(e,"__wbg_set_83db9690f9353e79",(function(){return b.__wbg_set_83db9690f9353e79})),n.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return b.__wbg_length_9e1ae1900cb0fbd5})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_has_8359f114ce042f5a",(function(){return b.__wbg_has_8359f114ce042f5a})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return b.__wbg_stringify_d6471d300ded9b68})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper826",(function(){return b.__wbindgen_closure_wrapper826})),n.d(e,"__wbindgen_closure_wrapper828",(function(){return b.__wbindgen_closure_wrapper828})),n.d(e,"__wbindgen_closure_wrapper830",(function(){return b.__wbindgen_closure_wrapper830})),n.d(e,"__wbindgen_closure_wrapper832",(function(){return b.__wbindgen_closure_wrapper832})),n.d(e,"__wbindgen_closure_wrapper834",(function(){return b.__wbindgen_closure_wrapper834})),n.d(e,"__wbindgen_closure_wrapper836",(function(){return b.__wbindgen_closure_wrapper836})),n.d(e,"__wbindgen_closure_wrapper838",(function(){return b.__wbindgen_closure_wrapper838})),n.d(e,"__wbindgen_closure_wrapper840",(function(){return b.__wbindgen_closure_wrapper840})),n.d(e,"__wbindgen_closure_wrapper842",(function(){return b.__wbindgen_closure_wrapper842})),n.d(e,"__wbindgen_closure_wrapper1147",(function(){return b.__wbindgen_closure_wrapper1147})),r.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{559:function(_,e,n){"use strict";n.r(e);var r=n(455),b=n(365);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return b.__wbg_fetch_386f87a3ebf5003c})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return b.__wbg_location_8cc8ccf27e342c0a})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return b.__wbg_newwithstrandinit_05d7180788420c40})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return b.__wbg_fetch_749a56934f95c96c})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_origin_486b350035be1f11",(function(){return b.__wbg_origin_486b350035be1f11})),n.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return b.__wbg_instanceof_Response_eaa426220848a39e})),n.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return b.__wbg_url_74285ddf2747cb3d})),n.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return b.__wbg_status_c4ef3dd591e63435})),n.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return b.__wbg_headers_fd64ad685cf22e5d})),n.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return b.__wbg_arrayBuffer_4c27b6f00c530232})),n.d(e,"__wbg_text_1169d752cc697903",(function(){return b.__wbg_text_1169d752cc697903})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return b.__wbg_new_2d0053ee81e4dd2a})),n.d(e,"__wbg_append_de37df908812970d",(function(){return b.__wbg_append_de37df908812970d})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbindgen_is_function",(function(){return b.__wbindgen_is_function})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbindgen_is_object",(function(){return b.__wbindgen_is_object})),n.d(e,"__wbg_next_579e583d33566a86",(function(){return b.__wbg_next_579e583d33566a86})),n.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return b.__wbg_next_aaef7c8aa5e212ac})),n.d(e,"__wbg_done_1b73b0672e15f234",(function(){return b.__wbg_done_1b73b0672e15f234})),n.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return b.__wbg_value_1ccc36bc03462d71})),n.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return b.__wbg_iterator_6f9d4f28845f426c})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return b.__wbg_then_cedad20fbbd9418a})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_new_8c3f0052272a457a",(function(){return b.__wbg_new_8c3f0052272a457a})),n.d(e,"__wbg_set_83db9690f9353e79",(function(){return b.__wbg_set_83db9690f9353e79})),n.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return b.__wbg_length_9e1ae1900cb0fbd5})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_has_8359f114ce042f5a",(function(){return b.__wbg_has_8359f114ce042f5a})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return b.__wbg_stringify_d6471d300ded9b68})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper826",(function(){return b.__wbindgen_closure_wrapper826})),n.d(e,"__wbindgen_closure_wrapper828",(function(){return b.__wbindgen_closure_wrapper828})),n.d(e,"__wbindgen_closure_wrapper830",(function(){return b.__wbindgen_closure_wrapper830})),n.d(e,"__wbindgen_closure_wrapper832",(function(){return b.__wbindgen_closure_wrapper832})),n.d(e,"__wbindgen_closure_wrapper834",(function(){return b.__wbindgen_closure_wrapper834})),n.d(e,"__wbindgen_closure_wrapper836",(function(){return b.__wbindgen_closure_wrapper836})),n.d(e,"__wbindgen_closure_wrapper838",(function(){return b.__wbindgen_closure_wrapper838})),n.d(e,"__wbindgen_closure_wrapper840",(function(){return b.__wbindgen_closure_wrapper840})),n.d(e,"__wbindgen_closure_wrapper842",(function(){return b.__wbindgen_closure_wrapper842})),n.d(e,"__wbindgen_closure_wrapper1147",(function(){return b.__wbindgen_closure_wrapper1147})),r.f()}}]); \ No newline at end of file diff --git a/assets/js/52.bf5dee59.js b/assets/js/52.bf5dee59.js new file mode 100644 index 00000000..d50f9bba --- /dev/null +++ b/assets/js/52.bf5dee59.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{560:function(_,e,n){"use strict";n.r(e);var b=n(456),d=n(374);n.d(e,"run",(function(){return d.run})),n.d(e,"__wbindgen_cb_drop",(function(){return d.__wbindgen_cb_drop})),n.d(e,"__wbindgen_object_drop_ref",(function(){return d.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return d.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_string_new",(function(){return d.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return d.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return d.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return d.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return d.__wbindgen_number_get})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return d.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return d.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return d.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return d.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return d.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return d.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return d.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return d.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return d.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return d.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return d.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return d.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return d.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return d.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return d.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return d.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return d.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return d.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return d.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return d.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return d.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return d.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return d.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return d.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return d.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return d.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return d.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return d.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return d.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return d.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return d.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return d.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return d.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return d.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return d.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return d.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return d.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return d.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return d.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return d.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return d.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return d.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return d.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return d.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return d.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return d.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return d.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return d.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return d.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return d.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return d.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return d.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return d.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return d.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return d.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return d.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return d.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return d.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return d.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return d.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return d.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return d.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return d.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return d.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return d.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return d.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return d.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return d.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return d.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return d.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return d.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return d.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return d.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return d.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return d.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return d.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return d.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return d.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return d.__wbindgen_is_undefined})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return d.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return d.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return d.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return d.__wbindgen_throw})),n.d(e,"__wbindgen_closure_wrapper168",(function(){return d.__wbindgen_closure_wrapper168})),n.d(e,"__wbindgen_closure_wrapper170",(function(){return d.__wbindgen_closure_wrapper170})),n.d(e,"__wbindgen_closure_wrapper172",(function(){return d.__wbindgen_closure_wrapper172})),n.d(e,"__wbindgen_closure_wrapper174",(function(){return d.__wbindgen_closure_wrapper174})),n.d(e,"__wbindgen_closure_wrapper176",(function(){return d.__wbindgen_closure_wrapper176})),n.d(e,"__wbindgen_closure_wrapper178",(function(){return d.__wbindgen_closure_wrapper178})),n.d(e,"__wbindgen_closure_wrapper180",(function(){return d.__wbindgen_closure_wrapper180})),n.d(e,"__wbindgen_closure_wrapper182",(function(){return d.__wbindgen_closure_wrapper182})),n.d(e,"__wbindgen_closure_wrapper184",(function(){return d.__wbindgen_closure_wrapper184})),b.f()}}]); \ No newline at end of file diff --git a/assets/js/51.2ea56c31.js b/assets/js/53.639630ee.js similarity index 99% rename from assets/js/51.2ea56c31.js rename to assets/js/53.639630ee.js index 154129be..9d304b07 100644 --- a/assets/js/51.2ea56c31.js +++ b/assets/js/53.639630ee.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{558:function(_,e,n){"use strict";n.r(e);var b=n(455),r=n(373);n.d(e,"run",(function(){return r.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return r.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_string_new",(function(){return r.__wbindgen_string_new})),n.d(e,"__wbindgen_object_clone_ref",(function(){return r.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return r.__wbindgen_cb_drop})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return r.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return r.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return r.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_string_get",(function(){return r.__wbindgen_string_get})),n.d(e,"__wbindgen_number_get",(function(){return r.__wbindgen_number_get})),n.d(e,"__wbindgen_number_new",(function(){return r.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return r.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return r.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return r.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return r.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return r.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return r.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return r.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return r.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return r.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return r.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return r.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return r.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return r.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return r.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return r.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return r.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return r.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return r.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return r.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return r.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return r.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return r.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return r.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return r.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return r.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return r.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return r.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return r.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return r.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return r.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return r.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return r.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return r.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return r.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return r.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return r.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return r.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return r.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return r.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return r.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return r.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return r.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return r.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return r.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return r.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return r.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return r.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return r.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return r.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return r.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return r.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return r.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return r.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return r.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return r.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return r.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return r.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return r.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return r.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return r.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return r.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return r.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return r.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return r.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return r.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return r.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return r.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return r.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return r.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return r.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return r.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return r.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return r.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return r.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return r.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return r.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return r.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return r.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return r.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return r.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return r.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return r.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return r.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return r.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return r.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return r.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return r.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return r.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return r.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return r.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return r.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return r.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return r.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return r.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return r.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return r.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return r.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return r.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return r.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return r.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return r.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return r.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return r.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return r.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return r.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return r.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return r.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return r.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return r.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return r.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return r.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return r.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return r.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return r.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return r.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return r.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return r.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return r.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return r.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return r.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return r.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return r.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return r.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return r.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return r.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return r.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return r.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return r.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return r.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return r.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return r.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return r.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return r.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return r.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return r.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return r.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return r.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return r.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return r.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return r.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return r.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return r.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return r.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return r.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return r.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return r.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return r.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return r.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return r.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return r.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return r.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return r.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return r.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return r.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return r.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return r.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return r.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return r.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return r.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return r.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return r.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return r.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return r.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return r.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return r.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return r.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return r.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return r.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return r.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return r.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return r.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return r.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return r.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return r.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return r.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return r.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return r.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return r.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return r.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return r.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return r.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return r.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return r.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return r.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return r.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return r.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return r.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return r.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return r.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return r.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return r.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return r.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return r.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return r.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return r.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return r.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return r.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return r.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return r.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return r.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return r.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return r.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return r.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return r.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return r.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return r.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return r.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return r.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return r.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return r.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return r.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return r.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return r.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return r.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return r.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return r.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return r.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return r.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return r.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return r.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return r.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return r.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return r.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return r.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return r.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return r.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return r.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return r.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return r.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return r.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return r.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return r.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return r.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return r.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return r.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return r.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return r.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return r.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return r.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return r.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return r.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return r.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return r.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return r.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return r.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return r.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return r.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return r.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return r.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return r.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return r.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return r.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return r.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return r.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return r.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return r.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return r.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return r.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return r.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return r.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return r.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return r.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return r.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return r.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return r.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return r.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return r.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return r.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return r.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return r.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return r.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return r.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return r.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return r.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return r.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return r.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return r.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return r.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return r.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return r.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return r.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return r.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return r.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return r.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return r.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return r.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return r.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return r.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return r.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return r.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper521",(function(){return r.__wbindgen_closure_wrapper521})),n.d(e,"__wbindgen_closure_wrapper523",(function(){return r.__wbindgen_closure_wrapper523})),n.d(e,"__wbindgen_closure_wrapper525",(function(){return r.__wbindgen_closure_wrapper525})),n.d(e,"__wbindgen_closure_wrapper527",(function(){return r.__wbindgen_closure_wrapper527})),n.d(e,"__wbindgen_closure_wrapper529",(function(){return r.__wbindgen_closure_wrapper529})),n.d(e,"__wbindgen_closure_wrapper531",(function(){return r.__wbindgen_closure_wrapper531})),n.d(e,"__wbindgen_closure_wrapper533",(function(){return r.__wbindgen_closure_wrapper533})),n.d(e,"__wbindgen_closure_wrapper535",(function(){return r.__wbindgen_closure_wrapper535})),n.d(e,"__wbindgen_closure_wrapper537",(function(){return r.__wbindgen_closure_wrapper537})),n.d(e,"__wbindgen_closure_wrapper754",(function(){return r.__wbindgen_closure_wrapper754})),b.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{561:function(_,e,n){"use strict";n.r(e);var b=n(457),r=n(373);n.d(e,"run",(function(){return r.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return r.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_string_new",(function(){return r.__wbindgen_string_new})),n.d(e,"__wbindgen_object_clone_ref",(function(){return r.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return r.__wbindgen_cb_drop})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return r.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return r.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return r.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_string_get",(function(){return r.__wbindgen_string_get})),n.d(e,"__wbindgen_number_get",(function(){return r.__wbindgen_number_get})),n.d(e,"__wbindgen_number_new",(function(){return r.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return r.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return r.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return r.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return r.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return r.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return r.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return r.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return r.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return r.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return r.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return r.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return r.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return r.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return r.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return r.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return r.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return r.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return r.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return r.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return r.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return r.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return r.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return r.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return r.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return r.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return r.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return r.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return r.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return r.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return r.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return r.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return r.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return r.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return r.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return r.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return r.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return r.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return r.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return r.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return r.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return r.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return r.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return r.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return r.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return r.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return r.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return r.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return r.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return r.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return r.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return r.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return r.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return r.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return r.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return r.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return r.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return r.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return r.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return r.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return r.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return r.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return r.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return r.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return r.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return r.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return r.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return r.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return r.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return r.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return r.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return r.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return r.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return r.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return r.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return r.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return r.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return r.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return r.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return r.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return r.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return r.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return r.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return r.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return r.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return r.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return r.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return r.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return r.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return r.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return r.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return r.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return r.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return r.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return r.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return r.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return r.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return r.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return r.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return r.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return r.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return r.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return r.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return r.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return r.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return r.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return r.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return r.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return r.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return r.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return r.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return r.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return r.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return r.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return r.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return r.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return r.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return r.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return r.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return r.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return r.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return r.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return r.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return r.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return r.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return r.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return r.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return r.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return r.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return r.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return r.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return r.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return r.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return r.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return r.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return r.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return r.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return r.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return r.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return r.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return r.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return r.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return r.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return r.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return r.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return r.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return r.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return r.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return r.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return r.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return r.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return r.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return r.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return r.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return r.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return r.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return r.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return r.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return r.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return r.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return r.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return r.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return r.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return r.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return r.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return r.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return r.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return r.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return r.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return r.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return r.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return r.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return r.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return r.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return r.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return r.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return r.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return r.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return r.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return r.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return r.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return r.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return r.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return r.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return r.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return r.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return r.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return r.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return r.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return r.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return r.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return r.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return r.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return r.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return r.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return r.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return r.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return r.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return r.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return r.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return r.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return r.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return r.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return r.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return r.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return r.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return r.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return r.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return r.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return r.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return r.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return r.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return r.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return r.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return r.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return r.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return r.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return r.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return r.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return r.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return r.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return r.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return r.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return r.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return r.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return r.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return r.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return r.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return r.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return r.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return r.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return r.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return r.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return r.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return r.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return r.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return r.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return r.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return r.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return r.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return r.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return r.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return r.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return r.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return r.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return r.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return r.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return r.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return r.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return r.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return r.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return r.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return r.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return r.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return r.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return r.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return r.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return r.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return r.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return r.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return r.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return r.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return r.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return r.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return r.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return r.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return r.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return r.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return r.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return r.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return r.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return r.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return r.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return r.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return r.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return r.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return r.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return r.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return r.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return r.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return r.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return r.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return r.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return r.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return r.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return r.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return r.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return r.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return r.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return r.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return r.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper521",(function(){return r.__wbindgen_closure_wrapper521})),n.d(e,"__wbindgen_closure_wrapper523",(function(){return r.__wbindgen_closure_wrapper523})),n.d(e,"__wbindgen_closure_wrapper525",(function(){return r.__wbindgen_closure_wrapper525})),n.d(e,"__wbindgen_closure_wrapper527",(function(){return r.__wbindgen_closure_wrapper527})),n.d(e,"__wbindgen_closure_wrapper529",(function(){return r.__wbindgen_closure_wrapper529})),n.d(e,"__wbindgen_closure_wrapper531",(function(){return r.__wbindgen_closure_wrapper531})),n.d(e,"__wbindgen_closure_wrapper533",(function(){return r.__wbindgen_closure_wrapper533})),n.d(e,"__wbindgen_closure_wrapper535",(function(){return r.__wbindgen_closure_wrapper535})),n.d(e,"__wbindgen_closure_wrapper537",(function(){return r.__wbindgen_closure_wrapper537})),n.d(e,"__wbindgen_closure_wrapper754",(function(){return r.__wbindgen_closure_wrapper754})),b.f()}}]); \ No newline at end of file diff --git a/assets/js/52.bde116fc.js b/assets/js/54.a0d139e9.js similarity index 99% rename from assets/js/52.bde116fc.js rename to assets/js/54.a0d139e9.js index 00d63b60..fc1eb2b7 100644 --- a/assets/js/52.bde116fc.js +++ b/assets/js/54.a0d139e9.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{559:function(_,e,n){"use strict";n.r(e);var b=n(456),r=n(371);n.d(e,"run",(function(){return r.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return r.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_string_new",(function(){return r.__wbindgen_string_new})),n.d(e,"__wbindgen_object_clone_ref",(function(){return r.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return r.__wbindgen_cb_drop})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return r.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return r.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return r.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_string_get",(function(){return r.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return r.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_get",(function(){return r.__wbindgen_number_get})),n.d(e,"__wbindgen_number_new",(function(){return r.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return r.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return r.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return r.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return r.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return r.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return r.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return r.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return r.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return r.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return r.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return r.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return r.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return r.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return r.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return r.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return r.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return r.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return r.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return r.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return r.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return r.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return r.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return r.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return r.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return r.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return r.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return r.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return r.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return r.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return r.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return r.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return r.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return r.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return r.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return r.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return r.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return r.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return r.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return r.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return r.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return r.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return r.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return r.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return r.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return r.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return r.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return r.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return r.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return r.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return r.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return r.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return r.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return r.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return r.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return r.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return r.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return r.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return r.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return r.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return r.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return r.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return r.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return r.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return r.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return r.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return r.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return r.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return r.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return r.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return r.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return r.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return r.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return r.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return r.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return r.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return r.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return r.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return r.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return r.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return r.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return r.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return r.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return r.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return r.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return r.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return r.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return r.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return r.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return r.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return r.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return r.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return r.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return r.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return r.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return r.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return r.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return r.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return r.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return r.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return r.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return r.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return r.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return r.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return r.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return r.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return r.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return r.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return r.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return r.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return r.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return r.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return r.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return r.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return r.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return r.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return r.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return r.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return r.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return r.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return r.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return r.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return r.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return r.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return r.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return r.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return r.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return r.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return r.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return r.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return r.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return r.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return r.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return r.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return r.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return r.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return r.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return r.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return r.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return r.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return r.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return r.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return r.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return r.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return r.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return r.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return r.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return r.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return r.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return r.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return r.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return r.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return r.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return r.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return r.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return r.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return r.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return r.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return r.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return r.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return r.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return r.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return r.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return r.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return r.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return r.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return r.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return r.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return r.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return r.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return r.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return r.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return r.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return r.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return r.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return r.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return r.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return r.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return r.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return r.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return r.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return r.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return r.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return r.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return r.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return r.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return r.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return r.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return r.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return r.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return r.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return r.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return r.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return r.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return r.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return r.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return r.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return r.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return r.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return r.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return r.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return r.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return r.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return r.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return r.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return r.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return r.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return r.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return r.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return r.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return r.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return r.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return r.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return r.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return r.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return r.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return r.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return r.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return r.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return r.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return r.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return r.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return r.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return r.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return r.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return r.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return r.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return r.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return r.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return r.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return r.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return r.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return r.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return r.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return r.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return r.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return r.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return r.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return r.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return r.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return r.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return r.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return r.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return r.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return r.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return r.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return r.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return r.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return r.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return r.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return r.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return r.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return r.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return r.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return r.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return r.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return r.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return r.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return r.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return r.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return r.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return r.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return r.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return r.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return r.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return r.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return r.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return r.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return r.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return r.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return r.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return r.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return r.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return r.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return r.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return r.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return r.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return r.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return r.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return r.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return r.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return r.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return r.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return r.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return r.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return r.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return r.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return r.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return r.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return r.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return r.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return r.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return r.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return r.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return r.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return r.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return r.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return r.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return r.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return r.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return r.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return r.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return r.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return r.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return r.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return r.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper537",(function(){return r.__wbindgen_closure_wrapper537})),n.d(e,"__wbindgen_closure_wrapper539",(function(){return r.__wbindgen_closure_wrapper539})),n.d(e,"__wbindgen_closure_wrapper541",(function(){return r.__wbindgen_closure_wrapper541})),n.d(e,"__wbindgen_closure_wrapper543",(function(){return r.__wbindgen_closure_wrapper543})),n.d(e,"__wbindgen_closure_wrapper545",(function(){return r.__wbindgen_closure_wrapper545})),n.d(e,"__wbindgen_closure_wrapper547",(function(){return r.__wbindgen_closure_wrapper547})),n.d(e,"__wbindgen_closure_wrapper549",(function(){return r.__wbindgen_closure_wrapper549})),n.d(e,"__wbindgen_closure_wrapper551",(function(){return r.__wbindgen_closure_wrapper551})),n.d(e,"__wbindgen_closure_wrapper553",(function(){return r.__wbindgen_closure_wrapper553})),n.d(e,"__wbindgen_closure_wrapper770",(function(){return r.__wbindgen_closure_wrapper770})),b.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{562:function(_,e,n){"use strict";n.r(e);var b=n(458),r=n(371);n.d(e,"run",(function(){return r.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return r.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_string_new",(function(){return r.__wbindgen_string_new})),n.d(e,"__wbindgen_object_clone_ref",(function(){return r.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return r.__wbindgen_cb_drop})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return r.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return r.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return r.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_string_get",(function(){return r.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return r.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_get",(function(){return r.__wbindgen_number_get})),n.d(e,"__wbindgen_number_new",(function(){return r.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return r.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return r.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return r.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return r.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return r.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return r.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return r.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return r.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return r.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return r.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return r.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return r.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return r.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return r.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return r.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return r.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return r.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return r.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return r.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return r.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return r.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return r.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return r.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return r.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return r.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return r.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return r.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return r.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return r.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return r.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return r.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return r.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return r.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return r.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return r.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return r.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return r.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return r.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return r.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return r.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return r.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return r.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return r.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return r.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return r.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return r.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return r.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return r.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return r.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return r.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return r.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return r.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return r.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return r.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return r.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return r.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return r.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return r.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return r.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return r.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return r.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return r.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return r.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return r.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return r.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return r.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return r.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return r.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return r.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return r.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return r.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return r.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return r.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return r.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return r.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return r.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return r.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return r.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return r.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return r.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return r.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return r.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return r.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return r.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return r.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return r.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return r.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return r.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return r.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return r.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return r.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return r.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return r.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return r.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return r.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return r.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return r.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return r.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return r.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return r.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return r.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return r.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return r.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return r.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return r.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return r.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return r.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return r.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return r.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return r.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return r.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return r.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return r.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return r.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return r.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return r.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return r.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return r.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return r.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return r.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return r.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return r.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return r.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return r.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return r.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return r.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return r.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return r.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return r.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return r.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return r.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return r.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return r.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return r.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return r.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return r.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return r.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return r.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return r.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return r.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return r.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return r.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return r.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return r.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return r.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return r.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return r.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return r.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return r.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return r.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return r.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return r.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return r.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return r.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return r.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return r.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return r.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return r.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return r.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return r.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return r.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return r.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return r.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return r.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return r.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return r.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return r.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return r.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return r.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return r.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return r.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return r.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return r.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return r.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return r.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return r.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return r.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return r.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return r.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return r.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return r.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return r.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return r.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return r.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return r.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return r.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return r.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return r.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return r.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return r.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return r.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return r.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return r.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return r.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return r.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return r.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return r.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return r.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return r.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return r.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return r.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return r.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return r.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return r.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return r.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return r.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return r.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return r.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return r.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return r.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return r.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return r.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return r.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return r.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return r.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return r.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return r.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return r.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return r.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return r.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return r.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return r.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return r.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return r.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return r.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return r.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return r.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return r.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return r.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return r.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return r.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return r.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return r.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return r.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return r.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return r.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return r.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return r.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return r.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return r.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return r.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return r.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return r.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return r.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return r.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return r.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return r.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return r.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return r.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return r.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return r.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return r.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return r.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return r.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return r.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return r.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return r.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return r.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return r.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return r.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return r.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return r.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return r.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return r.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return r.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return r.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return r.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return r.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return r.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return r.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return r.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return r.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return r.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return r.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return r.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return r.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return r.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return r.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return r.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return r.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return r.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return r.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return r.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return r.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return r.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return r.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return r.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return r.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return r.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return r.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return r.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return r.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return r.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return r.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return r.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return r.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return r.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return r.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return r.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return r.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return r.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return r.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return r.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return r.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return r.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper537",(function(){return r.__wbindgen_closure_wrapper537})),n.d(e,"__wbindgen_closure_wrapper539",(function(){return r.__wbindgen_closure_wrapper539})),n.d(e,"__wbindgen_closure_wrapper541",(function(){return r.__wbindgen_closure_wrapper541})),n.d(e,"__wbindgen_closure_wrapper543",(function(){return r.__wbindgen_closure_wrapper543})),n.d(e,"__wbindgen_closure_wrapper545",(function(){return r.__wbindgen_closure_wrapper545})),n.d(e,"__wbindgen_closure_wrapper547",(function(){return r.__wbindgen_closure_wrapper547})),n.d(e,"__wbindgen_closure_wrapper549",(function(){return r.__wbindgen_closure_wrapper549})),n.d(e,"__wbindgen_closure_wrapper551",(function(){return r.__wbindgen_closure_wrapper551})),n.d(e,"__wbindgen_closure_wrapper553",(function(){return r.__wbindgen_closure_wrapper553})),n.d(e,"__wbindgen_closure_wrapper770",(function(){return r.__wbindgen_closure_wrapper770})),b.f()}}]); \ No newline at end of file diff --git a/assets/js/53.ebfbb38b.js b/assets/js/55.2469ed88.js similarity index 99% rename from assets/js/53.ebfbb38b.js rename to assets/js/55.2469ed88.js index 75195e36..cb505f0f 100644 --- a/assets/js/53.ebfbb38b.js +++ b/assets/js/55.2469ed88.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{560:function(_,e,n){"use strict";n.r(e);var b=n(457),r=n(372);n.d(e,"run",(function(){return r.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return r.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return r.__wbindgen_cb_drop})),n.d(e,"__wbindgen_object_clone_ref",(function(){return r.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_string_new",(function(){return r.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return r.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return r.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return r.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return r.__wbindgen_number_get})),n.d(e,"__wbindgen_string_get",(function(){return r.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return r.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return r.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return r.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return r.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return r.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return r.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return r.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return r.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return r.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return r.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return r.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return r.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return r.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return r.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return r.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return r.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return r.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return r.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return r.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return r.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return r.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return r.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return r.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return r.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return r.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return r.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return r.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return r.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return r.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return r.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return r.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return r.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return r.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return r.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return r.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return r.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return r.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return r.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return r.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return r.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return r.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return r.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return r.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return r.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return r.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return r.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return r.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return r.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return r.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return r.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return r.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return r.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return r.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return r.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return r.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return r.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return r.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return r.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return r.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return r.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return r.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return r.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return r.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return r.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return r.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return r.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return r.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return r.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return r.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return r.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return r.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return r.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return r.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return r.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return r.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return r.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return r.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return r.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return r.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return r.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return r.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return r.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return r.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return r.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return r.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return r.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return r.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return r.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return r.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return r.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return r.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return r.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return r.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return r.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return r.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return r.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return r.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return r.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return r.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return r.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return r.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return r.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return r.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return r.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return r.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return r.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return r.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return r.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return r.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return r.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return r.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return r.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return r.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return r.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return r.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return r.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return r.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return r.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return r.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return r.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return r.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return r.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return r.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return r.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return r.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return r.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return r.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return r.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return r.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return r.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return r.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return r.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return r.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return r.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return r.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return r.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return r.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return r.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return r.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return r.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return r.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return r.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return r.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return r.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return r.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return r.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return r.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return r.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return r.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return r.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return r.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return r.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return r.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return r.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return r.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return r.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return r.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return r.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return r.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return r.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return r.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return r.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return r.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return r.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return r.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return r.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return r.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return r.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return r.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return r.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return r.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return r.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return r.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return r.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return r.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return r.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return r.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return r.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return r.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return r.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return r.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return r.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return r.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return r.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return r.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return r.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return r.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return r.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return r.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return r.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return r.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return r.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return r.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return r.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return r.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return r.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return r.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return r.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return r.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return r.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return r.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return r.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return r.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return r.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return r.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return r.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return r.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return r.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return r.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return r.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return r.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return r.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return r.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return r.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return r.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return r.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return r.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return r.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return r.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return r.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return r.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return r.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return r.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return r.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return r.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return r.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return r.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return r.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return r.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return r.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return r.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return r.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return r.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return r.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return r.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return r.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return r.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return r.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return r.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return r.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return r.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return r.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return r.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return r.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return r.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return r.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return r.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return r.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return r.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return r.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return r.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return r.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return r.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return r.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return r.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return r.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return r.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return r.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return r.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return r.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return r.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return r.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return r.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return r.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return r.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return r.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return r.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return r.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return r.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return r.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return r.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return r.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return r.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return r.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return r.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return r.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return r.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return r.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return r.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return r.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return r.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return r.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return r.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return r.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return r.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return r.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return r.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return r.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return r.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return r.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return r.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return r.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return r.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return r.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return r.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return r.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return r.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return r.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return r.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return r.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return r.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return r.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return r.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return r.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return r.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return r.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return r.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper543",(function(){return r.__wbindgen_closure_wrapper543})),n.d(e,"__wbindgen_closure_wrapper545",(function(){return r.__wbindgen_closure_wrapper545})),n.d(e,"__wbindgen_closure_wrapper547",(function(){return r.__wbindgen_closure_wrapper547})),n.d(e,"__wbindgen_closure_wrapper549",(function(){return r.__wbindgen_closure_wrapper549})),n.d(e,"__wbindgen_closure_wrapper551",(function(){return r.__wbindgen_closure_wrapper551})),n.d(e,"__wbindgen_closure_wrapper553",(function(){return r.__wbindgen_closure_wrapper553})),n.d(e,"__wbindgen_closure_wrapper555",(function(){return r.__wbindgen_closure_wrapper555})),n.d(e,"__wbindgen_closure_wrapper557",(function(){return r.__wbindgen_closure_wrapper557})),n.d(e,"__wbindgen_closure_wrapper559",(function(){return r.__wbindgen_closure_wrapper559})),n.d(e,"__wbindgen_closure_wrapper773",(function(){return r.__wbindgen_closure_wrapper773})),b.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{563:function(_,e,n){"use strict";n.r(e);var b=n(459),r=n(372);n.d(e,"run",(function(){return r.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return r.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return r.__wbindgen_cb_drop})),n.d(e,"__wbindgen_object_clone_ref",(function(){return r.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_string_new",(function(){return r.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return r.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return r.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return r.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return r.__wbindgen_number_get})),n.d(e,"__wbindgen_string_get",(function(){return r.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return r.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return r.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return r.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return r.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return r.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return r.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return r.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return r.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return r.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return r.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return r.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return r.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return r.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return r.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return r.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return r.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return r.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return r.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return r.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return r.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return r.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return r.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return r.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return r.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return r.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return r.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return r.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return r.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return r.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return r.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return r.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return r.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return r.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return r.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return r.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return r.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return r.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return r.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return r.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return r.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return r.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return r.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return r.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return r.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return r.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return r.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return r.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return r.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return r.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return r.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return r.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return r.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return r.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return r.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return r.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return r.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return r.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return r.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return r.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return r.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return r.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return r.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return r.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return r.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return r.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return r.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return r.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return r.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return r.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return r.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return r.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return r.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return r.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return r.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return r.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return r.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return r.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return r.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return r.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return r.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return r.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return r.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return r.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return r.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return r.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return r.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return r.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return r.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return r.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return r.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return r.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return r.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return r.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return r.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return r.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return r.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return r.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return r.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return r.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return r.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return r.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return r.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return r.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return r.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return r.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return r.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return r.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return r.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return r.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return r.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return r.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return r.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return r.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return r.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return r.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return r.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return r.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return r.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return r.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return r.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return r.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return r.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return r.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return r.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return r.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return r.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return r.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return r.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return r.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return r.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return r.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return r.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return r.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return r.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return r.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return r.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return r.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return r.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return r.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return r.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return r.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return r.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return r.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return r.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return r.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return r.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return r.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return r.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return r.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return r.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return r.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return r.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return r.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return r.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return r.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return r.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return r.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return r.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return r.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return r.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return r.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return r.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return r.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return r.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return r.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return r.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return r.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return r.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return r.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return r.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return r.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return r.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return r.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return r.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return r.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return r.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return r.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return r.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return r.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return r.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return r.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return r.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return r.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return r.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return r.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return r.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return r.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return r.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return r.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return r.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return r.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return r.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return r.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return r.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return r.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return r.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return r.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return r.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return r.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return r.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return r.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return r.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return r.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return r.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return r.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return r.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return r.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return r.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return r.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return r.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return r.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return r.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return r.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return r.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return r.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return r.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return r.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return r.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return r.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return r.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return r.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return r.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return r.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return r.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return r.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return r.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return r.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return r.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return r.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return r.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return r.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return r.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return r.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return r.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return r.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return r.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return r.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return r.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return r.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return r.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return r.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return r.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return r.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return r.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return r.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return r.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return r.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return r.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return r.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return r.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return r.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return r.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return r.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return r.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return r.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return r.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return r.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return r.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return r.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return r.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return r.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return r.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return r.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return r.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return r.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return r.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return r.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return r.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return r.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return r.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return r.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return r.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return r.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return r.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return r.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return r.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return r.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return r.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return r.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return r.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return r.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return r.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return r.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return r.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return r.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return r.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return r.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return r.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return r.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return r.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return r.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return r.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return r.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return r.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return r.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return r.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return r.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return r.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return r.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return r.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return r.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return r.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return r.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return r.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return r.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return r.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return r.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return r.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper543",(function(){return r.__wbindgen_closure_wrapper543})),n.d(e,"__wbindgen_closure_wrapper545",(function(){return r.__wbindgen_closure_wrapper545})),n.d(e,"__wbindgen_closure_wrapper547",(function(){return r.__wbindgen_closure_wrapper547})),n.d(e,"__wbindgen_closure_wrapper549",(function(){return r.__wbindgen_closure_wrapper549})),n.d(e,"__wbindgen_closure_wrapper551",(function(){return r.__wbindgen_closure_wrapper551})),n.d(e,"__wbindgen_closure_wrapper553",(function(){return r.__wbindgen_closure_wrapper553})),n.d(e,"__wbindgen_closure_wrapper555",(function(){return r.__wbindgen_closure_wrapper555})),n.d(e,"__wbindgen_closure_wrapper557",(function(){return r.__wbindgen_closure_wrapper557})),n.d(e,"__wbindgen_closure_wrapper559",(function(){return r.__wbindgen_closure_wrapper559})),n.d(e,"__wbindgen_closure_wrapper773",(function(){return r.__wbindgen_closure_wrapper773})),b.f()}}]); \ No newline at end of file diff --git a/assets/js/54.74a877d4.js b/assets/js/56.4d41b7e3.js similarity index 99% rename from assets/js/54.74a877d4.js rename to assets/js/56.4d41b7e3.js index e22141b0..148911bf 100644 --- a/assets/js/54.74a877d4.js +++ b/assets/js/56.4d41b7e3.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{561:function(_,e,n){"use strict";n.r(e);var r=n(458),b=n(367);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper559",(function(){return b.__wbindgen_closure_wrapper559})),n.d(e,"__wbindgen_closure_wrapper561",(function(){return b.__wbindgen_closure_wrapper561})),n.d(e,"__wbindgen_closure_wrapper563",(function(){return b.__wbindgen_closure_wrapper563})),n.d(e,"__wbindgen_closure_wrapper565",(function(){return b.__wbindgen_closure_wrapper565})),n.d(e,"__wbindgen_closure_wrapper567",(function(){return b.__wbindgen_closure_wrapper567})),n.d(e,"__wbindgen_closure_wrapper569",(function(){return b.__wbindgen_closure_wrapper569})),n.d(e,"__wbindgen_closure_wrapper571",(function(){return b.__wbindgen_closure_wrapper571})),n.d(e,"__wbindgen_closure_wrapper573",(function(){return b.__wbindgen_closure_wrapper573})),n.d(e,"__wbindgen_closure_wrapper575",(function(){return b.__wbindgen_closure_wrapper575})),n.d(e,"__wbindgen_closure_wrapper808",(function(){return b.__wbindgen_closure_wrapper808})),r.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{564:function(_,e,n){"use strict";n.r(e);var r=n(460),b=n(367);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper559",(function(){return b.__wbindgen_closure_wrapper559})),n.d(e,"__wbindgen_closure_wrapper561",(function(){return b.__wbindgen_closure_wrapper561})),n.d(e,"__wbindgen_closure_wrapper563",(function(){return b.__wbindgen_closure_wrapper563})),n.d(e,"__wbindgen_closure_wrapper565",(function(){return b.__wbindgen_closure_wrapper565})),n.d(e,"__wbindgen_closure_wrapper567",(function(){return b.__wbindgen_closure_wrapper567})),n.d(e,"__wbindgen_closure_wrapper569",(function(){return b.__wbindgen_closure_wrapper569})),n.d(e,"__wbindgen_closure_wrapper571",(function(){return b.__wbindgen_closure_wrapper571})),n.d(e,"__wbindgen_closure_wrapper573",(function(){return b.__wbindgen_closure_wrapper573})),n.d(e,"__wbindgen_closure_wrapper575",(function(){return b.__wbindgen_closure_wrapper575})),n.d(e,"__wbindgen_closure_wrapper808",(function(){return b.__wbindgen_closure_wrapper808})),r.f()}}]); \ No newline at end of file diff --git a/assets/js/55.3bb59e1a.js b/assets/js/57.bc5114be.js similarity index 99% rename from assets/js/55.3bb59e1a.js rename to assets/js/57.bc5114be.js index 66f60dfe..a6bfbd8f 100644 --- a/assets/js/55.3bb59e1a.js +++ b/assets/js/57.bc5114be.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{562:function(_,e,n){"use strict";n.r(e);var r=n(459),b=n(368);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper577",(function(){return b.__wbindgen_closure_wrapper577})),n.d(e,"__wbindgen_closure_wrapper579",(function(){return b.__wbindgen_closure_wrapper579})),n.d(e,"__wbindgen_closure_wrapper581",(function(){return b.__wbindgen_closure_wrapper581})),n.d(e,"__wbindgen_closure_wrapper583",(function(){return b.__wbindgen_closure_wrapper583})),n.d(e,"__wbindgen_closure_wrapper585",(function(){return b.__wbindgen_closure_wrapper585})),n.d(e,"__wbindgen_closure_wrapper587",(function(){return b.__wbindgen_closure_wrapper587})),n.d(e,"__wbindgen_closure_wrapper589",(function(){return b.__wbindgen_closure_wrapper589})),n.d(e,"__wbindgen_closure_wrapper591",(function(){return b.__wbindgen_closure_wrapper591})),n.d(e,"__wbindgen_closure_wrapper593",(function(){return b.__wbindgen_closure_wrapper593})),n.d(e,"__wbindgen_closure_wrapper817",(function(){return b.__wbindgen_closure_wrapper817})),r.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{565:function(_,e,n){"use strict";n.r(e);var r=n(461),b=n(368);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper577",(function(){return b.__wbindgen_closure_wrapper577})),n.d(e,"__wbindgen_closure_wrapper579",(function(){return b.__wbindgen_closure_wrapper579})),n.d(e,"__wbindgen_closure_wrapper581",(function(){return b.__wbindgen_closure_wrapper581})),n.d(e,"__wbindgen_closure_wrapper583",(function(){return b.__wbindgen_closure_wrapper583})),n.d(e,"__wbindgen_closure_wrapper585",(function(){return b.__wbindgen_closure_wrapper585})),n.d(e,"__wbindgen_closure_wrapper587",(function(){return b.__wbindgen_closure_wrapper587})),n.d(e,"__wbindgen_closure_wrapper589",(function(){return b.__wbindgen_closure_wrapper589})),n.d(e,"__wbindgen_closure_wrapper591",(function(){return b.__wbindgen_closure_wrapper591})),n.d(e,"__wbindgen_closure_wrapper593",(function(){return b.__wbindgen_closure_wrapper593})),n.d(e,"__wbindgen_closure_wrapper817",(function(){return b.__wbindgen_closure_wrapper817})),r.f()}}]); \ No newline at end of file diff --git a/assets/js/56.abd5fff5.js b/assets/js/58.e52c8733.js similarity index 99% rename from assets/js/56.abd5fff5.js rename to assets/js/58.e52c8733.js index 6b9e11de..43762500 100644 --- a/assets/js/56.abd5fff5.js +++ b/assets/js/58.e52c8733.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{563:function(_,e,n){"use strict";n.r(e);var r=n(460),b=n(369);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper578",(function(){return b.__wbindgen_closure_wrapper578})),n.d(e,"__wbindgen_closure_wrapper580",(function(){return b.__wbindgen_closure_wrapper580})),n.d(e,"__wbindgen_closure_wrapper582",(function(){return b.__wbindgen_closure_wrapper582})),n.d(e,"__wbindgen_closure_wrapper584",(function(){return b.__wbindgen_closure_wrapper584})),n.d(e,"__wbindgen_closure_wrapper586",(function(){return b.__wbindgen_closure_wrapper586})),n.d(e,"__wbindgen_closure_wrapper588",(function(){return b.__wbindgen_closure_wrapper588})),n.d(e,"__wbindgen_closure_wrapper590",(function(){return b.__wbindgen_closure_wrapper590})),n.d(e,"__wbindgen_closure_wrapper592",(function(){return b.__wbindgen_closure_wrapper592})),n.d(e,"__wbindgen_closure_wrapper594",(function(){return b.__wbindgen_closure_wrapper594})),n.d(e,"__wbindgen_closure_wrapper821",(function(){return b.__wbindgen_closure_wrapper821})),r.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{566:function(_,e,n){"use strict";n.r(e);var r=n(462),b=n(369);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper578",(function(){return b.__wbindgen_closure_wrapper578})),n.d(e,"__wbindgen_closure_wrapper580",(function(){return b.__wbindgen_closure_wrapper580})),n.d(e,"__wbindgen_closure_wrapper582",(function(){return b.__wbindgen_closure_wrapper582})),n.d(e,"__wbindgen_closure_wrapper584",(function(){return b.__wbindgen_closure_wrapper584})),n.d(e,"__wbindgen_closure_wrapper586",(function(){return b.__wbindgen_closure_wrapper586})),n.d(e,"__wbindgen_closure_wrapper588",(function(){return b.__wbindgen_closure_wrapper588})),n.d(e,"__wbindgen_closure_wrapper590",(function(){return b.__wbindgen_closure_wrapper590})),n.d(e,"__wbindgen_closure_wrapper592",(function(){return b.__wbindgen_closure_wrapper592})),n.d(e,"__wbindgen_closure_wrapper594",(function(){return b.__wbindgen_closure_wrapper594})),n.d(e,"__wbindgen_closure_wrapper821",(function(){return b.__wbindgen_closure_wrapper821})),r.f()}}]); \ No newline at end of file diff --git a/assets/js/57.759cf256.js b/assets/js/59.0c19fdc1.js similarity index 99% rename from assets/js/57.759cf256.js rename to assets/js/59.0c19fdc1.js index 27afc966..54e3fdcd 100644 --- a/assets/js/57.759cf256.js +++ b/assets/js/59.0c19fdc1.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{564:function(_,e,n){"use strict";n.r(e);var r=n(461),b=n(370);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper556",(function(){return b.__wbindgen_closure_wrapper556})),n.d(e,"__wbindgen_closure_wrapper558",(function(){return b.__wbindgen_closure_wrapper558})),n.d(e,"__wbindgen_closure_wrapper560",(function(){return b.__wbindgen_closure_wrapper560})),n.d(e,"__wbindgen_closure_wrapper562",(function(){return b.__wbindgen_closure_wrapper562})),n.d(e,"__wbindgen_closure_wrapper564",(function(){return b.__wbindgen_closure_wrapper564})),n.d(e,"__wbindgen_closure_wrapper566",(function(){return b.__wbindgen_closure_wrapper566})),n.d(e,"__wbindgen_closure_wrapper568",(function(){return b.__wbindgen_closure_wrapper568})),n.d(e,"__wbindgen_closure_wrapper570",(function(){return b.__wbindgen_closure_wrapper570})),n.d(e,"__wbindgen_closure_wrapper572",(function(){return b.__wbindgen_closure_wrapper572})),n.d(e,"__wbindgen_closure_wrapper821",(function(){return b.__wbindgen_closure_wrapper821})),r.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{567:function(_,e,n){"use strict";n.r(e);var r=n(463),b=n(370);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper556",(function(){return b.__wbindgen_closure_wrapper556})),n.d(e,"__wbindgen_closure_wrapper558",(function(){return b.__wbindgen_closure_wrapper558})),n.d(e,"__wbindgen_closure_wrapper560",(function(){return b.__wbindgen_closure_wrapper560})),n.d(e,"__wbindgen_closure_wrapper562",(function(){return b.__wbindgen_closure_wrapper562})),n.d(e,"__wbindgen_closure_wrapper564",(function(){return b.__wbindgen_closure_wrapper564})),n.d(e,"__wbindgen_closure_wrapper566",(function(){return b.__wbindgen_closure_wrapper566})),n.d(e,"__wbindgen_closure_wrapper568",(function(){return b.__wbindgen_closure_wrapper568})),n.d(e,"__wbindgen_closure_wrapper570",(function(){return b.__wbindgen_closure_wrapper570})),n.d(e,"__wbindgen_closure_wrapper572",(function(){return b.__wbindgen_closure_wrapper572})),n.d(e,"__wbindgen_closure_wrapper821",(function(){return b.__wbindgen_closure_wrapper821})),r.f()}}]); \ No newline at end of file diff --git a/assets/js/6.2a17918a.js b/assets/js/6.c1433563.js similarity index 85% rename from assets/js/6.2a17918a.js rename to assets/js/6.c1433563.js index a9e2e6d5..64a5a219 100644 --- a/assets/js/6.2a17918a.js +++ b/assets/js/6.c1433563.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{373:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return E})),t.d(e,"__wbindgen_object_drop_ref",(function(){return k})),t.d(e,"__wbindgen_string_new",(function(){return L})),t.d(e,"__wbindgen_object_clone_ref",(function(){return O})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_number_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return U})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return G})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return W})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return Q})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return X})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return Y})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return N})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return H})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return J})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return Z})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return $})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return nn})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return en})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return tn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return cn})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return _n})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return on})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return dn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return an})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return bn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return gn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return wn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return ln})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return sn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return mn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return vn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return yn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return pn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return xn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return hn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Sn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return An})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Dn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return En})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Fn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Tn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Pn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return In})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Bn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Mn})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return kn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Ln})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return On})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Rn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Cn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Vn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return qn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Kn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return jn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Un})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Gn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Wn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return Qn})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return Xn})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return Yn})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return Nn})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return Hn})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return Jn})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return zn})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return Zn})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return $n})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return ne})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ee})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return te})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return re})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return ue})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return fe})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return ce})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return _e})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ie})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return oe})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return de})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return ae})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return be})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return ge})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return we})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return le})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return se})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return me})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return ve})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return ye})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return pe})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return xe})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return he})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Se})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return Ae})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return De})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ee})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Fe})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Te})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return Pe})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Ie})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Be})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Me})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return ke})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return Le})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Oe})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return Re})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return Ce})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return Ve})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return qe})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return Ke})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return je})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return Ue})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return Ge})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return We})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return Qe})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return Xe})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return Ye})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return Ne})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return He})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return Je})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return ze})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return Ze})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return $e})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return nt})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return et})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return tt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return rt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return ut})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return ft})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return ct})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return _t})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return it})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return ot})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return dt})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return at})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return bt})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return gt})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return wt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return lt})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return st})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return mt})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return vt})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return yt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return pt})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return xt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return ht})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return St})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return At})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Dt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Et})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Ft})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Tt})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Pt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return It})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Bt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Mt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return kt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Lt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Ot})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Rt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return Ct})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Vt})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return qt})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return Kt})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return jt})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return Ut})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return Gt})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return Wt})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return Qt})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return Xt})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return Yt})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return Nt})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return Ht})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return Jt})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return zt})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return Zt})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return $t})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return nr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return er})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return tr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return rr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return ur})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return fr})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return cr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return _r})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return ir})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return or})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return dr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return ar})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return br})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return gr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return wr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return lr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return sr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return mr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return vr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return yr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return pr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return xr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return hr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Sr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Ar})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Dr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Er})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Fr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Tr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Pr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return Ir})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return Br})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return Mr})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return kr})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return Lr})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return Or})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return Rr})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return Cr})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return Vr})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return qr})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return Kr})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return jr})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return Ur})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return Gr})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return Wr})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return Qr})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return Xr})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return Yr})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return Nr})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return Hr})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return Jr})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return zr})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Zr})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return $r})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return nu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return eu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return tu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return ru})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return uu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return fu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return cu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return _u})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return iu})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return ou})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return du})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return au})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return bu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return gu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return wu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return lu})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return su})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return mu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return vu})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return yu})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return pu})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return xu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return hu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Su})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return Au})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Du})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return Eu})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Fu})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return Tu})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return Pu})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return Iu})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Bu})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Mu})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return ku})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Lu})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return Ou})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Ru})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return Cu})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return Vu})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return qu})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return Ku})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return ju})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return Uu})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return Gu})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return Wu})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return Qu})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return Xu})),t.d(e,"__wbindgen_is_undefined",(function(){return Yu})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return Nu})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Hu})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Ju})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return zu})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Zu})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return $u})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return nf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return ef})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return tf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return rf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return uf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return ff})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return cf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return _f})),t.d(e,"__wbindgen_debug_string",(function(){return of})),t.d(e,"__wbindgen_throw",(function(){return df})),t.d(e,"__wbindgen_memory",(function(){return af})),t.d(e,"__wbindgen_closure_wrapper521",(function(){return bf})),t.d(e,"__wbindgen_closure_wrapper523",(function(){return gf})),t.d(e,"__wbindgen_closure_wrapper525",(function(){return wf})),t.d(e,"__wbindgen_closure_wrapper527",(function(){return lf})),t.d(e,"__wbindgen_closure_wrapper529",(function(){return sf})),t.d(e,"__wbindgen_closure_wrapper531",(function(){return mf})),t.d(e,"__wbindgen_closure_wrapper533",(function(){return vf})),t.d(e,"__wbindgen_closure_wrapper535",(function(){return yf})),t.d(e,"__wbindgen_closure_wrapper537",(function(){return pf})),t.d(e,"__wbindgen_closure_wrapper754",(function(){return xf}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(61),t(403),t(404),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(414),t(455)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}var o=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});o.decode();var d=new Uint8Array;function a(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function b(n,e){return o.decode(a().subarray(n,n+e))}function g(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return a().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,c=e(f),_=a(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var d=a().subarray(c+i,c+f);i+=s(n,d).written}return w=i,c}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var x=new Float64Array;function h(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function Q(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function X(n,e,t){c(n).bindSampler(e>>>0,c(t))}function Y(n,e){c(n).bindVertexArray(c(e))}function N(n,e,t,r,u,f,_,i,o,d,a){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,d>>>0,a>>>0)}function H(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function J(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function z(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function Z(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function $(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,T(r,u))}function nn(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,P(r,u))}function en(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function tn(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function rn(n,e,t,r,u,f,_,i,o,d){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,d)}function un(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function fn(n,e,t,r,u,f,_,i,o,d,a,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a,b)}function cn(n,e,t,r,u,f,_,i,o,d,a){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,c(a))}function _n(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function on(n,e,t,r,u,f,_,i,o,d){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d)}function dn(n){var e=c(n).createVertexArray();return v(e)?0:g(e)}function an(n,e){c(n).deleteQuery(c(e))}function bn(n,e){c(n).deleteSampler(c(e))}function gn(n,e){c(n).deleteSync(c(e))}function wn(n,e){c(n).deleteVertexArray(c(e))}function ln(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function sn(n,e){c(n).drawBuffers(c(e))}function mn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function vn(n,e){c(n).endQuery(e>>>0)}function yn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return v(r)?0:g(r)}function pn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function xn(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function hn(){return M((function(n,e,t){return g(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Sn(n,e,t){return g(c(n).getQueryParameter(c(e),t>>>0))}function An(n,e,t){return g(c(n).getSyncParameter(c(e),t>>>0))}function Dn(){return M((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function En(n,e){c(n).readBuffer(e>>>0)}function Fn(){return M((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Tn(){return M((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Pn(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function In(){return M((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function Bn(){return M((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,d)}),arguments)}function Mn(){return M((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,b)}),arguments)}function kn(){return M((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,c(b))}),arguments)}function Ln(n,e,t,r){c(n).uniform2fv(c(e),T(t,r))}function On(n,e,t,r){c(n).uniform2iv(c(e),P(t,r))}function Rn(n,e,t,r){c(n).uniform3fv(c(e),T(t,r))}function Cn(n,e,t,r){c(n).uniform3iv(c(e),P(t,r))}function Vn(n,e,t,r){c(n).uniform4fv(c(e),T(t,r))}function qn(n,e,t,r){c(n).uniform4iv(c(e),P(t,r))}function Kn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,T(r,u))}function jn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,T(r,u))}function Un(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,T(r,u))}function Gn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function Wn(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function Qn(n,e){c(n).activeTexture(e>>>0)}function Xn(n,e,t){c(n).attachShader(c(e),c(t))}function Yn(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Nn(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Hn(n,e,t){c(n).bindTexture(e>>>0,c(t))}function Jn(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function zn(n,e){c(n).blendEquation(e>>>0)}function Zn(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function $n(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function ne(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ee(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function te(n,e){c(n).compileShader(c(e))}function re(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function ue(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function fe(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function ce(n){var e=c(n).createProgram();return v(e)?0:g(e)}function _e(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function ie(n){var e=c(n).createTexture();return v(e)?0:g(e)}function oe(n,e){c(n).cullFace(e>>>0)}function de(n,e){c(n).deleteBuffer(c(e))}function ae(n,e){c(n).deleteFramebuffer(c(e))}function be(n,e){c(n).deleteProgram(c(e))}function ge(n,e){c(n).deleteRenderbuffer(c(e))}function we(n,e){c(n).deleteShader(c(e))}function le(n,e){c(n).deleteTexture(c(e))}function se(n,e){c(n).depthFunc(e>>>0)}function me(n,e){c(n).depthMask(0!==e)}function ve(n,e,t){c(n).depthRange(e,t)}function ye(n,e){c(n).disable(e>>>0)}function pe(n,e){c(n).disableVertexAttribArray(e>>>0)}function xe(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function he(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Se(n,e){c(n).enable(e>>>0)}function Ae(n,e){c(n).enableVertexAttribArray(e>>>0)}function De(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Ee(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Fe(n,e){c(n).frontFace(e>>>0)}function Te(){return M((function(n,e,t){var r=c(n).getExtension(b(e,t));return v(r)?0:g(r)}),arguments)}function Pe(){return M((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function Ie(n){var e=c(n).getSupportedExtensions();return v(e)?0:g(e)}function Be(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function Me(n,e){c(n).linkProgram(c(e))}function ke(n,e,t){c(n).pixelStorei(e>>>0,t)}function Le(n,e,t){c(n).polygonOffset(e,t)}function Oe(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Re(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function Ce(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Ve(n,e){c(n).stencilMask(e>>>0)}function qe(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Ke(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function je(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Ue(n,e,t){c(n).uniform1f(c(e),t)}function Ge(n,e,t){c(n).uniform1i(c(e),t)}function We(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function Qe(n,e){c(n).useProgram(c(e))}function Xe(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Ye(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Ne(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function He(n){var e=c(n).document;return v(e)?0:g(e)}function Je(){return M((function(n){return g(c(n).innerWidth)}),arguments)}function ze(){return M((function(n){return g(c(n).innerHeight)}),arguments)}function Ze(n){return c(n).devicePixelRatio}function $e(){return M((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function nt(){return M((function(n,e,t){var r=c(n).matchMedia(b(e,t));return v(r)?0:g(r)}),arguments)}function et(){return M((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function tt(n,e,t){var r=c(n)[b(e,t)];return v(r)?0:g(r)}function rt(n,e){c(n).clearTimeout(e)}function ut(){return M((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function ft(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function ct(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function _t(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function it(){return M((function(n,e,t,r,u){c(n).setProperty(b(e,t),b(r,u))}),arguments)}function ot(n){return c(n).x}function dt(n){return c(n).y}function at(n){return c(n).clientX}function bt(n){return c(n).clientY}function gt(n){return c(n).offsetX}function wt(n){return c(n).offsetY}function lt(n){return c(n).ctrlKey}function st(n){return c(n).shiftKey}function mt(n){return c(n).altKey}function vt(n){return c(n).metaKey}function yt(n){return c(n).button}function pt(n){return c(n).buttons}function xt(n){return c(n).movementX}function ht(n){return c(n).movementY}function St(n,e){c(n).bindVertexArrayOES(c(e))}function At(n){var e=c(n).createVertexArrayOES();return v(e)?0:g(e)}function Dt(n,e){c(n).deleteVertexArrayOES(c(e))}function Et(n){return c(n).pointerId}function Ft(n){return c(n).deltaX}function Tt(n){return c(n).deltaY}function Pt(n){return c(n).deltaMode}function It(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Bt(n){return c(n).width}function Mt(n,e){c(n).width=e>>>0}function kt(n){return c(n).height}function Lt(n,e){c(n).height=e>>>0}function Ot(){return M((function(n,e,t,r){var u=c(n).getContext(b(e,t),c(r));return v(u)?0:g(u)}),arguments)}function Rt(n){return c(n).matches}function Ct(n){return c(n).now()}function Vt(n,e){c(n).drawBuffersWEBGL(c(e))}function qt(n){var e=c(n).fullscreenElement;return v(e)?0:g(e)}function Kt(){return M((function(n,e,t){return g(c(n).createElement(b(e,t)))}),arguments)}function jt(n,e,t){var r=c(n).getElementById(b(e,t));return v(r)?0:g(r)}function Ut(){return M((function(n,e,t){var r=c(n).querySelector(b(e,t));return v(r)?0:g(r)}),arguments)}function Gt(n){return g(c(n).getBoundingClientRect())}function Wt(){return M((function(n){c(n).requestFullscreen()}),arguments)}function Qt(){return M((function(n,e,t,r,u){c(n).setAttribute(b(e,t),b(r,u))}),arguments)}function Xt(){return M((function(n,e){c(n).setPointerCapture(e)}),arguments)}function Yt(n){return g(c(n).style)}function Nt(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function Ht(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function Jt(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function zt(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function Zt(){return M((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function $t(){return M((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function nr(n,e,t,r){c(n).uniform2fv(c(e),T(t,r))}function er(n,e,t,r){c(n).uniform2iv(c(e),P(t,r))}function tr(n,e,t,r){c(n).uniform3fv(c(e),T(t,r))}function rr(n,e,t,r){c(n).uniform3iv(c(e),P(t,r))}function ur(n,e,t,r){c(n).uniform4fv(c(e),T(t,r))}function fr(n,e,t,r){c(n).uniform4iv(c(e),P(t,r))}function cr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,T(r,u))}function _r(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,T(r,u))}function ir(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,T(r,u))}function or(n,e){c(n).activeTexture(e>>>0)}function dr(n,e,t){c(n).attachShader(c(e),c(t))}function ar(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function br(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function gr(n,e,t){c(n).bindTexture(e>>>0,c(t))}function wr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function lr(n,e){c(n).blendEquation(e>>>0)}function sr(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function mr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function vr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function yr(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function pr(n,e){c(n).compileShader(c(e))}function xr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function hr(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function Sr(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function Ar(n){var e=c(n).createProgram();return v(e)?0:g(e)}function Dr(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function Er(n){var e=c(n).createTexture();return v(e)?0:g(e)}function Fr(n,e){c(n).cullFace(e>>>0)}function Tr(n,e){c(n).deleteBuffer(c(e))}function Pr(n,e){c(n).deleteFramebuffer(c(e))}function Ir(n,e){c(n).deleteProgram(c(e))}function Br(n,e){c(n).deleteRenderbuffer(c(e))}function Mr(n,e){c(n).deleteShader(c(e))}function kr(n,e){c(n).deleteTexture(c(e))}function Lr(n,e){c(n).depthFunc(e>>>0)}function Or(n,e){c(n).depthMask(0!==e)}function Rr(n,e,t){c(n).depthRange(e,t)}function Cr(n,e){c(n).disable(e>>>0)}function Vr(n,e){c(n).disableVertexAttribArray(e>>>0)}function qr(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Kr(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function jr(n,e){c(n).enable(e>>>0)}function Ur(n,e){c(n).enableVertexAttribArray(e>>>0)}function Gr(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Wr(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Qr(n,e){c(n).frontFace(e>>>0)}function Xr(){return M((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function Yr(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function Nr(n,e){c(n).linkProgram(c(e))}function Hr(n,e,t){c(n).pixelStorei(e>>>0,t)}function Jr(n,e,t){c(n).polygonOffset(e,t)}function zr(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Zr(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function $r(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function nu(n,e){c(n).stencilMask(e>>>0)}function eu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function tu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ru(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function uu(n,e,t){c(n).uniform1f(c(e),t)}function fu(n,e,t){c(n).uniform1i(c(e),t)}function cu(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function _u(n,e){c(n).useProgram(c(e))}function iu(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function ou(n,e,t,r,u){c(n).viewport(e,t,r,u)}function du(n){console.debug(c(n))}function au(n){console.error(c(n))}function bu(n,e){console.error(c(n),c(e))}function gu(n){console.info(c(n))}function wu(n){console.log(c(n))}function lu(n){console.warn(c(n))}function su(){return M((function(n,e,t,r){c(n).addEventListener(b(e,t),c(r))}),arguments)}function mu(){return M((function(n,e,t,r,u){c(n).addEventListener(b(e,t),c(r),c(u))}),arguments)}function vu(){return M((function(n,e,t,r){c(n).removeEventListener(b(e,t),c(r))}),arguments)}function yu(n){return c(n).charCode}function pu(n){return c(n).keyCode}function xu(n){return c(n).altKey}function hu(n){return c(n).ctrlKey}function Su(n){return c(n).shiftKey}function Au(n){return c(n).metaKey}function Du(n,e){var t=m(c(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Eu(n,e){var t=m(c(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Fu(n,e,t){return c(n).getModifierState(b(e,t))}function Tu(n){return c(n).matches}function Pu(){return M((function(n,e){c(n).addListener(c(e))}),arguments)}function Iu(){return M((function(n,e){c(n).removeListener(c(e))}),arguments)}function Bu(){return M((function(n,e){return g(c(n).appendChild(c(e)))}),arguments)}function Mu(n){var e=c(n).target;return v(e)?0:g(e)}function ku(n){return c(n).cancelBubble}function Lu(n){c(n).preventDefault()}function Ou(n){c(n).stopPropagation()}function Ru(n,e){return g(c(n)[e>>>0])}function Cu(n){return c(n).length}function Vu(){return g(new Array)}function qu(n,e){return g(new Function(b(n,e)))}function Ku(){return M((function(n,e){return g(Reflect.get(c(n),c(e)))}),arguments)}function ju(){return M((function(n,e){return g(c(n).call(c(e)))}),arguments)}function Uu(){return g(new Object)}function Gu(){return M((function(){return g(self.self)}),arguments)}function Wu(){return M((function(){return g(window.window)}),arguments)}function Qu(){return M((function(){return g(globalThis.globalThis)}),arguments)}function Xu(){return M((function(){return g(global.global)}),arguments)}function Yu(n){return void 0===c(n)}function Nu(n){return g(Array.of(c(n)))}function Hu(n,e){return c(n).push(c(e))}function Ju(n,e){return Object.is(c(n),c(e))}function zu(n){return g(Promise.resolve(c(n)))}function Zu(n,e){return g(c(n).then(c(e)))}function $u(n){return g(c(n).buffer)}function nf(n,e,t){return g(new Int8Array(c(n),e>>>0,t>>>0))}function ef(n,e,t){return g(new Int16Array(c(n),e>>>0,t>>>0))}function tf(n,e,t){return g(new Int32Array(c(n),e>>>0,t>>>0))}function rf(n,e,t){return g(new Uint8Array(c(n),e>>>0,t>>>0))}function uf(n,e,t){return g(new Uint16Array(c(n),e>>>0,t>>>0))}function ff(n,e,t){return g(new Uint32Array(c(n),e>>>0,t>>>0))}function cf(n,e,t){return g(new Float32Array(c(n),e>>>0,t>>>0))}function _f(){return M((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function of(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=d[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function df(n,e){throw new Error(b(n,e))}function af(){return g(u.j)}function bf(n,e,t){return g(h(n,e,93,S))}function gf(n,e,t){return g(h(n,e,93,A))}function wf(n,e,t){return g(h(n,e,93,S))}function lf(n,e,t){return g(h(n,e,93,S))}function sf(n,e,t){return g(h(n,e,93,S))}function mf(n,e,t){return g(h(n,e,93,S))}function vf(n,e,t){return g(h(n,e,93,S))}function yf(n,e,t){return g(h(n,e,93,S))}function pf(n,e,t){return g(h(n,e,93,S))}function xf(n,e,t){return g(h(n,e,177,D))}}.call(this,t(375)(n))},455:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(373);r.l()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{373:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return F})),t.d(e,"__wbindgen_object_drop_ref",(function(){return k})),t.d(e,"__wbindgen_string_new",(function(){return L})),t.d(e,"__wbindgen_object_clone_ref",(function(){return O})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_number_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return U})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return G})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return W})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return Q})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return X})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return Y})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return N})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return H})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return J})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return Z})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return $})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return nn})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return en})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return tn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return cn})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return _n})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return on})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return dn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return an})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return bn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return gn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return wn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return ln})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return sn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return mn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return vn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return yn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return pn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return hn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return xn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Sn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return An})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Dn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Fn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return En})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Tn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return In})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Pn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Bn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Mn})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return kn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Ln})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return On})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Rn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Cn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Vn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return qn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Kn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return jn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Un})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Gn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Wn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return Qn})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return Xn})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return Yn})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return Nn})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return Hn})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return Jn})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return zn})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return Zn})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return $n})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return ne})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ee})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return te})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return re})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return ue})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return fe})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return ce})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return _e})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ie})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return oe})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return de})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return ae})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return be})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return ge})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return we})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return le})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return se})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return me})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return ve})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return ye})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return pe})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return he})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return xe})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Se})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return Ae})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return De})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Fe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ee})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Te})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return Ie})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Pe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Be})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Me})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return ke})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return Le})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Oe})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return Re})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return Ce})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return Ve})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return qe})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return Ke})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return je})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return Ue})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return Ge})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return We})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return Qe})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return Xe})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return Ye})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return Ne})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return He})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return Je})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return ze})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return Ze})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return $e})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return nt})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return et})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return tt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return rt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return ut})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return ft})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return ct})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return _t})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return it})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return ot})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return dt})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return at})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return bt})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return gt})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return wt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return lt})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return st})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return mt})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return vt})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return yt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return pt})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return ht})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return xt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return St})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return At})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Dt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Ft})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Et})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Tt})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return It})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Pt})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Bt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Mt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return kt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Lt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Ot})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Rt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return Ct})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Vt})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return qt})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return Kt})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return jt})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return Ut})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return Gt})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return Wt})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return Qt})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return Xt})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return Yt})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return Nt})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return Ht})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return Jt})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return zt})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return Zt})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return $t})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return nr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return er})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return tr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return rr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return ur})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return fr})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return cr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return _r})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return ir})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return or})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return dr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return ar})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return br})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return gr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return wr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return lr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return sr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return mr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return vr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return yr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return pr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return hr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return xr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Sr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Ar})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Dr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Fr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Er})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Tr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Ir})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return Pr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return Br})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return Mr})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return kr})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return Lr})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return Or})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return Rr})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return Cr})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return Vr})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return qr})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return Kr})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return jr})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return Ur})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return Gr})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return Wr})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return Qr})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return Xr})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return Yr})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return Nr})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return Hr})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return Jr})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return zr})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Zr})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return $r})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return nu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return eu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return tu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return ru})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return uu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return fu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return cu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return _u})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return iu})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return ou})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return du})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return au})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return bu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return gu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return wu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return lu})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return su})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return mu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return vu})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return yu})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return pu})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return hu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return xu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Su})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return Au})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Du})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return Fu})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Eu})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return Tu})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return Iu})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return Pu})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Bu})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Mu})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return ku})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Lu})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return Ou})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Ru})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return Cu})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return Vu})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return qu})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return Ku})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return ju})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return Uu})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return Gu})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return Wu})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return Qu})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return Xu})),t.d(e,"__wbindgen_is_undefined",(function(){return Yu})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return Nu})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Hu})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Ju})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return zu})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Zu})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return $u})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return nf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return ef})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return tf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return rf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return uf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return ff})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return cf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return _f})),t.d(e,"__wbindgen_debug_string",(function(){return of})),t.d(e,"__wbindgen_throw",(function(){return df})),t.d(e,"__wbindgen_memory",(function(){return af})),t.d(e,"__wbindgen_closure_wrapper521",(function(){return bf})),t.d(e,"__wbindgen_closure_wrapper523",(function(){return gf})),t.d(e,"__wbindgen_closure_wrapper525",(function(){return wf})),t.d(e,"__wbindgen_closure_wrapper527",(function(){return lf})),t.d(e,"__wbindgen_closure_wrapper529",(function(){return sf})),t.d(e,"__wbindgen_closure_wrapper531",(function(){return mf})),t.d(e,"__wbindgen_closure_wrapper533",(function(){return vf})),t.d(e,"__wbindgen_closure_wrapper535",(function(){return yf})),t.d(e,"__wbindgen_closure_wrapper537",(function(){return pf})),t.d(e,"__wbindgen_closure_wrapper754",(function(){return hf}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(61),t(411),t(412),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(416),t(457)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}var o=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});o.decode();var d=new Uint8Array;function a(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function b(n,e){return o.decode(a().subarray(n,n+e))}function g(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return a().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,c=e(f),_=a(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var d=a().subarray(c+i,c+f);i+=s(n,d).written}return w=i,c}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function Q(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function X(n,e,t){c(n).bindSampler(e>>>0,c(t))}function Y(n,e){c(n).bindVertexArray(c(e))}function N(n,e,t,r,u,f,_,i,o,d,a){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,d>>>0,a>>>0)}function H(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function J(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function z(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function Z(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function $(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,T(r,u))}function nn(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,I(r,u))}function en(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function tn(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function rn(n,e,t,r,u,f,_,i,o,d){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,d)}function un(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function fn(n,e,t,r,u,f,_,i,o,d,a,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a,b)}function cn(n,e,t,r,u,f,_,i,o,d,a){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,c(a))}function _n(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function on(n,e,t,r,u,f,_,i,o,d){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,d)}function dn(n){var e=c(n).createVertexArray();return v(e)?0:g(e)}function an(n,e){c(n).deleteQuery(c(e))}function bn(n,e){c(n).deleteSampler(c(e))}function gn(n,e){c(n).deleteSync(c(e))}function wn(n,e){c(n).deleteVertexArray(c(e))}function ln(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function sn(n,e){c(n).drawBuffers(c(e))}function mn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function vn(n,e){c(n).endQuery(e>>>0)}function yn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return v(r)?0:g(r)}function pn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function hn(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function xn(){return M((function(n,e,t){return g(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Sn(n,e,t){return g(c(n).getQueryParameter(c(e),t>>>0))}function An(n,e,t){return g(c(n).getSyncParameter(c(e),t>>>0))}function Dn(){return M((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function Fn(n,e){c(n).readBuffer(e>>>0)}function En(){return M((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Tn(){return M((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function In(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Pn(){return M((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function Bn(){return M((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,d)}),arguments)}function Mn(){return M((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,b)}),arguments)}function kn(){return M((function(n,e,t,r,u,f,_,i,o,d,a,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,d>>>0,a>>>0,c(b))}),arguments)}function Ln(n,e,t,r){c(n).uniform2fv(c(e),T(t,r))}function On(n,e,t,r){c(n).uniform2iv(c(e),I(t,r))}function Rn(n,e,t,r){c(n).uniform3fv(c(e),T(t,r))}function Cn(n,e,t,r){c(n).uniform3iv(c(e),I(t,r))}function Vn(n,e,t,r){c(n).uniform4fv(c(e),T(t,r))}function qn(n,e,t,r){c(n).uniform4iv(c(e),I(t,r))}function Kn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,T(r,u))}function jn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,T(r,u))}function Un(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,T(r,u))}function Gn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function Wn(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function Qn(n,e){c(n).activeTexture(e>>>0)}function Xn(n,e,t){c(n).attachShader(c(e),c(t))}function Yn(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Nn(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Hn(n,e,t){c(n).bindTexture(e>>>0,c(t))}function Jn(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function zn(n,e){c(n).blendEquation(e>>>0)}function Zn(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function $n(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function ne(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ee(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function te(n,e){c(n).compileShader(c(e))}function re(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function ue(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function fe(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function ce(n){var e=c(n).createProgram();return v(e)?0:g(e)}function _e(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function ie(n){var e=c(n).createTexture();return v(e)?0:g(e)}function oe(n,e){c(n).cullFace(e>>>0)}function de(n,e){c(n).deleteBuffer(c(e))}function ae(n,e){c(n).deleteFramebuffer(c(e))}function be(n,e){c(n).deleteProgram(c(e))}function ge(n,e){c(n).deleteRenderbuffer(c(e))}function we(n,e){c(n).deleteShader(c(e))}function le(n,e){c(n).deleteTexture(c(e))}function se(n,e){c(n).depthFunc(e>>>0)}function me(n,e){c(n).depthMask(0!==e)}function ve(n,e,t){c(n).depthRange(e,t)}function ye(n,e){c(n).disable(e>>>0)}function pe(n,e){c(n).disableVertexAttribArray(e>>>0)}function he(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function xe(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Se(n,e){c(n).enable(e>>>0)}function Ae(n,e){c(n).enableVertexAttribArray(e>>>0)}function De(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Fe(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Ee(n,e){c(n).frontFace(e>>>0)}function Te(){return M((function(n,e,t){var r=c(n).getExtension(b(e,t));return v(r)?0:g(r)}),arguments)}function Ie(){return M((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function Pe(n){var e=c(n).getSupportedExtensions();return v(e)?0:g(e)}function Be(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function Me(n,e){c(n).linkProgram(c(e))}function ke(n,e,t){c(n).pixelStorei(e>>>0,t)}function Le(n,e,t){c(n).polygonOffset(e,t)}function Oe(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Re(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function Ce(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Ve(n,e){c(n).stencilMask(e>>>0)}function qe(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Ke(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function je(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Ue(n,e,t){c(n).uniform1f(c(e),t)}function Ge(n,e,t){c(n).uniform1i(c(e),t)}function We(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function Qe(n,e){c(n).useProgram(c(e))}function Xe(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Ye(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Ne(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function He(n){var e=c(n).document;return v(e)?0:g(e)}function Je(){return M((function(n){return g(c(n).innerWidth)}),arguments)}function ze(){return M((function(n){return g(c(n).innerHeight)}),arguments)}function Ze(n){return c(n).devicePixelRatio}function $e(){return M((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function nt(){return M((function(n,e,t){var r=c(n).matchMedia(b(e,t));return v(r)?0:g(r)}),arguments)}function et(){return M((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function tt(n,e,t){var r=c(n)[b(e,t)];return v(r)?0:g(r)}function rt(n,e){c(n).clearTimeout(e)}function ut(){return M((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function ft(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function ct(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function _t(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function it(){return M((function(n,e,t,r,u){c(n).setProperty(b(e,t),b(r,u))}),arguments)}function ot(n){return c(n).x}function dt(n){return c(n).y}function at(n){return c(n).clientX}function bt(n){return c(n).clientY}function gt(n){return c(n).offsetX}function wt(n){return c(n).offsetY}function lt(n){return c(n).ctrlKey}function st(n){return c(n).shiftKey}function mt(n){return c(n).altKey}function vt(n){return c(n).metaKey}function yt(n){return c(n).button}function pt(n){return c(n).buttons}function ht(n){return c(n).movementX}function xt(n){return c(n).movementY}function St(n,e){c(n).bindVertexArrayOES(c(e))}function At(n){var e=c(n).createVertexArrayOES();return v(e)?0:g(e)}function Dt(n,e){c(n).deleteVertexArrayOES(c(e))}function Ft(n){return c(n).pointerId}function Et(n){return c(n).deltaX}function Tt(n){return c(n).deltaY}function It(n){return c(n).deltaMode}function Pt(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Bt(n){return c(n).width}function Mt(n,e){c(n).width=e>>>0}function kt(n){return c(n).height}function Lt(n,e){c(n).height=e>>>0}function Ot(){return M((function(n,e,t,r){var u=c(n).getContext(b(e,t),c(r));return v(u)?0:g(u)}),arguments)}function Rt(n){return c(n).matches}function Ct(n){return c(n).now()}function Vt(n,e){c(n).drawBuffersWEBGL(c(e))}function qt(n){var e=c(n).fullscreenElement;return v(e)?0:g(e)}function Kt(){return M((function(n,e,t){return g(c(n).createElement(b(e,t)))}),arguments)}function jt(n,e,t){var r=c(n).getElementById(b(e,t));return v(r)?0:g(r)}function Ut(){return M((function(n,e,t){var r=c(n).querySelector(b(e,t));return v(r)?0:g(r)}),arguments)}function Gt(n){return g(c(n).getBoundingClientRect())}function Wt(){return M((function(n){c(n).requestFullscreen()}),arguments)}function Qt(){return M((function(n,e,t,r,u){c(n).setAttribute(b(e,t),b(r,u))}),arguments)}function Xt(){return M((function(n,e){c(n).setPointerCapture(e)}),arguments)}function Yt(n){return g(c(n).style)}function Nt(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function Ht(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function Jt(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function zt(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function Zt(){return M((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function $t(){return M((function(n,e,t,r,u,f,_,i,o,d){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(d))}),arguments)}function nr(n,e,t,r){c(n).uniform2fv(c(e),T(t,r))}function er(n,e,t,r){c(n).uniform2iv(c(e),I(t,r))}function tr(n,e,t,r){c(n).uniform3fv(c(e),T(t,r))}function rr(n,e,t,r){c(n).uniform3iv(c(e),I(t,r))}function ur(n,e,t,r){c(n).uniform4fv(c(e),T(t,r))}function fr(n,e,t,r){c(n).uniform4iv(c(e),I(t,r))}function cr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,T(r,u))}function _r(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,T(r,u))}function ir(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,T(r,u))}function or(n,e){c(n).activeTexture(e>>>0)}function dr(n,e,t){c(n).attachShader(c(e),c(t))}function ar(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function br(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function gr(n,e,t){c(n).bindTexture(e>>>0,c(t))}function wr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function lr(n,e){c(n).blendEquation(e>>>0)}function sr(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function mr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function vr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function yr(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function pr(n,e){c(n).compileShader(c(e))}function hr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function xr(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function Sr(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function Ar(n){var e=c(n).createProgram();return v(e)?0:g(e)}function Dr(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function Fr(n){var e=c(n).createTexture();return v(e)?0:g(e)}function Er(n,e){c(n).cullFace(e>>>0)}function Tr(n,e){c(n).deleteBuffer(c(e))}function Ir(n,e){c(n).deleteFramebuffer(c(e))}function Pr(n,e){c(n).deleteProgram(c(e))}function Br(n,e){c(n).deleteRenderbuffer(c(e))}function Mr(n,e){c(n).deleteShader(c(e))}function kr(n,e){c(n).deleteTexture(c(e))}function Lr(n,e){c(n).depthFunc(e>>>0)}function Or(n,e){c(n).depthMask(0!==e)}function Rr(n,e,t){c(n).depthRange(e,t)}function Cr(n,e){c(n).disable(e>>>0)}function Vr(n,e){c(n).disableVertexAttribArray(e>>>0)}function qr(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Kr(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function jr(n,e){c(n).enable(e>>>0)}function Ur(n,e){c(n).enableVertexAttribArray(e>>>0)}function Gr(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Wr(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Qr(n,e){c(n).frontFace(e>>>0)}function Xr(){return M((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function Yr(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function Nr(n,e){c(n).linkProgram(c(e))}function Hr(n,e,t){c(n).pixelStorei(e>>>0,t)}function Jr(n,e,t){c(n).polygonOffset(e,t)}function zr(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Zr(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function $r(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function nu(n,e){c(n).stencilMask(e>>>0)}function eu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function tu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ru(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function uu(n,e,t){c(n).uniform1f(c(e),t)}function fu(n,e,t){c(n).uniform1i(c(e),t)}function cu(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function _u(n,e){c(n).useProgram(c(e))}function iu(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function ou(n,e,t,r,u){c(n).viewport(e,t,r,u)}function du(n){console.debug(c(n))}function au(n){console.error(c(n))}function bu(n,e){console.error(c(n),c(e))}function gu(n){console.info(c(n))}function wu(n){console.log(c(n))}function lu(n){console.warn(c(n))}function su(){return M((function(n,e,t,r){c(n).addEventListener(b(e,t),c(r))}),arguments)}function mu(){return M((function(n,e,t,r,u){c(n).addEventListener(b(e,t),c(r),c(u))}),arguments)}function vu(){return M((function(n,e,t,r){c(n).removeEventListener(b(e,t),c(r))}),arguments)}function yu(n){return c(n).charCode}function pu(n){return c(n).keyCode}function hu(n){return c(n).altKey}function xu(n){return c(n).ctrlKey}function Su(n){return c(n).shiftKey}function Au(n){return c(n).metaKey}function Du(n,e){var t=m(c(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Fu(n,e){var t=m(c(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Eu(n,e,t){return c(n).getModifierState(b(e,t))}function Tu(n){return c(n).matches}function Iu(){return M((function(n,e){c(n).addListener(c(e))}),arguments)}function Pu(){return M((function(n,e){c(n).removeListener(c(e))}),arguments)}function Bu(){return M((function(n,e){return g(c(n).appendChild(c(e)))}),arguments)}function Mu(n){var e=c(n).target;return v(e)?0:g(e)}function ku(n){return c(n).cancelBubble}function Lu(n){c(n).preventDefault()}function Ou(n){c(n).stopPropagation()}function Ru(n,e){return g(c(n)[e>>>0])}function Cu(n){return c(n).length}function Vu(){return g(new Array)}function qu(n,e){return g(new Function(b(n,e)))}function Ku(){return M((function(n,e){return g(Reflect.get(c(n),c(e)))}),arguments)}function ju(){return M((function(n,e){return g(c(n).call(c(e)))}),arguments)}function Uu(){return g(new Object)}function Gu(){return M((function(){return g(self.self)}),arguments)}function Wu(){return M((function(){return g(window.window)}),arguments)}function Qu(){return M((function(){return g(globalThis.globalThis)}),arguments)}function Xu(){return M((function(){return g(global.global)}),arguments)}function Yu(n){return void 0===c(n)}function Nu(n){return g(Array.of(c(n)))}function Hu(n,e){return c(n).push(c(e))}function Ju(n,e){return Object.is(c(n),c(e))}function zu(n){return g(Promise.resolve(c(n)))}function Zu(n,e){return g(c(n).then(c(e)))}function $u(n){return g(c(n).buffer)}function nf(n,e,t){return g(new Int8Array(c(n),e>>>0,t>>>0))}function ef(n,e,t){return g(new Int16Array(c(n),e>>>0,t>>>0))}function tf(n,e,t){return g(new Int32Array(c(n),e>>>0,t>>>0))}function rf(n,e,t){return g(new Uint8Array(c(n),e>>>0,t>>>0))}function uf(n,e,t){return g(new Uint16Array(c(n),e>>>0,t>>>0))}function ff(n,e,t){return g(new Uint32Array(c(n),e>>>0,t>>>0))}function cf(n,e,t){return g(new Float32Array(c(n),e>>>0,t>>>0))}function _f(){return M((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function of(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=d[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function df(n,e){throw new Error(b(n,e))}function af(){return g(u.j)}function bf(n,e,t){return g(x(n,e,93,S))}function gf(n,e,t){return g(x(n,e,93,A))}function wf(n,e,t){return g(x(n,e,93,S))}function lf(n,e,t){return g(x(n,e,93,S))}function sf(n,e,t){return g(x(n,e,93,S))}function mf(n,e,t){return g(x(n,e,93,S))}function vf(n,e,t){return g(x(n,e,93,S))}function yf(n,e,t){return g(x(n,e,93,S))}function pf(n,e,t){return g(x(n,e,93,S))}function hf(n,e,t){return g(x(n,e,177,D))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},457:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(373);r.l()}}]); \ No newline at end of file diff --git a/assets/js/58.1656d8a0.js b/assets/js/60.d3f1814f.js similarity index 99% rename from assets/js/58.1656d8a0.js rename to assets/js/60.d3f1814f.js index 455dc917..f4e609a5 100644 --- a/assets/js/58.1656d8a0.js +++ b/assets/js/60.d3f1814f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{565:function(_,e,n){"use strict";n.r(e);var r=n(462),b=n(366);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return b.__wbg_fetch_386f87a3ebf5003c})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return b.__wbg_location_8cc8ccf27e342c0a})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return b.__wbg_newwithstrandinit_05d7180788420c40})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return b.__wbg_fetch_749a56934f95c96c})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_origin_486b350035be1f11",(function(){return b.__wbg_origin_486b350035be1f11})),n.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return b.__wbg_instanceof_Response_eaa426220848a39e})),n.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return b.__wbg_url_74285ddf2747cb3d})),n.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return b.__wbg_status_c4ef3dd591e63435})),n.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return b.__wbg_headers_fd64ad685cf22e5d})),n.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return b.__wbg_arrayBuffer_4c27b6f00c530232})),n.d(e,"__wbg_text_1169d752cc697903",(function(){return b.__wbg_text_1169d752cc697903})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return b.__wbg_new_2d0053ee81e4dd2a})),n.d(e,"__wbg_append_de37df908812970d",(function(){return b.__wbg_append_de37df908812970d})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbindgen_is_function",(function(){return b.__wbindgen_is_function})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbindgen_is_object",(function(){return b.__wbindgen_is_object})),n.d(e,"__wbg_next_579e583d33566a86",(function(){return b.__wbg_next_579e583d33566a86})),n.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return b.__wbg_next_aaef7c8aa5e212ac})),n.d(e,"__wbg_done_1b73b0672e15f234",(function(){return b.__wbg_done_1b73b0672e15f234})),n.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return b.__wbg_value_1ccc36bc03462d71})),n.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return b.__wbg_iterator_6f9d4f28845f426c})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return b.__wbg_then_cedad20fbbd9418a})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_new_8c3f0052272a457a",(function(){return b.__wbg_new_8c3f0052272a457a})),n.d(e,"__wbg_set_83db9690f9353e79",(function(){return b.__wbg_set_83db9690f9353e79})),n.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return b.__wbg_length_9e1ae1900cb0fbd5})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_has_8359f114ce042f5a",(function(){return b.__wbg_has_8359f114ce042f5a})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return b.__wbg_stringify_d6471d300ded9b68})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper765",(function(){return b.__wbindgen_closure_wrapper765})),n.d(e,"__wbindgen_closure_wrapper767",(function(){return b.__wbindgen_closure_wrapper767})),n.d(e,"__wbindgen_closure_wrapper769",(function(){return b.__wbindgen_closure_wrapper769})),n.d(e,"__wbindgen_closure_wrapper771",(function(){return b.__wbindgen_closure_wrapper771})),n.d(e,"__wbindgen_closure_wrapper773",(function(){return b.__wbindgen_closure_wrapper773})),n.d(e,"__wbindgen_closure_wrapper775",(function(){return b.__wbindgen_closure_wrapper775})),n.d(e,"__wbindgen_closure_wrapper777",(function(){return b.__wbindgen_closure_wrapper777})),n.d(e,"__wbindgen_closure_wrapper779",(function(){return b.__wbindgen_closure_wrapper779})),n.d(e,"__wbindgen_closure_wrapper781",(function(){return b.__wbindgen_closure_wrapper781})),n.d(e,"__wbindgen_closure_wrapper1116",(function(){return b.__wbindgen_closure_wrapper1116})),r.f()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{568:function(_,e,n){"use strict";n.r(e);var r=n(464),b=n(366);n.d(e,"run",(function(){return b.run})),n.d(e,"__wbindgen_object_drop_ref",(function(){return b.__wbindgen_object_drop_ref})),n.d(e,"__wbindgen_string_new",(function(){return b.__wbindgen_string_new})),n.d(e,"__wbindgen_object_clone_ref",(function(){return b.__wbindgen_object_clone_ref})),n.d(e,"__wbindgen_cb_drop",(function(){return b.__wbindgen_cb_drop})),n.d(e,"__wbindgen_string_get",(function(){return b.__wbindgen_string_get})),n.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return b.__wbg_new_abda76e883ba8a5f})),n.d(e,"__wbg_stack_658279fe44541cf6",(function(){return b.__wbg_stack_658279fe44541cf6})),n.d(e,"__wbg_error_f851667af71bcfc6",(function(){return b.__wbg_error_f851667af71bcfc6})),n.d(e,"__wbg_fetch_386f87a3ebf5003c",(function(){return b.__wbg_fetch_386f87a3ebf5003c})),n.d(e,"__wbindgen_number_get",(function(){return b.__wbindgen_number_get})),n.d(e,"__wbindgen_boolean_get",(function(){return b.__wbindgen_boolean_get})),n.d(e,"__wbindgen_number_new",(function(){return b.__wbindgen_number_new})),n.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return b.__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3})),n.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return b.__wbg_beginQuery_909ec673d606f873})),n.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return b.__wbg_bindBufferRange_b8f6dc19661d5cf7})),n.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return b.__wbg_bindSampler_4b0e0e598e2cae44})),n.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return b.__wbg_bindVertexArray_9d12800e272184b0})),n.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return b.__wbg_blitFramebuffer_cdc1ebf043046b70})),n.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return b.__wbg_bufferData_6ce28904b25c8be9})),n.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return b.__wbg_bufferData_8d206d7adf6751c0})),n.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return b.__wbg_bufferSubData_0e04c6c7fec3c949})),n.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return b.__wbg_clearBufferfi_92173f77d7147a2f})),n.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return b.__wbg_clearBufferfv_5cc4edeacbcf72e8})),n.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return b.__wbg_clearBufferiv_8bb0c2b97eedc22b})),n.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return b.__wbg_clearBufferuiv_1f5c5e9baa9a3d9b})),n.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return b.__wbg_clientWaitSync_ad323ab9e423d0cf})),n.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return b.__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73})),n.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return b.__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3})),n.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return b.__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2})),n.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return b.__wbg_compressedTexSubImage3D_9c916feb243112db})),n.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return b.__wbg_copyBufferSubData_11187dccce72b79b})),n.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return b.__wbg_copyTexSubImage3D_7a262558a6a33f2e})),n.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return b.__wbg_createSampler_288fd761eabe283d})),n.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return b.__wbg_createVertexArray_8467a75e68fec199})),n.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return b.__wbg_deleteQuery_77a7ae09eda297e1})),n.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return b.__wbg_deleteSampler_ec3ca2243d8cfcad})),n.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return b.__wbg_deleteSync_48aed3df05f4f497})),n.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return b.__wbg_deleteVertexArray_00194a31d79df7e5})),n.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return b.__wbg_drawArraysInstanced_951a1d7e32c4f855})),n.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return b.__wbg_drawBuffers_23c1572f12f90db2})),n.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return b.__wbg_drawElementsInstanced_2e05a96af17fe284})),n.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return b.__wbg_endQuery_05baee8fc782e5f0})),n.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return b.__wbg_fenceSync_91d72c970c880844})),n.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return b.__wbg_framebufferTextureLayer_d5e78fc74b8261e3})),n.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return b.__wbg_getBufferSubData_6b00169c609c16f7})),n.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return b.__wbg_getIndexedParameter_d4a2b68e14a022a1})),n.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return b.__wbg_getQueryParameter_358ea490fb85e05c})),n.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return b.__wbg_getSyncParameter_ab2f9499a91faae0})),n.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return b.__wbg_getUniformBlockIndex_a6f3a994dcc7399d})),n.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return b.__wbg_invalidateFramebuffer_802e38619851791e})),n.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return b.__wbg_readBuffer_f20d42ed12643534})),n.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return b.__wbg_readPixels_e855be1f94815442})),n.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return b.__wbg_readPixels_5d4e6205291096f0})),n.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return b.__wbg_renderbufferStorageMultisample_3e76453eed60554b})),n.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return b.__wbg_samplerParameterf_6eda655d7213cb18})),n.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return b.__wbg_samplerParameteri_390f1debfe40f83b})),n.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return b.__wbg_texStorage2D_d25a76ad1b1ea98f})),n.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return b.__wbg_texStorage3D_19979792a7a67f59})),n.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return b.__wbg_texSubImage2D_421e29fed0db07ab})),n.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return b.__wbg_texSubImage2D_f06e46b3b25ee691})),n.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return b.__wbg_texSubImage3D_ebb9e6f80d19a411})),n.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return b.__wbg_texSubImage3D_591b8511a3c7593a})),n.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return b.__wbg_uniform2fv_a611afaf4a045f7e})),n.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return b.__wbg_uniform2iv_b1b33c9425d5791b})),n.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return b.__wbg_uniform3fv_740a7286bf6328ee})),n.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return b.__wbg_uniform3iv_df752fa54b2b8b7b})),n.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return b.__wbg_uniform4fv_737873ef0bcd5e6c})),n.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return b.__wbg_uniform4iv_67eed4073c7e55c5})),n.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return b.__wbg_uniformBlockBinding_50ced0c985f91a02})),n.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return b.__wbg_uniformMatrix2fv_f4fc5e6214cc5549})),n.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return b.__wbg_uniformMatrix3fv_a02aa02ecb8e5f99})),n.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return b.__wbg_uniformMatrix4fv_68d11b378757596e})),n.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return b.__wbg_vertexAttribDivisor_2dc16945a591d4c6})),n.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return b.__wbg_vertexAttribIPointer_167c7ed4319992e7})),n.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return b.__wbg_activeTexture_6a9afd67cc0ade73})),n.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return b.__wbg_attachShader_90ad543fb1bccb18})),n.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return b.__wbg_bindBuffer_66e359418f5c82d7})),n.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return b.__wbg_bindFramebuffer_5c01742edd5d843a})),n.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return b.__wbg_bindRenderbuffer_f66dee160b94e5ef})),n.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return b.__wbg_bindTexture_ae9620ea4a6ffb97})),n.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return b.__wbg_blendColor_50e203e2f58784cb})),n.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return b.__wbg_blendEquation_72746aedc87e3f72})),n.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return b.__wbg_blendEquationSeparate_f0abe930082fff02})),n.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return b.__wbg_blendFunc_99b48b64bde98c6f})),n.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return b.__wbg_blendFuncSeparate_cecb7dfda39dc38d})),n.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return b.__wbg_colorMask_12687df5490e9bc9})),n.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return b.__wbg_compileShader_822f38928f6f2a08})),n.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return b.__wbg_copyTexSubImage2D_4c72e3ef713b65e6})),n.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return b.__wbg_createBuffer_a6cffb7f7d5b92a3})),n.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return b.__wbg_createFramebuffer_d5f3985ce3652661})),n.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return b.__wbg_createProgram_dc6b23d3caa1d86e})),n.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return b.__wbg_createRenderbuffer_531167a301a60e27})),n.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return b.__wbg_createShader_46a66dce5a9e22d0})),n.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return b.__wbg_createTexture_269f67d411bdc4dc})),n.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return b.__wbg_cullFace_d6b862a4ad70b414})),n.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return b.__wbg_deleteBuffer_12fd7d93834069ef})),n.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return b.__wbg_deleteFramebuffer_d7551444a28f508e})),n.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return b.__wbg_deleteProgram_ce56000628d7f1ce})),n.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return b.__wbg_deleteRenderbuffer_58c540348fb8606d})),n.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return b.__wbg_deleteShader_246e6e678f3eb957})),n.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return b.__wbg_deleteTexture_68a539339fd87792})),n.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return b.__wbg_depthFunc_1015c3364a49cd2f})),n.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return b.__wbg_depthMask_55f538b7411e5023})),n.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return b.__wbg_depthRange_c6ed3371d3b601f8})),n.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return b.__wbg_disable_1659dc1efb5fb934})),n.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return b.__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf})),n.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return b.__wbg_drawArrays_d587302f7a868d91})),n.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return b.__wbg_drawElements_241caa588795bcb1})),n.d(e,"__wbg_enable_4791414dce6f602a",(function(){return b.__wbg_enable_4791414dce6f602a})),n.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return b.__wbg_enableVertexAttribArray_a1ffc091f3999354})),n.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return b.__wbg_framebufferRenderbuffer_963b305ac8cb6fd6})),n.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return b.__wbg_framebufferTexture2D_4b810902dffa1ef3})),n.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return b.__wbg_frontFace_97d7f9493791771d})),n.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return b.__wbg_getActiveUniform_97472b76b9daa461})),n.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return b.__wbg_getExtension_e7912bce04869d40})),n.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return b.__wbg_getParameter_4e2ccc745690476a})),n.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return b.__wbg_getProgramInfoLog_1e37a3d1d090ec1c})),n.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return b.__wbg_getProgramParameter_acf4ae158143e2b2})),n.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return b.__wbg_getShaderInfoLog_451545b963646762})),n.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return b.__wbg_getShaderParameter_6cd8c36fded266ea})),n.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return b.__wbg_getSupportedExtensions_b84494641d686623})),n.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return b.__wbg_getUniformLocation_0da0c93f626244a2})),n.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return b.__wbg_linkProgram_c33885d9ea798810})),n.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return b.__wbg_pixelStorei_51c83dc5117bea35})),n.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return b.__wbg_polygonOffset_7af170d91752512c})),n.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return b.__wbg_renderbufferStorage_0b6269243d09a9f7})),n.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return b.__wbg_scissor_b1b9e314ab6aac29})),n.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return b.__wbg_shaderSource_5111981e7afb61fb})),n.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return b.__wbg_stencilFuncSeparate_2939e543fa4caa77})),n.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return b.__wbg_stencilMask_4eb0f989e4108b15})),n.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return b.__wbg_stencilMaskSeparate_69e9937a9533f4ab})),n.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return b.__wbg_stencilOpSeparate_c57c8bbe863e9f57})),n.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return b.__wbg_texParameteri_21fd6b6b394882c9})),n.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return b.__wbg_uniform1f_ade6c204580582c8})),n.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return b.__wbg_uniform1i_49986febd844f2c4})),n.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return b.__wbg_uniform4f_d564461a6e4fdfe0})),n.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return b.__wbg_useProgram_35a58ac1e0d9577b})),n.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return b.__wbg_vertexAttribPointer_3b06d737566f0745})),n.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return b.__wbg_viewport_319ab5302767fcc9})),n.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return b.__wbg_instanceof_Window_acc97ff9f5d2c7b4})),n.d(e,"__wbg_document_3ead31dbcad65886",(function(){return b.__wbg_document_3ead31dbcad65886})),n.d(e,"__wbg_location_8cc8ccf27e342c0a",(function(){return b.__wbg_location_8cc8ccf27e342c0a})),n.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return b.__wbg_innerWidth_ffa584f74d721fce})),n.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return b.__wbg_innerHeight_f4804c803fcf02b0})),n.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return b.__wbg_devicePixelRatio_476ddb014eb2520a})),n.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return b.__wbg_cancelAnimationFrame_679ac3913d7f9b34})),n.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return b.__wbg_matchMedia_0b5dc8aaf445df72})),n.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return b.__wbg_requestAnimationFrame_4181656476a7d86c})),n.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return b.__wbg_get_55f248d76a5aa3d1})),n.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return b.__wbg_clearTimeout_7d6f7bfeed34b348})),n.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return b.__wbg_setTimeout_d6fcf0d9067b8e64})),n.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return b.__wbg_bindVertexArrayOES_84540c072ea96b75})),n.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return b.__wbg_createVertexArrayOES_00a5c523e5b17eff})),n.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return b.__wbg_deleteVertexArrayOES_98b83132b3d85825})),n.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return b.__wbg_pointerId_18be034781db46f3})),n.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return b.__wbg_instanceof_HtmlCanvasElement_97761617af6ea089})),n.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return b.__wbg_width_2f4b0cbbf1c850d9})),n.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return b.__wbg_setwidth_afb418d3fbf71ba7})),n.d(e,"__wbg_height_a81d308a000d91d0",(function(){return b.__wbg_height_a81d308a000d91d0})),n.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return b.__wbg_setheight_3eb8729b59493242})),n.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return b.__wbg_getContext_a6ea7a8e317f182a})),n.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return b.__wbg_matches_206d50bc7cb1f89e})),n.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return b.__wbg_now_8172cd917e5eda6b})),n.d(e,"__wbg_newwithstrandinit_05d7180788420c40",(function(){return b.__wbg_newwithstrandinit_05d7180788420c40})),n.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return b.__wbg_drawBuffersWEBGL_482a093ae5a4ad55})),n.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return b.__wbg_charCode_b0f31612a52c2bff})),n.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return b.__wbg_keyCode_72faed4278f77f2c})),n.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return b.__wbg_altKey_6dbe46bf3ae42d67})),n.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return b.__wbg_ctrlKey_fd79f035994d9387})),n.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return b.__wbg_shiftKey_908ae224b8722a41})),n.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return b.__wbg_metaKey_cdd15bf44efb510e})),n.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return b.__wbg_key_ad4fc49423a94efa})),n.d(e,"__wbg_code_06787cd3c7a60600",(function(){return b.__wbg_code_06787cd3c7a60600})),n.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return b.__wbg_getModifierState_135305ae40997dc7})),n.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return b.__wbg_addEventListener_cbe4c6f619b032f3})),n.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return b.__wbg_addEventListener_1fc744729ac6dc27})),n.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return b.__wbg_removeEventListener_dd20475efce70084})),n.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return b.__wbg_appendChild_e513ef0e5098dfdd})),n.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return b.__wbg_target_bf704b7db7ad1387})),n.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return b.__wbg_cancelBubble_8c0bdf21c08f1717})),n.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return b.__wbg_preventDefault_3209279b490de583})),n.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return b.__wbg_stopPropagation_eca3af16f2d02a91})),n.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return b.__wbg_matches_0ffc2232d99a6034})),n.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return b.__wbg_addListener_19238ce0935173e6})),n.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return b.__wbg_removeListener_c08dac8493263a47})),n.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return b.__wbg_size_878ba1bf0c2ec606})),n.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return b.__wbg_type_ca7819eaadc2049f})),n.d(e,"__wbg_name_2473476082bed625",(function(){return b.__wbg_name_2473476082bed625})),n.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return b.__wbg_fullscreenElement_de98779ddf556e06})),n.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return b.__wbg_createElement_976dbb84fe1661b5})),n.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return b.__wbg_getElementById_3a708b83e4f034d7})),n.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return b.__wbg_querySelector_3628dc2c3319e7e0})),n.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return b.__wbg_getBoundingClientRect_06acb6ac1c23e409})),n.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return b.__wbg_requestFullscreen_7d41309612540445})),n.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return b.__wbg_setAttribute_d8436c14a59ab1af})),n.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return b.__wbg_setPointerCapture_7cc6c6e831d5dae0})),n.d(e,"__wbg_style_e9380748cee29f13",(function(){return b.__wbg_style_e9380748cee29f13})),n.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return b.__wbg_bufferData_d6fac0d761e08fec})),n.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return b.__wbg_bufferData_a33528a74dd300f4})),n.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return b.__wbg_bufferSubData_a116fea11850b38f})),n.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return b.__wbg_compressedTexSubImage2D_30943b654d04ee44})),n.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return b.__wbg_readPixels_db685489e1779d63})),n.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return b.__wbg_texSubImage2D_cb339dd200dd1179})),n.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return b.__wbg_uniform2fv_3aad4d306a1cb8af})),n.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return b.__wbg_uniform2iv_8c390eac30cb1de3})),n.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return b.__wbg_uniform3fv_d1ef35c158c348e7})),n.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return b.__wbg_uniform3iv_76acc51e8e6fe1a4})),n.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return b.__wbg_uniform4fv_a513dc4d02f192d3})),n.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return b.__wbg_uniform4iv_19aa13960dc767c2})),n.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return b.__wbg_uniformMatrix2fv_4173a282fcaa5508})),n.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return b.__wbg_uniformMatrix3fv_2b7de3010c8ed627})),n.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return b.__wbg_uniformMatrix4fv_f16e4a5553357886})),n.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return b.__wbg_activeTexture_02b7c73c76c2c06b})),n.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return b.__wbg_attachShader_f4d51147351a1906})),n.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return b.__wbg_bindBuffer_8b5135aa633680f5})),n.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return b.__wbg_bindFramebuffer_080d0b0cf22e1645})),n.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return b.__wbg_bindRenderbuffer_6da549f066c1b8a5})),n.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return b.__wbg_bindTexture_6f1dec563e82e818})),n.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return b.__wbg_blendColor_3bea829c60b1f6f2})),n.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return b.__wbg_blendEquation_5d5abe2ee10109a9})),n.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return b.__wbg_blendEquationSeparate_fa6aebc5cd0c5285})),n.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return b.__wbg_blendFunc_49ea28240d4c1084})),n.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return b.__wbg_blendFuncSeparate_9fef8acb74d50df5})),n.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return b.__wbg_colorMask_bc13c97d0db65962})),n.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return b.__wbg_compileShader_22b038faa1f49857})),n.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return b.__wbg_copyTexSubImage2D_e815f93a9ef52dd2})),n.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return b.__wbg_createBuffer_6e747d928c9ba46d})),n.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return b.__wbg_createFramebuffer_9b5b0507480146cd})),n.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return b.__wbg_createProgram_1c5f8dffd1066e71})),n.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return b.__wbg_createRenderbuffer_69c2f0554298bf89})),n.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return b.__wbg_createShader_4017d9fbc36659af})),n.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return b.__wbg_createTexture_4ce49e8a8c655124})),n.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return b.__wbg_cullFace_aa9f8eea262690c0})),n.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return b.__wbg_deleteBuffer_6fd9bca7f8a6d9de})),n.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return b.__wbg_deleteFramebuffer_2617e39d2c39b4da})),n.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return b.__wbg_deleteProgram_e8636e3cb5a18a59})),n.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return b.__wbg_deleteRenderbuffer_e5b3450b8b57b395})),n.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return b.__wbg_deleteShader_89369612f61ec145})),n.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return b.__wbg_deleteTexture_5c40169772519141})),n.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return b.__wbg_depthFunc_2ac2c797a8220f09})),n.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return b.__wbg_depthMask_88ab181c23c32dcd})),n.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return b.__wbg_depthRange_5dccc27b5cdd74b3})),n.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return b.__wbg_disable_6835d16c2cd3fa26})),n.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return b.__wbg_disableVertexAttribArray_ab474d273ff59265})),n.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return b.__wbg_drawArrays_c0dcb4151e0bf007})),n.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return b.__wbg_drawElements_e09dbef58c8f099a})),n.d(e,"__wbg_enable_fc393941ac400f72",(function(){return b.__wbg_enable_fc393941ac400f72})),n.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return b.__wbg_enableVertexAttribArray_3d21f4936ad4a378})),n.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return b.__wbg_framebufferRenderbuffer_6b8dd5a111d341e6})),n.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return b.__wbg_framebufferTexture2D_499d1c21458d0113})),n.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return b.__wbg_frontFace_5fd354be6327d46b})),n.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return b.__wbg_getActiveUniform_fd021da851153e8c})),n.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return b.__wbg_getParameter_585a5b83c595ada8})),n.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return b.__wbg_getProgramInfoLog_e47d5073d57fb18d})),n.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return b.__wbg_getProgramParameter_eaf768a9b399b7cf})),n.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return b.__wbg_getShaderInfoLog_ec7e5b959e47645b})),n.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return b.__wbg_getShaderParameter_42a35b974329561c})),n.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return b.__wbg_getUniformLocation_8e9cc276a231ddcd})),n.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return b.__wbg_linkProgram_25cda5f9318ea316})),n.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return b.__wbg_pixelStorei_bee1e2da4cb1115b})),n.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return b.__wbg_polygonOffset_4cba459d8eacb66d})),n.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return b.__wbg_renderbufferStorage_4ceec9b17dbd1e76})),n.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return b.__wbg_scissor_4b89b60091ee8f0e})),n.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return b.__wbg_shaderSource_a0001b8eab5d44f4})),n.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return b.__wbg_stencilFuncSeparate_1f0226d5d3acaf47})),n.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return b.__wbg_stencilMask_00541859199befd2})),n.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return b.__wbg_stencilMaskSeparate_5e7b9b536eac0c5d})),n.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return b.__wbg_stencilOpSeparate_153523493abc8ec8})),n.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return b.__wbg_texParameteri_1b210b807f1ea723})),n.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return b.__wbg_uniform1f_f60e1072e28b8c49})),n.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return b.__wbg_uniform1i_50124a48de1da66b})),n.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return b.__wbg_uniform4f_5b62a0acebac4494})),n.d(e,"__wbg_useProgram_156511a425feb519",(function(){return b.__wbg_useProgram_156511a425feb519})),n.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return b.__wbg_vertexAttribPointer_63d2aef49627302b})),n.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return b.__wbg_viewport_a93f3881c4202d5e})),n.d(e,"__wbg_fetch_749a56934f95c96c",(function(){return b.__wbg_fetch_749a56934f95c96c})),n.d(e,"__wbg_debug_f15cb542ea509609",(function(){return b.__wbg_debug_f15cb542ea509609})),n.d(e,"__wbg_error_ef9a0be47931175f",(function(){return b.__wbg_error_ef9a0be47931175f})),n.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return b.__wbg_error_02ffd4185a83fe18})),n.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return b.__wbg_info_2874fdd5393f35ce})),n.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return b.__wbg_log_4b5638ad60bdc54a})),n.d(e,"__wbg_warn_58110c4a199df084",(function(){return b.__wbg_warn_58110c4a199df084})),n.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return b.__wbg_setProperty_e489dfd8c0a6bffc})),n.d(e,"__wbg_x_419967b8271dcf59",(function(){return b.__wbg_x_419967b8271dcf59})),n.d(e,"__wbg_y_0f67486e0f88b265",(function(){return b.__wbg_y_0f67486e0f88b265})),n.d(e,"__wbg_origin_486b350035be1f11",(function(){return b.__wbg_origin_486b350035be1f11})),n.d(e,"__wbg_instanceof_Response_eaa426220848a39e",(function(){return b.__wbg_instanceof_Response_eaa426220848a39e})),n.d(e,"__wbg_url_74285ddf2747cb3d",(function(){return b.__wbg_url_74285ddf2747cb3d})),n.d(e,"__wbg_status_c4ef3dd591e63435",(function(){return b.__wbg_status_c4ef3dd591e63435})),n.d(e,"__wbg_headers_fd64ad685cf22e5d",(function(){return b.__wbg_headers_fd64ad685cf22e5d})),n.d(e,"__wbg_arrayBuffer_4c27b6f00c530232",(function(){return b.__wbg_arrayBuffer_4c27b6f00c530232})),n.d(e,"__wbg_text_1169d752cc697903",(function(){return b.__wbg_text_1169d752cc697903})),n.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return b.__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483})),n.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return b.__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b})),n.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return b.__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735})),n.d(e,"__wbg_new_2d0053ee81e4dd2a",(function(){return b.__wbg_new_2d0053ee81e4dd2a})),n.d(e,"__wbg_append_de37df908812970d",(function(){return b.__wbg_append_de37df908812970d})),n.d(e,"__wbg_clientX_e39206f946859108",(function(){return b.__wbg_clientX_e39206f946859108})),n.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return b.__wbg_clientY_e376bb2d8f470c88})),n.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return b.__wbg_offsetX_8891849b36542d53})),n.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return b.__wbg_offsetY_1f52082687af467b})),n.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return b.__wbg_ctrlKey_4795fb55a59f026c})),n.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return b.__wbg_shiftKey_81014521a7612e6a})),n.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return b.__wbg_altKey_2b8d6d80ead4bad7})),n.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return b.__wbg_metaKey_49e49046d8402fb7})),n.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return b.__wbg_button_2bb5dc0116d6b89b})),n.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return b.__wbg_buttons_047716c1296e3d1c})),n.d(e,"__wbg_movementX_f5947c282009d740",(function(){return b.__wbg_movementX_f5947c282009d740})),n.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return b.__wbg_movementY_2c81eed268321a0a})),n.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return b.__wbg_deltaX_6b627fd6f4c19e51})),n.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return b.__wbg_deltaY_a5393ec7ac0f7bb4})),n.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return b.__wbg_deltaMode_a90be314f5c676f1})),n.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return b.__wbg_get_57245cc7d7c7619d})),n.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return b.__wbg_length_6e3bbe7c8bd4dbd8})),n.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return b.__wbg_new_1d9a920c6bfc44a8})),n.d(e,"__wbindgen_is_function",(function(){return b.__wbindgen_is_function})),n.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return b.__wbg_newnoargs_b5b063fc6c2f0376})),n.d(e,"__wbindgen_is_object",(function(){return b.__wbindgen_is_object})),n.d(e,"__wbg_next_579e583d33566a86",(function(){return b.__wbg_next_579e583d33566a86})),n.d(e,"__wbg_next_aaef7c8aa5e212ac",(function(){return b.__wbg_next_aaef7c8aa5e212ac})),n.d(e,"__wbg_done_1b73b0672e15f234",(function(){return b.__wbg_done_1b73b0672e15f234})),n.d(e,"__wbg_value_1ccc36bc03462d71",(function(){return b.__wbg_value_1ccc36bc03462d71})),n.d(e,"__wbg_iterator_6f9d4f28845f426c",(function(){return b.__wbg_iterator_6f9d4f28845f426c})),n.d(e,"__wbg_get_765201544a2b6869",(function(){return b.__wbg_get_765201544a2b6869})),n.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return b.__wbg_call_97ae9d8645dc388b})),n.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return b.__wbg_new_0b9bfdd97583284e})),n.d(e,"__wbg_self_6d479506f72c6a71",(function(){return b.__wbg_self_6d479506f72c6a71})),n.d(e,"__wbg_window_f2557cc78490aceb",(function(){return b.__wbg_window_f2557cc78490aceb})),n.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return b.__wbg_globalThis_7f206bda628d5286})),n.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return b.__wbg_global_ba75c50d1cf384f4})),n.d(e,"__wbindgen_is_undefined",(function(){return b.__wbindgen_is_undefined})),n.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return b.__wbg_of_d79bf3cec607f7a4})),n.d(e,"__wbg_push_740e4b286702d964",(function(){return b.__wbg_push_740e4b286702d964})),n.d(e,"__wbg_is_40a66842732708e7",(function(){return b.__wbg_is_40a66842732708e7})),n.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return b.__wbg_resolve_99fe17964f31ffc0})),n.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return b.__wbg_then_11f7a54d67b4bfad})),n.d(e,"__wbg_then_cedad20fbbd9418a",(function(){return b.__wbg_then_cedad20fbbd9418a})),n.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return b.__wbg_buffer_3f3d764d4747d564})),n.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return b.__wbg_newwithbyteoffsetandlength_890b478c8d7226ff})),n.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return b.__wbg_newwithbyteoffsetandlength_698c5100ae9c3365})),n.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return b.__wbg_newwithbyteoffsetandlength_7be13f49af2b2012})),n.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return b.__wbg_newwithbyteoffsetandlength_d9aa266703cb98be})),n.d(e,"__wbg_new_8c3f0052272a457a",(function(){return b.__wbg_new_8c3f0052272a457a})),n.d(e,"__wbg_set_83db9690f9353e79",(function(){return b.__wbg_set_83db9690f9353e79})),n.d(e,"__wbg_length_9e1ae1900cb0fbd5",(function(){return b.__wbg_length_9e1ae1900cb0fbd5})),n.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return b.__wbg_newwithbyteoffsetandlength_5540e144e9b8b907})),n.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return b.__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26})),n.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return b.__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4})),n.d(e,"__wbg_has_8359f114ce042f5a",(function(){return b.__wbg_has_8359f114ce042f5a})),n.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return b.__wbg_set_bf3f89b92d5a34bf})),n.d(e,"__wbg_stringify_d6471d300ded9b68",(function(){return b.__wbg_stringify_d6471d300ded9b68})),n.d(e,"__wbindgen_debug_string",(function(){return b.__wbindgen_debug_string})),n.d(e,"__wbindgen_throw",(function(){return b.__wbindgen_throw})),n.d(e,"__wbindgen_memory",(function(){return b.__wbindgen_memory})),n.d(e,"__wbindgen_closure_wrapper765",(function(){return b.__wbindgen_closure_wrapper765})),n.d(e,"__wbindgen_closure_wrapper767",(function(){return b.__wbindgen_closure_wrapper767})),n.d(e,"__wbindgen_closure_wrapper769",(function(){return b.__wbindgen_closure_wrapper769})),n.d(e,"__wbindgen_closure_wrapper771",(function(){return b.__wbindgen_closure_wrapper771})),n.d(e,"__wbindgen_closure_wrapper773",(function(){return b.__wbindgen_closure_wrapper773})),n.d(e,"__wbindgen_closure_wrapper775",(function(){return b.__wbindgen_closure_wrapper775})),n.d(e,"__wbindgen_closure_wrapper777",(function(){return b.__wbindgen_closure_wrapper777})),n.d(e,"__wbindgen_closure_wrapper779",(function(){return b.__wbindgen_closure_wrapper779})),n.d(e,"__wbindgen_closure_wrapper781",(function(){return b.__wbindgen_closure_wrapper781})),n.d(e,"__wbindgen_closure_wrapper1116",(function(){return b.__wbindgen_closure_wrapper1116})),r.f()}}]); \ No newline at end of file diff --git a/assets/js/7.2c6d1b9a.js b/assets/js/7.0b322ea5.js similarity index 91% rename from assets/js/7.2c6d1b9a.js rename to assets/js/7.0b322ea5.js index c308068c..b21de56f 100644 --- a/assets/js/7.2c6d1b9a.js +++ b/assets/js/7.0b322ea5.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{371:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_string_new",(function(){return k})),t.d(e,"__wbindgen_object_clone_ref",(function(){return O})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_string_get",(function(){return q})),t.d(e,"__wbindgen_boolean_get",(function(){return K})),t.d(e,"__wbindgen_number_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return _n})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return dn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return bn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return gn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return wn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return ln})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return sn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return mn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return vn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return yn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return pn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return hn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return xn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Sn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return An})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Pn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return In})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Dn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return En})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Fn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Tn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Bn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Ln})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Mn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return kn})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return On})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Rn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Cn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Vn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Un})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Kn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return jn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Gn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Wn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Qn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Xn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Yn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return Nn})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return Hn})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return Jn})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return zn})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return Zn})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return $n})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ne})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ee})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return te})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return re})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ue})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return fe})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ce})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return _e})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return ie})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return oe})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ae})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return de})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return be})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return ge})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return we})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return le})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return me})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return ve})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return ye})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return pe})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return he})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return xe})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Se})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Ae})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Pe})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Ie})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return De})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Ee})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Fe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Te})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Be})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Le})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return Me})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Oe})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Re})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ce})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Ve})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Ue})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return qe})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ke})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ge})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return We})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return Qe})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return Xe})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return Ye})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return Ne})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return He})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return Je})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ze})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return Ze})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return $e})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return nt})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return et})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return tt})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return rt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return ut})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return ft})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return ct})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return _t})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return it})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return ot})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return at})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return dt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return bt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return gt})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return wt})),t.d(e,"__wbg_name_2473476082bed625",(function(){return lt})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return st})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return mt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return vt})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return yt})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return pt})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return ht})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return xt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return St})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return At})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Pt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return It})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Dt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Et})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Ft})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Tt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Bt})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return Lt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Mt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return kt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Ot})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Rt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Ct})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Vt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Ut})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return qt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Kt})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Gt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Wt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Qt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Xt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Yt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return Nt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ht})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return Jt})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return zt})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return Zt})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return $t})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return nr})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return er})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return tr})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return rr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return ur})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return fr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return cr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return _r})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return ir})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return or})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return ar})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return dr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return br})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return gr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return wr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return lr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return sr})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return mr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return vr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return yr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return pr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return hr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return xr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Sr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Ar})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Pr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Ir})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Dr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Er})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Fr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Tr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Br})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Lr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Mr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return kr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Or})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Rr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Cr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Vr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Ur})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return qr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return Kr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return jr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return Gr})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return Wr})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return Qr})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return Xr})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return Yr})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return Nr})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return Hr})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return Jr})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return zr})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return Zr})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return $r})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return nu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return eu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return tu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return ru})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return uu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return fu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return cu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return _u})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return iu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return ou})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return au})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return du})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return bu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return gu})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return wu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return lu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return su})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return mu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return vu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return yu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return pu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return hu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return xu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Su})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Au})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Pu})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Iu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Du})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Eu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Fu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Tu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Bu})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Lu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Mu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return ku})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ou})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Ru})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Cu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Vu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Uu})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return qu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Ku})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return ju})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Gu})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return Wu})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return Qu})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return Xu})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Yu})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Nu})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return Hu})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Ju})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return zu})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Zu})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return $u})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return nf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return ef})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return tf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return rf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return uf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return ff})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return cf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return _f})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return of})),t.d(e,"__wbindgen_is_undefined",(function(){return af})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return df})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return bf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return gf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return wf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return lf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return sf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return vf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return yf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return pf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return xf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return Sf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Af})),t.d(e,"__wbindgen_debug_string",(function(){return Pf})),t.d(e,"__wbindgen_throw",(function(){return If})),t.d(e,"__wbindgen_memory",(function(){return Df})),t.d(e,"__wbindgen_closure_wrapper537",(function(){return Ef})),t.d(e,"__wbindgen_closure_wrapper539",(function(){return Ff})),t.d(e,"__wbindgen_closure_wrapper541",(function(){return Tf})),t.d(e,"__wbindgen_closure_wrapper543",(function(){return Bf})),t.d(e,"__wbindgen_closure_wrapper545",(function(){return Lf})),t.d(e,"__wbindgen_closure_wrapper547",(function(){return Mf})),t.d(e,"__wbindgen_closure_wrapper549",(function(){return kf})),t.d(e,"__wbindgen_closure_wrapper551",(function(){return Of})),t.d(e,"__wbindgen_closure_wrapper553",(function(){return Rf})),t.d(e,"__wbindgen_closure_wrapper770",(function(){return Cf}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(61),t(403),t(404),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(414),t(456)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}var o=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});o.decode();var a=new Uint8Array;function d(){return 0===a.byteLength&&(a=new Uint8Array(u.j.buffer)),a}function b(n,e){return o.decode(d().subarray(n,n+e))}function g(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return d().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,c=e(f),_=d(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var a=d().subarray(c+i,c+f);i+=s(n,a).written}return w=i,c}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function N(n,e){c(n).bindVertexArray(c(e))}function H(n,e,t,r,u,f,_,i,o,a,d){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,a>>>0,d>>>0)}function J(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function Z(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function $(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,E(r,u))}function en(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,F(r,u))}function tn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,_,i,o,a){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,a)}function fn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function cn(n,e,t,r,u,f,_,i,o,a,d,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d,b)}function _n(n,e,t,r,u,f,_,i,o,a,d){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,c(d))}function on(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,a){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a)}function dn(n){var e=c(n).createVertexArray();return v(e)?0:g(e)}function bn(n,e){c(n).deleteQuery(c(e))}function gn(n,e){c(n).deleteSampler(c(e))}function wn(n,e){c(n).deleteSync(c(e))}function ln(n,e){c(n).deleteVertexArray(c(e))}function sn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function mn(n,e){c(n).drawBuffers(c(e))}function vn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function yn(n,e){c(n).endQuery(e>>>0)}function pn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return v(r)?0:g(r)}function hn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function xn(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function Sn(){return L((function(n,e,t){return g(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function An(n,e,t){return g(c(n).getQueryParameter(c(e),t>>>0))}function Pn(n,e,t){return g(c(n).getSyncParameter(c(e),t>>>0))}function In(n,e,t,r){return c(n).getUniformBlockIndex(c(e),b(t,r))}function Dn(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function En(n,e){c(n).readBuffer(e>>>0)}function Fn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Tn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Bn(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Ln(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function Mn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,a)}),arguments)}function kn(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,b)}),arguments)}function On(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,c(b))}),arguments)}function Rn(n,e,t,r){c(n).uniform2fv(c(e),E(t,r))}function Cn(n,e,t,r){c(n).uniform2iv(c(e),F(t,r))}function Vn(n,e,t,r){c(n).uniform3fv(c(e),E(t,r))}function Un(n,e,t,r){c(n).uniform3iv(c(e),F(t,r))}function qn(n,e,t,r){c(n).uniform4fv(c(e),E(t,r))}function Kn(n,e,t,r){c(n).uniform4iv(c(e),F(t,r))}function jn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Gn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,E(r,u))}function Wn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,E(r,u))}function Qn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,E(r,u))}function Xn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function Yn(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function Nn(n,e){c(n).activeTexture(e>>>0)}function Hn(n,e,t){c(n).attachShader(c(e),c(t))}function Jn(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function zn(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Zn(n,e,t){c(n).bindTexture(e>>>0,c(t))}function $n(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function ne(n,e){c(n).blendEquation(e>>>0)}function ee(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function te(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function re(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ue(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function fe(n,e){c(n).compileShader(c(e))}function ce(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function _e(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function ie(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function oe(n){var e=c(n).createProgram();return v(e)?0:g(e)}function ae(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function de(n){var e=c(n).createTexture();return v(e)?0:g(e)}function be(n,e){c(n).cullFace(e>>>0)}function ge(n,e){c(n).deleteBuffer(c(e))}function we(n,e){c(n).deleteFramebuffer(c(e))}function le(n,e){c(n).deleteProgram(c(e))}function se(n,e){c(n).deleteRenderbuffer(c(e))}function me(n,e){c(n).deleteShader(c(e))}function ve(n,e){c(n).deleteTexture(c(e))}function ye(n,e){c(n).depthFunc(e>>>0)}function pe(n,e){c(n).depthMask(0!==e)}function he(n,e,t){c(n).depthRange(e,t)}function xe(n,e){c(n).disable(e>>>0)}function Se(n,e){c(n).disableVertexAttribArray(e>>>0)}function Ae(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Pe(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Ie(n,e){c(n).enable(e>>>0)}function De(n,e){c(n).enableVertexAttribArray(e>>>0)}function Ee(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Fe(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Te(n,e){c(n).frontFace(e>>>0)}function Be(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:g(r)}function Le(){return L((function(n,e,t){var r=c(n).getExtension(b(e,t));return v(r)?0:g(r)}),arguments)}function Me(){return L((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Oe(n,e,t){return g(c(n).getProgramParameter(c(e),t>>>0))}function Re(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Ce(n,e,t){return g(c(n).getShaderParameter(c(e),t>>>0))}function Ve(n){var e=c(n).getSupportedExtensions();return v(e)?0:g(e)}function Ue(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function qe(n,e){c(n).linkProgram(c(e))}function Ke(n,e,t){c(n).pixelStorei(e>>>0,t)}function je(n,e,t){c(n).polygonOffset(e,t)}function Ge(n,e,t,r,u){c(n).scissor(e,t,r,u)}function We(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function Qe(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Xe(n,e){c(n).stencilMask(e>>>0)}function Ye(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Ne(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function He(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Je(n,e,t){c(n).uniform1f(c(e),t)}function ze(n,e,t){c(n).uniform1i(c(e),t)}function Ze(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function $e(n,e){c(n).useProgram(c(e))}function nt(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function et(n,e,t,r,u){c(n).viewport(e,t,r,u)}function tt(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function rt(n){var e=c(n).document;return v(e)?0:g(e)}function ut(){return L((function(n){return g(c(n).innerWidth)}),arguments)}function ft(){return L((function(n){return g(c(n).innerHeight)}),arguments)}function ct(n){return c(n).devicePixelRatio}function _t(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function it(){return L((function(n,e,t){var r=c(n).matchMedia(b(e,t));return v(r)?0:g(r)}),arguments)}function ot(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function at(n,e,t){var r=c(n)[b(e,t)];return v(r)?0:g(r)}function dt(n,e){c(n).clearTimeout(e)}function bt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function gt(n){return c(n).size}function wt(n){return c(n).type}function lt(n,e){var t=m(c(e).name,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function st(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function mt(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function vt(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function yt(){return L((function(n,e,t,r,u){c(n).setProperty(b(e,t),b(r,u))}),arguments)}function pt(n){return c(n).x}function ht(n){return c(n).y}function xt(n){return c(n).clientX}function St(n){return c(n).clientY}function At(n){return c(n).offsetX}function Pt(n){return c(n).offsetY}function It(n){return c(n).ctrlKey}function Dt(n){return c(n).shiftKey}function Et(n){return c(n).altKey}function Ft(n){return c(n).metaKey}function Tt(n){return c(n).button}function Bt(n){return c(n).buttons}function Lt(n){return c(n).movementX}function Mt(n){return c(n).movementY}function kt(n,e){c(n).bindVertexArrayOES(c(e))}function Ot(n){var e=c(n).createVertexArrayOES();return v(e)?0:g(e)}function Rt(n,e){c(n).deleteVertexArrayOES(c(e))}function Ct(n){return c(n).pointerId}function Vt(n){return c(n).deltaX}function Ut(n){return c(n).deltaY}function qt(n){return c(n).deltaMode}function Kt(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function jt(n){return c(n).width}function Gt(n,e){c(n).width=e>>>0}function Wt(n){return c(n).height}function Qt(n,e){c(n).height=e>>>0}function Xt(){return L((function(n,e,t,r){var u=c(n).getContext(b(e,t),c(r));return v(u)?0:g(u)}),arguments)}function Yt(n){return c(n).matches}function Nt(n){return c(n).now()}function Ht(n,e){c(n).drawBuffersWEBGL(c(e))}function Jt(n){var e=c(n).fullscreenElement;return v(e)?0:g(e)}function zt(){return L((function(n,e,t){return g(c(n).createElement(b(e,t)))}),arguments)}function Zt(n,e,t){var r=c(n).getElementById(b(e,t));return v(r)?0:g(r)}function $t(){return L((function(n,e,t){var r=c(n).querySelector(b(e,t));return v(r)?0:g(r)}),arguments)}function nr(n){return g(c(n).getBoundingClientRect())}function er(){return L((function(n){c(n).requestFullscreen()}),arguments)}function tr(){return L((function(n,e,t,r,u){c(n).setAttribute(b(e,t),b(r,u))}),arguments)}function rr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function ur(n){return g(c(n).style)}function fr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function cr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function _r(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function ir(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function or(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function ar(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function dr(n,e,t,r){c(n).uniform2fv(c(e),E(t,r))}function br(n,e,t,r){c(n).uniform2iv(c(e),F(t,r))}function gr(n,e,t,r){c(n).uniform3fv(c(e),E(t,r))}function wr(n,e,t,r){c(n).uniform3iv(c(e),F(t,r))}function lr(n,e,t,r){c(n).uniform4fv(c(e),E(t,r))}function sr(n,e,t,r){c(n).uniform4iv(c(e),F(t,r))}function mr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,E(r,u))}function vr(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,E(r,u))}function yr(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,E(r,u))}function pr(n,e){c(n).activeTexture(e>>>0)}function hr(n,e,t){c(n).attachShader(c(e),c(t))}function xr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Sr(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Ar(n,e,t){c(n).bindTexture(e>>>0,c(t))}function Pr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Ir(n,e){c(n).blendEquation(e>>>0)}function Dr(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Er(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function Fr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tr(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Br(n,e){c(n).compileShader(c(e))}function Lr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function Mr(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function kr(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function Or(n){var e=c(n).createProgram();return v(e)?0:g(e)}function Rr(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function Cr(n){var e=c(n).createTexture();return v(e)?0:g(e)}function Vr(n,e){c(n).cullFace(e>>>0)}function Ur(n,e){c(n).deleteBuffer(c(e))}function qr(n,e){c(n).deleteFramebuffer(c(e))}function Kr(n,e){c(n).deleteProgram(c(e))}function jr(n,e){c(n).deleteRenderbuffer(c(e))}function Gr(n,e){c(n).deleteShader(c(e))}function Wr(n,e){c(n).deleteTexture(c(e))}function Qr(n,e){c(n).depthFunc(e>>>0)}function Xr(n,e){c(n).depthMask(0!==e)}function Yr(n,e,t){c(n).depthRange(e,t)}function Nr(n,e){c(n).disable(e>>>0)}function Hr(n,e){c(n).disableVertexAttribArray(e>>>0)}function Jr(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function zr(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Zr(n,e){c(n).enable(e>>>0)}function $r(n,e){c(n).enableVertexAttribArray(e>>>0)}function nu(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function eu(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function tu(n,e){c(n).frontFace(e>>>0)}function ru(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:g(r)}function uu(){return L((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function fu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function cu(n,e,t){return g(c(n).getProgramParameter(c(e),t>>>0))}function _u(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function iu(n,e,t){return g(c(n).getShaderParameter(c(e),t>>>0))}function ou(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function au(n,e){c(n).linkProgram(c(e))}function du(n,e,t){c(n).pixelStorei(e>>>0,t)}function bu(n,e,t){c(n).polygonOffset(e,t)}function gu(n,e,t,r,u){c(n).scissor(e,t,r,u)}function wu(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function lu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function su(n,e){c(n).stencilMask(e>>>0)}function mu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function vu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function yu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function pu(n,e,t){c(n).uniform1f(c(e),t)}function hu(n,e,t){c(n).uniform1i(c(e),t)}function xu(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function Su(n,e){c(n).useProgram(c(e))}function Au(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Pu(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Iu(n){console.debug(c(n))}function Du(n){console.error(c(n))}function Eu(n,e){console.error(c(n),c(e))}function Fu(n){console.info(c(n))}function Tu(n){console.log(c(n))}function Bu(n){console.warn(c(n))}function Lu(){return L((function(n,e,t,r){c(n).addEventListener(b(e,t),c(r))}),arguments)}function Mu(){return L((function(n,e,t,r,u){c(n).addEventListener(b(e,t),c(r),c(u))}),arguments)}function ku(){return L((function(n,e,t,r){c(n).removeEventListener(b(e,t),c(r))}),arguments)}function Ou(n){return c(n).charCode}function Ru(n){return c(n).keyCode}function Cu(n){return c(n).altKey}function Vu(n){return c(n).ctrlKey}function Uu(n){return c(n).shiftKey}function qu(n){return c(n).metaKey}function Ku(n,e){var t=m(c(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function ju(n,e){var t=m(c(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Gu(n,e,t){return c(n).getModifierState(b(e,t))}function Wu(n){return c(n).matches}function Qu(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function Xu(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function Yu(){return L((function(n,e){return g(c(n).appendChild(c(e)))}),arguments)}function Nu(n){var e=c(n).target;return v(e)?0:g(e)}function Hu(n){return c(n).cancelBubble}function Ju(n){c(n).preventDefault()}function zu(n){c(n).stopPropagation()}function Zu(n,e){return g(c(n)[e>>>0])}function $u(n){return c(n).length}function nf(){return g(new Array)}function ef(n,e){return g(new Function(b(n,e)))}function tf(){return L((function(n,e){return g(Reflect.get(c(n),c(e)))}),arguments)}function rf(){return L((function(n,e){return g(c(n).call(c(e)))}),arguments)}function uf(){return g(new Object)}function ff(){return L((function(){return g(self.self)}),arguments)}function cf(){return L((function(){return g(window.window)}),arguments)}function _f(){return L((function(){return g(globalThis.globalThis)}),arguments)}function of(){return L((function(){return g(global.global)}),arguments)}function af(n){return void 0===c(n)}function df(n){return g(Array.of(c(n)))}function bf(n,e){return c(n).push(c(e))}function gf(n,e){return Object.is(c(n),c(e))}function wf(n){return g(Promise.resolve(c(n)))}function lf(n,e){return g(c(n).then(c(e)))}function sf(n){return g(c(n).buffer)}function mf(n,e,t){return g(new Int8Array(c(n),e>>>0,t>>>0))}function vf(n,e,t){return g(new Int16Array(c(n),e>>>0,t>>>0))}function yf(n,e,t){return g(new Int32Array(c(n),e>>>0,t>>>0))}function pf(n,e,t){return g(new Uint8Array(c(n),e>>>0,t>>>0))}function hf(n,e,t){return g(new Uint16Array(c(n),e>>>0,t>>>0))}function xf(n,e,t){return g(new Uint32Array(c(n),e>>>0,t>>>0))}function Sf(n,e,t){return g(new Float32Array(c(n),e>>>0,t>>>0))}function Af(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function Pf(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function If(n,e){throw new Error(b(n,e))}function Df(){return g(u.j)}function Ef(n,e,t){return g(x(n,e,93,S))}function Ff(n,e,t){return g(x(n,e,93,A))}function Tf(n,e,t){return g(x(n,e,93,S))}function Bf(n,e,t){return g(x(n,e,93,S))}function Lf(n,e,t){return g(x(n,e,93,S))}function Mf(n,e,t){return g(x(n,e,93,S))}function kf(n,e,t){return g(x(n,e,93,S))}function Of(n,e,t){return g(x(n,e,93,S))}function Rf(n,e,t){return g(x(n,e,93,S))}function Cf(n,e,t){return g(x(n,e,177,P))}}.call(this,t(375)(n))},456:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(371);r.l()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{371:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_string_new",(function(){return k})),t.d(e,"__wbindgen_object_clone_ref",(function(){return O})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_string_get",(function(){return q})),t.d(e,"__wbindgen_boolean_get",(function(){return K})),t.d(e,"__wbindgen_number_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return _n})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return dn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return bn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return gn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return wn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return ln})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return sn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return mn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return vn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return yn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return pn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return hn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return xn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Sn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return An})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Pn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return In})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Dn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Fn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return En})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Tn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Bn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Ln})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Mn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return kn})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return On})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Rn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Cn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Vn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Un})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Kn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return jn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Gn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Wn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Qn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Xn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Yn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return Nn})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return Hn})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return Jn})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return zn})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return Zn})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return $n})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ne})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ee})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return te})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return re})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ue})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return fe})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ce})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return _e})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return ie})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return oe})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ae})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return de})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return be})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return ge})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return we})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return le})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return me})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return ve})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return ye})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return pe})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return he})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return xe})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Se})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Ae})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Pe})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Ie})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return De})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Fe})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ee})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Te})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Be})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Le})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return Me})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Oe})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Re})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ce})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Ve})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Ue})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return qe})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ke})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ge})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return We})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return Qe})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return Xe})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return Ye})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return Ne})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return He})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return Je})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ze})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return Ze})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return $e})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return nt})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return et})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return tt})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return rt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return ut})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return ft})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return ct})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return _t})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return it})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return ot})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return at})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return dt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return bt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return gt})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return wt})),t.d(e,"__wbg_name_2473476082bed625",(function(){return lt})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return st})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return mt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return vt})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return yt})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return pt})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return ht})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return xt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return St})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return At})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Pt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return It})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Dt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Ft})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Et})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Tt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Bt})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return Lt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Mt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return kt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Ot})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Rt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Ct})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Vt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Ut})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return qt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Kt})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Gt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Wt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Qt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Xt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Yt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return Nt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ht})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return Jt})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return zt})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return Zt})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return $t})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return nr})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return er})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return tr})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return rr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return ur})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return fr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return cr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return _r})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return ir})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return or})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return ar})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return dr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return br})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return gr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return wr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return lr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return sr})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return mr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return vr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return yr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return pr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return hr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return xr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Sr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Ar})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Pr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Ir})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Dr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Fr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Er})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Tr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Br})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Lr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Mr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return kr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Or})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Rr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Cr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Vr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Ur})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return qr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return Kr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return jr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return Gr})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return Wr})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return Qr})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return Xr})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return Yr})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return Nr})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return Hr})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return Jr})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return zr})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return Zr})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return $r})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return nu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return eu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return tu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return ru})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return uu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return fu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return cu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return _u})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return iu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return ou})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return au})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return du})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return bu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return gu})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return wu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return lu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return su})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return mu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return vu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return yu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return pu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return hu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return xu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Su})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Au})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Pu})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Iu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Du})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Fu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Eu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Tu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Bu})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Lu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Mu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return ku})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ou})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Ru})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Cu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Vu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Uu})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return qu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Ku})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return ju})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Gu})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return Wu})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return Qu})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return Xu})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Yu})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Nu})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return Hu})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Ju})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return zu})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Zu})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return $u})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return nf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return ef})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return tf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return rf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return uf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return ff})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return cf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return _f})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return of})),t.d(e,"__wbindgen_is_undefined",(function(){return af})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return df})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return bf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return gf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return wf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return lf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return sf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return vf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return yf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return pf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return xf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return Sf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Af})),t.d(e,"__wbindgen_debug_string",(function(){return Pf})),t.d(e,"__wbindgen_throw",(function(){return If})),t.d(e,"__wbindgen_memory",(function(){return Df})),t.d(e,"__wbindgen_closure_wrapper537",(function(){return Ff})),t.d(e,"__wbindgen_closure_wrapper539",(function(){return Ef})),t.d(e,"__wbindgen_closure_wrapper541",(function(){return Tf})),t.d(e,"__wbindgen_closure_wrapper543",(function(){return Bf})),t.d(e,"__wbindgen_closure_wrapper545",(function(){return Lf})),t.d(e,"__wbindgen_closure_wrapper547",(function(){return Mf})),t.d(e,"__wbindgen_closure_wrapper549",(function(){return kf})),t.d(e,"__wbindgen_closure_wrapper551",(function(){return Of})),t.d(e,"__wbindgen_closure_wrapper553",(function(){return Rf})),t.d(e,"__wbindgen_closure_wrapper770",(function(){return Cf}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(61),t(411),t(412),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(416),t(458)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}var o=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});o.decode();var a=new Uint8Array;function d(){return 0===a.byteLength&&(a=new Uint8Array(u.j.buffer)),a}function b(n,e){return o.decode(d().subarray(n,n+e))}function g(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var w=0,l=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),s="function"==typeof l.encodeInto?function(n,e){return l.encodeInto(n,e)}:function(n,e){var t=l.encode(n);return e.set(t),{read:n.length,written:t.length}};function m(n,e,t){if(void 0===t){var r=l.encode(n),u=e(r.length);return d().subarray(u,u+r.length).set(r),w=r.length,u}for(var f=n.length,c=e(f),_=d(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var a=d().subarray(c+i,c+f);i+=s(n,a).written}return w=i,c}function v(n){return null==n}var y=new Int32Array;function p(){return 0===y.byteLength&&(y=new Int32Array(u.j.buffer)),y}var h=new Float64Array;function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function N(n,e){c(n).bindVertexArray(c(e))}function H(n,e,t,r,u,f,_,i,o,a,d){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,a>>>0,d>>>0)}function J(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function Z(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function $(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,F(r,u))}function en(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,E(r,u))}function tn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,_,i,o,a){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,a)}function fn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function cn(n,e,t,r,u,f,_,i,o,a,d,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d,b)}function _n(n,e,t,r,u,f,_,i,o,a,d){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,c(d))}function on(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,a){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a)}function dn(n){var e=c(n).createVertexArray();return v(e)?0:g(e)}function bn(n,e){c(n).deleteQuery(c(e))}function gn(n,e){c(n).deleteSampler(c(e))}function wn(n,e){c(n).deleteSync(c(e))}function ln(n,e){c(n).deleteVertexArray(c(e))}function sn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function mn(n,e){c(n).drawBuffers(c(e))}function vn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function yn(n,e){c(n).endQuery(e>>>0)}function pn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return v(r)?0:g(r)}function hn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function xn(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function Sn(){return L((function(n,e,t){return g(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function An(n,e,t){return g(c(n).getQueryParameter(c(e),t>>>0))}function Pn(n,e,t){return g(c(n).getSyncParameter(c(e),t>>>0))}function In(n,e,t,r){return c(n).getUniformBlockIndex(c(e),b(t,r))}function Dn(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function Fn(n,e){c(n).readBuffer(e>>>0)}function En(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Tn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Bn(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Ln(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function Mn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,a)}),arguments)}function kn(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,b)}),arguments)}function On(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,c(b))}),arguments)}function Rn(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function Cn(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Vn(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Un(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function qn(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Kn(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function jn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Gn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Wn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Qn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Xn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function Yn(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function Nn(n,e){c(n).activeTexture(e>>>0)}function Hn(n,e,t){c(n).attachShader(c(e),c(t))}function Jn(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function zn(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Zn(n,e,t){c(n).bindTexture(e>>>0,c(t))}function $n(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function ne(n,e){c(n).blendEquation(e>>>0)}function ee(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function te(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function re(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ue(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function fe(n,e){c(n).compileShader(c(e))}function ce(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function _e(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function ie(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function oe(n){var e=c(n).createProgram();return v(e)?0:g(e)}function ae(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function de(n){var e=c(n).createTexture();return v(e)?0:g(e)}function be(n,e){c(n).cullFace(e>>>0)}function ge(n,e){c(n).deleteBuffer(c(e))}function we(n,e){c(n).deleteFramebuffer(c(e))}function le(n,e){c(n).deleteProgram(c(e))}function se(n,e){c(n).deleteRenderbuffer(c(e))}function me(n,e){c(n).deleteShader(c(e))}function ve(n,e){c(n).deleteTexture(c(e))}function ye(n,e){c(n).depthFunc(e>>>0)}function pe(n,e){c(n).depthMask(0!==e)}function he(n,e,t){c(n).depthRange(e,t)}function xe(n,e){c(n).disable(e>>>0)}function Se(n,e){c(n).disableVertexAttribArray(e>>>0)}function Ae(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Pe(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Ie(n,e){c(n).enable(e>>>0)}function De(n,e){c(n).enableVertexAttribArray(e>>>0)}function Fe(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Ee(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Te(n,e){c(n).frontFace(e>>>0)}function Be(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:g(r)}function Le(){return L((function(n,e,t){var r=c(n).getExtension(b(e,t));return v(r)?0:g(r)}),arguments)}function Me(){return L((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Oe(n,e,t){return g(c(n).getProgramParameter(c(e),t>>>0))}function Re(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function Ce(n,e,t){return g(c(n).getShaderParameter(c(e),t>>>0))}function Ve(n){var e=c(n).getSupportedExtensions();return v(e)?0:g(e)}function Ue(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function qe(n,e){c(n).linkProgram(c(e))}function Ke(n,e,t){c(n).pixelStorei(e>>>0,t)}function je(n,e,t){c(n).polygonOffset(e,t)}function Ge(n,e,t,r,u){c(n).scissor(e,t,r,u)}function We(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function Qe(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Xe(n,e){c(n).stencilMask(e>>>0)}function Ye(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Ne(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function He(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Je(n,e,t){c(n).uniform1f(c(e),t)}function ze(n,e,t){c(n).uniform1i(c(e),t)}function Ze(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function $e(n,e){c(n).useProgram(c(e))}function nt(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function et(n,e,t,r,u){c(n).viewport(e,t,r,u)}function tt(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function rt(n){var e=c(n).document;return v(e)?0:g(e)}function ut(){return L((function(n){return g(c(n).innerWidth)}),arguments)}function ft(){return L((function(n){return g(c(n).innerHeight)}),arguments)}function ct(n){return c(n).devicePixelRatio}function _t(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function it(){return L((function(n,e,t){var r=c(n).matchMedia(b(e,t));return v(r)?0:g(r)}),arguments)}function ot(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function at(n,e,t){var r=c(n)[b(e,t)];return v(r)?0:g(r)}function dt(n,e){c(n).clearTimeout(e)}function bt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function gt(n){return c(n).size}function wt(n){return c(n).type}function lt(n,e){var t=m(c(e).name,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function st(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function mt(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function vt(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function yt(){return L((function(n,e,t,r,u){c(n).setProperty(b(e,t),b(r,u))}),arguments)}function pt(n){return c(n).x}function ht(n){return c(n).y}function xt(n){return c(n).clientX}function St(n){return c(n).clientY}function At(n){return c(n).offsetX}function Pt(n){return c(n).offsetY}function It(n){return c(n).ctrlKey}function Dt(n){return c(n).shiftKey}function Ft(n){return c(n).altKey}function Et(n){return c(n).metaKey}function Tt(n){return c(n).button}function Bt(n){return c(n).buttons}function Lt(n){return c(n).movementX}function Mt(n){return c(n).movementY}function kt(n,e){c(n).bindVertexArrayOES(c(e))}function Ot(n){var e=c(n).createVertexArrayOES();return v(e)?0:g(e)}function Rt(n,e){c(n).deleteVertexArrayOES(c(e))}function Ct(n){return c(n).pointerId}function Vt(n){return c(n).deltaX}function Ut(n){return c(n).deltaY}function qt(n){return c(n).deltaMode}function Kt(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function jt(n){return c(n).width}function Gt(n,e){c(n).width=e>>>0}function Wt(n){return c(n).height}function Qt(n,e){c(n).height=e>>>0}function Xt(){return L((function(n,e,t,r){var u=c(n).getContext(b(e,t),c(r));return v(u)?0:g(u)}),arguments)}function Yt(n){return c(n).matches}function Nt(n){return c(n).now()}function Ht(n,e){c(n).drawBuffersWEBGL(c(e))}function Jt(n){var e=c(n).fullscreenElement;return v(e)?0:g(e)}function zt(){return L((function(n,e,t){return g(c(n).createElement(b(e,t)))}),arguments)}function Zt(n,e,t){var r=c(n).getElementById(b(e,t));return v(r)?0:g(r)}function $t(){return L((function(n,e,t){var r=c(n).querySelector(b(e,t));return v(r)?0:g(r)}),arguments)}function nr(n){return g(c(n).getBoundingClientRect())}function er(){return L((function(n){c(n).requestFullscreen()}),arguments)}function tr(){return L((function(n,e,t,r,u){c(n).setAttribute(b(e,t),b(r,u))}),arguments)}function rr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function ur(n){return g(c(n).style)}function fr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function cr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function _r(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function ir(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function or(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function ar(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function dr(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function br(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function gr(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function wr(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function lr(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function sr(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function mr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function vr(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function yr(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function pr(n,e){c(n).activeTexture(e>>>0)}function hr(n,e,t){c(n).attachShader(c(e),c(t))}function xr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Sr(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Ar(n,e,t){c(n).bindTexture(e>>>0,c(t))}function Pr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Ir(n,e){c(n).blendEquation(e>>>0)}function Dr(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Fr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function Er(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tr(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Br(n,e){c(n).compileShader(c(e))}function Lr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function Mr(n){var e=c(n).createBuffer();return v(e)?0:g(e)}function kr(n){var e=c(n).createFramebuffer();return v(e)?0:g(e)}function Or(n){var e=c(n).createProgram();return v(e)?0:g(e)}function Rr(n,e){var t=c(n).createShader(e>>>0);return v(t)?0:g(t)}function Cr(n){var e=c(n).createTexture();return v(e)?0:g(e)}function Vr(n,e){c(n).cullFace(e>>>0)}function Ur(n,e){c(n).deleteBuffer(c(e))}function qr(n,e){c(n).deleteFramebuffer(c(e))}function Kr(n,e){c(n).deleteProgram(c(e))}function jr(n,e){c(n).deleteRenderbuffer(c(e))}function Gr(n,e){c(n).deleteShader(c(e))}function Wr(n,e){c(n).deleteTexture(c(e))}function Qr(n,e){c(n).depthFunc(e>>>0)}function Xr(n,e){c(n).depthMask(0!==e)}function Yr(n,e,t){c(n).depthRange(e,t)}function Nr(n,e){c(n).disable(e>>>0)}function Hr(n,e){c(n).disableVertexAttribArray(e>>>0)}function Jr(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function zr(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Zr(n,e){c(n).enable(e>>>0)}function $r(n,e){c(n).enableVertexAttribArray(e>>>0)}function nu(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function eu(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function tu(n,e){c(n).frontFace(e>>>0)}function ru(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return v(r)?0:g(r)}function uu(){return L((function(n,e){return g(c(n).getParameter(e>>>0))}),arguments)}function fu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function cu(n,e,t){return g(c(n).getProgramParameter(c(e),t>>>0))}function _u(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=v(r)?0:m(r,u.d,u.e),_=w;p()[n/4+1]=_,p()[n/4+0]=f}function iu(n,e,t){return g(c(n).getShaderParameter(c(e),t>>>0))}function ou(n,e,t,r){var u=c(n).getUniformLocation(c(e),b(t,r));return v(u)?0:g(u)}function au(n,e){c(n).linkProgram(c(e))}function du(n,e,t){c(n).pixelStorei(e>>>0,t)}function bu(n,e,t){c(n).polygonOffset(e,t)}function gu(n,e,t,r,u){c(n).scissor(e,t,r,u)}function wu(n,e,t,r){c(n).shaderSource(c(e),b(t,r))}function lu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function su(n,e){c(n).stencilMask(e>>>0)}function mu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function vu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function yu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function pu(n,e,t){c(n).uniform1f(c(e),t)}function hu(n,e,t){c(n).uniform1i(c(e),t)}function xu(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function Su(n,e){c(n).useProgram(c(e))}function Au(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Pu(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Iu(n){console.debug(c(n))}function Du(n){console.error(c(n))}function Fu(n,e){console.error(c(n),c(e))}function Eu(n){console.info(c(n))}function Tu(n){console.log(c(n))}function Bu(n){console.warn(c(n))}function Lu(){return L((function(n,e,t,r){c(n).addEventListener(b(e,t),c(r))}),arguments)}function Mu(){return L((function(n,e,t,r,u){c(n).addEventListener(b(e,t),c(r),c(u))}),arguments)}function ku(){return L((function(n,e,t,r){c(n).removeEventListener(b(e,t),c(r))}),arguments)}function Ou(n){return c(n).charCode}function Ru(n){return c(n).keyCode}function Cu(n){return c(n).altKey}function Vu(n){return c(n).ctrlKey}function Uu(n){return c(n).shiftKey}function qu(n){return c(n).metaKey}function Ku(n,e){var t=m(c(e).key,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function ju(n,e){var t=m(c(e).code,u.d,u.e),r=w;p()[n/4+1]=r,p()[n/4+0]=t}function Gu(n,e,t){return c(n).getModifierState(b(e,t))}function Wu(n){return c(n).matches}function Qu(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function Xu(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function Yu(){return L((function(n,e){return g(c(n).appendChild(c(e)))}),arguments)}function Nu(n){var e=c(n).target;return v(e)?0:g(e)}function Hu(n){return c(n).cancelBubble}function Ju(n){c(n).preventDefault()}function zu(n){c(n).stopPropagation()}function Zu(n,e){return g(c(n)[e>>>0])}function $u(n){return c(n).length}function nf(){return g(new Array)}function ef(n,e){return g(new Function(b(n,e)))}function tf(){return L((function(n,e){return g(Reflect.get(c(n),c(e)))}),arguments)}function rf(){return L((function(n,e){return g(c(n).call(c(e)))}),arguments)}function uf(){return g(new Object)}function ff(){return L((function(){return g(self.self)}),arguments)}function cf(){return L((function(){return g(window.window)}),arguments)}function _f(){return L((function(){return g(globalThis.globalThis)}),arguments)}function of(){return L((function(){return g(global.global)}),arguments)}function af(n){return void 0===c(n)}function df(n){return g(Array.of(c(n)))}function bf(n,e){return c(n).push(c(e))}function gf(n,e){return Object.is(c(n),c(e))}function wf(n){return g(Promise.resolve(c(n)))}function lf(n,e){return g(c(n).then(c(e)))}function sf(n){return g(c(n).buffer)}function mf(n,e,t){return g(new Int8Array(c(n),e>>>0,t>>>0))}function vf(n,e,t){return g(new Int16Array(c(n),e>>>0,t>>>0))}function yf(n,e,t){return g(new Int32Array(c(n),e>>>0,t>>>0))}function pf(n,e,t){return g(new Uint8Array(c(n),e>>>0,t>>>0))}function hf(n,e,t){return g(new Uint16Array(c(n),e>>>0,t>>>0))}function xf(n,e,t){return g(new Uint32Array(c(n),e>>>0,t>>>0))}function Sf(n,e,t){return g(new Float32Array(c(n),e>>>0,t>>>0))}function Af(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function Pf(n,e){var t=m(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=w;p()[n/4+1]=f,p()[n/4+0]=t}function If(n,e){throw new Error(b(n,e))}function Df(){return g(u.j)}function Ff(n,e,t){return g(x(n,e,93,S))}function Ef(n,e,t){return g(x(n,e,93,A))}function Tf(n,e,t){return g(x(n,e,93,S))}function Bf(n,e,t){return g(x(n,e,93,S))}function Lf(n,e,t){return g(x(n,e,93,S))}function Mf(n,e,t){return g(x(n,e,93,S))}function kf(n,e,t){return g(x(n,e,93,S))}function Of(n,e,t){return g(x(n,e,93,S))}function Rf(n,e,t){return g(x(n,e,93,S))}function Cf(n,e,t){return g(x(n,e,177,P))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},458:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(371);r.l()}}]); \ No newline at end of file diff --git a/assets/js/8.a60e8279.js b/assets/js/8.971f6540.js similarity index 91% rename from assets/js/8.a60e8279.js rename to assets/js/8.971f6540.js index 545d15de..852b574f 100644 --- a/assets/js/8.a60e8279.js +++ b/assets/js/8.971f6540.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{372:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_cb_drop",(function(){return k})),t.d(e,"__wbindgen_object_clone_ref",(function(){return O})),t.d(e,"__wbindgen_string_new",(function(){return R})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_number_get",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return _n})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return dn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return bn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return gn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return wn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return ln})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return sn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return mn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return vn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return yn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return pn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return hn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return xn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Sn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return An})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Pn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return In})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Dn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return En})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Fn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Tn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Bn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Ln})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Mn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return kn})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return On})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Rn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Cn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Vn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Un})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Kn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return jn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Gn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Wn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Qn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Xn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Yn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return Nn})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return Hn})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return Jn})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return zn})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return Zn})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return $n})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ne})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ee})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return te})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return re})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ue})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return fe})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ce})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return _e})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return ie})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return oe})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ae})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return de})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return be})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return ge})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return we})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return le})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return me})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return ve})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return ye})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return pe})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return he})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return xe})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Se})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Ae})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Pe})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Ie})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return De})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Ee})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Fe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Te})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Be})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Le})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return Me})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Oe})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Re})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ce})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Ve})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Ue})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return qe})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ke})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ge})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return We})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return Qe})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return Xe})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return Ye})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return Ne})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return He})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return Je})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ze})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return Ze})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return $e})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return nt})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return et})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return tt})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return rt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return ut})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return ft})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return ct})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return _t})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return it})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return ot})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return at})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return dt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return bt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return gt})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return wt})),t.d(e,"__wbg_name_2473476082bed625",(function(){return lt})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return st})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return mt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return vt})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return yt})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return pt})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return ht})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return xt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return St})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return At})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Pt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return It})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Dt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Et})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Ft})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Tt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Bt})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return Lt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Mt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return kt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Ot})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Rt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Ct})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Vt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Ut})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return qt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Kt})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Gt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Wt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Qt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Xt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Yt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return Nt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ht})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return Jt})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return zt})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return Zt})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return $t})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return nr})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return er})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return tr})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return rr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return ur})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return fr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return cr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return _r})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return ir})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return or})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return ar})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return dr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return br})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return gr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return wr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return lr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return sr})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return mr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return vr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return yr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return pr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return hr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return xr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Sr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Ar})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Pr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Ir})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Dr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Er})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Fr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Tr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Br})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Lr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Mr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return kr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Or})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Rr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Cr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Vr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Ur})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return qr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return Kr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return jr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return Gr})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return Wr})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return Qr})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return Xr})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return Yr})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return Nr})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return Hr})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return Jr})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return zr})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return Zr})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return $r})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return nu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return eu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return tu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return ru})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return uu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return fu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return cu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return _u})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return iu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return ou})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return au})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return du})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return bu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return gu})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return wu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return lu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return su})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return mu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return vu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return yu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return pu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return hu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return xu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Su})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Au})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Pu})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Iu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Du})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Eu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Fu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Tu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Bu})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Lu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Mu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return ku})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ou})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Ru})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Cu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Vu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Uu})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return qu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Ku})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return ju})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Gu})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return Wu})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return Qu})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return Xu})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Yu})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Nu})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return Hu})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Ju})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return zu})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Zu})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return $u})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return nf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return ef})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return tf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return rf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return uf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return ff})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return cf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return _f})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return of})),t.d(e,"__wbindgen_is_undefined",(function(){return af})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return df})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return bf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return gf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return wf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return lf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return sf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return vf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return yf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return pf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return xf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return Sf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Af})),t.d(e,"__wbindgen_debug_string",(function(){return Pf})),t.d(e,"__wbindgen_throw",(function(){return If})),t.d(e,"__wbindgen_memory",(function(){return Df})),t.d(e,"__wbindgen_closure_wrapper543",(function(){return Ef})),t.d(e,"__wbindgen_closure_wrapper545",(function(){return Ff})),t.d(e,"__wbindgen_closure_wrapper547",(function(){return Tf})),t.d(e,"__wbindgen_closure_wrapper549",(function(){return Bf})),t.d(e,"__wbindgen_closure_wrapper551",(function(){return Lf})),t.d(e,"__wbindgen_closure_wrapper553",(function(){return Mf})),t.d(e,"__wbindgen_closure_wrapper555",(function(){return kf})),t.d(e,"__wbindgen_closure_wrapper557",(function(){return Of})),t.d(e,"__wbindgen_closure_wrapper559",(function(){return Rf})),t.d(e,"__wbindgen_closure_wrapper773",(function(){return Cf}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(404),t(403),t(61),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(414),t(457)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}function o(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var a=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});a.decode();var d=new Uint8Array;function b(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function g(n,e){return a.decode(b().subarray(n,n+e))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function m(){return 0===s.byteLength&&(s=new Int32Array(u.j.buffer)),s}var v=0,y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof y.encodeInto?function(n,e){return y.encodeInto(n,e)}:function(n,e){var t=y.encode(n);return e.set(t),{read:n.length,written:t.length}};function h(n,e,t){if(void 0===t){var r=y.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),v=r.length,u}for(var f=n.length,c=e(f),_=b(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var a=b().subarray(c+i,c+f);i+=p(n,a).written}return v=i,c}function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function N(n,e){c(n).bindVertexArray(c(e))}function H(n,e,t,r,u,f,_,i,o,a,d){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,a>>>0,d>>>0)}function J(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function Z(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function $(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,E(r,u))}function en(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,F(r,u))}function tn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,_,i,o,a){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,a)}function fn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function cn(n,e,t,r,u,f,_,i,o,a,d,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d,b)}function _n(n,e,t,r,u,f,_,i,o,a,d){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,c(d))}function on(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,a){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a)}function dn(n){var e=c(n).createVertexArray();return w(e)?0:o(e)}function bn(n,e){c(n).deleteQuery(c(e))}function gn(n,e){c(n).deleteSampler(c(e))}function wn(n,e){c(n).deleteSync(c(e))}function ln(n,e){c(n).deleteVertexArray(c(e))}function sn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function mn(n,e){c(n).drawBuffers(c(e))}function vn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function yn(n,e){c(n).endQuery(e>>>0)}function pn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return w(r)?0:o(r)}function hn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function xn(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function Sn(){return L((function(n,e,t){return o(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function An(n,e,t){return o(c(n).getQueryParameter(c(e),t>>>0))}function Pn(n,e,t){return o(c(n).getSyncParameter(c(e),t>>>0))}function In(n,e,t,r){return c(n).getUniformBlockIndex(c(e),g(t,r))}function Dn(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function En(n,e){c(n).readBuffer(e>>>0)}function Fn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Tn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Bn(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Ln(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function Mn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,a)}),arguments)}function kn(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,b)}),arguments)}function On(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,c(b))}),arguments)}function Rn(n,e,t,r){c(n).uniform2fv(c(e),E(t,r))}function Cn(n,e,t,r){c(n).uniform2iv(c(e),F(t,r))}function Vn(n,e,t,r){c(n).uniform3fv(c(e),E(t,r))}function Un(n,e,t,r){c(n).uniform3iv(c(e),F(t,r))}function qn(n,e,t,r){c(n).uniform4fv(c(e),E(t,r))}function Kn(n,e,t,r){c(n).uniform4iv(c(e),F(t,r))}function jn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Gn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,E(r,u))}function Wn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,E(r,u))}function Qn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,E(r,u))}function Xn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function Yn(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function Nn(n,e){c(n).activeTexture(e>>>0)}function Hn(n,e,t){c(n).attachShader(c(e),c(t))}function Jn(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function zn(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Zn(n,e,t){c(n).bindTexture(e>>>0,c(t))}function $n(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function ne(n,e){c(n).blendEquation(e>>>0)}function ee(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function te(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function re(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ue(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function fe(n,e){c(n).compileShader(c(e))}function ce(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function _e(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function ie(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function oe(n){var e=c(n).createProgram();return w(e)?0:o(e)}function ae(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function de(n){var e=c(n).createTexture();return w(e)?0:o(e)}function be(n,e){c(n).cullFace(e>>>0)}function ge(n,e){c(n).deleteBuffer(c(e))}function we(n,e){c(n).deleteFramebuffer(c(e))}function le(n,e){c(n).deleteProgram(c(e))}function se(n,e){c(n).deleteRenderbuffer(c(e))}function me(n,e){c(n).deleteShader(c(e))}function ve(n,e){c(n).deleteTexture(c(e))}function ye(n,e){c(n).depthFunc(e>>>0)}function pe(n,e){c(n).depthMask(0!==e)}function he(n,e,t){c(n).depthRange(e,t)}function xe(n,e){c(n).disable(e>>>0)}function Se(n,e){c(n).disableVertexAttribArray(e>>>0)}function Ae(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Pe(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Ie(n,e){c(n).enable(e>>>0)}function De(n,e){c(n).enableVertexAttribArray(e>>>0)}function Ee(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Fe(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Te(n,e){c(n).frontFace(e>>>0)}function Be(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function Le(){return L((function(n,e,t){var r=c(n).getExtension(g(e,t));return w(r)?0:o(r)}),arguments)}function Me(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function Oe(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function Re(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function Ce(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function Ve(n){var e=c(n).getSupportedExtensions();return w(e)?0:o(e)}function Ue(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function qe(n,e){c(n).linkProgram(c(e))}function Ke(n,e,t){c(n).pixelStorei(e>>>0,t)}function je(n,e,t){c(n).polygonOffset(e,t)}function Ge(n,e,t,r,u){c(n).scissor(e,t,r,u)}function We(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function Qe(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Xe(n,e){c(n).stencilMask(e>>>0)}function Ye(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Ne(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function He(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Je(n,e,t){c(n).uniform1f(c(e),t)}function ze(n,e,t){c(n).uniform1i(c(e),t)}function Ze(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function $e(n,e){c(n).useProgram(c(e))}function nt(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function et(n,e,t,r,u){c(n).viewport(e,t,r,u)}function tt(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function rt(n){var e=c(n).document;return w(e)?0:o(e)}function ut(){return L((function(n){return o(c(n).innerWidth)}),arguments)}function ft(){return L((function(n){return o(c(n).innerHeight)}),arguments)}function ct(n){return c(n).devicePixelRatio}function _t(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function it(){return L((function(n,e,t){var r=c(n).matchMedia(g(e,t));return w(r)?0:o(r)}),arguments)}function ot(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function at(n,e,t){var r=c(n)[g(e,t)];return w(r)?0:o(r)}function dt(n,e){c(n).clearTimeout(e)}function bt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function gt(n){return c(n).size}function wt(n){return c(n).type}function lt(n,e){var t=h(c(e).name,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function st(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function mt(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function vt(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function yt(){return L((function(n,e,t,r,u){c(n).setProperty(g(e,t),g(r,u))}),arguments)}function pt(n){return c(n).x}function ht(n){return c(n).y}function xt(n){return c(n).clientX}function St(n){return c(n).clientY}function At(n){return c(n).offsetX}function Pt(n){return c(n).offsetY}function It(n){return c(n).ctrlKey}function Dt(n){return c(n).shiftKey}function Et(n){return c(n).altKey}function Ft(n){return c(n).metaKey}function Tt(n){return c(n).button}function Bt(n){return c(n).buttons}function Lt(n){return c(n).movementX}function Mt(n){return c(n).movementY}function kt(n,e){c(n).bindVertexArrayOES(c(e))}function Ot(n){var e=c(n).createVertexArrayOES();return w(e)?0:o(e)}function Rt(n,e){c(n).deleteVertexArrayOES(c(e))}function Ct(n){return c(n).pointerId}function Vt(n){return c(n).deltaX}function Ut(n){return c(n).deltaY}function qt(n){return c(n).deltaMode}function Kt(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function jt(n){return c(n).width}function Gt(n,e){c(n).width=e>>>0}function Wt(n){return c(n).height}function Qt(n,e){c(n).height=e>>>0}function Xt(){return L((function(n,e,t,r){var u=c(n).getContext(g(e,t),c(r));return w(u)?0:o(u)}),arguments)}function Yt(n){return c(n).matches}function Nt(n){return c(n).now()}function Ht(n,e){c(n).drawBuffersWEBGL(c(e))}function Jt(n){var e=c(n).fullscreenElement;return w(e)?0:o(e)}function zt(){return L((function(n,e,t){return o(c(n).createElement(g(e,t)))}),arguments)}function Zt(n,e,t){var r=c(n).getElementById(g(e,t));return w(r)?0:o(r)}function $t(){return L((function(n,e,t){var r=c(n).querySelector(g(e,t));return w(r)?0:o(r)}),arguments)}function nr(n){return o(c(n).getBoundingClientRect())}function er(){return L((function(n){c(n).requestFullscreen()}),arguments)}function tr(){return L((function(n,e,t,r,u){c(n).setAttribute(g(e,t),g(r,u))}),arguments)}function rr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function ur(n){return o(c(n).style)}function fr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function cr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function _r(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function ir(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function or(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function ar(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function dr(n,e,t,r){c(n).uniform2fv(c(e),E(t,r))}function br(n,e,t,r){c(n).uniform2iv(c(e),F(t,r))}function gr(n,e,t,r){c(n).uniform3fv(c(e),E(t,r))}function wr(n,e,t,r){c(n).uniform3iv(c(e),F(t,r))}function lr(n,e,t,r){c(n).uniform4fv(c(e),E(t,r))}function sr(n,e,t,r){c(n).uniform4iv(c(e),F(t,r))}function mr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,E(r,u))}function vr(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,E(r,u))}function yr(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,E(r,u))}function pr(n,e){c(n).activeTexture(e>>>0)}function hr(n,e,t){c(n).attachShader(c(e),c(t))}function xr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Sr(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Ar(n,e,t){c(n).bindTexture(e>>>0,c(t))}function Pr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Ir(n,e){c(n).blendEquation(e>>>0)}function Dr(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Er(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function Fr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tr(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Br(n,e){c(n).compileShader(c(e))}function Lr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function Mr(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function kr(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function Or(n){var e=c(n).createProgram();return w(e)?0:o(e)}function Rr(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function Cr(n){var e=c(n).createTexture();return w(e)?0:o(e)}function Vr(n,e){c(n).cullFace(e>>>0)}function Ur(n,e){c(n).deleteBuffer(c(e))}function qr(n,e){c(n).deleteFramebuffer(c(e))}function Kr(n,e){c(n).deleteProgram(c(e))}function jr(n,e){c(n).deleteRenderbuffer(c(e))}function Gr(n,e){c(n).deleteShader(c(e))}function Wr(n,e){c(n).deleteTexture(c(e))}function Qr(n,e){c(n).depthFunc(e>>>0)}function Xr(n,e){c(n).depthMask(0!==e)}function Yr(n,e,t){c(n).depthRange(e,t)}function Nr(n,e){c(n).disable(e>>>0)}function Hr(n,e){c(n).disableVertexAttribArray(e>>>0)}function Jr(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function zr(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Zr(n,e){c(n).enable(e>>>0)}function $r(n,e){c(n).enableVertexAttribArray(e>>>0)}function nu(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function eu(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function tu(n,e){c(n).frontFace(e>>>0)}function ru(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function uu(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function fu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function cu(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function _u(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function iu(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function ou(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function au(n,e){c(n).linkProgram(c(e))}function du(n,e,t){c(n).pixelStorei(e>>>0,t)}function bu(n,e,t){c(n).polygonOffset(e,t)}function gu(n,e,t,r,u){c(n).scissor(e,t,r,u)}function wu(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function lu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function su(n,e){c(n).stencilMask(e>>>0)}function mu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function vu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function yu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function pu(n,e,t){c(n).uniform1f(c(e),t)}function hu(n,e,t){c(n).uniform1i(c(e),t)}function xu(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function Su(n,e){c(n).useProgram(c(e))}function Au(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Pu(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Iu(n){console.debug(c(n))}function Du(n){console.error(c(n))}function Eu(n,e){console.error(c(n),c(e))}function Fu(n){console.info(c(n))}function Tu(n){console.log(c(n))}function Bu(n){console.warn(c(n))}function Lu(){return L((function(n,e,t,r){c(n).addEventListener(g(e,t),c(r))}),arguments)}function Mu(){return L((function(n,e,t,r,u){c(n).addEventListener(g(e,t),c(r),c(u))}),arguments)}function ku(){return L((function(n,e,t,r){c(n).removeEventListener(g(e,t),c(r))}),arguments)}function Ou(n){return c(n).charCode}function Ru(n){return c(n).keyCode}function Cu(n){return c(n).altKey}function Vu(n){return c(n).ctrlKey}function Uu(n){return c(n).shiftKey}function qu(n){return c(n).metaKey}function Ku(n,e){var t=h(c(e).key,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function ju(n,e){var t=h(c(e).code,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function Gu(n,e,t){return c(n).getModifierState(g(e,t))}function Wu(n){return c(n).matches}function Qu(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function Xu(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function Yu(){return L((function(n,e){return o(c(n).appendChild(c(e)))}),arguments)}function Nu(n){var e=c(n).target;return w(e)?0:o(e)}function Hu(n){return c(n).cancelBubble}function Ju(n){c(n).preventDefault()}function zu(n){c(n).stopPropagation()}function Zu(n,e){return o(c(n)[e>>>0])}function $u(n){return c(n).length}function nf(){return o(new Array)}function ef(n,e){return o(new Function(g(n,e)))}function tf(){return L((function(n,e){return o(Reflect.get(c(n),c(e)))}),arguments)}function rf(){return L((function(n,e){return o(c(n).call(c(e)))}),arguments)}function uf(){return o(new Object)}function ff(){return L((function(){return o(self.self)}),arguments)}function cf(){return L((function(){return o(window.window)}),arguments)}function _f(){return L((function(){return o(globalThis.globalThis)}),arguments)}function of(){return L((function(){return o(global.global)}),arguments)}function af(n){return void 0===c(n)}function df(n){return o(Array.of(c(n)))}function bf(n,e){return c(n).push(c(e))}function gf(n,e){return Object.is(c(n),c(e))}function wf(n){return o(Promise.resolve(c(n)))}function lf(n,e){return o(c(n).then(c(e)))}function sf(n){return o(c(n).buffer)}function mf(n,e,t){return o(new Int8Array(c(n),e>>>0,t>>>0))}function vf(n,e,t){return o(new Int16Array(c(n),e>>>0,t>>>0))}function yf(n,e,t){return o(new Int32Array(c(n),e>>>0,t>>>0))}function pf(n,e,t){return o(new Uint8Array(c(n),e>>>0,t>>>0))}function hf(n,e,t){return o(new Uint16Array(c(n),e>>>0,t>>>0))}function xf(n,e,t){return o(new Uint32Array(c(n),e>>>0,t>>>0))}function Sf(n,e,t){return o(new Float32Array(c(n),e>>>0,t>>>0))}function Af(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function Pf(n,e){var t=h(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=v;m()[n/4+1]=f,m()[n/4+0]=t}function If(n,e){throw new Error(g(n,e))}function Df(){return o(u.j)}function Ef(n,e,t){return o(x(n,e,96,S))}function Ff(n,e,t){return o(x(n,e,96,S))}function Tf(n,e,t){return o(x(n,e,96,A))}function Bf(n,e,t){return o(x(n,e,96,S))}function Lf(n,e,t){return o(x(n,e,96,S))}function Mf(n,e,t){return o(x(n,e,96,S))}function kf(n,e,t){return o(x(n,e,96,S))}function Of(n,e,t){return o(x(n,e,96,S))}function Rf(n,e,t){return o(x(n,e,96,S))}function Cf(n,e,t){return o(x(n,e,179,P))}}.call(this,t(375)(n))},457:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(372);r.l()}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{372:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_cb_drop",(function(){return k})),t.d(e,"__wbindgen_object_clone_ref",(function(){return O})),t.d(e,"__wbindgen_string_new",(function(){return R})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_number_get",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return _n})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return dn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return bn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return gn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return wn})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return ln})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return sn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return mn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return vn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return yn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return pn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return hn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return xn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return Sn})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return An})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Pn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return In})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Dn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Fn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return En})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Tn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Bn})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Ln})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Mn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return kn})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return On})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Rn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return Cn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Vn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Un})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Kn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return jn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Gn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Wn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Qn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return Xn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Yn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return Nn})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return Hn})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return Jn})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return zn})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return Zn})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return $n})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ne})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ee})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return te})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return re})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ue})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return fe})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return ce})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return _e})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return ie})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return oe})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return ae})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return de})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return be})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return ge})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return we})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return le})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return me})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return ve})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return ye})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return pe})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return he})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return xe})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Se})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Ae})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Pe})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Ie})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return De})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Fe})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Ee})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Te})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Be})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Le})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return Me})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return Oe})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Re})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return Ce})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Ve})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Ue})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return qe})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ke})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return Ge})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return We})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return Qe})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return Xe})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return Ye})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return Ne})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return He})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return Je})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ze})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return Ze})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return $e})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return nt})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return et})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return tt})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return rt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return ut})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return ft})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return ct})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return _t})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return it})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return ot})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return at})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return dt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return bt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return gt})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return wt})),t.d(e,"__wbg_name_2473476082bed625",(function(){return lt})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return st})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return mt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return vt})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return yt})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return pt})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return ht})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return xt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return St})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return At})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Pt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return It})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Dt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Ft})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Et})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Tt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Bt})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return Lt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Mt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return kt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Ot})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Rt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Ct})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Vt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Ut})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return qt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Kt})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return Gt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Wt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return Qt})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return Xt})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return Yt})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return Nt})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return Ht})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return Jt})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return zt})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return Zt})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return $t})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return nr})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return er})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return tr})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return rr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return ur})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return fr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return cr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return _r})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return ir})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return or})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return ar})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return dr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return br})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return gr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return wr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return lr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return sr})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return mr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return vr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return yr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return pr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return hr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return xr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Sr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Ar})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return Pr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Ir})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Dr})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Fr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Er})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Tr})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return Br})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Lr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return Mr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return kr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Or})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Rr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Cr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Vr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Ur})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return qr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return Kr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return jr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return Gr})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return Wr})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return Qr})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return Xr})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return Yr})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return Nr})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return Hr})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return Jr})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return zr})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return Zr})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return $r})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return nu})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return eu})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return tu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return ru})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return uu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return fu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return cu})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return _u})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return iu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return ou})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return au})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return du})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return bu})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return gu})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return wu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return lu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return su})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return mu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return vu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return yu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return pu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return hu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return xu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return Su})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Au})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Pu})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Iu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Du})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Fu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return Eu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Tu})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return Bu})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Lu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Mu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return ku})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Ou})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Ru})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Cu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Vu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Uu})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return qu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Ku})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return ju})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return Gu})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return Wu})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return Qu})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return Xu})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return Yu})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return Nu})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return Hu})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return Ju})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return zu})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return Zu})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return $u})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return nf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return ef})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return tf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return rf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return uf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return ff})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return cf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return _f})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return of})),t.d(e,"__wbindgen_is_undefined",(function(){return af})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return df})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return bf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return gf})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return wf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return lf})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return sf})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return vf})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return yf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return pf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return hf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return xf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return Sf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Af})),t.d(e,"__wbindgen_debug_string",(function(){return Pf})),t.d(e,"__wbindgen_throw",(function(){return If})),t.d(e,"__wbindgen_memory",(function(){return Df})),t.d(e,"__wbindgen_closure_wrapper543",(function(){return Ff})),t.d(e,"__wbindgen_closure_wrapper545",(function(){return Ef})),t.d(e,"__wbindgen_closure_wrapper547",(function(){return Tf})),t.d(e,"__wbindgen_closure_wrapper549",(function(){return Bf})),t.d(e,"__wbindgen_closure_wrapper551",(function(){return Lf})),t.d(e,"__wbindgen_closure_wrapper553",(function(){return Mf})),t.d(e,"__wbindgen_closure_wrapper555",(function(){return kf})),t.d(e,"__wbindgen_closure_wrapper557",(function(){return Of})),t.d(e,"__wbindgen_closure_wrapper559",(function(){return Rf})),t.d(e,"__wbindgen_closure_wrapper773",(function(){return Cf}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(412),t(411),t(61),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(416),t(459)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}function o(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var a=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});a.decode();var d=new Uint8Array;function b(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function g(n,e){return a.decode(b().subarray(n,n+e))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function m(){return 0===s.byteLength&&(s=new Int32Array(u.j.buffer)),s}var v=0,y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof y.encodeInto?function(n,e){return y.encodeInto(n,e)}:function(n,e){var t=y.encode(n);return e.set(t),{read:n.length,written:t.length}};function h(n,e,t){if(void 0===t){var r=y.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),v=r.length,u}for(var f=n.length,c=e(f),_=b(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var a=b().subarray(c+i,c+f);i+=p(n,a).written}return v=i,c}function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function N(n,e){c(n).bindVertexArray(c(e))}function H(n,e,t,r,u,f,_,i,o,a,d){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,a>>>0,d>>>0)}function J(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function Z(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function $(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,F(r,u))}function en(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,E(r,u))}function tn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,_,i,o,a){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,a)}function fn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function cn(n,e,t,r,u,f,_,i,o,a,d,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d,b)}function _n(n,e,t,r,u,f,_,i,o,a,d){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,c(d))}function on(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,a){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a)}function dn(n){var e=c(n).createVertexArray();return w(e)?0:o(e)}function bn(n,e){c(n).deleteQuery(c(e))}function gn(n,e){c(n).deleteSampler(c(e))}function wn(n,e){c(n).deleteSync(c(e))}function ln(n,e){c(n).deleteVertexArray(c(e))}function sn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function mn(n,e){c(n).drawBuffers(c(e))}function vn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function yn(n,e){c(n).endQuery(e>>>0)}function pn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return w(r)?0:o(r)}function hn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function xn(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function Sn(){return L((function(n,e,t){return o(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function An(n,e,t){return o(c(n).getQueryParameter(c(e),t>>>0))}function Pn(n,e,t){return o(c(n).getSyncParameter(c(e),t>>>0))}function In(n,e,t,r){return c(n).getUniformBlockIndex(c(e),g(t,r))}function Dn(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function Fn(n,e){c(n).readBuffer(e>>>0)}function En(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Tn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Bn(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function Ln(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function Mn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,a)}),arguments)}function kn(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,b)}),arguments)}function On(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,c(b))}),arguments)}function Rn(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function Cn(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Vn(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Un(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function qn(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Kn(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function jn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Gn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Wn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Qn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Xn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function Yn(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function Nn(n,e){c(n).activeTexture(e>>>0)}function Hn(n,e,t){c(n).attachShader(c(e),c(t))}function Jn(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function zn(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Zn(n,e,t){c(n).bindTexture(e>>>0,c(t))}function $n(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function ne(n,e){c(n).blendEquation(e>>>0)}function ee(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function te(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function re(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ue(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function fe(n,e){c(n).compileShader(c(e))}function ce(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function _e(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function ie(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function oe(n){var e=c(n).createProgram();return w(e)?0:o(e)}function ae(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function de(n){var e=c(n).createTexture();return w(e)?0:o(e)}function be(n,e){c(n).cullFace(e>>>0)}function ge(n,e){c(n).deleteBuffer(c(e))}function we(n,e){c(n).deleteFramebuffer(c(e))}function le(n,e){c(n).deleteProgram(c(e))}function se(n,e){c(n).deleteRenderbuffer(c(e))}function me(n,e){c(n).deleteShader(c(e))}function ve(n,e){c(n).deleteTexture(c(e))}function ye(n,e){c(n).depthFunc(e>>>0)}function pe(n,e){c(n).depthMask(0!==e)}function he(n,e,t){c(n).depthRange(e,t)}function xe(n,e){c(n).disable(e>>>0)}function Se(n,e){c(n).disableVertexAttribArray(e>>>0)}function Ae(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Pe(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Ie(n,e){c(n).enable(e>>>0)}function De(n,e){c(n).enableVertexAttribArray(e>>>0)}function Fe(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Ee(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Te(n,e){c(n).frontFace(e>>>0)}function Be(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function Le(){return L((function(n,e,t){var r=c(n).getExtension(g(e,t));return w(r)?0:o(r)}),arguments)}function Me(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function Oe(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function Re(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function Ce(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function Ve(n){var e=c(n).getSupportedExtensions();return w(e)?0:o(e)}function Ue(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function qe(n,e){c(n).linkProgram(c(e))}function Ke(n,e,t){c(n).pixelStorei(e>>>0,t)}function je(n,e,t){c(n).polygonOffset(e,t)}function Ge(n,e,t,r,u){c(n).scissor(e,t,r,u)}function We(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function Qe(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Xe(n,e){c(n).stencilMask(e>>>0)}function Ye(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Ne(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function He(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Je(n,e,t){c(n).uniform1f(c(e),t)}function ze(n,e,t){c(n).uniform1i(c(e),t)}function Ze(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function $e(n,e){c(n).useProgram(c(e))}function nt(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function et(n,e,t,r,u){c(n).viewport(e,t,r,u)}function tt(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function rt(n){var e=c(n).document;return w(e)?0:o(e)}function ut(){return L((function(n){return o(c(n).innerWidth)}),arguments)}function ft(){return L((function(n){return o(c(n).innerHeight)}),arguments)}function ct(n){return c(n).devicePixelRatio}function _t(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function it(){return L((function(n,e,t){var r=c(n).matchMedia(g(e,t));return w(r)?0:o(r)}),arguments)}function ot(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function at(n,e,t){var r=c(n)[g(e,t)];return w(r)?0:o(r)}function dt(n,e){c(n).clearTimeout(e)}function bt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function gt(n){return c(n).size}function wt(n){return c(n).type}function lt(n,e){var t=h(c(e).name,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function st(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function mt(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function vt(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function yt(){return L((function(n,e,t,r,u){c(n).setProperty(g(e,t),g(r,u))}),arguments)}function pt(n){return c(n).x}function ht(n){return c(n).y}function xt(n){return c(n).clientX}function St(n){return c(n).clientY}function At(n){return c(n).offsetX}function Pt(n){return c(n).offsetY}function It(n){return c(n).ctrlKey}function Dt(n){return c(n).shiftKey}function Ft(n){return c(n).altKey}function Et(n){return c(n).metaKey}function Tt(n){return c(n).button}function Bt(n){return c(n).buttons}function Lt(n){return c(n).movementX}function Mt(n){return c(n).movementY}function kt(n,e){c(n).bindVertexArrayOES(c(e))}function Ot(n){var e=c(n).createVertexArrayOES();return w(e)?0:o(e)}function Rt(n,e){c(n).deleteVertexArrayOES(c(e))}function Ct(n){return c(n).pointerId}function Vt(n){return c(n).deltaX}function Ut(n){return c(n).deltaY}function qt(n){return c(n).deltaMode}function Kt(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function jt(n){return c(n).width}function Gt(n,e){c(n).width=e>>>0}function Wt(n){return c(n).height}function Qt(n,e){c(n).height=e>>>0}function Xt(){return L((function(n,e,t,r){var u=c(n).getContext(g(e,t),c(r));return w(u)?0:o(u)}),arguments)}function Yt(n){return c(n).matches}function Nt(n){return c(n).now()}function Ht(n,e){c(n).drawBuffersWEBGL(c(e))}function Jt(n){var e=c(n).fullscreenElement;return w(e)?0:o(e)}function zt(){return L((function(n,e,t){return o(c(n).createElement(g(e,t)))}),arguments)}function Zt(n,e,t){var r=c(n).getElementById(g(e,t));return w(r)?0:o(r)}function $t(){return L((function(n,e,t){var r=c(n).querySelector(g(e,t));return w(r)?0:o(r)}),arguments)}function nr(n){return o(c(n).getBoundingClientRect())}function er(){return L((function(n){c(n).requestFullscreen()}),arguments)}function tr(){return L((function(n,e,t,r,u){c(n).setAttribute(g(e,t),g(r,u))}),arguments)}function rr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function ur(n){return o(c(n).style)}function fr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function cr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function _r(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function ir(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function or(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function ar(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function dr(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function br(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function gr(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function wr(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function lr(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function sr(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function mr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function vr(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function yr(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function pr(n,e){c(n).activeTexture(e>>>0)}function hr(n,e,t){c(n).attachShader(c(e),c(t))}function xr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Sr(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Ar(n,e,t){c(n).bindTexture(e>>>0,c(t))}function Pr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Ir(n,e){c(n).blendEquation(e>>>0)}function Dr(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Fr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function Er(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tr(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function Br(n,e){c(n).compileShader(c(e))}function Lr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function Mr(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function kr(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function Or(n){var e=c(n).createProgram();return w(e)?0:o(e)}function Rr(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function Cr(n){var e=c(n).createTexture();return w(e)?0:o(e)}function Vr(n,e){c(n).cullFace(e>>>0)}function Ur(n,e){c(n).deleteBuffer(c(e))}function qr(n,e){c(n).deleteFramebuffer(c(e))}function Kr(n,e){c(n).deleteProgram(c(e))}function jr(n,e){c(n).deleteRenderbuffer(c(e))}function Gr(n,e){c(n).deleteShader(c(e))}function Wr(n,e){c(n).deleteTexture(c(e))}function Qr(n,e){c(n).depthFunc(e>>>0)}function Xr(n,e){c(n).depthMask(0!==e)}function Yr(n,e,t){c(n).depthRange(e,t)}function Nr(n,e){c(n).disable(e>>>0)}function Hr(n,e){c(n).disableVertexAttribArray(e>>>0)}function Jr(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function zr(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Zr(n,e){c(n).enable(e>>>0)}function $r(n,e){c(n).enableVertexAttribArray(e>>>0)}function nu(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function eu(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function tu(n,e){c(n).frontFace(e>>>0)}function ru(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function uu(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function fu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function cu(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function _u(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function iu(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function ou(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function au(n,e){c(n).linkProgram(c(e))}function du(n,e,t){c(n).pixelStorei(e>>>0,t)}function bu(n,e,t){c(n).polygonOffset(e,t)}function gu(n,e,t,r,u){c(n).scissor(e,t,r,u)}function wu(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function lu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function su(n,e){c(n).stencilMask(e>>>0)}function mu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function vu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function yu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function pu(n,e,t){c(n).uniform1f(c(e),t)}function hu(n,e,t){c(n).uniform1i(c(e),t)}function xu(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function Su(n,e){c(n).useProgram(c(e))}function Au(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Pu(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Iu(n){console.debug(c(n))}function Du(n){console.error(c(n))}function Fu(n,e){console.error(c(n),c(e))}function Eu(n){console.info(c(n))}function Tu(n){console.log(c(n))}function Bu(n){console.warn(c(n))}function Lu(){return L((function(n,e,t,r){c(n).addEventListener(g(e,t),c(r))}),arguments)}function Mu(){return L((function(n,e,t,r,u){c(n).addEventListener(g(e,t),c(r),c(u))}),arguments)}function ku(){return L((function(n,e,t,r){c(n).removeEventListener(g(e,t),c(r))}),arguments)}function Ou(n){return c(n).charCode}function Ru(n){return c(n).keyCode}function Cu(n){return c(n).altKey}function Vu(n){return c(n).ctrlKey}function Uu(n){return c(n).shiftKey}function qu(n){return c(n).metaKey}function Ku(n,e){var t=h(c(e).key,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function ju(n,e){var t=h(c(e).code,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function Gu(n,e,t){return c(n).getModifierState(g(e,t))}function Wu(n){return c(n).matches}function Qu(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function Xu(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function Yu(){return L((function(n,e){return o(c(n).appendChild(c(e)))}),arguments)}function Nu(n){var e=c(n).target;return w(e)?0:o(e)}function Hu(n){return c(n).cancelBubble}function Ju(n){c(n).preventDefault()}function zu(n){c(n).stopPropagation()}function Zu(n,e){return o(c(n)[e>>>0])}function $u(n){return c(n).length}function nf(){return o(new Array)}function ef(n,e){return o(new Function(g(n,e)))}function tf(){return L((function(n,e){return o(Reflect.get(c(n),c(e)))}),arguments)}function rf(){return L((function(n,e){return o(c(n).call(c(e)))}),arguments)}function uf(){return o(new Object)}function ff(){return L((function(){return o(self.self)}),arguments)}function cf(){return L((function(){return o(window.window)}),arguments)}function _f(){return L((function(){return o(globalThis.globalThis)}),arguments)}function of(){return L((function(){return o(global.global)}),arguments)}function af(n){return void 0===c(n)}function df(n){return o(Array.of(c(n)))}function bf(n,e){return c(n).push(c(e))}function gf(n,e){return Object.is(c(n),c(e))}function wf(n){return o(Promise.resolve(c(n)))}function lf(n,e){return o(c(n).then(c(e)))}function sf(n){return o(c(n).buffer)}function mf(n,e,t){return o(new Int8Array(c(n),e>>>0,t>>>0))}function vf(n,e,t){return o(new Int16Array(c(n),e>>>0,t>>>0))}function yf(n,e,t){return o(new Int32Array(c(n),e>>>0,t>>>0))}function pf(n,e,t){return o(new Uint8Array(c(n),e>>>0,t>>>0))}function hf(n,e,t){return o(new Uint16Array(c(n),e>>>0,t>>>0))}function xf(n,e,t){return o(new Uint32Array(c(n),e>>>0,t>>>0))}function Sf(n,e,t){return o(new Float32Array(c(n),e>>>0,t>>>0))}function Af(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function Pf(n,e){var t=h(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=v;m()[n/4+1]=f,m()[n/4+0]=t}function If(n,e){throw new Error(g(n,e))}function Df(){return o(u.j)}function Ff(n,e,t){return o(x(n,e,96,S))}function Ef(n,e,t){return o(x(n,e,96,S))}function Tf(n,e,t){return o(x(n,e,96,A))}function Bf(n,e,t){return o(x(n,e,96,S))}function Lf(n,e,t){return o(x(n,e,96,S))}function Mf(n,e,t){return o(x(n,e,96,S))}function kf(n,e,t){return o(x(n,e,96,S))}function Of(n,e,t){return o(x(n,e,96,S))}function Rf(n,e,t){return o(x(n,e,96,S))}function Cf(n,e,t){return o(x(n,e,179,P))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},459:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(372);r.l()}}]); \ No newline at end of file diff --git a/assets/js/9.014d094b.js b/assets/js/9.014d094b.js deleted file mode 100644 index a386e0c6..00000000 --- a/assets/js/9.014d094b.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{367:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return D})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_object_clone_ref",(function(){return k})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbindgen_string_new",(function(){return O})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_number_get",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return _n})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return cn})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return dn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return bn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return gn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return wn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return ln})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return sn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return mn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return vn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return yn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return pn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return xn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return hn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return Sn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return An})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Pn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return Dn})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return In})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return En})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return Fn})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Tn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Bn})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Ln})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return Mn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return kn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Rn})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return On})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return jn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Gn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Wn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Nn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Jn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Zn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return $n})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ne})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return ee})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return te})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return re})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return ue})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return fe})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return _e})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return ce})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return ie})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return oe})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return de})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return be})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return ge})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return we})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return le})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return se})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return me})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ve})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return ye})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return pe})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return xe})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return he})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Ae})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Pe})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return De})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return Ie})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Ee})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Fe})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Te})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Be})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Le})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Me})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return ke})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Re})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Oe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ce})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return je})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Ge})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return We})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ne})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return He})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return Je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return Ze})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return $e})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return nt})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return et})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return tt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return rt})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ut})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ft})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return _t})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return ct})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return it})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return ot})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return dt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return bt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return gt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return wt})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return lt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return st})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return mt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return vt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return yt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return pt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return xt})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return ht})),t.d(e,"__wbg_name_2473476082bed625",(function(){return St})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return At})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return Pt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return Dt})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return It})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Et})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Ft})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return Tt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return Bt})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return Lt})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Mt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return kt})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Rt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Ot})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Ct})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Vt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Ut})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return qt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Kt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return jt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Gt})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Wt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Qt})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Xt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Yt})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Nt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Ht})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return zt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Zt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return $t})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return nr})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return er})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return tr})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return rr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return ur})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return fr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return _r})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return cr})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return ir})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return or})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return ar})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return dr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return br})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return gr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return wr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return lr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return sr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return mr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return vr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return yr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return pr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return xr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return hr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Sr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ar})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Pr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Dr})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Ir})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Er})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Fr})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Tr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Br})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return Lr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Mr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return kr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Rr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Or})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Cr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Vr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Ur})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return qr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Kr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return jr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Gr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Wr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Qr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Xr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Yr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Nr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Hr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Jr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return zr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return Zr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return $r})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return nu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return eu})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return tu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return ru})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return uu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return fu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return _u})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return cu})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return iu})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return ou})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return au})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return du})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return bu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return gu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return wu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return lu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return su})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return mu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return vu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return yu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return pu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return xu})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return hu})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Su})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Au})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Pu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Du})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Iu})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Eu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Fu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Tu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Bu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return Lu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Mu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return ku})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Ru})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Ou})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Cu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Vu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Uu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return qu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Ku})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return ju})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Gu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Wu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Qu})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Xu})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Yu})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Nu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Hu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Ju})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return zu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Zu})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return $u})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return nf})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return ef})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return tf})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return rf})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return uf})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return ff})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return _f})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return cf})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return of})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return af})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return df})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return bf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return gf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return wf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return lf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return sf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return mf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return yf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return pf})),t.d(e,"__wbindgen_is_undefined",(function(){return xf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return hf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Sf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Af})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Pf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return Df})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return If})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Ef})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Ff})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return Tf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Bf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return Lf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return Mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return kf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Rf})),t.d(e,"__wbindgen_debug_string",(function(){return Of})),t.d(e,"__wbindgen_throw",(function(){return Cf})),t.d(e,"__wbindgen_memory",(function(){return Vf})),t.d(e,"__wbindgen_closure_wrapper559",(function(){return Uf})),t.d(e,"__wbindgen_closure_wrapper561",(function(){return qf})),t.d(e,"__wbindgen_closure_wrapper563",(function(){return Kf})),t.d(e,"__wbindgen_closure_wrapper565",(function(){return jf})),t.d(e,"__wbindgen_closure_wrapper567",(function(){return Gf})),t.d(e,"__wbindgen_closure_wrapper569",(function(){return Wf})),t.d(e,"__wbindgen_closure_wrapper571",(function(){return Qf})),t.d(e,"__wbindgen_closure_wrapper573",(function(){return Xf})),t.d(e,"__wbindgen_closure_wrapper575",(function(){return Yf})),t.d(e,"__wbindgen_closure_wrapper808",(function(){return Nf}));var r=t(63),u=(t(376),t(377),t(8),t(378),t(379),t(380),t(381),t(382),t(383),t(384),t(385),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(404),t(403),t(61),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(405),t(406),t(407),t(124),t(408),t(409),t(410),t(411),t(412),t(413),t(414),t(458)),f=new Array(32).fill(void 0);function _(n){return f[n]}f.push(void 0,null,!0,!1);var c=f.length;function i(n){var e=_(n);return function(n){n<36||(f[n]=c,c=n)}(n),e}function o(n){c===f.length&&f.push(f.length+1);var e=c;return c=f[e],f[e]=n,e}var a=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});a.decode();var d=new Uint8Array;function b(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function g(n,e){return a.decode(b().subarray(n,n+e))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function m(){return 0===s.byteLength&&(s=new Int32Array(u.j.buffer)),s}var v=0,y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof y.encodeInto?function(n,e){return y.encodeInto(n,e)}:function(n,e){var t=y.encode(n);return e.set(t),{read:n.length,written:t.length}};function x(n,e,t){if(void 0===t){var r=y.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),v=r.length,u}for(var f=n.length,_=e(f),c=b(),i=0;i127)break;c[_+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),_=t(_,f,f=i+3*n.length);var a=b().subarray(_+i,_+f);i+=p(n,a).written}return v=i,_}function h(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},_=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),_=0;_>>0,_(t))}function X(n,e,t,r,u,f){_(n).bindBufferRange(e>>>0,t>>>0,_(r),u,f)}function Y(n,e,t){_(n).bindSampler(e>>>0,_(t))}function N(n,e){_(n).bindVertexArray(_(e))}function H(n,e,t,r,u,f,c,i,o,a,d){_(n).blitFramebuffer(e,t,r,u,f,c,i,o,a>>>0,d>>>0)}function J(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function Z(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function $(n,e,t,r,u){_(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){_(n).clearBufferfv(e>>>0,t,E(r,u))}function en(n,e,t,r,u){_(n).clearBufferiv(e>>>0,t,F(r,u))}function tn(n,e,t,r,u){_(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return _(n).clientWaitSync(_(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,c,i,o,a){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o,a)}function fn(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function _n(n,e,t,r,u,f,c,i,o,a,d,b){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d,b)}function cn(n,e,t,r,u,f,c,i,o,a,d){_(n).compressedTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,_(d))}function on(n,e,t,r,u,f){_(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,c,i,o,a){_(n).copyTexSubImage3D(e>>>0,t,r,u,f,c,i,o,a)}function dn(n){var e=_(n).createSampler();return w(e)?0:o(e)}function bn(n){var e=_(n).createVertexArray();return w(e)?0:o(e)}function gn(n,e){_(n).deleteQuery(_(e))}function wn(n,e){_(n).deleteSampler(_(e))}function ln(n,e){_(n).deleteSync(_(e))}function sn(n,e){_(n).deleteVertexArray(_(e))}function mn(n,e,t,r,u){_(n).drawArraysInstanced(e>>>0,t,r,u)}function vn(n,e){_(n).drawBuffers(_(e))}function yn(n,e,t,r,u,f){_(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function pn(n,e){_(n).endQuery(e>>>0)}function xn(n,e,t){var r=_(n).fenceSync(e>>>0,t>>>0);return w(r)?0:o(r)}function hn(n,e,t,r,u,f){_(n).framebufferTextureLayer(e>>>0,t>>>0,_(r),u,f)}function Sn(n,e,t,r){_(n).getBufferSubData(e>>>0,t,_(r))}function An(){return L((function(n,e,t){return o(_(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Pn(n,e,t){return o(_(n).getQueryParameter(_(e),t>>>0))}function Dn(n,e,t){return o(_(n).getSyncParameter(_(e),t>>>0))}function In(n,e,t,r){return _(n).getUniformBlockIndex(_(e),g(t,r))}function En(){return L((function(n,e,t){_(n).invalidateFramebuffer(e>>>0,_(t))}),arguments)}function Fn(n,e){_(n).readBuffer(e>>>0)}function Tn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function Bn(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,i)}),arguments)}function Ln(n,e,t,r,u,f){_(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function Mn(n,e,t,r){_(n).samplerParameterf(_(e),t>>>0,r)}function kn(n,e,t,r){_(n).samplerParameteri(_(e),t>>>0,r)}function Rn(n,e,t,r,u,f){_(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function On(n,e,t,r,u,f,c){_(n).texStorage3D(e>>>0,t,r>>>0,u,f,c)}function Cn(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(a))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,a)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,c,i,o,a,d,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,c,i,o,a,d,b){_(n).texSubImage3D(e>>>0,t,r,u,f,c,i,o,a>>>0,d>>>0,_(b))}),arguments)}function Kn(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function jn(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function Gn(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function Wn(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Qn(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Xn(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Yn(n,e,t,r){_(n).uniformBlockBinding(_(e),t>>>0,r>>>0)}function Nn(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Hn(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Jn(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function zn(n,e,t){_(n).vertexAttribDivisor(e>>>0,t>>>0)}function Zn(n,e,t,r,u,f){_(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function $n(n,e){_(n).activeTexture(e>>>0)}function ne(n,e,t){_(n).attachShader(_(e),_(t))}function ee(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function te(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function re(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function ue(n,e,t){_(n).bindTexture(e>>>0,_(t))}function fe(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function _e(n,e){_(n).blendEquation(e>>>0)}function ce(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function ie(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function oe(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function de(n,e){_(n).compileShader(_(e))}function be(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function ge(n){var e=_(n).createBuffer();return w(e)?0:o(e)}function we(n){var e=_(n).createFramebuffer();return w(e)?0:o(e)}function le(n){var e=_(n).createProgram();return w(e)?0:o(e)}function se(n){var e=_(n).createRenderbuffer();return w(e)?0:o(e)}function me(n,e){var t=_(n).createShader(e>>>0);return w(t)?0:o(t)}function ve(n){var e=_(n).createTexture();return w(e)?0:o(e)}function ye(n,e){_(n).cullFace(e>>>0)}function pe(n,e){_(n).deleteBuffer(_(e))}function xe(n,e){_(n).deleteFramebuffer(_(e))}function he(n,e){_(n).deleteProgram(_(e))}function Se(n,e){_(n).deleteRenderbuffer(_(e))}function Ae(n,e){_(n).deleteShader(_(e))}function Pe(n,e){_(n).deleteTexture(_(e))}function De(n,e){_(n).depthFunc(e>>>0)}function Ie(n,e){_(n).depthMask(0!==e)}function Ee(n,e,t){_(n).depthRange(e,t)}function Fe(n,e){_(n).disable(e>>>0)}function Te(n,e){_(n).disableVertexAttribArray(e>>>0)}function Be(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function Le(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function Me(n,e){_(n).enable(e>>>0)}function ke(n,e){_(n).enableVertexAttribArray(e>>>0)}function Re(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function Oe(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function Ce(n,e){_(n).frontFace(e>>>0)}function Ve(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return w(r)?0:o(r)}function Ue(){return L((function(n,e,t){var r=_(n).getExtension(g(e,t));return w(r)?0:o(r)}),arguments)}function qe(){return L((function(n,e){return o(_(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function je(n,e,t){return o(_(n).getProgramParameter(_(e),t>>>0))}function Ge(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function We(n,e,t){return o(_(n).getShaderParameter(_(e),t>>>0))}function Qe(n){var e=_(n).getSupportedExtensions();return w(e)?0:o(e)}function Xe(n,e,t,r){var u=_(n).getUniformLocation(_(e),g(t,r));return w(u)?0:o(u)}function Ye(n,e){_(n).linkProgram(_(e))}function Ne(n,e,t){_(n).pixelStorei(e>>>0,t)}function He(n,e,t){_(n).polygonOffset(e,t)}function Je(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function ze(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Ze(n,e,t,r){_(n).shaderSource(_(e),g(t,r))}function $e(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function nt(n,e){_(n).stencilMask(e>>>0)}function et(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function tt(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function rt(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function ut(n,e,t){_(n).uniform1f(_(e),t)}function ft(n,e,t){_(n).uniform1i(_(e),t)}function _t(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function ct(n,e){_(n).useProgram(_(e))}function it(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function ot(n,e,t,r,u){_(n).viewport(e,t,r,u)}function at(n){var e;try{e=_(n)instanceof Window}catch(n){e=!1}return e}function dt(n){var e=_(n).document;return w(e)?0:o(e)}function bt(){return L((function(n){return o(_(n).innerWidth)}),arguments)}function gt(){return L((function(n){return o(_(n).innerHeight)}),arguments)}function wt(n){return _(n).devicePixelRatio}function lt(){return L((function(n,e){_(n).cancelAnimationFrame(e)}),arguments)}function st(){return L((function(n,e,t){var r=_(n).matchMedia(g(e,t));return w(r)?0:o(r)}),arguments)}function mt(){return L((function(n,e){return _(n).requestAnimationFrame(_(e))}),arguments)}function vt(n,e,t){var r=_(n)[g(e,t)];return w(r)?0:o(r)}function yt(n,e){_(n).clearTimeout(e)}function pt(){return L((function(n,e,t){return _(n).setTimeout(_(e),t)}),arguments)}function xt(n){return _(n).size}function ht(n){return _(n).type}function St(n,e){var t=x(_(e).name,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function At(n,e,t,r,u){_(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function Pt(n,e,t,r,u,f){_(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function Dt(n,e,t){_(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function It(){return L((function(n,e,t,r,u){_(n).setProperty(g(e,t),g(r,u))}),arguments)}function Et(n){return _(n).x}function Ft(n){return _(n).y}function Tt(n){return _(n).clientX}function Bt(n){return _(n).clientY}function Lt(n){return _(n).offsetX}function Mt(n){return _(n).offsetY}function kt(n){return _(n).ctrlKey}function Rt(n){return _(n).shiftKey}function Ot(n){return _(n).altKey}function Ct(n){return _(n).metaKey}function Vt(n){return _(n).button}function Ut(n){return _(n).buttons}function qt(n){return _(n).movementX}function Kt(n){return _(n).movementY}function jt(n,e){_(n).bindVertexArrayOES(_(e))}function Gt(n){var e=_(n).createVertexArrayOES();return w(e)?0:o(e)}function Wt(n,e){_(n).deleteVertexArrayOES(_(e))}function Qt(n){return _(n).pointerId}function Xt(n){return _(n).deltaX}function Yt(n){return _(n).deltaY}function Nt(n){return _(n).deltaMode}function Ht(n){var e;try{e=_(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Jt(n){return _(n).width}function zt(n,e){_(n).width=e>>>0}function Zt(n){return _(n).height}function $t(n,e){_(n).height=e>>>0}function nr(){return L((function(n,e,t,r){var u=_(n).getContext(g(e,t),_(r));return w(u)?0:o(u)}),arguments)}function er(n){return _(n).matches}function tr(n){return _(n).now()}function rr(n,e){_(n).drawBuffersWEBGL(_(e))}function ur(n){var e=_(n).fullscreenElement;return w(e)?0:o(e)}function fr(){return L((function(n,e,t){return o(_(n).createElement(g(e,t)))}),arguments)}function _r(n,e,t){var r=_(n).getElementById(g(e,t));return w(r)?0:o(r)}function cr(){return L((function(n,e,t){var r=_(n).querySelector(g(e,t));return w(r)?0:o(r)}),arguments)}function ir(n){return o(_(n).getBoundingClientRect())}function or(){return L((function(n){_(n).requestFullscreen()}),arguments)}function ar(){return L((function(n,e,t,r,u){_(n).setAttribute(g(e,t),g(r,u))}),arguments)}function dr(){return L((function(n,e){_(n).setPointerCapture(e)}),arguments)}function br(n){return o(_(n).style)}function gr(n,e,t,r){_(n).bufferData(e>>>0,t,r>>>0)}function wr(n,e,t,r){_(n).bufferData(e>>>0,_(t),r>>>0)}function lr(n,e,t,r){_(n).bufferSubData(e>>>0,t,_(r))}function sr(n,e,t,r,u,f,c,i,o){_(n).compressedTexSubImage2D(e>>>0,t,r,u,f,c,i>>>0,_(o))}function mr(){return L((function(n,e,t,r,u,f,c,i){_(n).readPixels(e,t,r,u,f>>>0,c>>>0,_(i))}),arguments)}function vr(){return L((function(n,e,t,r,u,f,c,i,o,a){_(n).texSubImage2D(e>>>0,t,r,u,f,c,i>>>0,o>>>0,_(a))}),arguments)}function yr(n,e,t,r){_(n).uniform2fv(_(e),E(t,r))}function pr(n,e,t,r){_(n).uniform2iv(_(e),F(t,r))}function xr(n,e,t,r){_(n).uniform3fv(_(e),E(t,r))}function hr(n,e,t,r){_(n).uniform3iv(_(e),F(t,r))}function Sr(n,e,t,r){_(n).uniform4fv(_(e),E(t,r))}function Ar(n,e,t,r){_(n).uniform4iv(_(e),F(t,r))}function Pr(n,e,t,r,u){_(n).uniformMatrix2fv(_(e),0!==t,E(r,u))}function Dr(n,e,t,r,u){_(n).uniformMatrix3fv(_(e),0!==t,E(r,u))}function Ir(n,e,t,r,u){_(n).uniformMatrix4fv(_(e),0!==t,E(r,u))}function Er(n,e){_(n).activeTexture(e>>>0)}function Fr(n,e,t){_(n).attachShader(_(e),_(t))}function Tr(n,e,t){_(n).bindBuffer(e>>>0,_(t))}function Br(n,e,t){_(n).bindFramebuffer(e>>>0,_(t))}function Lr(n,e,t){_(n).bindRenderbuffer(e>>>0,_(t))}function Mr(n,e,t){_(n).bindTexture(e>>>0,_(t))}function kr(n,e,t,r,u){_(n).blendColor(e,t,r,u)}function Rr(n,e){_(n).blendEquation(e>>>0)}function Or(n,e,t){_(n).blendEquationSeparate(e>>>0,t>>>0)}function Cr(n,e,t){_(n).blendFunc(e>>>0,t>>>0)}function Vr(n,e,t,r,u){_(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Ur(n,e,t,r,u){_(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function qr(n,e){_(n).compileShader(_(e))}function Kr(n,e,t,r,u,f,c,i,o){_(n).copyTexSubImage2D(e>>>0,t,r,u,f,c,i,o)}function jr(n){var e=_(n).createBuffer();return w(e)?0:o(e)}function Gr(n){var e=_(n).createFramebuffer();return w(e)?0:o(e)}function Wr(n){var e=_(n).createProgram();return w(e)?0:o(e)}function Qr(n){var e=_(n).createRenderbuffer();return w(e)?0:o(e)}function Xr(n,e){var t=_(n).createShader(e>>>0);return w(t)?0:o(t)}function Yr(n){var e=_(n).createTexture();return w(e)?0:o(e)}function Nr(n,e){_(n).cullFace(e>>>0)}function Hr(n,e){_(n).deleteBuffer(_(e))}function Jr(n,e){_(n).deleteFramebuffer(_(e))}function zr(n,e){_(n).deleteProgram(_(e))}function Zr(n,e){_(n).deleteRenderbuffer(_(e))}function $r(n,e){_(n).deleteShader(_(e))}function nu(n,e){_(n).deleteTexture(_(e))}function eu(n,e){_(n).depthFunc(e>>>0)}function tu(n,e){_(n).depthMask(0!==e)}function ru(n,e,t){_(n).depthRange(e,t)}function uu(n,e){_(n).disable(e>>>0)}function fu(n,e){_(n).disableVertexAttribArray(e>>>0)}function _u(n,e,t,r){_(n).drawArrays(e>>>0,t,r)}function cu(n,e,t,r,u){_(n).drawElements(e>>>0,t,r>>>0,u)}function iu(n,e){_(n).enable(e>>>0)}function ou(n,e){_(n).enableVertexAttribArray(e>>>0)}function au(n,e,t,r,u){_(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,_(u))}function du(n,e,t,r,u,f){_(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,_(u),f)}function bu(n,e){_(n).frontFace(e>>>0)}function gu(n,e,t){var r=_(n).getActiveUniform(_(e),t>>>0);return w(r)?0:o(r)}function wu(){return L((function(n,e){return o(_(n).getParameter(e>>>0))}),arguments)}function lu(n,e,t){var r=_(e).getProgramInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function su(n,e,t){return o(_(n).getProgramParameter(_(e),t>>>0))}function mu(n,e,t){var r=_(e).getShaderInfoLog(_(t)),f=w(r)?0:x(r,u.d,u.e),c=v;m()[n/4+1]=c,m()[n/4+0]=f}function vu(n,e,t){return o(_(n).getShaderParameter(_(e),t>>>0))}function yu(n,e,t,r){var u=_(n).getUniformLocation(_(e),g(t,r));return w(u)?0:o(u)}function pu(n,e){_(n).linkProgram(_(e))}function xu(n,e,t){_(n).pixelStorei(e>>>0,t)}function hu(n,e,t){_(n).polygonOffset(e,t)}function Su(n,e,t,r,u){_(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Au(n,e,t,r,u){_(n).scissor(e,t,r,u)}function Pu(n,e,t,r){_(n).shaderSource(_(e),g(t,r))}function Du(n,e,t,r,u){_(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Iu(n,e){_(n).stencilMask(e>>>0)}function Eu(n,e,t){_(n).stencilMaskSeparate(e>>>0,t>>>0)}function Fu(n,e,t,r,u){_(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tu(n,e,t,r){_(n).texParameteri(e>>>0,t>>>0,r)}function Bu(n,e,t){_(n).uniform1f(_(e),t)}function Lu(n,e,t){_(n).uniform1i(_(e),t)}function Mu(n,e,t,r,u,f){_(n).uniform4f(_(e),t,r,u,f)}function ku(n,e){_(n).useProgram(_(e))}function Ru(n,e,t,r,u,f,c){_(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,c)}function Ou(n,e,t,r,u){_(n).viewport(e,t,r,u)}function Cu(n){console.debug(_(n))}function Vu(n){console.error(_(n))}function Uu(n,e){console.error(_(n),_(e))}function qu(n){console.info(_(n))}function Ku(n){console.log(_(n))}function ju(n){console.warn(_(n))}function Gu(){return L((function(n,e,t,r){_(n).addEventListener(g(e,t),_(r))}),arguments)}function Wu(){return L((function(n,e,t,r,u){_(n).addEventListener(g(e,t),_(r),_(u))}),arguments)}function Qu(){return L((function(n,e,t,r){_(n).removeEventListener(g(e,t),_(r))}),arguments)}function Xu(n){return _(n).charCode}function Yu(n){return _(n).keyCode}function Nu(n){return _(n).altKey}function Hu(n){return _(n).ctrlKey}function Ju(n){return _(n).shiftKey}function zu(n){return _(n).metaKey}function Zu(n,e){var t=x(_(e).key,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function $u(n,e){var t=x(_(e).code,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function nf(n,e,t){return _(n).getModifierState(g(e,t))}function ef(n){return _(n).matches}function tf(){return L((function(n,e){_(n).addListener(_(e))}),arguments)}function rf(){return L((function(n,e){_(n).removeListener(_(e))}),arguments)}function uf(){return L((function(n,e){return o(_(n).appendChild(_(e)))}),arguments)}function ff(n){var e=_(n).target;return w(e)?0:o(e)}function _f(n){return _(n).cancelBubble}function cf(n){_(n).preventDefault()}function of(n){_(n).stopPropagation()}function af(n,e){return o(_(n)[e>>>0])}function df(n){return _(n).length}function bf(){return o(new Array)}function gf(n,e){return o(new Function(g(n,e)))}function wf(){return L((function(n,e){return o(Reflect.get(_(n),_(e)))}),arguments)}function lf(){return L((function(n,e){return o(_(n).call(_(e)))}),arguments)}function sf(){return o(new Object)}function mf(){return L((function(){return o(self.self)}),arguments)}function vf(){return L((function(){return o(window.window)}),arguments)}function yf(){return L((function(){return o(globalThis.globalThis)}),arguments)}function pf(){return L((function(){return o(global.global)}),arguments)}function xf(n){return void 0===_(n)}function hf(n){return o(Array.of(_(n)))}function Sf(n,e){return _(n).push(_(e))}function Af(n,e){return Object.is(_(n),_(e))}function Pf(n){return o(Promise.resolve(_(n)))}function Df(n,e){return o(_(n).then(_(e)))}function If(n){return o(_(n).buffer)}function Ef(n,e,t){return o(new Int8Array(_(n),e>>>0,t>>>0))}function Ff(n,e,t){return o(new Int16Array(_(n),e>>>0,t>>>0))}function Tf(n,e,t){return o(new Int32Array(_(n),e>>>0,t>>>0))}function Bf(n,e,t){return o(new Uint8Array(_(n),e>>>0,t>>>0))}function Lf(n,e,t){return o(new Uint16Array(_(n),e>>>0,t>>>0))}function Mf(n,e,t){return o(new Uint32Array(_(n),e>>>0,t>>>0))}function kf(n,e,t){return o(new Float32Array(_(n),e>>>0,t>>>0))}function Rf(){return L((function(n,e,t){return Reflect.set(_(n),_(e),_(t))}),arguments)}function Of(n,e){var t=x(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var _=e.length,c="[";_>0&&(c+=n(e[0]));for(var i=1;i<_;i++)c+=", "+n(e[i]);return c+="]"}var o,a=/\[object ([^\]]+)\]/.exec(toString.call(e));if(!(a.length>1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(_(e)),u.d,u.e),f=v;m()[n/4+1]=f,m()[n/4+0]=t}function Cf(n,e){throw new Error(g(n,e))}function Vf(){return o(u.j)}function Uf(n,e,t){return o(h(n,e,108,S))}function qf(n,e,t){return o(h(n,e,108,S))}function Kf(n,e,t){return o(h(n,e,108,S))}function jf(n,e,t){return o(h(n,e,108,A))}function Gf(n,e,t){return o(h(n,e,108,S))}function Wf(n,e,t){return o(h(n,e,108,S))}function Qf(n,e,t){return o(h(n,e,108,S))}function Xf(n,e,t){return o(h(n,e,108,S))}function Yf(n,e,t){return o(h(n,e,108,S))}function Nf(n,e,t){return o(h(n,e,200,P))}}.call(this,t(375)(n))},458:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(367);r.l()}}]); \ No newline at end of file diff --git a/assets/js/9.d82998a2.js b/assets/js/9.d82998a2.js new file mode 100644 index 00000000..0517a050 --- /dev/null +++ b/assets/js/9.d82998a2.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{367:function(n,e,t){"use strict";t.r(e),function(n){t.d(e,"run",(function(){return I})),t.d(e,"__wbindgen_object_drop_ref",(function(){return M})),t.d(e,"__wbindgen_object_clone_ref",(function(){return k})),t.d(e,"__wbindgen_cb_drop",(function(){return R})),t.d(e,"__wbindgen_string_new",(function(){return O})),t.d(e,"__wbg_new_abda76e883ba8a5f",(function(){return C})),t.d(e,"__wbg_stack_658279fe44541cf6",(function(){return V})),t.d(e,"__wbg_error_f851667af71bcfc6",(function(){return U})),t.d(e,"__wbindgen_number_get",(function(){return q})),t.d(e,"__wbindgen_string_get",(function(){return K})),t.d(e,"__wbindgen_boolean_get",(function(){return j})),t.d(e,"__wbindgen_number_new",(function(){return G})),t.d(e,"__wbg_instanceof_WebGl2RenderingContext_fcfa91cd777063f3",(function(){return W})),t.d(e,"__wbg_beginQuery_909ec673d606f873",(function(){return Q})),t.d(e,"__wbg_bindBufferRange_b8f6dc19661d5cf7",(function(){return X})),t.d(e,"__wbg_bindSampler_4b0e0e598e2cae44",(function(){return Y})),t.d(e,"__wbg_bindVertexArray_9d12800e272184b0",(function(){return N})),t.d(e,"__wbg_blitFramebuffer_cdc1ebf043046b70",(function(){return H})),t.d(e,"__wbg_bufferData_6ce28904b25c8be9",(function(){return J})),t.d(e,"__wbg_bufferData_8d206d7adf6751c0",(function(){return z})),t.d(e,"__wbg_bufferSubData_0e04c6c7fec3c949",(function(){return Z})),t.d(e,"__wbg_clearBufferfi_92173f77d7147a2f",(function(){return $})),t.d(e,"__wbg_clearBufferfv_5cc4edeacbcf72e8",(function(){return nn})),t.d(e,"__wbg_clearBufferiv_8bb0c2b97eedc22b",(function(){return en})),t.d(e,"__wbg_clearBufferuiv_1f5c5e9baa9a3d9b",(function(){return tn})),t.d(e,"__wbg_clientWaitSync_ad323ab9e423d0cf",(function(){return rn})),t.d(e,"__wbg_compressedTexSubImage2D_5b2a7dc8dc7b3e73",(function(){return un})),t.d(e,"__wbg_compressedTexSubImage2D_fd1cef4f6a5da5c3",(function(){return fn})),t.d(e,"__wbg_compressedTexSubImage3D_0df5a8ddb9ebafc2",(function(){return cn})),t.d(e,"__wbg_compressedTexSubImage3D_9c916feb243112db",(function(){return _n})),t.d(e,"__wbg_copyBufferSubData_11187dccce72b79b",(function(){return on})),t.d(e,"__wbg_copyTexSubImage3D_7a262558a6a33f2e",(function(){return an})),t.d(e,"__wbg_createSampler_288fd761eabe283d",(function(){return dn})),t.d(e,"__wbg_createVertexArray_8467a75e68fec199",(function(){return bn})),t.d(e,"__wbg_deleteQuery_77a7ae09eda297e1",(function(){return gn})),t.d(e,"__wbg_deleteSampler_ec3ca2243d8cfcad",(function(){return wn})),t.d(e,"__wbg_deleteSync_48aed3df05f4f497",(function(){return ln})),t.d(e,"__wbg_deleteVertexArray_00194a31d79df7e5",(function(){return sn})),t.d(e,"__wbg_drawArraysInstanced_951a1d7e32c4f855",(function(){return mn})),t.d(e,"__wbg_drawBuffers_23c1572f12f90db2",(function(){return vn})),t.d(e,"__wbg_drawElementsInstanced_2e05a96af17fe284",(function(){return yn})),t.d(e,"__wbg_endQuery_05baee8fc782e5f0",(function(){return pn})),t.d(e,"__wbg_fenceSync_91d72c970c880844",(function(){return hn})),t.d(e,"__wbg_framebufferTextureLayer_d5e78fc74b8261e3",(function(){return xn})),t.d(e,"__wbg_getBufferSubData_6b00169c609c16f7",(function(){return Sn})),t.d(e,"__wbg_getIndexedParameter_d4a2b68e14a022a1",(function(){return An})),t.d(e,"__wbg_getQueryParameter_358ea490fb85e05c",(function(){return Pn})),t.d(e,"__wbg_getSyncParameter_ab2f9499a91faae0",(function(){return In})),t.d(e,"__wbg_getUniformBlockIndex_a6f3a994dcc7399d",(function(){return Dn})),t.d(e,"__wbg_invalidateFramebuffer_802e38619851791e",(function(){return Fn})),t.d(e,"__wbg_readBuffer_f20d42ed12643534",(function(){return En})),t.d(e,"__wbg_readPixels_e855be1f94815442",(function(){return Tn})),t.d(e,"__wbg_readPixels_5d4e6205291096f0",(function(){return Bn})),t.d(e,"__wbg_renderbufferStorageMultisample_3e76453eed60554b",(function(){return Ln})),t.d(e,"__wbg_samplerParameterf_6eda655d7213cb18",(function(){return Mn})),t.d(e,"__wbg_samplerParameteri_390f1debfe40f83b",(function(){return kn})),t.d(e,"__wbg_texStorage2D_d25a76ad1b1ea98f",(function(){return Rn})),t.d(e,"__wbg_texStorage3D_19979792a7a67f59",(function(){return On})),t.d(e,"__wbg_texSubImage2D_421e29fed0db07ab",(function(){return Cn})),t.d(e,"__wbg_texSubImage2D_f06e46b3b25ee691",(function(){return Vn})),t.d(e,"__wbg_texSubImage3D_ebb9e6f80d19a411",(function(){return Un})),t.d(e,"__wbg_texSubImage3D_591b8511a3c7593a",(function(){return qn})),t.d(e,"__wbg_uniform2fv_a611afaf4a045f7e",(function(){return Kn})),t.d(e,"__wbg_uniform2iv_b1b33c9425d5791b",(function(){return jn})),t.d(e,"__wbg_uniform3fv_740a7286bf6328ee",(function(){return Gn})),t.d(e,"__wbg_uniform3iv_df752fa54b2b8b7b",(function(){return Wn})),t.d(e,"__wbg_uniform4fv_737873ef0bcd5e6c",(function(){return Qn})),t.d(e,"__wbg_uniform4iv_67eed4073c7e55c5",(function(){return Xn})),t.d(e,"__wbg_uniformBlockBinding_50ced0c985f91a02",(function(){return Yn})),t.d(e,"__wbg_uniformMatrix2fv_f4fc5e6214cc5549",(function(){return Nn})),t.d(e,"__wbg_uniformMatrix3fv_a02aa02ecb8e5f99",(function(){return Hn})),t.d(e,"__wbg_uniformMatrix4fv_68d11b378757596e",(function(){return Jn})),t.d(e,"__wbg_vertexAttribDivisor_2dc16945a591d4c6",(function(){return zn})),t.d(e,"__wbg_vertexAttribIPointer_167c7ed4319992e7",(function(){return Zn})),t.d(e,"__wbg_activeTexture_6a9afd67cc0ade73",(function(){return $n})),t.d(e,"__wbg_attachShader_90ad543fb1bccb18",(function(){return ne})),t.d(e,"__wbg_bindBuffer_66e359418f5c82d7",(function(){return ee})),t.d(e,"__wbg_bindFramebuffer_5c01742edd5d843a",(function(){return te})),t.d(e,"__wbg_bindRenderbuffer_f66dee160b94e5ef",(function(){return re})),t.d(e,"__wbg_bindTexture_ae9620ea4a6ffb97",(function(){return ue})),t.d(e,"__wbg_blendColor_50e203e2f58784cb",(function(){return fe})),t.d(e,"__wbg_blendEquation_72746aedc87e3f72",(function(){return ce})),t.d(e,"__wbg_blendEquationSeparate_f0abe930082fff02",(function(){return _e})),t.d(e,"__wbg_blendFunc_99b48b64bde98c6f",(function(){return ie})),t.d(e,"__wbg_blendFuncSeparate_cecb7dfda39dc38d",(function(){return oe})),t.d(e,"__wbg_colorMask_12687df5490e9bc9",(function(){return ae})),t.d(e,"__wbg_compileShader_822f38928f6f2a08",(function(){return de})),t.d(e,"__wbg_copyTexSubImage2D_4c72e3ef713b65e6",(function(){return be})),t.d(e,"__wbg_createBuffer_a6cffb7f7d5b92a3",(function(){return ge})),t.d(e,"__wbg_createFramebuffer_d5f3985ce3652661",(function(){return we})),t.d(e,"__wbg_createProgram_dc6b23d3caa1d86e",(function(){return le})),t.d(e,"__wbg_createRenderbuffer_531167a301a60e27",(function(){return se})),t.d(e,"__wbg_createShader_46a66dce5a9e22d0",(function(){return me})),t.d(e,"__wbg_createTexture_269f67d411bdc4dc",(function(){return ve})),t.d(e,"__wbg_cullFace_d6b862a4ad70b414",(function(){return ye})),t.d(e,"__wbg_deleteBuffer_12fd7d93834069ef",(function(){return pe})),t.d(e,"__wbg_deleteFramebuffer_d7551444a28f508e",(function(){return he})),t.d(e,"__wbg_deleteProgram_ce56000628d7f1ce",(function(){return xe})),t.d(e,"__wbg_deleteRenderbuffer_58c540348fb8606d",(function(){return Se})),t.d(e,"__wbg_deleteShader_246e6e678f3eb957",(function(){return Ae})),t.d(e,"__wbg_deleteTexture_68a539339fd87792",(function(){return Pe})),t.d(e,"__wbg_depthFunc_1015c3364a49cd2f",(function(){return Ie})),t.d(e,"__wbg_depthMask_55f538b7411e5023",(function(){return De})),t.d(e,"__wbg_depthRange_c6ed3371d3b601f8",(function(){return Fe})),t.d(e,"__wbg_disable_1659dc1efb5fb934",(function(){return Ee})),t.d(e,"__wbg_disableVertexAttribArray_6f3d27dd0ad6aabf",(function(){return Te})),t.d(e,"__wbg_drawArrays_d587302f7a868d91",(function(){return Be})),t.d(e,"__wbg_drawElements_241caa588795bcb1",(function(){return Le})),t.d(e,"__wbg_enable_4791414dce6f602a",(function(){return Me})),t.d(e,"__wbg_enableVertexAttribArray_a1ffc091f3999354",(function(){return ke})),t.d(e,"__wbg_framebufferRenderbuffer_963b305ac8cb6fd6",(function(){return Re})),t.d(e,"__wbg_framebufferTexture2D_4b810902dffa1ef3",(function(){return Oe})),t.d(e,"__wbg_frontFace_97d7f9493791771d",(function(){return Ce})),t.d(e,"__wbg_getActiveUniform_97472b76b9daa461",(function(){return Ve})),t.d(e,"__wbg_getExtension_e7912bce04869d40",(function(){return Ue})),t.d(e,"__wbg_getParameter_4e2ccc745690476a",(function(){return qe})),t.d(e,"__wbg_getProgramInfoLog_1e37a3d1d090ec1c",(function(){return Ke})),t.d(e,"__wbg_getProgramParameter_acf4ae158143e2b2",(function(){return je})),t.d(e,"__wbg_getShaderInfoLog_451545b963646762",(function(){return Ge})),t.d(e,"__wbg_getShaderParameter_6cd8c36fded266ea",(function(){return We})),t.d(e,"__wbg_getSupportedExtensions_b84494641d686623",(function(){return Qe})),t.d(e,"__wbg_getUniformLocation_0da0c93f626244a2",(function(){return Xe})),t.d(e,"__wbg_linkProgram_c33885d9ea798810",(function(){return Ye})),t.d(e,"__wbg_pixelStorei_51c83dc5117bea35",(function(){return Ne})),t.d(e,"__wbg_polygonOffset_7af170d91752512c",(function(){return He})),t.d(e,"__wbg_renderbufferStorage_0b6269243d09a9f7",(function(){return Je})),t.d(e,"__wbg_scissor_b1b9e314ab6aac29",(function(){return ze})),t.d(e,"__wbg_shaderSource_5111981e7afb61fb",(function(){return Ze})),t.d(e,"__wbg_stencilFuncSeparate_2939e543fa4caa77",(function(){return $e})),t.d(e,"__wbg_stencilMask_4eb0f989e4108b15",(function(){return nt})),t.d(e,"__wbg_stencilMaskSeparate_69e9937a9533f4ab",(function(){return et})),t.d(e,"__wbg_stencilOpSeparate_c57c8bbe863e9f57",(function(){return tt})),t.d(e,"__wbg_texParameteri_21fd6b6b394882c9",(function(){return rt})),t.d(e,"__wbg_uniform1f_ade6c204580582c8",(function(){return ut})),t.d(e,"__wbg_uniform1i_49986febd844f2c4",(function(){return ft})),t.d(e,"__wbg_uniform4f_d564461a6e4fdfe0",(function(){return ct})),t.d(e,"__wbg_useProgram_35a58ac1e0d9577b",(function(){return _t})),t.d(e,"__wbg_vertexAttribPointer_3b06d737566f0745",(function(){return it})),t.d(e,"__wbg_viewport_319ab5302767fcc9",(function(){return ot})),t.d(e,"__wbg_instanceof_Window_acc97ff9f5d2c7b4",(function(){return at})),t.d(e,"__wbg_document_3ead31dbcad65886",(function(){return dt})),t.d(e,"__wbg_innerWidth_ffa584f74d721fce",(function(){return bt})),t.d(e,"__wbg_innerHeight_f4804c803fcf02b0",(function(){return gt})),t.d(e,"__wbg_devicePixelRatio_476ddb014eb2520a",(function(){return wt})),t.d(e,"__wbg_cancelAnimationFrame_679ac3913d7f9b34",(function(){return lt})),t.d(e,"__wbg_matchMedia_0b5dc8aaf445df72",(function(){return st})),t.d(e,"__wbg_requestAnimationFrame_4181656476a7d86c",(function(){return mt})),t.d(e,"__wbg_get_55f248d76a5aa3d1",(function(){return vt})),t.d(e,"__wbg_clearTimeout_7d6f7bfeed34b348",(function(){return yt})),t.d(e,"__wbg_setTimeout_d6fcf0d9067b8e64",(function(){return pt})),t.d(e,"__wbg_size_878ba1bf0c2ec606",(function(){return ht})),t.d(e,"__wbg_type_ca7819eaadc2049f",(function(){return xt})),t.d(e,"__wbg_name_2473476082bed625",(function(){return St})),t.d(e,"__wbg_drawArraysInstancedANGLE_89a45d6f51cd0483",(function(){return At})),t.d(e,"__wbg_drawElementsInstancedANGLE_6ac21f9a1ebe5f6b",(function(){return Pt})),t.d(e,"__wbg_vertexAttribDivisorANGLE_d5931335aaf0c735",(function(){return It})),t.d(e,"__wbg_setProperty_e489dfd8c0a6bffc",(function(){return Dt})),t.d(e,"__wbg_x_419967b8271dcf59",(function(){return Ft})),t.d(e,"__wbg_y_0f67486e0f88b265",(function(){return Et})),t.d(e,"__wbg_clientX_e39206f946859108",(function(){return Tt})),t.d(e,"__wbg_clientY_e376bb2d8f470c88",(function(){return Bt})),t.d(e,"__wbg_offsetX_8891849b36542d53",(function(){return Lt})),t.d(e,"__wbg_offsetY_1f52082687af467b",(function(){return Mt})),t.d(e,"__wbg_ctrlKey_4795fb55a59f026c",(function(){return kt})),t.d(e,"__wbg_shiftKey_81014521a7612e6a",(function(){return Rt})),t.d(e,"__wbg_altKey_2b8d6d80ead4bad7",(function(){return Ot})),t.d(e,"__wbg_metaKey_49e49046d8402fb7",(function(){return Ct})),t.d(e,"__wbg_button_2bb5dc0116d6b89b",(function(){return Vt})),t.d(e,"__wbg_buttons_047716c1296e3d1c",(function(){return Ut})),t.d(e,"__wbg_movementX_f5947c282009d740",(function(){return qt})),t.d(e,"__wbg_movementY_2c81eed268321a0a",(function(){return Kt})),t.d(e,"__wbg_bindVertexArrayOES_84540c072ea96b75",(function(){return jt})),t.d(e,"__wbg_createVertexArrayOES_00a5c523e5b17eff",(function(){return Gt})),t.d(e,"__wbg_deleteVertexArrayOES_98b83132b3d85825",(function(){return Wt})),t.d(e,"__wbg_pointerId_18be034781db46f3",(function(){return Qt})),t.d(e,"__wbg_deltaX_6b627fd6f4c19e51",(function(){return Xt})),t.d(e,"__wbg_deltaY_a5393ec7ac0f7bb4",(function(){return Yt})),t.d(e,"__wbg_deltaMode_a90be314f5c676f1",(function(){return Nt})),t.d(e,"__wbg_instanceof_HtmlCanvasElement_97761617af6ea089",(function(){return Ht})),t.d(e,"__wbg_width_2f4b0cbbf1c850d9",(function(){return Jt})),t.d(e,"__wbg_setwidth_afb418d3fbf71ba7",(function(){return zt})),t.d(e,"__wbg_height_a81d308a000d91d0",(function(){return Zt})),t.d(e,"__wbg_setheight_3eb8729b59493242",(function(){return $t})),t.d(e,"__wbg_getContext_a6ea7a8e317f182a",(function(){return nr})),t.d(e,"__wbg_matches_206d50bc7cb1f89e",(function(){return er})),t.d(e,"__wbg_now_8172cd917e5eda6b",(function(){return tr})),t.d(e,"__wbg_drawBuffersWEBGL_482a093ae5a4ad55",(function(){return rr})),t.d(e,"__wbg_fullscreenElement_de98779ddf556e06",(function(){return ur})),t.d(e,"__wbg_createElement_976dbb84fe1661b5",(function(){return fr})),t.d(e,"__wbg_getElementById_3a708b83e4f034d7",(function(){return cr})),t.d(e,"__wbg_querySelector_3628dc2c3319e7e0",(function(){return _r})),t.d(e,"__wbg_getBoundingClientRect_06acb6ac1c23e409",(function(){return ir})),t.d(e,"__wbg_requestFullscreen_7d41309612540445",(function(){return or})),t.d(e,"__wbg_setAttribute_d8436c14a59ab1af",(function(){return ar})),t.d(e,"__wbg_setPointerCapture_7cc6c6e831d5dae0",(function(){return dr})),t.d(e,"__wbg_style_e9380748cee29f13",(function(){return br})),t.d(e,"__wbg_bufferData_d6fac0d761e08fec",(function(){return gr})),t.d(e,"__wbg_bufferData_a33528a74dd300f4",(function(){return wr})),t.d(e,"__wbg_bufferSubData_a116fea11850b38f",(function(){return lr})),t.d(e,"__wbg_compressedTexSubImage2D_30943b654d04ee44",(function(){return sr})),t.d(e,"__wbg_readPixels_db685489e1779d63",(function(){return mr})),t.d(e,"__wbg_texSubImage2D_cb339dd200dd1179",(function(){return vr})),t.d(e,"__wbg_uniform2fv_3aad4d306a1cb8af",(function(){return yr})),t.d(e,"__wbg_uniform2iv_8c390eac30cb1de3",(function(){return pr})),t.d(e,"__wbg_uniform3fv_d1ef35c158c348e7",(function(){return hr})),t.d(e,"__wbg_uniform3iv_76acc51e8e6fe1a4",(function(){return xr})),t.d(e,"__wbg_uniform4fv_a513dc4d02f192d3",(function(){return Sr})),t.d(e,"__wbg_uniform4iv_19aa13960dc767c2",(function(){return Ar})),t.d(e,"__wbg_uniformMatrix2fv_4173a282fcaa5508",(function(){return Pr})),t.d(e,"__wbg_uniformMatrix3fv_2b7de3010c8ed627",(function(){return Ir})),t.d(e,"__wbg_uniformMatrix4fv_f16e4a5553357886",(function(){return Dr})),t.d(e,"__wbg_activeTexture_02b7c73c76c2c06b",(function(){return Fr})),t.d(e,"__wbg_attachShader_f4d51147351a1906",(function(){return Er})),t.d(e,"__wbg_bindBuffer_8b5135aa633680f5",(function(){return Tr})),t.d(e,"__wbg_bindFramebuffer_080d0b0cf22e1645",(function(){return Br})),t.d(e,"__wbg_bindRenderbuffer_6da549f066c1b8a5",(function(){return Lr})),t.d(e,"__wbg_bindTexture_6f1dec563e82e818",(function(){return Mr})),t.d(e,"__wbg_blendColor_3bea829c60b1f6f2",(function(){return kr})),t.d(e,"__wbg_blendEquation_5d5abe2ee10109a9",(function(){return Rr})),t.d(e,"__wbg_blendEquationSeparate_fa6aebc5cd0c5285",(function(){return Or})),t.d(e,"__wbg_blendFunc_49ea28240d4c1084",(function(){return Cr})),t.d(e,"__wbg_blendFuncSeparate_9fef8acb74d50df5",(function(){return Vr})),t.d(e,"__wbg_colorMask_bc13c97d0db65962",(function(){return Ur})),t.d(e,"__wbg_compileShader_22b038faa1f49857",(function(){return qr})),t.d(e,"__wbg_copyTexSubImage2D_e815f93a9ef52dd2",(function(){return Kr})),t.d(e,"__wbg_createBuffer_6e747d928c9ba46d",(function(){return jr})),t.d(e,"__wbg_createFramebuffer_9b5b0507480146cd",(function(){return Gr})),t.d(e,"__wbg_createProgram_1c5f8dffd1066e71",(function(){return Wr})),t.d(e,"__wbg_createRenderbuffer_69c2f0554298bf89",(function(){return Qr})),t.d(e,"__wbg_createShader_4017d9fbc36659af",(function(){return Xr})),t.d(e,"__wbg_createTexture_4ce49e8a8c655124",(function(){return Yr})),t.d(e,"__wbg_cullFace_aa9f8eea262690c0",(function(){return Nr})),t.d(e,"__wbg_deleteBuffer_6fd9bca7f8a6d9de",(function(){return Hr})),t.d(e,"__wbg_deleteFramebuffer_2617e39d2c39b4da",(function(){return Jr})),t.d(e,"__wbg_deleteProgram_e8636e3cb5a18a59",(function(){return zr})),t.d(e,"__wbg_deleteRenderbuffer_e5b3450b8b57b395",(function(){return Zr})),t.d(e,"__wbg_deleteShader_89369612f61ec145",(function(){return $r})),t.d(e,"__wbg_deleteTexture_5c40169772519141",(function(){return nu})),t.d(e,"__wbg_depthFunc_2ac2c797a8220f09",(function(){return eu})),t.d(e,"__wbg_depthMask_88ab181c23c32dcd",(function(){return tu})),t.d(e,"__wbg_depthRange_5dccc27b5cdd74b3",(function(){return ru})),t.d(e,"__wbg_disable_6835d16c2cd3fa26",(function(){return uu})),t.d(e,"__wbg_disableVertexAttribArray_ab474d273ff59265",(function(){return fu})),t.d(e,"__wbg_drawArrays_c0dcb4151e0bf007",(function(){return cu})),t.d(e,"__wbg_drawElements_e09dbef58c8f099a",(function(){return _u})),t.d(e,"__wbg_enable_fc393941ac400f72",(function(){return iu})),t.d(e,"__wbg_enableVertexAttribArray_3d21f4936ad4a378",(function(){return ou})),t.d(e,"__wbg_framebufferRenderbuffer_6b8dd5a111d341e6",(function(){return au})),t.d(e,"__wbg_framebufferTexture2D_499d1c21458d0113",(function(){return du})),t.d(e,"__wbg_frontFace_5fd354be6327d46b",(function(){return bu})),t.d(e,"__wbg_getActiveUniform_fd021da851153e8c",(function(){return gu})),t.d(e,"__wbg_getParameter_585a5b83c595ada8",(function(){return wu})),t.d(e,"__wbg_getProgramInfoLog_e47d5073d57fb18d",(function(){return lu})),t.d(e,"__wbg_getProgramParameter_eaf768a9b399b7cf",(function(){return su})),t.d(e,"__wbg_getShaderInfoLog_ec7e5b959e47645b",(function(){return mu})),t.d(e,"__wbg_getShaderParameter_42a35b974329561c",(function(){return vu})),t.d(e,"__wbg_getUniformLocation_8e9cc276a231ddcd",(function(){return yu})),t.d(e,"__wbg_linkProgram_25cda5f9318ea316",(function(){return pu})),t.d(e,"__wbg_pixelStorei_bee1e2da4cb1115b",(function(){return hu})),t.d(e,"__wbg_polygonOffset_4cba459d8eacb66d",(function(){return xu})),t.d(e,"__wbg_renderbufferStorage_4ceec9b17dbd1e76",(function(){return Su})),t.d(e,"__wbg_scissor_4b89b60091ee8f0e",(function(){return Au})),t.d(e,"__wbg_shaderSource_a0001b8eab5d44f4",(function(){return Pu})),t.d(e,"__wbg_stencilFuncSeparate_1f0226d5d3acaf47",(function(){return Iu})),t.d(e,"__wbg_stencilMask_00541859199befd2",(function(){return Du})),t.d(e,"__wbg_stencilMaskSeparate_5e7b9b536eac0c5d",(function(){return Fu})),t.d(e,"__wbg_stencilOpSeparate_153523493abc8ec8",(function(){return Eu})),t.d(e,"__wbg_texParameteri_1b210b807f1ea723",(function(){return Tu})),t.d(e,"__wbg_uniform1f_f60e1072e28b8c49",(function(){return Bu})),t.d(e,"__wbg_uniform1i_50124a48de1da66b",(function(){return Lu})),t.d(e,"__wbg_uniform4f_5b62a0acebac4494",(function(){return Mu})),t.d(e,"__wbg_useProgram_156511a425feb519",(function(){return ku})),t.d(e,"__wbg_vertexAttribPointer_63d2aef49627302b",(function(){return Ru})),t.d(e,"__wbg_viewport_a93f3881c4202d5e",(function(){return Ou})),t.d(e,"__wbg_debug_f15cb542ea509609",(function(){return Cu})),t.d(e,"__wbg_error_ef9a0be47931175f",(function(){return Vu})),t.d(e,"__wbg_error_02ffd4185a83fe18",(function(){return Uu})),t.d(e,"__wbg_info_2874fdd5393f35ce",(function(){return qu})),t.d(e,"__wbg_log_4b5638ad60bdc54a",(function(){return Ku})),t.d(e,"__wbg_warn_58110c4a199df084",(function(){return ju})),t.d(e,"__wbg_addEventListener_cbe4c6f619b032f3",(function(){return Gu})),t.d(e,"__wbg_addEventListener_1fc744729ac6dc27",(function(){return Wu})),t.d(e,"__wbg_removeEventListener_dd20475efce70084",(function(){return Qu})),t.d(e,"__wbg_charCode_b0f31612a52c2bff",(function(){return Xu})),t.d(e,"__wbg_keyCode_72faed4278f77f2c",(function(){return Yu})),t.d(e,"__wbg_altKey_6dbe46bf3ae42d67",(function(){return Nu})),t.d(e,"__wbg_ctrlKey_fd79f035994d9387",(function(){return Hu})),t.d(e,"__wbg_shiftKey_908ae224b8722a41",(function(){return Ju})),t.d(e,"__wbg_metaKey_cdd15bf44efb510e",(function(){return zu})),t.d(e,"__wbg_key_ad4fc49423a94efa",(function(){return Zu})),t.d(e,"__wbg_code_06787cd3c7a60600",(function(){return $u})),t.d(e,"__wbg_getModifierState_135305ae40997dc7",(function(){return nf})),t.d(e,"__wbg_matches_0ffc2232d99a6034",(function(){return ef})),t.d(e,"__wbg_addListener_19238ce0935173e6",(function(){return tf})),t.d(e,"__wbg_removeListener_c08dac8493263a47",(function(){return rf})),t.d(e,"__wbg_appendChild_e513ef0e5098dfdd",(function(){return uf})),t.d(e,"__wbg_target_bf704b7db7ad1387",(function(){return ff})),t.d(e,"__wbg_cancelBubble_8c0bdf21c08f1717",(function(){return cf})),t.d(e,"__wbg_preventDefault_3209279b490de583",(function(){return _f})),t.d(e,"__wbg_stopPropagation_eca3af16f2d02a91",(function(){return of})),t.d(e,"__wbg_get_57245cc7d7c7619d",(function(){return af})),t.d(e,"__wbg_length_6e3bbe7c8bd4dbd8",(function(){return df})),t.d(e,"__wbg_new_1d9a920c6bfc44a8",(function(){return bf})),t.d(e,"__wbg_newnoargs_b5b063fc6c2f0376",(function(){return gf})),t.d(e,"__wbg_get_765201544a2b6869",(function(){return wf})),t.d(e,"__wbg_call_97ae9d8645dc388b",(function(){return lf})),t.d(e,"__wbg_new_0b9bfdd97583284e",(function(){return sf})),t.d(e,"__wbg_self_6d479506f72c6a71",(function(){return mf})),t.d(e,"__wbg_window_f2557cc78490aceb",(function(){return vf})),t.d(e,"__wbg_globalThis_7f206bda628d5286",(function(){return yf})),t.d(e,"__wbg_global_ba75c50d1cf384f4",(function(){return pf})),t.d(e,"__wbindgen_is_undefined",(function(){return hf})),t.d(e,"__wbg_of_d79bf3cec607f7a4",(function(){return xf})),t.d(e,"__wbg_push_740e4b286702d964",(function(){return Sf})),t.d(e,"__wbg_is_40a66842732708e7",(function(){return Af})),t.d(e,"__wbg_resolve_99fe17964f31ffc0",(function(){return Pf})),t.d(e,"__wbg_then_11f7a54d67b4bfad",(function(){return If})),t.d(e,"__wbg_buffer_3f3d764d4747d564",(function(){return Df})),t.d(e,"__wbg_newwithbyteoffsetandlength_890b478c8d7226ff",(function(){return Ff})),t.d(e,"__wbg_newwithbyteoffsetandlength_698c5100ae9c3365",(function(){return Ef})),t.d(e,"__wbg_newwithbyteoffsetandlength_7be13f49af2b2012",(function(){return Tf})),t.d(e,"__wbg_newwithbyteoffsetandlength_d9aa266703cb98be",(function(){return Bf})),t.d(e,"__wbg_newwithbyteoffsetandlength_5540e144e9b8b907",(function(){return Lf})),t.d(e,"__wbg_newwithbyteoffsetandlength_9cc9adccd861aa26",(function(){return Mf})),t.d(e,"__wbg_newwithbyteoffsetandlength_be22e5fcf4f69ab4",(function(){return kf})),t.d(e,"__wbg_set_bf3f89b92d5a34bf",(function(){return Rf})),t.d(e,"__wbindgen_debug_string",(function(){return Of})),t.d(e,"__wbindgen_throw",(function(){return Cf})),t.d(e,"__wbindgen_memory",(function(){return Vf})),t.d(e,"__wbindgen_closure_wrapper559",(function(){return Uf})),t.d(e,"__wbindgen_closure_wrapper561",(function(){return qf})),t.d(e,"__wbindgen_closure_wrapper563",(function(){return Kf})),t.d(e,"__wbindgen_closure_wrapper565",(function(){return jf})),t.d(e,"__wbindgen_closure_wrapper567",(function(){return Gf})),t.d(e,"__wbindgen_closure_wrapper569",(function(){return Wf})),t.d(e,"__wbindgen_closure_wrapper571",(function(){return Qf})),t.d(e,"__wbindgen_closure_wrapper573",(function(){return Xf})),t.d(e,"__wbindgen_closure_wrapper575",(function(){return Yf})),t.d(e,"__wbindgen_closure_wrapper808",(function(){return Nf}));var r=t(64),u=(t(384),t(385),t(8),t(386),t(387),t(388),t(389),t(390),t(391),t(392),t(393),t(394),t(395),t(396),t(397),t(398),t(399),t(400),t(401),t(402),t(403),t(404),t(405),t(406),t(407),t(408),t(409),t(410),t(412),t(411),t(61),t(41),t(62),t(91),t(122),t(29),t(201),t(30),t(31),t(123),t(377),t(378),t(413),t(124),t(414),t(379),t(415),t(380),t(381),t(382),t(416),t(460)),f=new Array(32).fill(void 0);function c(n){return f[n]}f.push(void 0,null,!0,!1);var _=f.length;function i(n){var e=c(n);return function(n){n<36||(f[n]=_,_=n)}(n),e}function o(n){_===f.length&&f.push(f.length+1);var e=_;return _=f[e],f[e]=n,e}var a=new("undefined"==typeof TextDecoder?(0,n.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});a.decode();var d=new Uint8Array;function b(){return 0===d.byteLength&&(d=new Uint8Array(u.j.buffer)),d}function g(n,e){return a.decode(b().subarray(n,n+e))}function w(n){return null==n}var l=new Float64Array;var s=new Int32Array;function m(){return 0===s.byteLength&&(s=new Int32Array(u.j.buffer)),s}var v=0,y=new("undefined"==typeof TextEncoder?(0,n.require)("util").TextEncoder:TextEncoder)("utf-8"),p="function"==typeof y.encodeInto?function(n,e){return y.encodeInto(n,e)}:function(n,e){var t=y.encode(n);return e.set(t),{read:n.length,written:t.length}};function h(n,e,t){if(void 0===t){var r=y.encode(n),u=e(r.length);return b().subarray(u,u+r.length).set(r),v=r.length,u}for(var f=n.length,c=e(f),_=b(),i=0;i127)break;_[c+i]=o}if(i!==f){0!==i&&(n=n.slice(i)),c=t(c,f,f=i+3*n.length);var a=b().subarray(c+i,c+f);i+=p(n,a).written}return v=i,c}function x(n,e,t,r){var f={a:n,b:e,cnt:1,dtor:t},c=function(){f.cnt++;var n=f.a;f.a=0;try{for(var e=arguments.length,t=new Array(e),c=0;c>>0,c(t))}function X(n,e,t,r,u,f){c(n).bindBufferRange(e>>>0,t>>>0,c(r),u,f)}function Y(n,e,t){c(n).bindSampler(e>>>0,c(t))}function N(n,e){c(n).bindVertexArray(c(e))}function H(n,e,t,r,u,f,_,i,o,a,d){c(n).blitFramebuffer(e,t,r,u,f,_,i,o,a>>>0,d>>>0)}function J(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function z(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function Z(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function $(n,e,t,r,u){c(n).clearBufferfi(e>>>0,t,r,u)}function nn(n,e,t,r,u){c(n).clearBufferfv(e>>>0,t,F(r,u))}function en(n,e,t,r,u){c(n).clearBufferiv(e>>>0,t,E(r,u))}function tn(n,e,t,r,u){c(n).clearBufferuiv(e>>>0,t,B(r,u))}function rn(n,e,t,r){return c(n).clientWaitSync(c(e),t>>>0,r>>>0)}function un(n,e,t,r,u,f,_,i,o,a){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o,a)}function fn(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function cn(n,e,t,r,u,f,_,i,o,a,d,b){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d,b)}function _n(n,e,t,r,u,f,_,i,o,a,d){c(n).compressedTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,c(d))}function on(n,e,t,r,u,f){c(n).copyBufferSubData(e>>>0,t>>>0,r,u,f)}function an(n,e,t,r,u,f,_,i,o,a){c(n).copyTexSubImage3D(e>>>0,t,r,u,f,_,i,o,a)}function dn(n){var e=c(n).createSampler();return w(e)?0:o(e)}function bn(n){var e=c(n).createVertexArray();return w(e)?0:o(e)}function gn(n,e){c(n).deleteQuery(c(e))}function wn(n,e){c(n).deleteSampler(c(e))}function ln(n,e){c(n).deleteSync(c(e))}function sn(n,e){c(n).deleteVertexArray(c(e))}function mn(n,e,t,r,u){c(n).drawArraysInstanced(e>>>0,t,r,u)}function vn(n,e){c(n).drawBuffers(c(e))}function yn(n,e,t,r,u,f){c(n).drawElementsInstanced(e>>>0,t,r>>>0,u,f)}function pn(n,e){c(n).endQuery(e>>>0)}function hn(n,e,t){var r=c(n).fenceSync(e>>>0,t>>>0);return w(r)?0:o(r)}function xn(n,e,t,r,u,f){c(n).framebufferTextureLayer(e>>>0,t>>>0,c(r),u,f)}function Sn(n,e,t,r){c(n).getBufferSubData(e>>>0,t,c(r))}function An(){return L((function(n,e,t){return o(c(n).getIndexedParameter(e>>>0,t>>>0))}),arguments)}function Pn(n,e,t){return o(c(n).getQueryParameter(c(e),t>>>0))}function In(n,e,t){return o(c(n).getSyncParameter(c(e),t>>>0))}function Dn(n,e,t,r){return c(n).getUniformBlockIndex(c(e),g(t,r))}function Fn(){return L((function(n,e,t){c(n).invalidateFramebuffer(e>>>0,c(t))}),arguments)}function En(n,e){c(n).readBuffer(e>>>0)}function Tn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function Bn(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,i)}),arguments)}function Ln(n,e,t,r,u,f){c(n).renderbufferStorageMultisample(e>>>0,t,r>>>0,u,f)}function Mn(n,e,t,r){c(n).samplerParameterf(c(e),t>>>0,r)}function kn(n,e,t,r){c(n).samplerParameteri(c(e),t>>>0,r)}function Rn(n,e,t,r,u,f){c(n).texStorage2D(e>>>0,t,r>>>0,u,f)}function On(n,e,t,r,u,f,_){c(n).texStorage3D(e>>>0,t,r>>>0,u,f,_)}function Cn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function Vn(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,a)}),arguments)}function Un(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,b)}),arguments)}function qn(){return L((function(n,e,t,r,u,f,_,i,o,a,d,b){c(n).texSubImage3D(e>>>0,t,r,u,f,_,i,o,a>>>0,d>>>0,c(b))}),arguments)}function Kn(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function jn(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function Gn(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function Wn(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Qn(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Xn(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Yn(n,e,t,r){c(n).uniformBlockBinding(c(e),t>>>0,r>>>0)}function Nn(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Hn(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Jn(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function zn(n,e,t){c(n).vertexAttribDivisor(e>>>0,t>>>0)}function Zn(n,e,t,r,u,f){c(n).vertexAttribIPointer(e>>>0,t,r>>>0,u,f)}function $n(n,e){c(n).activeTexture(e>>>0)}function ne(n,e,t){c(n).attachShader(c(e),c(t))}function ee(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function te(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function re(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function ue(n,e,t){c(n).bindTexture(e>>>0,c(t))}function fe(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function ce(n,e){c(n).blendEquation(e>>>0)}function _e(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function ie(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function oe(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function ae(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function de(n,e){c(n).compileShader(c(e))}function be(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function ge(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function we(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function le(n){var e=c(n).createProgram();return w(e)?0:o(e)}function se(n){var e=c(n).createRenderbuffer();return w(e)?0:o(e)}function me(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function ve(n){var e=c(n).createTexture();return w(e)?0:o(e)}function ye(n,e){c(n).cullFace(e>>>0)}function pe(n,e){c(n).deleteBuffer(c(e))}function he(n,e){c(n).deleteFramebuffer(c(e))}function xe(n,e){c(n).deleteProgram(c(e))}function Se(n,e){c(n).deleteRenderbuffer(c(e))}function Ae(n,e){c(n).deleteShader(c(e))}function Pe(n,e){c(n).deleteTexture(c(e))}function Ie(n,e){c(n).depthFunc(e>>>0)}function De(n,e){c(n).depthMask(0!==e)}function Fe(n,e,t){c(n).depthRange(e,t)}function Ee(n,e){c(n).disable(e>>>0)}function Te(n,e){c(n).disableVertexAttribArray(e>>>0)}function Be(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function Le(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function Me(n,e){c(n).enable(e>>>0)}function ke(n,e){c(n).enableVertexAttribArray(e>>>0)}function Re(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function Oe(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function Ce(n,e){c(n).frontFace(e>>>0)}function Ve(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function Ue(){return L((function(n,e,t){var r=c(n).getExtension(g(e,t));return w(r)?0:o(r)}),arguments)}function qe(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function Ke(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function je(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function Ge(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function We(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function Qe(n){var e=c(n).getSupportedExtensions();return w(e)?0:o(e)}function Xe(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function Ye(n,e){c(n).linkProgram(c(e))}function Ne(n,e,t){c(n).pixelStorei(e>>>0,t)}function He(n,e,t){c(n).polygonOffset(e,t)}function Je(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function ze(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Ze(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function $e(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function nt(n,e){c(n).stencilMask(e>>>0)}function et(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function tt(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function rt(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function ut(n,e,t){c(n).uniform1f(c(e),t)}function ft(n,e,t){c(n).uniform1i(c(e),t)}function ct(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function _t(n,e){c(n).useProgram(c(e))}function it(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function ot(n,e,t,r,u){c(n).viewport(e,t,r,u)}function at(n){var e;try{e=c(n)instanceof Window}catch(n){e=!1}return e}function dt(n){var e=c(n).document;return w(e)?0:o(e)}function bt(){return L((function(n){return o(c(n).innerWidth)}),arguments)}function gt(){return L((function(n){return o(c(n).innerHeight)}),arguments)}function wt(n){return c(n).devicePixelRatio}function lt(){return L((function(n,e){c(n).cancelAnimationFrame(e)}),arguments)}function st(){return L((function(n,e,t){var r=c(n).matchMedia(g(e,t));return w(r)?0:o(r)}),arguments)}function mt(){return L((function(n,e){return c(n).requestAnimationFrame(c(e))}),arguments)}function vt(n,e,t){var r=c(n)[g(e,t)];return w(r)?0:o(r)}function yt(n,e){c(n).clearTimeout(e)}function pt(){return L((function(n,e,t){return c(n).setTimeout(c(e),t)}),arguments)}function ht(n){return c(n).size}function xt(n){return c(n).type}function St(n,e){var t=h(c(e).name,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function At(n,e,t,r,u){c(n).drawArraysInstancedANGLE(e>>>0,t,r,u)}function Pt(n,e,t,r,u,f){c(n).drawElementsInstancedANGLE(e>>>0,t,r>>>0,u,f)}function It(n,e,t){c(n).vertexAttribDivisorANGLE(e>>>0,t>>>0)}function Dt(){return L((function(n,e,t,r,u){c(n).setProperty(g(e,t),g(r,u))}),arguments)}function Ft(n){return c(n).x}function Et(n){return c(n).y}function Tt(n){return c(n).clientX}function Bt(n){return c(n).clientY}function Lt(n){return c(n).offsetX}function Mt(n){return c(n).offsetY}function kt(n){return c(n).ctrlKey}function Rt(n){return c(n).shiftKey}function Ot(n){return c(n).altKey}function Ct(n){return c(n).metaKey}function Vt(n){return c(n).button}function Ut(n){return c(n).buttons}function qt(n){return c(n).movementX}function Kt(n){return c(n).movementY}function jt(n,e){c(n).bindVertexArrayOES(c(e))}function Gt(n){var e=c(n).createVertexArrayOES();return w(e)?0:o(e)}function Wt(n,e){c(n).deleteVertexArrayOES(c(e))}function Qt(n){return c(n).pointerId}function Xt(n){return c(n).deltaX}function Yt(n){return c(n).deltaY}function Nt(n){return c(n).deltaMode}function Ht(n){var e;try{e=c(n)instanceof HTMLCanvasElement}catch(n){e=!1}return e}function Jt(n){return c(n).width}function zt(n,e){c(n).width=e>>>0}function Zt(n){return c(n).height}function $t(n,e){c(n).height=e>>>0}function nr(){return L((function(n,e,t,r){var u=c(n).getContext(g(e,t),c(r));return w(u)?0:o(u)}),arguments)}function er(n){return c(n).matches}function tr(n){return c(n).now()}function rr(n,e){c(n).drawBuffersWEBGL(c(e))}function ur(n){var e=c(n).fullscreenElement;return w(e)?0:o(e)}function fr(){return L((function(n,e,t){return o(c(n).createElement(g(e,t)))}),arguments)}function cr(n,e,t){var r=c(n).getElementById(g(e,t));return w(r)?0:o(r)}function _r(){return L((function(n,e,t){var r=c(n).querySelector(g(e,t));return w(r)?0:o(r)}),arguments)}function ir(n){return o(c(n).getBoundingClientRect())}function or(){return L((function(n){c(n).requestFullscreen()}),arguments)}function ar(){return L((function(n,e,t,r,u){c(n).setAttribute(g(e,t),g(r,u))}),arguments)}function dr(){return L((function(n,e){c(n).setPointerCapture(e)}),arguments)}function br(n){return o(c(n).style)}function gr(n,e,t,r){c(n).bufferData(e>>>0,t,r>>>0)}function wr(n,e,t,r){c(n).bufferData(e>>>0,c(t),r>>>0)}function lr(n,e,t,r){c(n).bufferSubData(e>>>0,t,c(r))}function sr(n,e,t,r,u,f,_,i,o){c(n).compressedTexSubImage2D(e>>>0,t,r,u,f,_,i>>>0,c(o))}function mr(){return L((function(n,e,t,r,u,f,_,i){c(n).readPixels(e,t,r,u,f>>>0,_>>>0,c(i))}),arguments)}function vr(){return L((function(n,e,t,r,u,f,_,i,o,a){c(n).texSubImage2D(e>>>0,t,r,u,f,_,i>>>0,o>>>0,c(a))}),arguments)}function yr(n,e,t,r){c(n).uniform2fv(c(e),F(t,r))}function pr(n,e,t,r){c(n).uniform2iv(c(e),E(t,r))}function hr(n,e,t,r){c(n).uniform3fv(c(e),F(t,r))}function xr(n,e,t,r){c(n).uniform3iv(c(e),E(t,r))}function Sr(n,e,t,r){c(n).uniform4fv(c(e),F(t,r))}function Ar(n,e,t,r){c(n).uniform4iv(c(e),E(t,r))}function Pr(n,e,t,r,u){c(n).uniformMatrix2fv(c(e),0!==t,F(r,u))}function Ir(n,e,t,r,u){c(n).uniformMatrix3fv(c(e),0!==t,F(r,u))}function Dr(n,e,t,r,u){c(n).uniformMatrix4fv(c(e),0!==t,F(r,u))}function Fr(n,e){c(n).activeTexture(e>>>0)}function Er(n,e,t){c(n).attachShader(c(e),c(t))}function Tr(n,e,t){c(n).bindBuffer(e>>>0,c(t))}function Br(n,e,t){c(n).bindFramebuffer(e>>>0,c(t))}function Lr(n,e,t){c(n).bindRenderbuffer(e>>>0,c(t))}function Mr(n,e,t){c(n).bindTexture(e>>>0,c(t))}function kr(n,e,t,r,u){c(n).blendColor(e,t,r,u)}function Rr(n,e){c(n).blendEquation(e>>>0)}function Or(n,e,t){c(n).blendEquationSeparate(e>>>0,t>>>0)}function Cr(n,e,t){c(n).blendFunc(e>>>0,t>>>0)}function Vr(n,e,t,r,u){c(n).blendFuncSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Ur(n,e,t,r,u){c(n).colorMask(0!==e,0!==t,0!==r,0!==u)}function qr(n,e){c(n).compileShader(c(e))}function Kr(n,e,t,r,u,f,_,i,o){c(n).copyTexSubImage2D(e>>>0,t,r,u,f,_,i,o)}function jr(n){var e=c(n).createBuffer();return w(e)?0:o(e)}function Gr(n){var e=c(n).createFramebuffer();return w(e)?0:o(e)}function Wr(n){var e=c(n).createProgram();return w(e)?0:o(e)}function Qr(n){var e=c(n).createRenderbuffer();return w(e)?0:o(e)}function Xr(n,e){var t=c(n).createShader(e>>>0);return w(t)?0:o(t)}function Yr(n){var e=c(n).createTexture();return w(e)?0:o(e)}function Nr(n,e){c(n).cullFace(e>>>0)}function Hr(n,e){c(n).deleteBuffer(c(e))}function Jr(n,e){c(n).deleteFramebuffer(c(e))}function zr(n,e){c(n).deleteProgram(c(e))}function Zr(n,e){c(n).deleteRenderbuffer(c(e))}function $r(n,e){c(n).deleteShader(c(e))}function nu(n,e){c(n).deleteTexture(c(e))}function eu(n,e){c(n).depthFunc(e>>>0)}function tu(n,e){c(n).depthMask(0!==e)}function ru(n,e,t){c(n).depthRange(e,t)}function uu(n,e){c(n).disable(e>>>0)}function fu(n,e){c(n).disableVertexAttribArray(e>>>0)}function cu(n,e,t,r){c(n).drawArrays(e>>>0,t,r)}function _u(n,e,t,r,u){c(n).drawElements(e>>>0,t,r>>>0,u)}function iu(n,e){c(n).enable(e>>>0)}function ou(n,e){c(n).enableVertexAttribArray(e>>>0)}function au(n,e,t,r,u){c(n).framebufferRenderbuffer(e>>>0,t>>>0,r>>>0,c(u))}function du(n,e,t,r,u,f){c(n).framebufferTexture2D(e>>>0,t>>>0,r>>>0,c(u),f)}function bu(n,e){c(n).frontFace(e>>>0)}function gu(n,e,t){var r=c(n).getActiveUniform(c(e),t>>>0);return w(r)?0:o(r)}function wu(){return L((function(n,e){return o(c(n).getParameter(e>>>0))}),arguments)}function lu(n,e,t){var r=c(e).getProgramInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function su(n,e,t){return o(c(n).getProgramParameter(c(e),t>>>0))}function mu(n,e,t){var r=c(e).getShaderInfoLog(c(t)),f=w(r)?0:h(r,u.d,u.e),_=v;m()[n/4+1]=_,m()[n/4+0]=f}function vu(n,e,t){return o(c(n).getShaderParameter(c(e),t>>>0))}function yu(n,e,t,r){var u=c(n).getUniformLocation(c(e),g(t,r));return w(u)?0:o(u)}function pu(n,e){c(n).linkProgram(c(e))}function hu(n,e,t){c(n).pixelStorei(e>>>0,t)}function xu(n,e,t){c(n).polygonOffset(e,t)}function Su(n,e,t,r,u){c(n).renderbufferStorage(e>>>0,t>>>0,r,u)}function Au(n,e,t,r,u){c(n).scissor(e,t,r,u)}function Pu(n,e,t,r){c(n).shaderSource(c(e),g(t,r))}function Iu(n,e,t,r,u){c(n).stencilFuncSeparate(e>>>0,t>>>0,r,u>>>0)}function Du(n,e){c(n).stencilMask(e>>>0)}function Fu(n,e,t){c(n).stencilMaskSeparate(e>>>0,t>>>0)}function Eu(n,e,t,r,u){c(n).stencilOpSeparate(e>>>0,t>>>0,r>>>0,u>>>0)}function Tu(n,e,t,r){c(n).texParameteri(e>>>0,t>>>0,r)}function Bu(n,e,t){c(n).uniform1f(c(e),t)}function Lu(n,e,t){c(n).uniform1i(c(e),t)}function Mu(n,e,t,r,u,f){c(n).uniform4f(c(e),t,r,u,f)}function ku(n,e){c(n).useProgram(c(e))}function Ru(n,e,t,r,u,f,_){c(n).vertexAttribPointer(e>>>0,t,r>>>0,0!==u,f,_)}function Ou(n,e,t,r,u){c(n).viewport(e,t,r,u)}function Cu(n){console.debug(c(n))}function Vu(n){console.error(c(n))}function Uu(n,e){console.error(c(n),c(e))}function qu(n){console.info(c(n))}function Ku(n){console.log(c(n))}function ju(n){console.warn(c(n))}function Gu(){return L((function(n,e,t,r){c(n).addEventListener(g(e,t),c(r))}),arguments)}function Wu(){return L((function(n,e,t,r,u){c(n).addEventListener(g(e,t),c(r),c(u))}),arguments)}function Qu(){return L((function(n,e,t,r){c(n).removeEventListener(g(e,t),c(r))}),arguments)}function Xu(n){return c(n).charCode}function Yu(n){return c(n).keyCode}function Nu(n){return c(n).altKey}function Hu(n){return c(n).ctrlKey}function Ju(n){return c(n).shiftKey}function zu(n){return c(n).metaKey}function Zu(n,e){var t=h(c(e).key,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function $u(n,e){var t=h(c(e).code,u.d,u.e),r=v;m()[n/4+1]=r,m()[n/4+0]=t}function nf(n,e,t){return c(n).getModifierState(g(e,t))}function ef(n){return c(n).matches}function tf(){return L((function(n,e){c(n).addListener(c(e))}),arguments)}function rf(){return L((function(n,e){c(n).removeListener(c(e))}),arguments)}function uf(){return L((function(n,e){return o(c(n).appendChild(c(e)))}),arguments)}function ff(n){var e=c(n).target;return w(e)?0:o(e)}function cf(n){return c(n).cancelBubble}function _f(n){c(n).preventDefault()}function of(n){c(n).stopPropagation()}function af(n,e){return o(c(n)[e>>>0])}function df(n){return c(n).length}function bf(){return o(new Array)}function gf(n,e){return o(new Function(g(n,e)))}function wf(){return L((function(n,e){return o(Reflect.get(c(n),c(e)))}),arguments)}function lf(){return L((function(n,e){return o(c(n).call(c(e)))}),arguments)}function sf(){return o(new Object)}function mf(){return L((function(){return o(self.self)}),arguments)}function vf(){return L((function(){return o(window.window)}),arguments)}function yf(){return L((function(){return o(globalThis.globalThis)}),arguments)}function pf(){return L((function(){return o(global.global)}),arguments)}function hf(n){return void 0===c(n)}function xf(n){return o(Array.of(c(n)))}function Sf(n,e){return c(n).push(c(e))}function Af(n,e){return Object.is(c(n),c(e))}function Pf(n){return o(Promise.resolve(c(n)))}function If(n,e){return o(c(n).then(c(e)))}function Df(n){return o(c(n).buffer)}function Ff(n,e,t){return o(new Int8Array(c(n),e>>>0,t>>>0))}function Ef(n,e,t){return o(new Int16Array(c(n),e>>>0,t>>>0))}function Tf(n,e,t){return o(new Int32Array(c(n),e>>>0,t>>>0))}function Bf(n,e,t){return o(new Uint8Array(c(n),e>>>0,t>>>0))}function Lf(n,e,t){return o(new Uint16Array(c(n),e>>>0,t>>>0))}function Mf(n,e,t){return o(new Uint32Array(c(n),e>>>0,t>>>0))}function kf(n,e,t){return o(new Float32Array(c(n),e>>>0,t>>>0))}function Rf(){return L((function(n,e,t){return Reflect.set(c(n),c(e),c(t))}),arguments)}function Of(n,e){var t=h(function n(e){var t=Object(r.a)(e);if("number"==t||"boolean"==t||null==e)return"".concat(e);if("string"==t)return'"'.concat(e,'"');if("symbol"==t){var u=e.description;return null==u?"Symbol":"Symbol(".concat(u,")")}if("function"==t){var f=e.name;return"string"==typeof f&&f.length>0?"Function(".concat(f,")"):"Function"}if(Array.isArray(e)){var c=e.length,_="[";c>0&&(_+=n(e[0]));for(var i=1;i1))return toString.call(e);if("Object"==(o=a[1]))try{return"Object("+JSON.stringify(e)+")"}catch(n){return"Object"}return e instanceof Error?"".concat(e.name,": ").concat(e.message,"\n").concat(e.stack):o}(c(e)),u.d,u.e),f=v;m()[n/4+1]=f,m()[n/4+0]=t}function Cf(n,e){throw new Error(g(n,e))}function Vf(){return o(u.j)}function Uf(n,e,t){return o(x(n,e,108,S))}function qf(n,e,t){return o(x(n,e,108,S))}function Kf(n,e,t){return o(x(n,e,108,S))}function jf(n,e,t){return o(x(n,e,108,A))}function Gf(n,e,t){return o(x(n,e,108,S))}function Wf(n,e,t){return o(x(n,e,108,S))}function Qf(n,e,t){return o(x(n,e,108,S))}function Xf(n,e,t){return o(x(n,e,108,S))}function Yf(n,e,t){return o(x(n,e,108,S))}function Nf(n,e,t){return o(x(n,e,200,P))}}.call(this,t(383)(n))},377:function(n,e,t){t(375)("Float32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},378:function(n,e,t){t(375)("Uint32",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},379:function(n,e,t){"use strict";var r=t(1),u=t(0),f=t(3),c=t(63),_=t(42),i=u.Array;r({target:"Array",stat:!0,forced:f((function(){function n(){}return!(i.of.call(n)instanceof n)}))},{of:function(){for(var n=0,e=arguments.length,t=new(c(this)?this:i)(e);e>n;)_(t,n,arguments[n++]);return t.length=e,t}})},380:function(n,e,t){t(375)("Int8",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},381:function(n,e,t){t(375)("Int16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},382:function(n,e,t){t(375)("Uint16",(function(n){return function(e,t,r){return n(this,e,t,r)}}))},460:function(n,e,t){"use strict";var r=t.w[n.i];n.exports=r;t(367);r.l()}}]); \ No newline at end of file diff --git a/assets/js/app.2aa001d7.js b/assets/js/app.2aa001d7.js new file mode 100644 index 00000000..26d067df --- /dev/null +++ b/assets/js/app.2aa001d7.js @@ -0,0 +1,15 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[]]);!function(e){function t(t){for(var r,o,f=t[0],c=t[1],b=t[2],i=0,u=[];i=_.length?{value:void 0,done:!0}:(e=r(_,n),t.index+=e.length,{value:e,done:!1})}))},function(e,t,_){var r=_(6),n=_(12),a=_(39);e.exports=r?function(e,t,_){return n.f(e,t,a(1,_))}:function(e,t,_){return e[t]=_,e}},function(e,t){e.exports=!1},function(e,t,_){var r=_(172),n="object"==typeof self&&self&&self.Object===Object&&self,a=r||n||Function("return this")();e.exports=a},function(e,t){var _=Array.isArray;e.exports=_},function(e,t,_){"use strict";function r(e,t,_,r,n,a,o,f){var c,b="function"==typeof e?e.options:e;if(t&&(b.render=t,b.staticRenderFns=_,b._compiled=!0),r&&(b.functional=!0),a&&(b._scopeId="data-v-"+a),o?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},b._ssrRegister=c):n&&(c=f?function(){n.call(this,(b.functional?this.parent:this).$root.$options.shadowRoot)}:n),c)if(b.functional){b._injectStyles=c;var i=b.render;b.render=function(e,t){return c.call(t),i(e,t)}}else{var u=b.beforeCreate;b.beforeCreate=u?[].concat(u,c):[c]}return{exports:e,options:b}}_.d(t,"a",(function(){return r}))},function(e,t,_){var r=_(92);e.exports=function(e){return r(e.length)}},function(e,t,_){var r=_(0),n=_(158),a=_(159),o=_(129),f=_(19),c=_(5),b=c("iterator"),i=c("toStringTag"),u=o.values,d=function(e,t){if(e){if(e[b]!==u)try{f(e,b,u)}catch(t){e[b]=u}if(e[i]||f(e,i,t),n[t])for(var _ in o)if(e[_]!==o[_])try{f(e,_,o[_])}catch(t){e[_]=o[_]}}};for(var s in n)d(r[s]&&r[s].prototype,s);d(a,"DOMTokenList")},function(e,t,_){var r=_(6),n=_(11),a=_(109),o=_(39),f=_(17),c=_(69),b=_(10),i=_(142),u=Object.getOwnPropertyDescriptor;t.f=r?u:function(e,t){if(e=f(e),t=c(t),i)try{return u(e,t)}catch(e){}if(b(e,t))return o(!n(a.f,e,t),e[t])}},function(e,t,_){var r=_(2),n=r({}.toString),a=r("".slice);e.exports=function(e){return a(n(e),8,-1)}},function(e,t,_){var r,n=_(9),a=_(107),o=_(108),f=_(54),c=_(145),b=_(75),i=_(77),u=i("IE_PROTO"),d=function(){},s=function(e){return" + diff --git a/beginner/tutorial2-surface/index.html b/beginner/tutorial2-surface/index.html index f5ddc68f..e350a1aa 100644 --- a/beginner/tutorial2-surface/index.html +++ b/beginner/tutorial2-surface/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -289,7 +289,7 @@ event_loop.r store: true, }, }) -

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

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

The ops field takes a wpgu::Operations object. This tells wgpu what to do with the colors on the screen (specified by view). The load field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The store field tells wgpu whether we want to store the rendered results to the Texture behind our TextureView (in this case it's the SurfaceTexture). We use true 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: 11/30/2022, 6:10:53 PM

+

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

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

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

It's not uncommon to not clear the screen if the screen is going to be completely covered up with objects. If your scene doesn't cover the entire screen however you can end up with something like this.

./no-clear.png

# Validation Errors?

If wgpu is using Vulkan on your machine, you may run into validation errors if you are running an older version of the Vulkan SDK. You should be using at least version 1.2.182 as older versions can give out some false positives. If errors persist, you may have encountered a bug in wgpu. You can post an issue at https://github.com/gfx-rs/wgpu (opens new window)

# Challenge

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

Check out the code! (opens new window)
Last Updated: 12/10/2022, 7:18:58 PM

← →

- + diff --git a/beginner/tutorial3-pipeline/index.html b/beginner/tutorial3-pipeline/index.html index cf6a3ca9..39ac02ed 100644 --- a/beginner/tutorial3-pipeline/index.html +++ b/beginner/tutorial3-pipeline/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -84,7 +84,7 @@ fn vs_main( label: Some("Shader"), source: wgpu::ShaderSource::Wgsl(include_str!("shader.wgsl").into()), }); -

You can also use include_wgsl! macro as a small shortcut to create the ShaderModuleDescriptor.

let shader = device.create_shader_module(include_wgsl!("shader.wgsl"));
+

You can also use include_wgsl! macro as a small shortcut to create the ShaderModuleDescriptor.

let shader = device.create_shader_module(wgpu::include_wgsl!("shader.wgsl"));

One more thing, we need to create a PipelineLayout. We'll get more into this after we cover Buffers.

let render_pipeline_layout =
     device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
         label: Some("Render Pipeline Layout"),
@@ -173,7 +173,7 @@ fn vs_main(
     render_pass.draw(0..3, 0..1); // 3.
 }
 // ...
-

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

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

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

Said lovely brown triangle

# Challenge

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

Check out the code! (opens new window)
Last Updated: 11/30/2022, 6:10:53 PM

+

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

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

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

Said lovely brown triangle

# Challenge

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

Check out the code! (opens new window)
Last Updated: 12/10/2022, 7:18:58 PM

← →

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

A couple 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 we do in lighter colors.

You get the correct color using the following formula: srgb_color = ((rgb_color / 255 + 0.055) / 1.055) ^ 2.4. Doing this with an RGB value of (188, 0, 188) will give us (0.5028864580325687, 0.0, 0.5028864580325687). A little off from our (0.5, 0.0, 0.5). Instead of doing manual color conversation, you'll likely save a lot of time by using textures instead as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.

# Challenge

Create a more complex shape than the one we made (aka. more than three triangles) using a vertex buffer and an index buffer. Toggle between the two with the space key.

Check out the code! (opens new window)
Last Updated: 11/30/2022, 6:10:53 PM

+

A couple 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 we do in lighter colors.

You get the correct color using the following formula: srgb_color = ((rgb_color / 255 + 0.055) / 1.055) ^ 2.4. Doing this with an RGB value of (188, 0, 188) will give us (0.5028864580325687, 0.0, 0.5028864580325687). A little off from our (0.5, 0.0, 0.5). Instead of doing manual color conversation, you'll likely save a lot of time by using textures instead as they are stored as sRGB by default, so they don't suffer from the same color inaccuracies that vertex colors do. We'll cover textures in the next lesson.

# Challenge

Create a more complex shape than the one we made (aka. more than three triangles) using a vertex buffer and an index buffer. Toggle between the two with the space key.

Check out the code! (opens new window)
Last Updated: 12/10/2022, 7:18:58 PM

← →

- + diff --git a/beginner/tutorial5-textures/index.html b/beginner/tutorial5-textures/index.html index b5bd8c06..af024913 100644 --- a/beginner/tutorial5-textures/index.html +++ b/beginner/tutorial5-textures/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -406,7 +406,7 @@ fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> { } } } -

Phew!

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

# Challenge

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

Check out the code! (opens new window)
Last Updated: 11/30/2022, 6:10:53 PM

+

Phew!

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

# Challenge

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

Check out the code! (opens new window)
Last Updated: 12/10/2022, 7:18:58 PM

← →

- + diff --git a/beginner/tutorial6-uniforms/index.html b/beginner/tutorial6-uniforms/index.html index 6e2fe530..d925dd7b 100644 --- a/beginner/tutorial6-uniforms/index.html +++ b/beginner/tutorial6-uniforms/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -319,7 +319,7 @@ fn vs_main( 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: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM

← →

- + diff --git a/beginner/tutorial7-instancing/index.html b/beginner/tutorial7-instancing/index.html index af29d1de..2e57d82f 100644 --- a/beginner/tutorial7-instancing/index.html +++ b/beginner/tutorial7-instancing/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -183,7 +183,7 @@ fn vs_main( 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: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM

← →

- + diff --git a/beginner/tutorial8-depth/index.html b/beginner/tutorial8-depth/index.html index 4c72314e..e02aa758 100644 --- a/beginner/tutorial8-depth/index.html +++ b/beginner/tutorial8-depth/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -111,7 +111,7 @@ depth_texture, stencil_ops: None, }), }); -

And that's all we have to do! No shader code 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: 11/30/2022, 6:10:53 PM

+

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

forest_fixed.png

# Challenge

Since the depth buffer is a texture, we can sample it in the shader. Because it's a depth texture, we'll have to use the sampler_comparison uniform type and the textureSampleCompare function instead of sampler, and sampler2D respectively. Create a bind group for the depth texture (or reuse an existing one), and render it to the screen.

Check out the code! (opens new window)
Last Updated: 12/10/2022, 7:18:58 PM

← →

- + diff --git a/beginner/tutorial9-models/index.html b/beginner/tutorial9-models/index.html index eaf933b0..bee85a79 100644 --- a/beginner/tutorial9-models/index.html +++ b/beginner/tutorial9-models/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -424,7 +424,7 @@ render_pass.

The code in lib.rs will change accordingly.

render_pass.set_vertex_buffer(1, self.instance_buffer.slice(..));
 render_pass.set_pipeline(&self.render_pipeline);
 render_pass.draw_model_instanced(&self.obj_model, 0..self.instances.len() as u32, &self.camera_bind_group);
-
Check out the code! (opens new window)
Last Updated: 11/30/2022, 6:10:53 PM

+

Check out the code! (opens new window)
Last Updated: 12/10/2022, 7:18:58 PM

← →

- + diff --git a/17086f1b81b1feec068e.module.wasm b/d7094e161732e7373950.module.wasm similarity index 100% rename from 17086f1b81b1feec068e.module.wasm rename to d7094e161732e7373950.module.wasm diff --git a/index.html b/index.html index 74689b8f..3334756c 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + @@ -19,15 +19,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
  • Gunstein Vatnar
  • Lennart
  • Ian Gowen
  • Aron Granberg
  • Bernard Llanos
  • Jan Šipr
  • Zeh Fernando
  • Felix
  • Youngsuk Kim
  • オリトイツキ
  • Andrea Postal
  • charlesk
Last Updated: 11/30/2022, 6:10:53 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
  • Gunstein Vatnar
  • Lennart
  • Ian Gowen
  • Aron Granberg
  • Bernard Llanos
  • Jan Šipr
  • Zeh Fernando
  • Felix
  • Youngsuk Kim
  • オリトイツキ
  • Andrea Postal
  • charlesk
Last Updated: 12/10/2022, 7:18:58 PM

Dependencies and the window →

- + diff --git a/intermediate/pbr-notes.html b/intermediate/pbr-notes.html index f4f009af..f768bb6a 100644 --- a/intermediate/pbr-notes.html +++ b/intermediate/pbr-notes.html @@ -7,7 +7,7 @@ - + @@ -19,11 +19,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: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM
+ diff --git a/intermediate/tutorial10-lighting/index.html b/intermediate/tutorial10-lighting/index.html index b9914b70..ddf24a07 100644 --- a/intermediate/tutorial10-lighting/index.html +++ b/intermediate/tutorial10-lighting/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -640,7 +640,7 @@ let specular_color = specular_strength * light.color; let half_dir = normalize(view_dir + light_dir); let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0); -

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

./half_dir.png

Check out the code! (opens new window)
Last Updated: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM

← →

- + diff --git a/intermediate/tutorial11-normals/index.html b/intermediate/tutorial11-normals/index.html index 5dd0537f..d47a5303 100644 --- a/intermediate/tutorial11-normals/index.html +++ b/intermediate/tutorial11-normals/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -479,7 +479,7 @@ render_pass. &self.camera_bind_group, &self.light_bind_group, ); -

That gives us something like this.

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

Check out the code! (opens new window)
Last Updated: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM

← →

- + diff --git a/intermediate/tutorial12-camera/index.html b/intermediate/tutorial12-camera/index.html index 01cd562e..b82344e6 100644 --- a/intermediate/tutorial12-camera/index.html +++ b/intermediate/tutorial12-camera/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -381,7 +381,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: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM

← →

- + diff --git a/intermediate/tutorial13-terrain/index.html b/intermediate/tutorial13-terrain/index.html index ab003d4c..f255e09b 100644 --- a/intermediate/tutorial13-terrain/index.html +++ b/intermediate/tutorial13-terrain/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -134,7 +134,7 @@ fn gen_terrain( gen_terrain(global_invocation_id)

If you want 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: 11/30/2022, 6:10:53 PM
- +
  • Maybe make a diagram in blender?
  • Change to camera movement speed
    • Last Updated: 12/10/2022, 7:18:58 PM
    + diff --git a/news/0.12/index.html b/news/0.12/index.html index c99999d8..272fdeab 100644 --- a/news/0.12/index.html +++ b/news/0.12/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -61,7 +61,7 @@ I needed to do was add a padding field:

    Last Updated: 11/30/2022, 6:10:53 PM

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

    Last Updated: 12/10/2022, 7:18:58 PM

    ←

    this PR (opens new window).

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

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

    Last Updated: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM

    ←

    # Winit updated

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

    sudo apt install libfontconfig libfontconfig1-dev
-
    Last Updated: 11/30/2022, 6:10:53 PM

    +

    Last Updated: 12/10/2022, 7:18:58 PM

    ← →

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

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

    # New/Recent Articles

    Last Updated: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM

    ←

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

    # Additional resources

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

    Last Updated: 11/30/2022, 6:10:53 PM

    +

    # Additional resources

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

    Last Updated: 12/10/2022, 7:18:58 PM

    ← →

    - + diff --git a/showcase/compute/index.html b/showcase/compute/index.html index 7164eb62..6eca873b 100644 --- a/showcase/compute/index.html +++ b/showcase/compute/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -124,7 +124,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: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM

    ← →

    - + diff --git a/showcase/gifs/index.html b/showcase/gifs/index.html index 7e5b4904..b4f9e2ca 100644 --- a/showcase/gifs/index.html +++ b/showcase/gifs/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -151,7 +151,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: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM

    ← →

    - + diff --git a/showcase/imgui-demo/index.html b/showcase/imgui-demo/index.html index 4f012e60..879134b0 100644 --- a/showcase/imgui-demo/index.html +++ b/showcase/imgui-demo/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -117,7 +117,7 @@ imgui.fonts< drop(pass); display.queue.submit(Some(encoder.finish())); -

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

    ./screenshot.png

    Check out the code! (opens new window)
    Last Updated: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM
    + diff --git a/showcase/index.html b/showcase/index.html index 030fa6bd..90c90eb9 100644 --- a/showcase/index.html +++ b/showcase/index.html @@ -7,7 +7,7 @@ - + @@ -19,11 +19,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: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM

    ← →

    - + diff --git a/showcase/pong/index.html b/showcase/pong/index.html index 44849c25..559eb1f2 100644 --- a/showcase/pong/index.html +++ b/showcase/pong/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -293,7 +293,7 @@ naga = { version = "0.9", features = ["glsl-in", "spv-o }) .expect("Couldn't append canvas to document body."); } -

    Everything else works the same.

    # Summary

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

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

    Last Updated: 11/30/2022, 6:10:53 PM

    +

    Everything else works the same.

    # Summary

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

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

    Last Updated: 12/10/2022, 7:18:58 PM

    ← →

    - + diff --git a/showcase/threading/index.html b/showcase/threading/index.html index d7ed1075..b3279ff8 100644 --- a/showcase/threading/index.html +++ b/showcase/threading/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -113,7 +113,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: 11/30/2022, 6:10:53 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: 12/10/2022, 7:18:58 PM
    + diff --git a/showcase/windowless/index.html b/showcase/windowless/index.html index 6ccbe22c..007d8558 100644 --- a/showcase/windowless/index.html +++ b/showcase/windowless/index.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - + @@ -240,7 +240,7 @@ output_buffer.fn main() { pollster::block_on(run()); } -

    With all that you should have an image like this.

    a brown triangle

    Check out the code! (opens new window)
    Last Updated: 11/30/2022, 6:10:53 PM

    +

    With all that you should have an image like this.

    a brown triangle

    Check out the code! (opens new window)
    Last Updated: 12/10/2022, 7:18:58 PM

    ←

    - + +