Deploying to gh-pages from @ sotrh/learn-wgpu@b871a5070b 🚀

gh-pages
sotrh 2 years ago
parent 8f66086d83
commit 821e8e6a81

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -8,11 +8,11 @@
<meta name="description" content="">
<link rel="preload" href="/learn-wgpu/assets/css/0.styles.b003e29f.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9755eea3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/27.702b4de8.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.0a5baa1d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.d40f290b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.bbe770a2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.fd778d47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c9d2040b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.fa667d51.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ab847d83.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.2c92615d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.0c774b06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.61b15753.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.04b3176c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.4bef8391.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.0cd325c7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.93d20474.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.77a3a552.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.47917ab4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.f3e54fe7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.064681a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.33de4e71.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d70c699a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.49d319db.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.dea3d18c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.edbea28d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.bc1e9142.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.782ad442.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.3ff9e37f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e516cba8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.a8b2dd1c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.e6611f74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.c4afb320.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.77b9a0f5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.4ed9d1d4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.90dd9685.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.99c50be0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.55967133.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.b003e29f.css">
<link rel="preload" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.2de1bf6b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/39.3d8fbc4e.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/0.5e4229e0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.21164d16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.6e3c28ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.c0d0f432.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.f91f1796.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.099dc3fc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.b2e73274.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.07be5bfa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a7f12c90.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.be96e2fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8f980b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.febd05f0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.c2d0a6b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.b0f7b64a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ad42b1e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.d9180e68.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.c27e3959.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.9d561ce2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.026db6ca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d8c2cbd8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.cfbb624f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.0b9780b7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.0b6a3bc0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.765892c2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.934484ac.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.2ae430be.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e278ebaa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.b1e7e370.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.4175362b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.08dbc510.js"><link rel="prefetch" href="/learn-wgpu/assets/js/38.7d2e83b2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.12965b75.js"><link rel="prefetch" href="/learn-wgpu/assets/js/40.fbaf0afc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/41.0db8627b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/42.72586f45.js"><link rel="prefetch" href="/learn-wgpu/assets/js/43.1d82d117.js"><link rel="prefetch" href="/learn-wgpu/assets/js/44.876bb206.js"><link rel="prefetch" href="/learn-wgpu/assets/js/45.99d1900b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/46.f3051cd5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/47.5c949d8c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/48.d23a1bd1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/49.939c89a8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.b7280e16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/50.e2c3cd53.js"><link rel="prefetch" href="/learn-wgpu/assets/js/51.0212ee41.js"><link rel="prefetch" href="/learn-wgpu/assets/js/52.ccb58317.js"><link rel="prefetch" href="/learn-wgpu/assets/js/53.e8d61e97.js"><link rel="prefetch" href="/learn-wgpu/assets/js/54.8bcaeddc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/55.6b778cea.js"><link rel="prefetch" href="/learn-wgpu/assets/js/56.d249a102.js"><link rel="prefetch" href="/learn-wgpu/assets/js/57.b1c471b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/58.87ba4ec7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/59.5a9c74cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.30c107ef.js"><link rel="prefetch" href="/learn-wgpu/assets/js/60.283d850c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/61.ed182336.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.a91e08e7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.dfcc4500.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.71efa617.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>Looks like we've got some broken links.</blockquote> <a href="/learn-wgpu/" class="router-link-active">Take me home.</a></div></div><div class="global-ui"><!----></div></div>
<script src="/learn-wgpu/assets/js/app.9755eea3.js" defer></script><script src="/learn-wgpu/assets/js/27.702b4de8.js" defer></script>
<script src="/learn-wgpu/assets/js/app.2de1bf6b.js" defer></script><script src="/learn-wgpu/assets/js/39.3d8fbc4e.js" defer></script>
</body>
</html>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{395:function(e,t,r){},517:function(e,t,r){"use strict";var n=r(1),a=r(2),o=r(30),u=r(61),c=r(14),i=a("".slice),s=Math.max,l=Math.min;n({target:"String",proto:!0,forced:!"".substr||"b"!=="ab".substr(-1)},{substr:function(e,t){var r,n,a=c(o(this)),d=a.length,p=u(e);return p===1/0&&(p=0),p<0&&(p=s(d+p,0)),(r=void 0===t?d:u(t))<=0||r===1/0||p>=(n=l(p+r,d))?"":i(a,p,n)}})},518:function(e,t,r){var n={"./tutorial13_threading/tutorial13_threading.js":[521,1,2,36],"./tutorial13_threading/tutorial13_threading_bg.js":[363,1,2],"./tutorial2_surface/tutorial2_surface.js":[533,1,3,37],"./tutorial2_surface/tutorial2_surface_bg.js":[364,1,3]};function a(e){if(!r.o(n,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=n[e],a=t[0];return Promise.all(t.slice(1).map(r.e)).then((function(){return r(a)}))}a.keys=function(){return Object.keys(n)},a.id=518,e.exports=a},519:function(e,t,r){"use strict";r(395)},538:function(e,t,r){"use strict";r.r(t);var n=r(87);r(135),r(29),r(92),r(517),r(8),r(19),r(27),r(125);var a={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(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()}))}},methods:{loadExample:function(){var e=this;return Object(n.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e.loading=!0,t.prev=1,t.next=4,r(518)("./".concat(e.example,"/").concat(e.example,".js"));case 4:t.next=9;break;case 6:t.prev=6,t.t0=t.catch(1),"Error: Using exceptions for control flow, don't mind me. This isn't actually an error!"!="".concat(t.t0)?(e.error='An error occurred loading "'.concat(e.example,'": ').concat(t.t0),console.error(t.t0),e.exampleStarted=!1):e.exampleStarted=!0;case 9:e.loading=!1;case 10:case"end":return t.stop()}}),t,null,[[1,6]])})))()}},mounted:function(){var e=this;return Object(n.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e.$nextTick();case 2:if(!e.autoLoad){t.next=5;break}return t.next=5,e.loadExample();case 5:case"end":return t.stop()}}),t)})))()}},o=(r(519),r(23)),u=Object(o.a)(a,(function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{attrs:{id:"wasm-example"}},[e.error?r("div",{staticClass:"error"},[e._v("\n "+e._s(e.error)+"\n ")]):e._e(),e._v(" "),e.exampleStarted||e.autoLoad?e._e():r("button",{attrs:{disabled:e.loading},on:{click:function(t){return e.loadExample()}}},[e._v("Try "+e._s(e.exampleName)+"!")])])}),[],!1,null,null,null);t.default=u.exports}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{423: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;o<i;){for(n=o,e=t[o];n&&r(t[n-1],e)>0;)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;u<i||a<o;)t[u+a]=u<i&&a<o?n(r[u],e[a])<=0?r[u++]:e[a++]:u<i?r[u++]:e[a++];return t};t.exports=o},424:function(t,r,e){var n=e(44).match(/firefox\/(\d+)/i);t.exports=!!n&&+n[1]},425:function(t,r,e){var n=e(44);t.exports=/MSIE|Trident/.test(n)},426:function(t,r,e){var n=e(44).match(/AppleWebKit\/(\d+)\./);t.exports=!!n&&+n[1]},540:function(t,r,e){"use strict";var n=e(1),i=e(2),o=e(35),u=e(15),a=e(24),c=e(14),f=e(3),s=e(423),l=e(49),v=e(424),h=e(425),d=e(47),p=e(426),g=[],m=i(g.sort),w=i(g.push),b=f((function(){g.sort(void 0)})),k=f((function(){g.sort(null)})),D=l("sort"),x=!f((function(){if(d)return d<70;if(!(v&&v>3)){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;n<g.length;n++)r=g[n].k.charAt(0),i.charAt(i.length-1)!==r&&(i+=r);return"DGBEFHACIJK"!==i}}));n({target:"Array",proto:!0,forced:b||!k||!D||!x},{sort:function(t){void 0!==t&&o(t);var r=u(this);if(x)return void 0===t?m(r):m(r,t);var e,n,i=[],f=a(r);for(n=0;n<f;n++)n in r&&w(i,r[n]);for(s(i,function(t){return function(r,e){return void 0===e?-1:void 0===r?1:void 0!==t?+t(r,e)||0:c(r)>c(e)?1:-1}}(t)),e=i.length,n=0;n<e;)r[n]=i[n++];for(;n<f;)delete r[n++];return r}})},541:function(t,r,e){var n=e(2),i=e(16),o=Date.prototype,u=n(o.toString),a=n(o.getTime);"Invalid Date"!=String(new Date(NaN))&&i(o,"toString",(function(){var t=a(this);return t==t?u(this):"Invalid Date"}))},573:function(t,r,e){"use strict";e.r(r);e(61),e(540),e(38),e(8),e(214),e(215),e(541);var n={name:"RecentArticles",data:function(){return{}},computed:{recentFiles:function(){return this.$site.pages.filter((function(t){return t.regularPath.includes("beginner")||t.regularPath.includes("intermediate")})).sort((function(t,r){var e=new Date(t.frontmatter.published).getTime()-new Date(r.frontmatter.published).getTime();return e<0?-1:e>0?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}}]);

File diff suppressed because one or more lines are too long

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{448:function(t,r,e){},542: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,p=i(t);return p===1/0&&(p=0),p<0&&(p=s(_+p,0)),(e=void 0===r?_:i(r))<=0||e===1/0||p>=(a=c(p+e,_))?"":l(o,p,a)}})},543:function(t,r,e){var a={"./pong/pong.js":[546,0,7,48],"./pong/pong_bg.js":[368,0,7],"./tutorial10_lighting/tutorial10_lighting.js":[557,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],"./tutorial13_threading/tutorial13_threading.js":[560,0,5,52],"./tutorial13_threading/tutorial13_threading_bg.js":[366,0,5],"./tutorial1_window/tutorial1_window.js":[561,0,15,53],"./tutorial1_window/tutorial1_window_bg.js":[376,0,15],"./tutorial2_surface/tutorial2_surface.js":[562,0,8,54],"./tutorial2_surface/tutorial2_surface_bg.js":[375,0,8],"./tutorial3_pipeline/tutorial3_pipeline.js":[563,0,9,55],"./tutorial3_pipeline/tutorial3_pipeline_bg.js":[373,0,9],"./tutorial4_buffer/tutorial4_buffer.js":[564,0,10,56],"./tutorial4_buffer/tutorial4_buffer_bg.js":[374,0,10],"./tutorial5_textures/tutorial5_textures.js":[565,0,11,57],"./tutorial5_textures/tutorial5_textures_bg.js":[369,0,11],"./tutorial6_uniforms/tutorial6_uniforms.js":[566,0,12,58],"./tutorial6_uniforms/tutorial6_uniforms_bg.js":[370,0,12],"./tutorial7_instancing/tutorial7_instancing.js":[567,0,13,59],"./tutorial7_instancing/tutorial7_instancing_bg.js":[371,0,13],"./tutorial8_depth/tutorial8_depth.js":[568,0,14,60],"./tutorial8_depth/tutorial8_depth_bg.js":[372,0,14],"./tutorial9_models/tutorial9_models.js":[569,0,6,61],"./tutorial9_models/tutorial9_models_bg.js":[367,0,6]};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=543,t.exports=o},544:function(t,r,e){"use strict";e(448)},574:function(t,r,e){"use strict";e.r(r);var a=e(87);e(135),e(29),e(94),e(542),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(543)("./".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(544),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}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{394:function(t,e,n){},514:function(t,e,n){"use strict";n(394)},536: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(514),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}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{447:function(t,e,n){},539:function(t,e,n){"use strict";n(447)},572: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(539),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}}]);

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{396:function(t,e,n){},520:function(t,e,n){"use strict";n(396)},564: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(520),n(23)),a=Object(r.a)(i,void 0,void 0,!1,null,"86b323a0",null);e.default=a.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{449:function(t,e,n){},545:function(t,e,n){"use strict";n(449)},600: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(545),n(23)),a=Object(r.a)(i,void 0,void 0,!1,null,"86b323a0",null);e.default=a.exports}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{535: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}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{571: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}}]);

File diff suppressed because one or more lines are too long

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{539:function(t,e,a){"use strict";a.r(e);var n=a(23),r=Object(n.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:"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("p",[a("em",[t._v("In no particular order")])]),t._v(" "),a("ul",[a("li",[t._v("Zeh Fernando")]),t._v(" "),a("li",[t._v("The toddling chaos")]),t._v(" "),a("li",[t._v("Jan Šipr")]),t._v(" "),a("li",[t._v("Bernard Llanos")]),t._v(" "),a("li",[t._v("Aron Granberg")]),t._v(" "),a("li",[t._v("Ian Gowen")]),t._v(" "),a("li",[t._v("Paul E Hansen")]),t._v(" "),a("li",[t._v("Lennart")]),t._v(" "),a("li",[t._v("Gunstein Vatnar")]),t._v(" "),a("li",[t._v("David Laban")])])])}),[],!1,null,null,null);e.default=r.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{575:function(t,e,a){"use strict";a.r(e);var n=a(23),r=Object(n.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:"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("p",[a("em",[t._v("In no particular order")])]),t._v(" "),a("ul",[a("li",[t._v("Zeh Fernando")]),t._v(" "),a("li",[t._v("The toddling chaos")]),t._v(" "),a("li",[t._v("Jan Šipr")]),t._v(" "),a("li",[t._v("Bernard Llanos")]),t._v(" "),a("li",[t._v("Aron Granberg")]),t._v(" "),a("li",[t._v("Ian Gowen")]),t._v(" "),a("li",[t._v("Paul E Hansen")]),t._v(" "),a("li",[t._v("Lennart")]),t._v(" "),a("li",[t._v("Gunstein Vatnar")]),t._v(" "),a("li",[t._v("David Laban")])])])}),[],!1,null,null,null);e.default=r.exports}}]);

File diff suppressed because one or more lines are too long

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{549: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}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{585: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}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{556: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 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}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{592: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 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}}]);

File diff suppressed because one or more lines are too long

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{563: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}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{599: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}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{370:function(t,r,e){var n=e(201),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;o<i;){for(n=o,e=t[o];n&&r(t[n-1],e)>0;)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;u<i||a<o;)t[u+a]=u<i&&a<o?n(r[u],e[a])<=0?r[u++]:e[a++]:u<i?r[u++]:e[a++];return t};t.exports=o},371:function(t,r,e){var n=e(42).match(/firefox\/(\d+)/i);t.exports=!!n&&+n[1]},372:function(t,r,e){var n=e(42);t.exports=/MSIE|Trident/.test(n)},373:function(t,r,e){var n=e(42).match(/AppleWebKit\/(\d+)\./);t.exports=!!n&&+n[1]},515:function(t,r,e){"use strict";var n=e(1),i=e(2),o=e(33),u=e(15),a=e(24),c=e(14),f=e(3),s=e(370),l=e(47),v=e(371),h=e(372),d=e(45),p=e(373),g=[],m=i(g.sort),w=i(g.push),b=f((function(){g.sort(void 0)})),k=f((function(){g.sort(null)})),D=l("sort"),x=!f((function(){if(d)return d<70;if(!(v&&v>3)){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;n<g.length;n++)r=g[n].k.charAt(0),i.charAt(i.length-1)!==r&&(i+=r);return"DGBEFHACIJK"!==i}}));n({target:"Array",proto:!0,forced:b||!k||!D||!x},{sort:function(t){void 0!==t&&o(t);var r=u(this);if(x)return void 0===t?m(r):m(r,t);var e,n,i=[],f=a(r);for(n=0;n<f;n++)n in r&&w(i,r[n]);for(s(i,function(t){return function(r,e){return void 0===e?-1:void 0===r?1:void 0!==t?+t(r,e)||0:c(r)>c(e)?1:-1}}(t)),e=i.length,n=0;n<e;)r[n]=i[n++];for(;n<f;)delete r[n++];return r}})},516:function(t,r,e){var n=e(2),i=e(16),o=Date.prototype,u=n(o.toString),a=n(o.getTime);"Invalid Date"!=String(new Date(NaN))&&i(o,"toString",(function(){var t=a(this);return t==t?u(this):"Invalid Date"}))},537:function(t,r,e){"use strict";e.r(r);e(62),e(515),e(38),e(8),e(213),e(214),e(516);var n={name:"RecentArticles",data:function(){return{}},computed:{recentFiles:function(){return this.$site.pages.filter((function(t){return t.regularPath.includes("beginner")||t.regularPath.includes("intermediate")})).sort((function(t,r){var e=new Date(t.frontmatter.published).getTime()-new Date(r.frontmatter.published).getTime();return e<0?-1:e>0?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}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

@ -7,7 +7,7 @@
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<meta property="article:modified_time" content="2022-03-26T00:15:11.000Z">
<meta property="article:modified_time" content="2022-03-26T16:52:34.000Z">
<meta property="og:site_name" content="Learn Wgpu">
<meta property="og:title" content="The Surface">
<meta property="og:type" content="website">
@ -19,8 +19,8 @@
<meta name="twitter:data1" content="Benjamin Hansen">
<meta name="twitter:creator" content="https://twitter.com/sotrh760">
<link rel="preload" href="/learn-wgpu/assets/css/0.styles.b003e29f.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9755eea3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.77b9a0f5.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/16.2c92615d.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/10.d40f290b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.fa667d51.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.0a5baa1d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.bbe770a2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.fd778d47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c9d2040b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ab847d83.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.0c774b06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.61b15753.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.04b3176c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.4bef8391.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.0cd325c7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.93d20474.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.77a3a552.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.47917ab4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.f3e54fe7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.064681a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.33de4e71.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.702b4de8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d70c699a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.49d319db.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.dea3d18c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.edbea28d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.bc1e9142.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.782ad442.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.3ff9e37f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e516cba8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.a8b2dd1c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.e6611f74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.c4afb320.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.4ed9d1d4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.90dd9685.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.99c50be0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.55967133.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.b003e29f.css">
<link rel="preload" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.2de1bf6b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.07be5bfa.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/28.d8c2cbd8.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.b0f7b64a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/26.9d561ce2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/0.5e4229e0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.21164d16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.6e3c28ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.c0d0f432.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.f91f1796.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.099dc3fc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.b2e73274.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a7f12c90.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.be96e2fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8f980b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.febd05f0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.c2d0a6b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ad42b1e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.d9180e68.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.c27e3959.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.026db6ca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.cfbb624f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.0b9780b7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.0b6a3bc0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.765892c2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.934484ac.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.2ae430be.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e278ebaa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.b1e7e370.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.4175362b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.08dbc510.js"><link rel="prefetch" href="/learn-wgpu/assets/js/38.7d2e83b2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/39.3d8fbc4e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.12965b75.js"><link rel="prefetch" href="/learn-wgpu/assets/js/40.fbaf0afc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/41.0db8627b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/42.72586f45.js"><link rel="prefetch" href="/learn-wgpu/assets/js/43.1d82d117.js"><link rel="prefetch" href="/learn-wgpu/assets/js/44.876bb206.js"><link rel="prefetch" href="/learn-wgpu/assets/js/45.99d1900b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/46.f3051cd5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/47.5c949d8c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/48.d23a1bd1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/49.939c89a8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.b7280e16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/50.e2c3cd53.js"><link rel="prefetch" href="/learn-wgpu/assets/js/51.0212ee41.js"><link rel="prefetch" href="/learn-wgpu/assets/js/52.ccb58317.js"><link rel="prefetch" href="/learn-wgpu/assets/js/53.e8d61e97.js"><link rel="prefetch" href="/learn-wgpu/assets/js/54.8bcaeddc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/55.6b778cea.js"><link rel="prefetch" href="/learn-wgpu/assets/js/56.d249a102.js"><link rel="prefetch" href="/learn-wgpu/assets/js/57.b1c471b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/58.87ba4ec7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/59.5a9c74cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.30c107ef.js"><link rel="prefetch" href="/learn-wgpu/assets/js/60.283d850c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/61.ed182336.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.a91e08e7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.dfcc4500.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.71efa617.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/learn-wgpu/" aria-current="page" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-surface/" aria-current="page" class="active sidebar-link">The Surface</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial2-surface/#first-some-housekeeping-state" class="sidebar-link">First, some housekeeping: State</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial2-surface/#state-new" class="sidebar-link">State::new()</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial2-surface/#resize" class="sidebar-link">resize()</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial2-surface/#input" class="sidebar-link">input()</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial2-surface/#update" class="sidebar-link">update()</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial2-surface/#render" class="sidebar-link">render()</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial2-surface/#wait-what-s-going-on-with-renderpassdescriptor" class="sidebar-link">Wait, what's going on with RenderPassDescriptor?</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial2-surface/#validation-errors" class="sidebar-link">Validation Errors?</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial2-surface/#challenge" class="sidebar-link">Challenge</a></li></ul></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="the-surface"><a href="#the-surface" class="header-anchor">#</a> The Surface</h1> <h2 id="first-some-housekeeping-state"><a href="#first-some-housekeeping-state" class="header-anchor">#</a> First, some housekeeping: State</h2> <p>For convenience, we're going to pack all the fields into a struct and create some methods on that.</p> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token comment">// main.rs</span>
@ -287,7 +287,7 @@ event_loop<span class="token punctuation">.</span><span class="token function">r
store<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><p>The <code>RenderPassColorAttachment</code> has the <code>view</code> field which informs <code>wgpu</code> what texture to save the colors to. In this case we specify <code>view</code> that we created using <code>surface.get_current_texture()</code>. This means that any colors we draw to this attachment will get drawn to the screen.</p> <p>The <code>resolve_target</code> is the texture that will receive the resolved output. This will be the same as <code>view</code> unless multisampling is enabled. We don't need to specify this, so we leave it as <code>None</code>.</p> <p>The <code>ops</code> field takes a <code>wpgu::Operations</code> object. This tells wgpu what to do with the colors on the screen (specified by <code>view</code>). The <code>load</code> field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The <code>store</code> field tells wgpu whether we want to store the rendered results to the <code>Texture</code> behind our <code>TextureView</code> (in this case it's the <code>SurfaceTexture</code>). We use <code>true</code> as we do want to store our render results. There are cases when you wouldn't want to but those</p> <div class="note"><p>It's not uncommon to not clear the screen if the screen is going to be completely covered up with objects. If your scene doesn't cover the entire screen however you can end up with something like this.</p> <p><img src="/learn-wgpu/assets/img/no-clear.753f913f.png" alt="./no-clear.png"></p></div> <h2 id="validation-errors"><a href="#validation-errors" class="header-anchor">#</a> Validation Errors?</h2> <p>If wgpu is using Vulkan on your machine, you may run into validation errors if you are running an older version of the Vulkan SDK. You should be using at least version <code>1.2.182</code> as older versions can give out some false positives. If errors persist, you may have encountered a bug in wgpu. You can post an issue at <a href="https://github.com/gfx-rs/wgpu" target="_blank" rel="noopener noreferrer">https://github.com/gfx-rs/wgpu<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Modify the <code>input()</code> method to capture mouse events, and update the clear color using that. <em>Hint: you'll probably need to use <code>WindowEvent::CursorMoved</code></em>.</p> <div id="wasm-example"><!----> <button>Try Tutorial2_surface!</button></div> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial2-surface/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 12:15:11 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div><p>The <code>RenderPassColorAttachment</code> has the <code>view</code> field which informs <code>wgpu</code> what texture to save the colors to. In this case we specify <code>view</code> that we created using <code>surface.get_current_texture()</code>. This means that any colors we draw to this attachment will get drawn to the screen.</p> <p>The <code>resolve_target</code> is the texture that will receive the resolved output. This will be the same as <code>view</code> unless multisampling is enabled. We don't need to specify this, so we leave it as <code>None</code>.</p> <p>The <code>ops</code> field takes a <code>wpgu::Operations</code> object. This tells wgpu what to do with the colors on the screen (specified by <code>view</code>). The <code>load</code> field tells wgpu how to handle colors stored from the previous frame. Currently, we are clearing the screen with a bluish color. The <code>store</code> field tells wgpu whether we want to store the rendered results to the <code>Texture</code> behind our <code>TextureView</code> (in this case it's the <code>SurfaceTexture</code>). We use <code>true</code> as we do want to store our render results. There are cases when you wouldn't want to but those</p> <div class="note"><p>It's not uncommon to not clear the screen if the screen is going to be completely covered up with objects. If your scene doesn't cover the entire screen however you can end up with something like this.</p> <p><img src="/learn-wgpu/assets/img/no-clear.753f913f.png" alt="./no-clear.png"></p></div> <h2 id="validation-errors"><a href="#validation-errors" class="header-anchor">#</a> Validation Errors?</h2> <p>If wgpu is using Vulkan on your machine, you may run into validation errors if you are running an older version of the Vulkan SDK. You should be using at least version <code>1.2.182</code> as older versions can give out some false positives. If errors persist, you may have encountered a bug in wgpu. You can post an issue at <a href="https://github.com/gfx-rs/wgpu" target="_blank" rel="noopener noreferrer">https://github.com/gfx-rs/wgpu<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="challenge"><a href="#challenge" class="header-anchor">#</a> Challenge</h2> <p>Modify the <code>input()</code> method to capture mouse events, and update the clear color using that. <em>Hint: you'll probably need to use <code>WindowEvent::CursorMoved</code></em>.</p> <div id="wasm-example"><!----> <button>Try Tutorial2_surface!</button></div> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial2-surface/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 4:52:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/learn-wgpu/beginner/tutorial1-window/" class="prev">
Dependencies and the window
@ -296,6 +296,6 @@ event_loop<span class="token punctuation">.</span><span class="token function">r
</a>
</span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
<script src="/learn-wgpu/assets/js/app.9755eea3.js" defer></script><script src="/learn-wgpu/assets/js/5.77b9a0f5.js" defer></script><script src="/learn-wgpu/assets/js/16.2c92615d.js" defer></script><script src="/learn-wgpu/assets/js/10.d40f290b.js" defer></script><script src="/learn-wgpu/assets/js/14.fa667d51.js" defer></script>
<script src="/learn-wgpu/assets/js/app.2de1bf6b.js" defer></script><script src="/learn-wgpu/assets/js/17.07be5bfa.js" defer></script><script src="/learn-wgpu/assets/js/28.d8c2cbd8.js" defer></script><script src="/learn-wgpu/assets/js/22.b0f7b64a.js" defer></script><script src="/learn-wgpu/assets/js/26.9d561ce2.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -7,7 +7,7 @@
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<meta property="article:modified_time" content="2022-03-26T00:15:11.000Z">
<meta property="article:modified_time" content="2022-03-26T16:52:34.000Z">
<meta property="og:site_name" content="Learn Wgpu">
<meta property="og:title" content="Model Loading">
<meta property="og:type" content="website">
@ -19,8 +19,8 @@
<meta name="twitter:data1" content="Benjamin Hansen">
<meta name="twitter:creator" content="https://twitter.com/sotrh760">
<link rel="preload" href="/learn-wgpu/assets/css/0.styles.b003e29f.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9755eea3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.77b9a0f5.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/13.c9d2040b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/10.d40f290b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.fa667d51.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.0a5baa1d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.bbe770a2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.fd778d47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ab847d83.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.2c92615d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.0c774b06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.61b15753.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.04b3176c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.4bef8391.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.0cd325c7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.93d20474.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.77a3a552.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.47917ab4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.f3e54fe7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.064681a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.33de4e71.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.702b4de8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d70c699a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.49d319db.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.dea3d18c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.edbea28d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.bc1e9142.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.782ad442.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.3ff9e37f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e516cba8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.a8b2dd1c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.e6611f74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.c4afb320.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.4ed9d1d4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.90dd9685.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.99c50be0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.55967133.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.b003e29f.css">
<link rel="preload" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.2de1bf6b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.07be5bfa.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/25.c27e3959.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.b0f7b64a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/26.9d561ce2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/0.5e4229e0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.21164d16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.6e3c28ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.c0d0f432.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.f91f1796.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.099dc3fc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.b2e73274.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a7f12c90.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.be96e2fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8f980b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.febd05f0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.c2d0a6b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ad42b1e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.d9180e68.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.026db6ca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d8c2cbd8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.cfbb624f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.0b9780b7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.0b6a3bc0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.765892c2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.934484ac.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.2ae430be.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e278ebaa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.b1e7e370.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.4175362b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.08dbc510.js"><link rel="prefetch" href="/learn-wgpu/assets/js/38.7d2e83b2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/39.3d8fbc4e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.12965b75.js"><link rel="prefetch" href="/learn-wgpu/assets/js/40.fbaf0afc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/41.0db8627b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/42.72586f45.js"><link rel="prefetch" href="/learn-wgpu/assets/js/43.1d82d117.js"><link rel="prefetch" href="/learn-wgpu/assets/js/44.876bb206.js"><link rel="prefetch" href="/learn-wgpu/assets/js/45.99d1900b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/46.f3051cd5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/47.5c949d8c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/48.d23a1bd1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/49.939c89a8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.b7280e16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/50.e2c3cd53.js"><link rel="prefetch" href="/learn-wgpu/assets/js/51.0212ee41.js"><link rel="prefetch" href="/learn-wgpu/assets/js/52.ccb58317.js"><link rel="prefetch" href="/learn-wgpu/assets/js/53.e8d61e97.js"><link rel="prefetch" href="/learn-wgpu/assets/js/54.8bcaeddc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/55.6b778cea.js"><link rel="prefetch" href="/learn-wgpu/assets/js/56.d249a102.js"><link rel="prefetch" href="/learn-wgpu/assets/js/57.b1c471b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/58.87ba4ec7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/59.5a9c74cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.30c107ef.js"><link rel="prefetch" href="/learn-wgpu/assets/js/60.283d850c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/61.ed182336.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.a91e08e7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.dfcc4500.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.71efa617.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/learn-wgpu/" aria-current="page" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-surface/" class="sidebar-link">The Surface</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" aria-current="page" class="active sidebar-link">Model Loading</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial9-models/#accessing-files-in-the-res-folder" class="sidebar-link">Accessing files in the res folder</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial9-models/#accessing-files-from-wasm" class="sidebar-link">Accessing files from WASM</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial9-models/#loading-models-with-tobj" class="sidebar-link">Loading models with TOBJ</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial9-models/#rendering-a-mesh" class="sidebar-link">Rendering a mesh</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial9-models/#using-the-correct-textures" class="sidebar-link">Using the correct textures</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/beginner/tutorial9-models/#rendering-the-entire-model" class="sidebar-link">Rendering the entire model</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="model-loading"><a href="#model-loading" class="header-anchor">#</a> Model Loading</h1> <p>Up to this point we've been creating our models manually. While this is an acceptable way to do this, but it's really slow if we want to include complex models with lots of polygons. Because of this, we're going modify our code to leverage the obj model format so that we can create a model in a software such as blender and display it in our code.</p> <p>Our <code>main.rs</code> file is getting pretty cluttered, let's create a <code>model.rs</code> file that we can put our model loading code into.</p> <div class="language-rust extra-class"><pre class="language-rust"><code><span class="token comment">// model.rs</span>
@ -422,7 +422,7 @@ render_pass<span class="token punctuation">.</span><span class="token function">
</code></pre></div><p>The code in <code>main.rs</code> will change accordingly.</p> <div class="language-rust extra-class"><pre class="language-rust"><code>render_pass<span class="token punctuation">.</span><span class="token function">set_vertex_buffer</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token keyword">self</span><span class="token punctuation">.</span>instance_buffer<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">..</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
render_pass<span class="token punctuation">.</span><span class="token function">set_pipeline</span><span class="token punctuation">(</span><span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>render_pipeline<span class="token punctuation">)</span><span class="token punctuation">;</span>
render_pass<span class="token punctuation">.</span><span class="token function">draw_model_instanced</span><span class="token punctuation">(</span><span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>obj_model<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">..</span><span class="token keyword">self</span><span class="token punctuation">.</span>instances<span class="token punctuation">.</span><span class="token function">len</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token keyword">u32</span><span class="token punctuation">,</span> <span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>camera_bind_group<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div id="wasm-example"><!----> <button>Try Tutorial9_models!</button></div> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial9-models/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 12:15:11 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div><div id="wasm-example"><!----> <button>Try Tutorial9_models!</button></div> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/beginner/tutorial9-models/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 4:52:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/learn-wgpu/beginner/tutorial8-depth/" class="prev">
The Depth Buffer
@ -431,6 +431,6 @@ render_pass<span class="token punctuation">.</span><span class="token function">
</a>
</span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
<script src="/learn-wgpu/assets/js/app.9755eea3.js" defer></script><script src="/learn-wgpu/assets/js/5.77b9a0f5.js" defer></script><script src="/learn-wgpu/assets/js/13.c9d2040b.js" defer></script><script src="/learn-wgpu/assets/js/10.d40f290b.js" defer></script><script src="/learn-wgpu/assets/js/14.fa667d51.js" defer></script>
<script src="/learn-wgpu/assets/js/app.2de1bf6b.js" defer></script><script src="/learn-wgpu/assets/js/17.07be5bfa.js" defer></script><script src="/learn-wgpu/assets/js/25.c27e3959.js" defer></script><script src="/learn-wgpu/assets/js/22.b0f7b64a.js" defer></script><script src="/learn-wgpu/assets/js/26.9d561ce2.js" defer></script>
</body>
</html>

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

@ -7,7 +7,7 @@
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<meta property="article:modified_time" content="2022-03-26T00:15:11.000Z">
<meta property="article:modified_time" content="2022-03-26T16:52:34.000Z">
<meta property="og:site_name" content="Learn Wgpu">
<meta property="og:title" content="Sources">
<meta property="og:type" content="website">
@ -19,11 +19,11 @@
<meta name="twitter:data1" content="Benjamin Hansen">
<meta name="twitter:creator" content="https://twitter.com/sotrh760">
<link rel="preload" href="/learn-wgpu/assets/css/0.styles.b003e29f.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9755eea3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.77b9a0f5.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/30.edbea28d.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.0a5baa1d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.d40f290b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.bbe770a2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.fd778d47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c9d2040b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.fa667d51.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ab847d83.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.2c92615d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.0c774b06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.61b15753.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.04b3176c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.4bef8391.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.0cd325c7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.93d20474.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.77a3a552.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.47917ab4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.f3e54fe7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.064681a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.33de4e71.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.702b4de8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d70c699a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.49d319db.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.dea3d18c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.bc1e9142.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.782ad442.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.3ff9e37f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e516cba8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.a8b2dd1c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.e6611f74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.c4afb320.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.4ed9d1d4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.90dd9685.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.99c50be0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.55967133.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.b003e29f.css">
<link rel="preload" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.2de1bf6b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.07be5bfa.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/42.72586f45.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/0.5e4229e0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.21164d16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.6e3c28ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.c0d0f432.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.f91f1796.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.099dc3fc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.b2e73274.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a7f12c90.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.be96e2fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8f980b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.febd05f0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.c2d0a6b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.b0f7b64a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ad42b1e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.d9180e68.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.c27e3959.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.9d561ce2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.026db6ca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d8c2cbd8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.cfbb624f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.0b9780b7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.0b6a3bc0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.765892c2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.934484ac.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.2ae430be.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e278ebaa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.b1e7e370.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.4175362b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.08dbc510.js"><link rel="prefetch" href="/learn-wgpu/assets/js/38.7d2e83b2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/39.3d8fbc4e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.12965b75.js"><link rel="prefetch" href="/learn-wgpu/assets/js/40.fbaf0afc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/41.0db8627b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/43.1d82d117.js"><link rel="prefetch" href="/learn-wgpu/assets/js/44.876bb206.js"><link rel="prefetch" href="/learn-wgpu/assets/js/45.99d1900b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/46.f3051cd5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/47.5c949d8c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/48.d23a1bd1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/49.939c89a8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.b7280e16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/50.e2c3cd53.js"><link rel="prefetch" href="/learn-wgpu/assets/js/51.0212ee41.js"><link rel="prefetch" href="/learn-wgpu/assets/js/52.ccb58317.js"><link rel="prefetch" href="/learn-wgpu/assets/js/53.e8d61e97.js"><link rel="prefetch" href="/learn-wgpu/assets/js/54.8bcaeddc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/55.6b778cea.js"><link rel="prefetch" href="/learn-wgpu/assets/js/56.d249a102.js"><link rel="prefetch" href="/learn-wgpu/assets/js/57.b1c471b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/58.87ba4ec7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/59.5a9c74cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.30c107ef.js"><link rel="prefetch" href="/learn-wgpu/assets/js/60.283d850c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/61.ed182336.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.a91e08e7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.dfcc4500.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.71efa617.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/learn-wgpu/" aria-current="page" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-surface/" class="sidebar-link">The Surface</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="sources"><a href="#sources" class="header-anchor">#</a> Sources</h1> <ul><li>https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading</li> <li>http://jimmiejohnsson84.me/pages/rendering_pbr.html</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 12:15:11 AM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
<script src="/learn-wgpu/assets/js/app.9755eea3.js" defer></script><script src="/learn-wgpu/assets/js/5.77b9a0f5.js" defer></script><script src="/learn-wgpu/assets/js/30.edbea28d.js" defer></script>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/learn-wgpu/" aria-current="page" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-surface/" class="sidebar-link">The Surface</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="sources"><a href="#sources" class="header-anchor">#</a> Sources</h1> <ul><li>https://www.scratchapixel.com/lessons/3d-basic-rendering/introduction-to-shading/diffuse-lambertian-shading</li> <li>http://jimmiejohnsson84.me/pages/rendering_pbr.html</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 4:52:34 PM</span></div></footer> <!----> </main></div></div><div class="global-ui"><!----></div></div>
<script src="/learn-wgpu/assets/js/app.2de1bf6b.js" defer></script><script src="/learn-wgpu/assets/js/17.07be5bfa.js" defer></script><script src="/learn-wgpu/assets/js/42.72586f45.js" defer></script>
</body>
</html>

@ -7,7 +7,7 @@
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<meta property="article:modified_time" content="2022-03-26T00:15:11.000Z">
<meta property="article:modified_time" content="2022-03-26T16:52:34.000Z">
<meta property="og:site_name" content="Learn Wgpu">
<meta property="og:title" content="Working with Lights">
<meta property="og:type" content="website">
@ -19,8 +19,8 @@
<meta name="twitter:data1" content="Benjamin Hansen">
<meta name="twitter:creator" content="https://twitter.com/sotrh760">
<link rel="preload" href="/learn-wgpu/assets/css/0.styles.b003e29f.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9755eea3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.77b9a0f5.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/6.4ed9d1d4.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/10.d40f290b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.fa667d51.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.0a5baa1d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.bbe770a2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.fd778d47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c9d2040b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ab847d83.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.2c92615d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.0c774b06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.61b15753.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.04b3176c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.4bef8391.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.0cd325c7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.93d20474.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.77a3a552.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.47917ab4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.f3e54fe7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.064681a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.33de4e71.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.702b4de8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d70c699a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.49d319db.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.dea3d18c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.edbea28d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.bc1e9142.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.782ad442.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.3ff9e37f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e516cba8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.a8b2dd1c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.e6611f74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.c4afb320.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.90dd9685.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.99c50be0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.55967133.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.b003e29f.css">
<link rel="preload" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.2de1bf6b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.07be5bfa.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/18.a7f12c90.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.b0f7b64a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/26.9d561ce2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/0.5e4229e0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.21164d16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.6e3c28ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.c0d0f432.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.f91f1796.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.099dc3fc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.b2e73274.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.be96e2fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8f980b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.febd05f0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.c2d0a6b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ad42b1e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.d9180e68.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.c27e3959.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.026db6ca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d8c2cbd8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.cfbb624f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.0b9780b7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.0b6a3bc0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.765892c2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.934484ac.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.2ae430be.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e278ebaa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.b1e7e370.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.4175362b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.08dbc510.js"><link rel="prefetch" href="/learn-wgpu/assets/js/38.7d2e83b2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/39.3d8fbc4e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.12965b75.js"><link rel="prefetch" href="/learn-wgpu/assets/js/40.fbaf0afc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/41.0db8627b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/42.72586f45.js"><link rel="prefetch" href="/learn-wgpu/assets/js/43.1d82d117.js"><link rel="prefetch" href="/learn-wgpu/assets/js/44.876bb206.js"><link rel="prefetch" href="/learn-wgpu/assets/js/45.99d1900b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/46.f3051cd5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/47.5c949d8c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/48.d23a1bd1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/49.939c89a8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.b7280e16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/50.e2c3cd53.js"><link rel="prefetch" href="/learn-wgpu/assets/js/51.0212ee41.js"><link rel="prefetch" href="/learn-wgpu/assets/js/52.ccb58317.js"><link rel="prefetch" href="/learn-wgpu/assets/js/53.e8d61e97.js"><link rel="prefetch" href="/learn-wgpu/assets/js/54.8bcaeddc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/55.6b778cea.js"><link rel="prefetch" href="/learn-wgpu/assets/js/56.d249a102.js"><link rel="prefetch" href="/learn-wgpu/assets/js/57.b1c471b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/58.87ba4ec7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/59.5a9c74cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.30c107ef.js"><link rel="prefetch" href="/learn-wgpu/assets/js/60.283d850c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/61.ed182336.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.a91e08e7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.dfcc4500.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.71efa617.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/learn-wgpu/" aria-current="page" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-surface/" class="sidebar-link">The Surface</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" aria-current="page" class="active sidebar-link">Working with Lights</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial10-lighting/#ray-path-tracing" class="sidebar-link">Ray/Path Tracing</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial10-lighting/#the-blinn-phong-model" class="sidebar-link">The Blinn-Phong Model</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial10-lighting/#seeing-the-light" class="sidebar-link">Seeing the light</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial10-lighting/#ambient-lighting" class="sidebar-link">Ambient Lighting</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial10-lighting/#diffuse-lighting" class="sidebar-link">Diffuse Lighting</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial10-lighting/#the-normal-matrix" class="sidebar-link">The normal matrix</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial10-lighting/#specular-lighting" class="sidebar-link">Specular Lighting</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial10-lighting/#the-half-direction" class="sidebar-link">The half direction</a></li></ul></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="working-with-lights"><a href="#working-with-lights" class="header-anchor">#</a> Working with Lights</h1> <div class="warn"><p>The shaders used in this example don't compile on WASM using version 0.12.0 of wgpu. They are working on the &quot;gecko&quot; branch, so to get the code working for WASM, change the wgpu entries in Cargo.toml to be the following.</p> <div class="language-toml extra-class"><pre class="language-toml"><code><span class="token punctuation">[</span><span class="token table class-name">dependencies</span><span class="token punctuation">]</span>
@ -643,7 +643,7 @@ let specular_color = specular_strength * light.color;
let half_dir = normalize(view_dir + light_dir);
let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);
</code></pre></div><p>It's hard to tell the difference, but here's the results.</p> <p><img src="/learn-wgpu/assets/img/half_dir.bbcc23b8.png" alt="./half_dir.png"></p> <div id="wasm-example"><!----> <button>Try Tutorial10_lighting!</button></div> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial10-lighting/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 12:15:11 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div><p>It's hard to tell the difference, but here's the results.</p> <p><img src="/learn-wgpu/assets/img/half_dir.bbcc23b8.png" alt="./half_dir.png"></p> <div id="wasm-example"><!----> <button>Try Tutorial10_lighting!</button></div> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial10-lighting/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 4:52:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/learn-wgpu/beginner/tutorial9-models/" class="prev">
Model Loading
@ -652,6 +652,6 @@ let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);
</a>
</span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
<script src="/learn-wgpu/assets/js/app.9755eea3.js" defer></script><script src="/learn-wgpu/assets/js/5.77b9a0f5.js" defer></script><script src="/learn-wgpu/assets/js/6.4ed9d1d4.js" defer></script><script src="/learn-wgpu/assets/js/10.d40f290b.js" defer></script><script src="/learn-wgpu/assets/js/14.fa667d51.js" defer></script>
<script src="/learn-wgpu/assets/js/app.2de1bf6b.js" defer></script><script src="/learn-wgpu/assets/js/17.07be5bfa.js" defer></script><script src="/learn-wgpu/assets/js/18.a7f12c90.js" defer></script><script src="/learn-wgpu/assets/js/22.b0f7b64a.js" defer></script><script src="/learn-wgpu/assets/js/26.9d561ce2.js" defer></script>
</body>
</html>

@ -7,7 +7,7 @@
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<meta property="article:modified_time" content="2022-03-26T00:15:11.000Z">
<meta property="article:modified_time" content="2022-03-26T16:52:34.000Z">
<meta property="og:site_name" content="Learn Wgpu">
<meta property="og:title" content="Normal Mapping">
<meta property="og:type" content="website">
@ -19,8 +19,8 @@
<meta name="twitter:data1" content="Benjamin Hansen">
<meta name="twitter:creator" content="https://twitter.com/sotrh760">
<link rel="preload" href="/learn-wgpu/assets/css/0.styles.b003e29f.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9755eea3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.77b9a0f5.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/7.90dd9685.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/10.d40f290b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.fa667d51.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.0a5baa1d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.bbe770a2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.fd778d47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c9d2040b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ab847d83.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.2c92615d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.0c774b06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.61b15753.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.04b3176c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.4bef8391.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.0cd325c7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.93d20474.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.77a3a552.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.47917ab4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.f3e54fe7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.064681a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.33de4e71.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.702b4de8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d70c699a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.49d319db.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.dea3d18c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.edbea28d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.bc1e9142.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.782ad442.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.3ff9e37f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e516cba8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.a8b2dd1c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.e6611f74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.c4afb320.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.4ed9d1d4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.99c50be0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.55967133.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.b003e29f.css">
<link rel="preload" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.2de1bf6b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.07be5bfa.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/19.be96e2fa.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.b0f7b64a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/26.9d561ce2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/0.5e4229e0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.21164d16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.6e3c28ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.c0d0f432.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.f91f1796.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.099dc3fc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.b2e73274.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a7f12c90.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8f980b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.febd05f0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.c2d0a6b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ad42b1e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.d9180e68.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.c27e3959.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.026db6ca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d8c2cbd8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.cfbb624f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.0b9780b7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.0b6a3bc0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.765892c2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.934484ac.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.2ae430be.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e278ebaa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.b1e7e370.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.4175362b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.08dbc510.js"><link rel="prefetch" href="/learn-wgpu/assets/js/38.7d2e83b2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/39.3d8fbc4e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.12965b75.js"><link rel="prefetch" href="/learn-wgpu/assets/js/40.fbaf0afc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/41.0db8627b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/42.72586f45.js"><link rel="prefetch" href="/learn-wgpu/assets/js/43.1d82d117.js"><link rel="prefetch" href="/learn-wgpu/assets/js/44.876bb206.js"><link rel="prefetch" href="/learn-wgpu/assets/js/45.99d1900b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/46.f3051cd5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/47.5c949d8c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/48.d23a1bd1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/49.939c89a8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.b7280e16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/50.e2c3cd53.js"><link rel="prefetch" href="/learn-wgpu/assets/js/51.0212ee41.js"><link rel="prefetch" href="/learn-wgpu/assets/js/52.ccb58317.js"><link rel="prefetch" href="/learn-wgpu/assets/js/53.e8d61e97.js"><link rel="prefetch" href="/learn-wgpu/assets/js/54.8bcaeddc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/55.6b778cea.js"><link rel="prefetch" href="/learn-wgpu/assets/js/56.d249a102.js"><link rel="prefetch" href="/learn-wgpu/assets/js/57.b1c471b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/58.87ba4ec7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/59.5a9c74cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.30c107ef.js"><link rel="prefetch" href="/learn-wgpu/assets/js/60.283d850c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/61.ed182336.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.a91e08e7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.dfcc4500.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.71efa617.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/learn-wgpu/" aria-current="page" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-surface/" class="sidebar-link">The Surface</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" aria-current="page" class="active sidebar-link">Normal Mapping</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial11-normals/#tangent-space-to-world-space" class="sidebar-link">Tangent Space to World Space</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial11-normals/#the-tangent-and-the-bitangent" class="sidebar-link">The tangent, and the bitangent</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial11-normals/#world-space-to-tangent-space" class="sidebar-link">World Space to Tangent Space</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial11-normals/#srgb-and-normal-textures" class="sidebar-link">Srgb and normal textures</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial11-normals/#unrelated-stuff" class="sidebar-link">Unrelated stuff</a></li></ul></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="normal-mapping"><a href="#normal-mapping" class="header-anchor">#</a> Normal Mapping</h1> <div class="warn"><p>The shaders used in this example don't compile on WASM using version 0.12.0 of wgpu. They are working on the &quot;gecko&quot; branch, so to get the code working for WASM, change the wgpu entries in Cargo.toml to be the following.</p> <div class="language-toml extra-class"><pre class="language-toml"><code><span class="token punctuation">[</span><span class="token table class-name">dependencies</span><span class="token punctuation">]</span>
@ -493,7 +493,7 @@ render_pass<span class="token punctuation">.</span><span class="token function">
<span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>camera_bind_group<span class="token punctuation">,</span>
<span class="token operator">&amp;</span><span class="token keyword">self</span><span class="token punctuation">.</span>light_bind_group<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>That gives us something like this.</p> <p><img src="/learn-wgpu/assets/img/debug_material.b374492b.png" alt=""></p> <p>You can find the textures I use in the Github Repository.</p> <div id="wasm-example"><!----> <button>Try Tutorial11_normals!</button></div> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial11-normals/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 12:15:11 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div><p>That gives us something like this.</p> <p><img src="/learn-wgpu/assets/img/debug_material.b374492b.png" alt=""></p> <p>You can find the textures I use in the Github Repository.</p> <div id="wasm-example"><!----> <button>Try Tutorial11_normals!</button></div> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial11-normals/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 4:52:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="prev">
Working with Lights
@ -502,6 +502,6 @@ render_pass<span class="token punctuation">.</span><span class="token function">
</a>
</span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
<script src="/learn-wgpu/assets/js/app.9755eea3.js" defer></script><script src="/learn-wgpu/assets/js/5.77b9a0f5.js" defer></script><script src="/learn-wgpu/assets/js/7.90dd9685.js" defer></script><script src="/learn-wgpu/assets/js/10.d40f290b.js" defer></script><script src="/learn-wgpu/assets/js/14.fa667d51.js" defer></script>
<script src="/learn-wgpu/assets/js/app.2de1bf6b.js" defer></script><script src="/learn-wgpu/assets/js/17.07be5bfa.js" defer></script><script src="/learn-wgpu/assets/js/19.be96e2fa.js" defer></script><script src="/learn-wgpu/assets/js/22.b0f7b64a.js" defer></script><script src="/learn-wgpu/assets/js/26.9d561ce2.js" defer></script>
</body>
</html>

@ -7,7 +7,7 @@
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="">
<meta property="article:modified_time" content="2022-03-26T00:15:11.000Z">
<meta property="article:modified_time" content="2022-03-26T16:52:34.000Z">
<meta property="og:site_name" content="Learn Wgpu">
<meta property="og:title" content="A Better Camera">
<meta property="og:type" content="website">
@ -19,8 +19,8 @@
<meta name="twitter:data1" content="Benjamin Hansen">
<meta name="twitter:creator" content="https://twitter.com/sotrh760">
<link rel="preload" href="/learn-wgpu/assets/css/0.styles.b003e29f.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.9755eea3.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/5.77b9a0f5.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/19.04b3176c.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/10.d40f290b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/14.fa667d51.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/1.0a5baa1d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.bbe770a2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.fd778d47.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.c9d2040b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.ab847d83.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.2c92615d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.0c774b06.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.61b15753.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.4bef8391.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.0cd325c7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.93d20474.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.77a3a552.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.47917ab4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.f3e54fe7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.064681a4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.33de4e71.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.702b4de8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d70c699a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.49d319db.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.dea3d18c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.edbea28d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.bc1e9142.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.782ad442.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.3ff9e37f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e516cba8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.a8b2dd1c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.e6611f74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.c4afb320.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.4ed9d1d4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.90dd9685.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.99c50be0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.55967133.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.b003e29f.css">
<link rel="preload" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.2de1bf6b.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.07be5bfa.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/31.765892c2.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/22.b0f7b64a.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/26.9d561ce2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/0.5e4229e0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.21164d16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.6e3c28ad.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.c0d0f432.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.f91f1796.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.099dc3fc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.b2e73274.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.a7f12c90.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.be96e2fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.8f980b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.febd05f0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.c2d0a6b3.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.ad42b1e2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.d9180e68.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.c27e3959.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.026db6ca.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.d8c2cbd8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.cfbb624f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.0b9780b7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.0b6a3bc0.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.934484ac.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.2ae430be.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.e278ebaa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.b1e7e370.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.4175362b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.08dbc510.js"><link rel="prefetch" href="/learn-wgpu/assets/js/38.7d2e83b2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/39.3d8fbc4e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.12965b75.js"><link rel="prefetch" href="/learn-wgpu/assets/js/40.fbaf0afc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/41.0db8627b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/42.72586f45.js"><link rel="prefetch" href="/learn-wgpu/assets/js/43.1d82d117.js"><link rel="prefetch" href="/learn-wgpu/assets/js/44.876bb206.js"><link rel="prefetch" href="/learn-wgpu/assets/js/45.99d1900b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/46.f3051cd5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/47.5c949d8c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/48.d23a1bd1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/49.939c89a8.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.b7280e16.js"><link rel="prefetch" href="/learn-wgpu/assets/js/50.e2c3cd53.js"><link rel="prefetch" href="/learn-wgpu/assets/js/51.0212ee41.js"><link rel="prefetch" href="/learn-wgpu/assets/js/52.ccb58317.js"><link rel="prefetch" href="/learn-wgpu/assets/js/53.e8d61e97.js"><link rel="prefetch" href="/learn-wgpu/assets/js/54.8bcaeddc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/55.6b778cea.js"><link rel="prefetch" href="/learn-wgpu/assets/js/56.d249a102.js"><link rel="prefetch" href="/learn-wgpu/assets/js/57.b1c471b9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/58.87ba4ec7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/59.5a9c74cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.30c107ef.js"><link rel="prefetch" href="/learn-wgpu/assets/js/60.283d850c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/61.ed182336.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.a91e08e7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.dfcc4500.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.71efa617.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/learn-wgpu/" aria-current="page" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-surface/" class="sidebar-link">The Surface</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" aria-current="page" class="active sidebar-link">A Better Camera</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial12-camera/#the-camera" class="sidebar-link">The Camera</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial12-camera/#the-projection" class="sidebar-link">The Projection</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/intermediate/tutorial12-camera/#cleaning-up-main-rs" class="sidebar-link">Cleaning up main.rs</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="a-better-camera"><a href="#a-better-camera" class="header-anchor">#</a> A Better Camera</h1> <div class="warn"><p>The shaders used in this example don't compile on WASM using version 0.12.0 of wgpu. They are working on the &quot;gecko&quot; branch, so to get the code working for WASM, change the wgpu entries in Cargo.toml to be the following.</p> <div class="language-toml extra-class"><pre class="language-toml"><code><span class="token punctuation">[</span><span class="token table class-name">dependencies</span><span class="token punctuation">]</span>
@ -383,7 +383,7 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>With that we should be able to move our camera wherever we want.</p> <p><img src="/learn-wgpu/assets/img/screenshot.4f5740bc.png" alt="./screenshot.png"></p> <div id="wasm-example"><!----> <button>Try Tutorial12_camera!</button></div> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial12-camera/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 12:15:11 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div><p>With that we should be able to move our camera wherever we want.</p> <p><img src="/learn-wgpu/assets/img/screenshot.4f5740bc.png" alt="./screenshot.png"></p> <div id="wasm-example"><!----> <button>Try Tutorial12_camera!</button></div> <div class="auto-github-link"><a href="https://github.com/sotrh/learn-wgpu/tree/master/code/intermediate/tutorial12-camera/" target="_blank" rel="noopener noreferrer">Check out the code!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/26/2022, 4:52:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/learn-wgpu/intermediate/tutorial11-normals/" class="prev">
Normal Mapping
@ -392,6 +392,6 @@
</a>
</span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
<script src="/learn-wgpu/assets/js/app.9755eea3.js" defer></script><script src="/learn-wgpu/assets/js/5.77b9a0f5.js" defer></script><script src="/learn-wgpu/assets/js/19.04b3176c.js" defer></script><script src="/learn-wgpu/assets/js/10.d40f290b.js" defer></script><script src="/learn-wgpu/assets/js/14.fa667d51.js" defer></script>
<script src="/learn-wgpu/assets/js/app.2de1bf6b.js" defer></script><script src="/learn-wgpu/assets/js/17.07be5bfa.js" defer></script><script src="/learn-wgpu/assets/js/31.765892c2.js" defer></script><script src="/learn-wgpu/assets/js/22.b0f7b64a.js" defer></script><script src="/learn-wgpu/assets/js/26.9d561ce2.js" defer></script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save