https://cdn.webgamedev.com/_next/static/chunks/pages/newsletter/002-8a19b60bbde4995b.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[984],{5168:(e,t,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/newsletter/002",function(){return n(3664)}])},3664:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>x,useTOC:()=>c});var r=n(5893),s=n(7812),i=n(1304),h=n(8925),o=n(8445),l=n(7654),a=n(6454),d=n(7024);function c(e){return[{value:"\uD83D\uDD25 Headlines",id:"-headlines",depth:2},{value:"✍️ Content",id:"️-content",depth:2},{value:"✨ Games & Demos",id:"-games--demos",depth:2}]}let x=(0,s.c)(function(e){let{toc:t=c(e)}=e,n={a:"a",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...(0,h.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{children:"Newsletter – Issue 002"}),"\n",(0,r.jsx)(d.V,{value:"2022-12-20"}),"\n",(0,r.jsx)(a.Gw,{}),"\n",(0,r.jsx)(a.TK,{}),"\n",(0,r.jsxs)(n.p,{children:["This is the second issue of the ",(0,r.jsx)(n.strong,{children:"Web Game Dev Newsletter"}),"! \uD83D\uDE80"]}),"\n",(0,r.jsx)(n.h2,{id:t[0].id,children:t[0].value}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"2 node-based shader graph editors"})," got released: ",(0,r.jsx)(n.a,{href:"https://nodetoy.co/",children:(0,r.jsx)(n.strong,{children:"NodeToy"})}),", a platform to create, fork, share, and export shader effects to GLSL, or to ",(0,r.jsx)(n.a,{href:"https://github.com/NodeToy/three-nodetoy",children:"Three.js"})," and ",(0,r.jsx)(n.a,{href:"https://github.com/NodeToy/react-nodetoy",children:"React Three Fiber"})," via a NodeToy URL in your components. If NodeToy is a little too ",(0,r.jsx)(n.em,{children:"platform-y"})," for you, you will like ",(0,r.jsx)(n.a,{href:"https://www.alma.sh/",children:(0,r.jsx)(n.strong,{children:"Alma"})})," by ",(0,r.jsx)(n.a,{href:"https://x.com/emilwidlund",children:"Emil Widlund"}),", a similar tool to create GLSL shaders via a neat UI that lets you jump right into a graph playground without any account."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(l.Mj,{})," It looks like we may be getting ",(0,r.jsx)(n.a,{href:"https://x.com/Tojiro/status/1603087438150217728",children:(0,r.jsx)(n.strong,{children:"WebGPU in Chrome\ndesktop"})})," sometime around May 2022!"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(l.t4,{})," ",(0,r.jsx)(n.a,{href:"https://www.youtube.com/watch?v=uEJ-Rnm2yOE",children:(0,r.jsx)(n.strong,{children:"SvelteKit hit version 1.0"})}),", which\nis the perfect opportunity to bring your attention to ",(0,r.jsx)(n.a,{href:"https://threlte.xyz/",children:(0,r.jsx)(n.strong,{children:"Threlte"})}),", the\nequivalent of React Three Fiber in the ",(0,r.jsx)(n.a,{href:"https://svelte.dev/",children:(0,r.jsx)(n.strong,{children:"Svelte"})})," world. Thanks to the way\nSvelte works, you can animate Threlte objects directly instead of manipulating the underlying\nThree.js object via refs like you would do in R3F. The version 5 of Threlte got released recently\nwith some ",(0,r.jsx)(n.a,{href:"https://threlte.xyz/core-transition",children:"major changes"}),", including an API that’s closer to\nR3F, but the docs are still transitioning to the new paradigm. Note that Threlte has\n",(0,r.jsx)(n.a,{href:"https://threlte.xyz/rapier/rigid-body",children:"built-in"})," support for the ",(0,r.jsx)(n.a,{href:"https://rapier.rs/",children:(0,r.jsx)(n.strong,{children:"Rapier"})}),"\nphysics engine!"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(l.k9,{})," ",(0,r.jsx)(n.a,{href:"https://x.com/Andersonmancini",children:"Anderson Mancini"})," hosted a ",(0,r.jsx)(n.a,{href:"https://x.com/i/spaces/1RDGlapyYjjJL",children:(0,r.jsx)(n.strong,{children:"Three.js\nevent"})})," on Twitter Spaces with ",(0,r.jsx)(n.a,{href:"https://x.com/bruno_simon",children:"Bruno\nSimon"}),", ",(0,r.jsx)(n.a,{href:"https://x.com/N8Programs",children:"N8"}),", and ",(0,r.jsx)(n.a,{href:"https://x.com/nicolas_web3",children:"Nicolas\nCarvajal"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(l.DO,{})," There is now an experimental API to bring up a ",(0,r.jsx)(n.a,{href:"https://developer.oculus.com/documentation/web/webxr-keyboard/",children:(0,r.jsx)(n.strong,{children:"WebXR System\

1nKeyboard"})})," on Meta Quest."]}),"\n",(0,r.jsx)(n.h2,{id:t[1].id,children:t[1].value}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\uD83C\uDFAC ",(0,r.jsx)(l.t4,{})," An ",(0,r.jsx)(n.a,{href:"https://www.youtube.com/watch?v=89LYeHOncVk",children:(0,r.jsx)(n.strong,{children:"introduction to Threlte"})}),"\n(v4) by ",(0,r.jsx)(n.a,{href:"https://x.com/joyofcodedev",children:"Joy of Code"}),". Available in ",(0,r.jsx)(n.a,{href:"https://joyofcode.xyz/introduction-to-3d-with-svelte",children:"text\nversion"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:["✍️ \uD83C\uDF93 A ",(0,r.jsx)(n.a,{href:"https://typefully.com/DanHollick/gpnhhud",children:(0,r.jsx)(n.strong,{children:"visual explanation of shaders"})})," by ",(0,r.jsx)(n.a,{href:"https://x.com/DanHollick",children:"Dan Hollick"}),"."]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:t[2].id,children:t[2].value}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\uD83C\uDFAE ",(0,r.jsx)(l.lS,{})," ",(0,r.jsx)(n.a,{href:"https://venge.io/",children:(0,r.jsx)(n.strong,{children:"Venge"})})," by ",(0,r.jsx)(n.a,{href:"https://onrush.studio/",children:"OnRush Studio"}),".\nProbably the most impressive full-fledged web game I have seen so far."]}),"\n",(0,r.jsxs)(n.li,{children:["\uD83C\uDFAE ",(0,r.jsx)(l.t4,{})," ",(0,r.jsx)(n.a,{href:"https://threlte.xyz/arcade-machine",children:(0,r.jsx)(n.strong,{children:"Arcade Machine"})})," by ",(0,r.jsx)(n.a,{href:"https://github.com/grischaerbe",children:"Grischa\nErbe"})," to showcase Threlte."]}),"\n",(0,r.jsxs)(n.li,{children:["\uD83C\uDFAE ",(0,r.jsx)(l.oO,{})," ",(0,r.jsx)(n.a,{href:"https://voeux2023.telkea.com/",children:(0,r.jsx)(n.strong,{children:"A Christmas game"})})," by ",(0,r.jsx)(n.a,{href:"https://x.com/s_lempens",children:"S\xe9bastien\nLempens"})," (press Space or click the glove icon to switch to\ndigging)."]}),"\n",(0,r.jsxs)(n.li,{children:["\uD83C\uDFAE ",(0,r.jsx)(l.Ru,{})," (WIP) ",(0,r.jsx)(n.a,{href:"https://summoners.io/",children:(0,r.jsx)(n.strong,{children:"A fantasy card game"})})," by ",(0,r.jsx)(n.a,{href:"https://x.com/sdothaney",children:"Stephen\nHaney"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["See more on the ✨ ",(0,r.jsx)(n.a,{href:"https://www.webgamedev.com/games-demos",children:(0,r.jsx)(n.strong,{children:"Games & Demos"})})," page or \uD83C\uDFAE ",(0,r.jsx)(n.a,{href:"https://webgamer.io/",children:(0,r.jsx)(n.strong,{children:"WebGamer.io"})}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["As a bonus, ",(0,r.jsx)(n.a,{href:"https://www.blender.org/",children:(0,r.jsx)(n.strong,{children:"Blender"})})," published ",(0,r.jsx)(n.a,{href:"https://www.youtube.com/watch?v=UXqq0ZvbOnk",children:(0,r.jsx)(n.strong,{children:"Charge"})}),", a beautiful 4-minutes ",(0,r.jsx)(n.strong,{children:"open movie"}),"."]}),"\n",(0,r.jsx)(o.lz,{tweetId:"1605194541069660161"})]})},"/newsletter/002",{filePath:"src/pages/newsletter/002.mdx",pageMap:i.v,frontMatter:{},title:"Newsletter – Issue 002"},"undefined"==typeof RemoteContent?c:RemoteContent.useTOC)},7024:(e,t,n)=>{"use strict";n.d(t,{V:()=>s});var r=n(5893);let s=e=>{let{value:t}=e;return(0,r.jsxs)("div",{style:{textAlign:"center",marginTop:"1rem"},children:["\uD83D\uDCC6 ",t]})}},8445:(e,t,n)=>{"use strict";n.d(t,{O5:()=>d,ZP:()=>c,lz:()=>a,mN:()=>l});var r=n(5893),s=n(1664),i=n.n(s),h=n(2702);let o=()=>(0,r.jsx)("div",{style:{margin:"16px auto",borderRadius:5,maxWidth:338,overflow:"hidden",display:"flex",justifyContent:"center"},children:(0,r.jsx)("iframe",{className:"newsletter-iframe",scrolling:"no",src:"https://buttondown.email/webgamedev?as_embed=true"})}),l=()=>(0,r.jsxs)("p",{style:{textAlign:"center"},children:["You can also ",(0,r.jsx)("b",{children:"subscribe"})," to the \uD83D\uDC8C"," ",(0,r.jsx)(i(),{href:"/newsletter",className:"_text-primary-600 _underline _decoration-from-font [text-underline-position:under]",children:(0,r.jsx)("b",{children:"newsletter"})})," ","to keep up with the web game dev world!"]}),a=e=>{let{tweetId:t,blueskyUrl:n}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("p",{style:{textAlign:"center",marginTop:30,marginBottom:0},children:["Liked this issue? \uD83D\uDC26"," ",(0,r.jsx)(h.Z,{href:"https://x.com/intent/retweet?tweet_id=".concat(t),target:"_blank",rel:"noopener",children:(0,r.jsx)("b",{children:"Retweet it"})}),","," ",n&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(h.Z,{href:n,target:"_blank",rel:"noopener",children:(0,r.jsx)("b",{children:"\uD83E\uDD8B Repost it on Bluesky"})}),","," "]}),"join our"," ",(0,r.jsx)(h.Z,{href:"https://www.webgamedev.com/discord",children:(0,r.jsx)("b",{children:"Discord"})}),", and ",(0,r.jsx)("b",{children:"Subscribe"})," below!"]}),(0,r.jsx)(o,{})]})},d=()=>(0,r.jsx)(h.Z,{href:"https://www.webgamedev.com/discord",target:"_blank",rel:"noopener",children:(0,r.jsx)("b",{children:"Discord"})}),c=o}

1,6454:(e,t,n)=>{"use strict";n.d(t,{Bk:()=>l,Gw:()=>h,TK:()=>o});var r=n(5893),s=n(645),i=n.n(s);let h=()=>(0,r.jsx)(i(),{id:"b1873e13791f1664",children:"main ul{list-style-type:none!important;margin-left:0!important}main ul img{margin-right:2px}@media(max-width:500px){article main ul{margin-left:0!important}}"}),o=()=>(0,r.jsx)(i(),{id:"e396f806efe464a1",children:"main ul{line-height:1.6rem}"}),l=()=>(0,r.jsx)(i(),{id:"407caf13b3605e72",children:"main h1 img,main h2 img,main h3 img,main h4 img,main h5 img,main h6 img{position:relative;top:-2px}"})},8925:(e,t,n)=>{"use strict";n.d(t,{a:()=>l});var r=n(1151),s=n(5675),i=n.n(s),h=n(7294);let o={img:e=>(0,h.createElement)("object"==typeof e.src?i():"img",e)},l=e=>(0,r.a)({...o,...e})},7812:(e,t,n)=>{"use strict";n.d(t,{c:()=>a});var r=n(5893),s=n(3665),i=n(8644);let h=(0,n(7294).createContext)({}),o=h.Provider;h.displayName="SSG";var l=n(8925);function a(e,t,n,r){let i=globalThis[s.ud];return i.route=t,i.pageMap=n.pageMap,i.context[t]={Content:e,pageOpts:n,useTOC:r},d}function d({__nextra_pageMap:e=[],__nextra_dynamic_opts:t,...n}){let h=globalThis[s.ud],{Layout:l,themeConfig:a}=h,{route:d,locale:x}=(0,i.t)(),u=h.context[d];if(!u)throw Error(`No content found for the "${d}" route. Please report it as a bug.`);let{pageOpts:j,useTOC:p,Content:m}=u;if(d.startsWith("/["))j.pageMap=e;else for(let{route:t,children:n}of e){let e=t.split("/").slice(x?2:1);(function e(t,[n,...r]){for(let s of t)if("children"in s&&n===s.name)return r.length?e(s.children,r):s})(j.pageMap,e).children=n}if(t){let{title:e,frontMatter:n}=t;j={...j,title:e,frontMatter:n}}return(0,r.jsx)(l,{themeConfig:a,pageOpts:j,pageProps:n,children:(0,r.jsx)(o,{value:n,children:(0,r.jsx)(c,{useTOC:p,children:(0,r.jsx)(m,{...n})})})})}function c({children:e,useTOC:t}){let{wrapper:n}=(0,l.a)();return(0,r.jsx)(x,{useTOC:t,wrapper:n,children:e})}function x({children:e,useTOC:t,wrapper:n,...s}){let i=t(s);return n?(0,r.jsx)(n,{toc:i,children:e}):e}}},e=>{var t=t=>e(e.s=t);e.O(0,[1304,7654,2888,9774,179],()=>t(5168)),_N_E=e.O()}]);