https://cdn.webgamedev.com/_next/static/chunks/pages/engines-libraries/dev-tools-a9b7838672e6fe4b.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6113],{141:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/engines-libraries/dev-tools",function(){return s(5988)}])},5988:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>p,useTOC:()=>h});var n=s(5893),r=s(7812),i=s(1304),l=s(8925),o=s(4306),a=s(1639);s(2702);var c=s(6945),d=s(8289);function h(e){return[{value:"Three.js",id:"threejs",depth:2},{value:"React Three Fiber",id:"react-three-fiber",depth:2},{value:"WebGL",id:"webgl",depth:2},{value:"Debug UI",id:"debug-ui",depth:2},{value:"GLSL / VS Code Extensions",id:"glsl--vs-code-extensions",depth:2},{value:"Theatre.js",id:"theatrejs",depth:2},{value:"Mobile browser consoles",id:"mobile-browser-consoles",depth:2}]}let p=(0,r.c)(function(e){let{toc:t=h(e)}=e,s={a:"a",h1:"h1",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.h1,{children:"\uD83E\uDDF0 Dev Tools"}),"\n",(0,n.jsx)(s.p,{children:"In order to get a more well-rounded environment for Three.js development, you can use the following tools:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:["Chrome ",(0,n.jsx)(s.a,{href:"https://developer.chrome.com/docs/devtools/rendering/performance/",children:(0,n.jsx)(s.strong,{children:"Frame Rendering Stats"})})," in the ",(0,n.jsx)(s.a,{href:"https://developer.chrome.com/docs/devtools/rendering/#open-rendering",children:(0,n.jsx)(s.strong,{children:"Rendering tab"})})]}),"\n"]}),"\n",(0,n.jsx)(s.h2,{id:t[0].id,children:t[0].value}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/oslabs-beta/BACE",children:(0,n.jsx)(s.strong,{children:"three-tools by BACE"})})," – Chrome"]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://addons.mozilla.org/en-US/firefox/addon/three-js-developer-tools/",children:(0,n.jsx)(s.strong,{children:"Three.js Developer Tools"})})," – Firefox"]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/mrdoob/stats.js/",children:(0,n.jsx)(s.strong,{children:"Stats.js"})})," – Included in R3F ",(0,n.jsx)(s.a,{href:"https://github.com/pmndrs/drei#stats",children:(0,n.jsx)(s.strong,{children:"Drei"})})]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/RenaudRohlinger/stats-gl",children:(0,n.jsx)(s.strong,{children:"stats-gl"})})," – WebGL performance monitoring tool"]}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://threejs.org/editor/",children:(0,n.jsx)(s.strong,{children:"Three.js Editor"})})}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"https://github.com/Fyrestar/THREE.DrawCallInspector",children:(0,n.jsx)(s.strong,{children:"DrawCallInspector"})})," (Chrome, experimental)"]}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://github.com/michealparks/three-inspect",children:(0,n.jsx)(s.strong,{children:"three-inspect"})})}),"\n"]}),"\n",(0,n.jsx)(s.h2,{id:t[1].id,children:t[1].value}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://triplex.dev/",children:(0,n.jsx)(s.strong,{children:"TRIPLEX"})})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://github.com/utsuboco/r3f-perf",children:(0,n.jsx)(s.strong,{children:"R3F-Perf"})})}),"\n"]}),"\n",(0,n.jsx)(s.h2,{id:t[2].id,children:t[2].value}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://spector.babylonjs.com/",children:(0,n.jsx)(s.strong,{children:"Spector.js"})})}),"\n"]}),"\n",(0,n.jsx)(s.h2,{id:t[3].id,children:t[3].value}),"\n",(0,n.jsx)(o.Z,{projects:[d.nY.lilGui,d.nY.datGui,d.nY.leva,d.nY.tweakpane,{...d.nY.uil,collapsed:!0},{...d.nY.guify,collapsed:!0},{...d.nY.reactDatGui,collapsed:!0},{...d.nY.controlPanel,collapsed:!0},{...d.nY.oui,collapsed:!0},{...d.nY.controlKit,collapsed:!0}]}),"\n",(0,n.jsx)(c.Z,{projects:[d.nY.lilGui,d.nY.datGui,d.nY.leva,d.nY.tweakpane]}),"\n",(0,n.jsxs)(s.p,{children:["Example of ",(0,n.jsx)(s.a,{href:"https://x.com/BrianBreiholz/status/1624365863515070466",children:"passing an existing Valtio object"})," to Leva."]}),"\n",(0,n.jsx)(s.h2,{id:t[4].id,children:t[4].value}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://marketplace.visualstudio.com/items?itemName=degreat.3e",children:(0,n.jsx)(s.strong,{children:"3e"})})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://marketplace.visualstudio.com/items?itemName=slevesque.shader",children:(0,n.jsx)(s.strong,{children:"Shader languages support"})})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://marketplace.visualstudio.com/items?itemName=boyswan.glsl-literal",children:(0,n.jsx)(s.strong,{children:"GLSL Literal"})})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://marketplace.visualstudio.com/items?itemName=raczzalan.webgl-glsl-editor",children:(0,n.jsx)(s.strong,{children:"WebGL GLSL Editor"})})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://marketplace.visualstudio.com/items?itemName=circledev.glsl-canvas",children:(0,n.jsx)(s.strong,{children:"glsl-canvas"})})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://github.com/NaridaL/glsl-language-toolkit/tree/main/packages/prettier-plugin-glsl",children:(0,n.jsx)(s.strong,{children:"prettier-plugin-glsl"})})}),"\n"]}),"\n",(0,n.jsx)(s.h2,{id:t[5].id,children:t[5].value}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(a.Z,{...d.fO}

1)," is an animation library and toolkit to create cinematic scenes and animating\nobjects of your scene. It contains a visual editor that can transform objects of your scene, which can\nbe quite useful for debugging and positioning objects. It supports ",(0,n.jsx)(s.a,{href:"https://www.theatrejs.com/docs/latest/getting-started/with-three-js",children:"vanilla Three.js"}),"\nand ",(0,n.jsx)(s.a,{href:"https://www.theatrejs.com/docs/latest/getting-started/with-react-three-fiber",children:"React Three Fiber"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.a,{href:"https://motion-canvas.github.io/",children:"Motion Canvas"})," is an alternative to Theatre.js."]}),"\n",(0,n.jsx)(s.h2,{id:t[6].id,children:t[6].value}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.a,{href:"https://github.com/liriliri/eruda",children:"Eruda"})," and ",(0,n.jsx)(s.a,{href:"https://github.com/Tencent/vConsole",children:"vConsole"})," provide developer consoles for mobile browsers, useful for debugging on devices that don’t have built-in dev tools."]})]})},"/engines-libraries/dev-tools",{filePath:"src/pages/engines-libraries/dev-tools.mdx",pageMap:i.v,frontMatter:{},title:"\uD83E\uDDF0 Dev Tools"},"undefined"==typeof RemoteContent?h:RemoteContent.useTOC)},1639:(e,t,s)=>{"use strict";s.d(t,{Z:()=>h});var n=s(5893),r=s(2702),i=s(3685),l=s(7654);let o="black-text",a="red-text",c="orange-text",d="green-text",h=e=>{let{name:t,url:s,repo:h,stars:p,npm:j,downloads:x,lastCommitDate:m,description:u,shortenYears:g=!0,withNewlineDescription:f=!0,isNew:v,crate:b,crateDownloads:y,ts:w,hide:_=!1,...k}=e,N="https://github.com/".concat(h),L="https://www.npmjs.com/package/".concat(j),M="https://crates.io/crates/".concat(b),T=m&&Math.round((Date.now()-new Date(m).getTime())/1e3/60/60/24/365),C=p>=1e3?"".concat(Math.round(p/1e3),"k"):p,S=p>=1e4?d:p<100?a:p<1e3?c:o,P=T>=2?a:c,D=x>=1e6?"".concat(Math.round(x/1e6),"M"):x>=1e3?"".concat(Math.round(x/1e3),"k"):x,E=y?y>=1e6?"".concat(Math.round(y/1e6),"M"):y>=1e3?"".concat(Math.round(y/1e3),"k"):y:"",F=x>=1e5?d:x<1e3?a:x<1e4?c:o,R=y?y>=1e6?d:y<1e4?a:y<1e5?c:o:"";return(0,n.jsxs)("span",{style:{opacity:_?"0.6":"1"},...k,children:[(0,n.jsx)(r.Z,{href:null!=s?s:h?N:void 0,style:{fontWeight:"bold"},children:t}),(h||j||u||v||m||w)&&(0,n.jsxs)(n.Fragment,{children:["ts"===w&&(0,n.jsx)("span",{style:{marginLeft:5,position:"relative",top:-2},children:(0,n.jsx)(l.Av,{})}),"js"===w&&(0,n.jsx)("span",{style:{marginLeft:5,position:"relative",top:-2},children:(0,n.jsx)(l.Xn,{})}),"dt"===w&&(0,n.jsx)("span",{style:{marginLeft:5,position:"relative",top:-2},children:(0,n.jsx)(l.Pu,{})}),v&&(0,n.jsx)("span",{style:{marginLeft:6},children:(0,n.jsx)(i.k8,{style:{opacity:1,display:"inline-block",width:24,height:24,position:"relative",top:-1,color:"#00b300",marginRight:-3}})}),p&&(0,n.jsxs)(r.Z,{href:h?N:void 0,className:S,style:{marginLeft:8,whiteSpace:"nowrap"},children:[C,(0,n.jsx)(i.r7,{style:{opacity:.8,display:"inline-block",marginLeft:4,width:15,position:"relative",top:-2}})]}),x&&j&&(0,n.jsxs)(r.Z,{href:L,className:F,style:{marginLeft:8,whiteSpace:"nowrap"},children:[D,"/w",(0,n.jsx)(i._8,{style:{opacity:.8,display:"inline-block",marginLeft:4,width:16,position:"relative",top:-1}})]}),y&&b&&(0,n.jsxs)(r.Z,{href:M,className:R,style:{marginLeft:8,whiteSpace:"nowrap"},children:[E," total",(0,n.jsx)(i._8,{style:{opacity:.8,display:"inline-block",marginLeft:4,width:16,position:"relative",top:-1}})]}),m&&(0,n.jsx)(n.Fragment,{children:(0,n.jsxs)(r.Z,{href:"".concat(N,"/commits"),className:P,style:{marginLeft:8,whiteSpace:"nowrap"},children:[T,g&&(0,n.jsx)("span",{className:"short-years",children:"y"}),(0,n.jsxs)("span",{className:g?"long-years":"",children:[" ","year",1===T?"":"s"]}),T>=2?(0,n.jsx)(i.$v,{style:{opacity:.8,display:"inline-block",marginLeft:4,width:16,position:"relative",top:-1}}):(0,n.jsx)(i.yI,{style:{opacity:.8,display:"inline-block",marginLeft:3,width:16,position:"relative",top:-1}})]})}),u&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("span",{style:{marginLeft:2},className:"project-description-desktop",children:[" ","– ",u]}),f&&(0,n.jsx)("div",{className:"project-description-mobile",children:u})]})]})]})}},4306:(e,t,s)=>{"use strict";s.d(t,{Z:()=>x});

1var n=s(5893),r=s(2702),i=s(3685),l=s(7654),o=s(7294),a=s(7077),c=s.n(a);let d="black-text",h="red-text",p="orange-text",j="green-text",x=e=>{let{projects:t,rust:s}=e,a=t.some(e=>e.logo),[x,m]=(0,o.useState)(!1),u=x?t:t.filter(e=>!e.collapsed),g=u.length!==t.length;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("ul",{className:c().table,style:{"--columns":s?4:5},children:[(0,n.jsxs)("li",{className:"".concat(c().row," ").concat(c().header),children:[(0,n.jsx)("div",{}),(0,n.jsxs)("div",{children:["Stars ",(0,n.jsx)(i.r7,{})]}),(0,n.jsxs)("div",{children:[s?"Crate":"NPM"," ",(0,n.jsx)(i._8,{})]}),!s&&(0,n.jsx)("div",{children:"TS"}),(0,n.jsx)("div",{children:"Maintained"})]}),u.map(e=>{var t,o;let x=e.lastCommitDate?Math.round((Date.now()-new Date(e.lastCommitDate).getTime())/1e3/60/60/24/365):null,m=x>=2?h:p,u=s?e.crateDownloads:e.downloads,g=u?u>=1e6?"".concat(Math.round(u/1e6),"M"):u>=1e3?"".concat(Math.round(u/1e3),"k"):u:null,f=u>=1e5?j:u<1e3?h:u<1e4?p:d,v=e.stars?e.stars>=1e3?"".concat(Math.round(e.stars/1e3),"k"):e.stars:null,b=e.stars>=1e4?j:e.stars<100?h:e.stars<1e3?p:d,y="https://github.com/".concat(e.repo),w="https://www.npmjs.com/package/".concat(e.npm),_="https://crates.io/crates/".concat(e.crate),k=null!==(o=null!==(t=e.url)&&void 0!==t?t:y)&&void 0!==o?o:_;return(0,n.jsxs)("li",{className:c().row,children:[(0,n.jsxs)("div",{className:c().project,children:[(0,n.jsxs)("span",{children:[a?e.logo||(0,n.jsx)("span",{className:c().noLogo}):(0,n.jsx)(n.Fragment,{})," ",(0,n.jsx)(r.Z,{href:k,isExternal:!0,children:(0,n.jsx)("b",{children:e.name})})]}),(0,n.jsxs)("div",{className:c().mobileStats,children:[(0,n.jsxs)("div",{className:null===v?c().empty:b,children:[(0,n.jsx)(i.r7,{})," ",v]}),(0,n.jsxs)("div",{className:null===g?c().empty:f,children:[(0,n.jsx)(i._8,{})," ",g,"/w"]}),(0,n.jsxs)("div",{style:{lineHeight:0},children:["ts"===e.ts&&(0,n.jsx)(l.Av,{}),"js"===e.ts&&(0,n.jsx)(l.Xn,{}),"dt"===e.ts&&(0,n.jsx)(l.Pu,{})]})]}),e.description&&(0,n.jsxs)("span",{className:c().description,children:[(0,n.jsx)("span",{className:c().mobileHidden,children:" – "}),e.description?(0,n.jsx)("span",{children:e.description}):(0,n.jsx)(n.Fragment,{})]})]}),(0,n.jsx)("a",{href:y,target:"_blank",rel:"noopener",style:{textDecoration:"none"},className:null===v?c().empty:b,children:null!==v?v:"N/A"}),(0,n.jsx)("a",{href:e.npm?w:e.crate?_:"",style:{textDecoration:"none"},target:"_blank",rel:"noopener",className:null===g?c().empty:f,children:null!==g?"".concat(g,"/w"):"N/A"}),!s&&(0,n.jsx)("div",{children:(0,n.jsxs)("div",{style:{position:"relative",bottom:"2px"},children:["ts"===e.ts&&(0,n.jsx)(l.Av,{}),"js"===e.ts&&(0,n.jsx)(l.Xn,{}),"dt"===e.ts&&(0,n.jsx)(l.Pu,{})]})}),(0,n.jsx)("a",{style:{textAlign:"center",textDecoration:"none"},href:"".concat(y,"/commits"),target:"_blank",rel:"noopener",children:x?(0,n.jsxs)("span",{className:m,children:[x," year",1===x?"":"s"]}):(0,n.jsx)("span",{className:c().empty,children:(0,n.jsxs)("svg",{style:{width:20,display:"inline-block"},stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",children:[(0,n.jsx)("path",{fill:"none",d:"M0 0h24v24H0z"}),(0,n.jsx)("path",{d:"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"})]})})})]},e.name)})]}),!x&&g&&(0,n.jsx)("div",{children:(0,n.jsx)("button",{className:c().showMore,onClick:()=>m(!0),children:(0,n.jsx)("span",{children:"Show more"})})})]})}},6945:(e,t,s)=>{"use strict";s.d(t,{Z:()=>c});var n=s(5893),r=s(7294),i=s(2702);let l=e=>{let{packages:t}=e;return(0,n.jsx)(i.Z,{href:"https://npmtrends.com/".concat(t.join("-vs-")),children:"NPMTrends"})},o=e=>{let{repos:t}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.Z,{href:"https://star-history.com/#".concat(t.join("&"),"&Date"),children:"Star History"})," ",(0,n.jsx)("span",{style:{fontSize:14,color:"#777"},children:"(requires a GH token)"})]})};var a=s(3685);let c=e=>{let{projects:t}=e,s=Object.values(t),[c,d]=(0,r.useState)(!1);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("p",{style:{marginTop:"1rem"},children:[(0,n.jsx)(a.RO,{style:{display:"inline-block",position:"relative",top:-2,marginRight:3,color:"#777"}})," ","Compare on ",(0,n.jsx)(l,{packages:s.map(e=>e.npm)})," and"," ",(0,n.jsx)(o,{repos:s.map(e=>e.repo)})]}),(0,n.jsxs)("p",{style:{marginTop:"0.25rem"},children:[(0,n.jsx)(a.sz,{style:{display:"inline-block",position:"relative",top:-2,marginRight:3,color:"#777"}})," ",(0,n.jsx)(i.Z,{style:{cursor:"pointer",color:"#777"},onClick:()=>d(!c),children:"About these numbers and colors"})]}),c&&(0,n.jsx)("p",{style:{marginTop:"0.5rem",fontSize:14,color:"#777"},children:"Numbers and colors are here to provide an easily-glanceable overview of the activity and traction of each tool. While I think community matters for support, it should not be the only decision factor, so pick whatever tool works best for your use case."})]})}},7077:e=>{e.exports={table:"ProjectList_table__WYcOf",row:"ProjectList_row__4Hk_9",header:"ProjectList_header__CwD4d",project:"ProjectList_project__OGiEA",noLogo:"ProjectList_noLogo__EoNjV",empty:"ProjectList_empty__nQGNo",mobileHidden:"ProjectList_mobileHidden__GTBlg",mobileStats:"ProjectList_mobileStats__bnZRk",de

1scription:"ProjectList_description__n8FHK",showMore:"ProjectList_showMore___UFt6"}},8925:(e,t,s)=>{"use strict";s.d(t,{a:()=>a});var n=s(1151),r=s(5675),i=s.n(r),l=s(7294);let o={img:e=>(0,l.createElement)("object"==typeof e.src?i():"img",e)},a=e=>(0,n.a)({...o,...e})},7812:(e,t,s)=>{"use strict";s.d(t,{c:()=>c});var n=s(5893),r=s(3665),i=s(8644);let l=(0,s(7294).createContext)({}),o=l.Provider;l.displayName="SSG";var a=s(8925);function c(e,t,s,n){let i=globalThis[r.ud];return i.route=t,i.pageMap=s.pageMap,i.context[t]={Content:e,pageOpts:s,useTOC:n},d}function d({__nextra_pageMap:e=[],__nextra_dynamic_opts:t,...s}){let l=globalThis[r.ud],{Layout:a,themeConfig:c}=l,{route:d,locale:p}=(0,i.t)(),j=l.context[d];if(!j)throw Error(`No content found for the "${d}" route. Please report it as a bug.`);let{pageOpts:x,useTOC:m,Content:u}=j;if(d.startsWith("/["))x.pageMap=e;else for(let{route:t,children:s}of e){let e=t.split("/").slice(p?2:1);(function e(t,[s,...n]){for(let r of t)if("children"in r&&s===r.name)return n.length?e(r.children,n):r})(x.pageMap,e).children=s}if(t){let{title:e,frontMatter:s}=t;x={...x,title:e,frontMatter:s}}return(0,n.jsx)(a,{themeConfig:c,pageOpts:x,pageProps:s,children:(0,n.jsx)(o,{value:s,children:(0,n.jsx)(h,{useTOC:m,children:(0,n.jsx)(u,{...s})})})})}function h({children:e,useTOC:t}){let{wrapper:s}=(0,a.a)();return(0,n.jsx)(p,{useTOC:t,wrapper:s,children:e})}function p({children:e,useTOC:t,wrapper:s,...r}){let i=t(r);return s?(0,n.jsx)(s,{toc:i,children:e}):e}}},e=>{var t=t=>e(e.s=t);e.O(0,[1304,7654,6223,2888,9774,179],()=>t(141)),_N_E=e.O()}]);