https://www.reactylon.com/_next/static/chunks/pages/docs/materials…/parallax-mapping-688d89babf2a9352.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[61789],{2173:(i,e,s)=>{"use strict";s.d(e,{A:()=>u});var n=s(45721),r=s(63296),t=s(58630);s(14232);let a={src:"/_next/static/media/wall.5f4d8d44.png"};var l=s(96254),h=s(37876),c=s(62797),d=s(30604),o=s(28032),p=s(38912);(0,s(78658).kz)({hemisphericLight:[p.g,0],box:[o.an,0],standardMaterial:[d.F,0],texture:[c.g,0]});var k={"parallax-mapping":{Component:function(){return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)("hemisphericLight",{name:"light",direction:new t.Pq(-1,1,0),diffuse:r.v9.White()}),(0,h.jsx)("box",{name:"box",children:(0,h.jsxs)("standardMaterial",{name:"material",useParallax:!0,useParallaxOcclusion:!0,parallaxScaleBias:.1,specularPower:1e3,specularColor:new r.v9(.5,.5,.5),children:[(0,h.jsx)("texture",{kind:"diffuseTexture",url:a.src}),(0,h.jsx)("texture",{kind:"bumpTexture",url:l.A.src})]})})]})},onSceneReady:n.bD}};let u=(0,n.jy)({},k)},17806:(i,e,s)=>{"use strict";s.r(e),s.d(e,{default:()=>u,useTOC:()=>k});var n=s(42969),r=s(71807),t=s(14798),a=s(34256),l=s(31870),h=s(2173),c=s(30087),d=s(37876);function o(i,e){var s=Object.keys(i);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(i);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable})),s.push.apply(s,n)}return s}function p(i){for(var e=1;e<arguments.length;e++){var s=null!=arguments[e]?arguments[e]:{};e%2?o(Object(s),!0).forEach(function(e){(0,n.A)(i,e,s[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(s)):o(Object(s)).forEach(function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(s,e))})}return i}function k(i){return[{value:"Learn More",id:"learn-more",depth:3}]}let u=(0,r.e)(function(i){var e=i.toc,s=void 0===e?k(i):e,n=p(p({a:"a",code:"code",h1:"h1",h3:"h3",hr:"hr",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",ul:"ul"},(0,a.R)()),i.components);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.h1,{children:"Parallax Mapping"}),"\n",(0,d.jsxs)(n.p,{children:["In Babylon.js, ",(0,d.jsx)("b",{children:"parallax mapping"})," is a technique used to enhance the visual realism of surfaces by simulating depth through texture mapping. This method adds detail to materials without the need for additional geometry, making it a performance-friendly option for creating visually complex scenes."]}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.p,{children:"To use parallax mapping in Babylon.js, you typically need to work with a material that supports this feature, such as the StandardMaterial or PBRMaterial. The process involves the following steps:"}),"\n",(0,d.jsxs)(n.ol,{children:["\n",(0,d.jsx)(n.li,{children:"Height Map: create a height map that represents the elevation of the surface. This map is essential for defining how much displacement to apply when the viewer’s perspective changes."}),"\n",(0,d.jsx)(n.li,{children:"Apply to Material: set the height map texture on the material and configure the parallax settings. This includes adjusting parameters like the parallax scale, which determines the intensity of the effect."}),"\n",(0,d.jsx)(n.li,{children:"Render: when the scene is rendered, Babylon.js calculates the offsets for the texture coordinates based on the viewer’s position, resulting in the appearance of depth and relief on the material."}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"There are three properties to work with Parallax:"}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"useParallax"})," - enables parallax mapping over bump. This property won’t have any effect if you didn’t assigned a bumpTexture."]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"useParallaxOcclusion"})," - enables parallax occlusion, when setting this property, you must also set ",(0,d.jsx)(n.code,{children:"useParallax"})," to true."]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"parallaxScaleBias"})," - apply a scaling factor that determine which “depth” the height map should represent. A value between 0.05 and 0.1 is reasonable in parallax, you can reach 0.2 using parallax occlusion."]}),"\n"]}),"\n",(0,d.jsx)(n.pre,{icon:c.$0,tabIndex:"0","data-language":"tsx","data-word-wrap":"",children:(0,d.jsxs)(n.code,{children:[(0,d.jsx)(n.span,{children:(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"<>"})}),"\n",(0,d.jsxs)(n.span,{children:[(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"    <"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"hemisphericLight"}

1),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'light'"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" direction"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Vector3"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"-"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"1"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"1"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" diffuse"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"Color3"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:"White"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"()"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]}),"\n",(0,d.jsxs)(n.span,{children:[(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"    <"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"box"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'box'"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:">"})]}),"\n",(0,d.jsxs)(n.span,{children:[(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"        <"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"standardMaterial"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" name"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'material'"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" useParallax"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" useParallaxOcclusion"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" parallaxScaleBias"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0.1"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}

1),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" specularPower"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"1000"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" specularColor"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{new"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#DCDCAA","--shiki-light":"#795E26"},children:" Color3"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"("}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0.5"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0.5"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:", "}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#B5CEA8","--shiki-light":"#098658"},children:"0.5"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:")"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:">"})]}),"\n",(0,d.jsxs)(n.span,{children:[(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"            <"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"texture"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" kind"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'diffuseTexture'"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" url"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"wall"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"src"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]}),"\n",(0,d.jsxs)(n.span,{children:[(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"            <"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"texture"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" kind"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#CE9178","--shiki-light":"#A31515"},children:"'bumpTexture'"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#E50000"},children:" url"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000"},children:"="}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"{"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"bumpWall"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#D4D4D4","--shiki-light":"#000000FF"},children:"."}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#9CDCFE","--shiki-light":"#001080"},children:"src"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#0000FF"},children:"}"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:" />"})]}),"\n",(0,d.jsxs)(n.span,{children:[(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"        </"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#4EC9B0","--shiki-light":"#267F99"},children:"standardMaterial"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:">"})]}),"\n",(0,d.jsxs)(n.span,{children:[(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"    </"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#569CD6","--shiki-light":"#800000"},children:"box"}),(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:">"})]}),"\n",(0,d.jsx)(n.span,{children:(0,d.jsx)(n.span,{style:{"--shiki-dark":"#808080","--shiki-light":"#800000"},children:"</>"})})]})}),"\n",h.A.renderFeature(),"\n",(0,d.jsx)(l.A,{url:"https://stackblitz.com/edit/reactylon-parallax-mapping?file=src%2FContent.tsx"}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:s[0].id,children:s[0].value}),"\n",(0,d.jsxs)(n.p,{children:["For additional info, please refer to Babylon.js documentation: ",(0,d.jsx)(n.a,{href:"https://doc.babylonjs.com/features/featuresDeepDive/materials/using/parallaxMapping",children:"https://doc.babylonjs.com/features/featuresDeepDive/materials/using/parallaxMapping"}),"."]})]})},"/docs/materials/using-materials/parallax-mapping",{filePath:"pages/docs/materials/using-materials/parallax-mapping.mdx",pageMap:t.O,frontMatter:{description:"Parallax mapping simulates depth in textures to enhance surface realism, adding visual detail without requiring extra geometry, making it a performance-efficient technique."},title:"Parallax Mapping"},"undefined"==typeof RemoteContent?k:RemoteContent.useTOC)},31870:(i,e,s)=>{"use strict";s.d(e,{A:()=>l}),s(14232);var n=s(2491),r=s.n(n),t=s(37876),a=navigator.userAgent.includes("Safari")&&!navigator.userAgent.includes("Chrome");let l=function(i){var e=i.id,s=i.url;return(0,t.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"end"},children:[e?(0,t.jsx)("canvas",{id:e,"touch-action":"none",style:{touchAction:"none"}}

1):null,s?(0,t.jsx)("img",{style:{float:"right",marginTop:10,cursor:"pointer "},onClick:function(){a?r().fire({title:"Safari browser?",html:'<p style="font-size: 1rem">This documentation utilizes <b style="color: cornflowerblue">Stackblitz WebContainers</b> to provide interactive code examples. These containers are fully supported in Chrome-based browsers and are currently in beta on Safari. <br/><br/>We recommend using a Chrome-based browser like Chrome or Edge for the best experience. If you continue using Safari, you\'ll be able to view the code, but execution is not supported.</p><br>',icon:"warning",showConfirmButton:!1,footer:'<a style="text-decoration: underline" href="'.concat(s,'" target="_blank">Proceed anyway</a>')}):window.open(s,"_blank")},src:"https://developer.stackblitz.com/img/open_in_stackblitz.svg"}):null]})}},34752:(i,e,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/materials/using-materials/parallax-mapping",function(){return s(17806)}])},45721:(i,e,s)=>{"use strict";s.d(e,{$B:()=>b,H3:()=>D,IA:()=>y,bD:()=>f,jy:()=>j,sz:()=>m});var n=s(67251),r=s(23745),t=s(45794),a=s(42969),l=s(59860),h=s(68887),c=s(58630),d=s(71774),o=s(78658),p=s(37876);s(72091);var k=["id","Component"],u=["id","Component"];function x(i,e){var s=Object.keys(i);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(i);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable})),s.push.apply(s,n)}return s}function g(i){for(var e=1;e<arguments.length;e++){var s=null!=arguments[e]?arguments[e]:{};e%2?x(Object(s),!0).forEach(function(e){(0,a.A)(i,e,s[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(s)):x(Object(s)).forEach(function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(s,e))})}return i}function j(i,e){var s=Object.entries(e).map(function(i){var e=(0,t.A)(i,2);return g({id:e[0]},e[1])});return{renderFeature:function(){return(0,p.jsx)(d.A,g(g({},i),{},{children:s.map(function(i){var e=i.id,s=i.Component,n=(0,l.A)(i,k);return(0,p.jsx)(o.Z5,g(g({},n),{},{children:(0,p.jsx)(s,{})}),e)})}))},renderFeatureForTest:function(s){var n,r,t,a,h=e[s];if(!h)throw Error("Unknown sceneId: ".concat(s));return r=(n=g({id:s},h)).id,t=n.Component,a=(0,l.A)(n,u),(0,p.jsx)(d.A,g(g({},i),{},{children:(0,p.jsx)(o.Z5,g(g({},a),{},{children:(0,p.jsx)(t,{})}),r)}))}}}var y=function(i){i.createDefaultLight()},f=function(i,e,s,n){i.createDefaultCamera(!0,void 0,!0);var r=i.activeCamera;e&&(r.radius=e),s&&(r.alpha=h.S0.ToRadians(s)),n&&(r.beta=h.S0.ToRadians(n))},m=function(i,e,s,n){i.createDefaultCameraOrLight(!0,void 0,!0);var r=i.activeCamera;e&&(r.radius=e),s&&(r.alpha=h.S0.ToRadians(s)),n&&(r.beta=h.S0.ToRadians(n))},D=(0,r.A)(function i(){(0,n.A)(this,i)},null,[{key:"getFaceUVs",value:function(i,e){var s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return Array(6).fill(null).map(function(n,r){return new c.IU(r/i,(0+s)/e,(r+1)/i,(1+s)/e)})}},{key:"getFaceUVsT",value:function(){return[new c.IU(.75,.333,1,.666),new c.IU(.25,.333,.5,.666),new c.IU(.5,.333,.75,.666),new c.IU(0,.333,.25,.666),new c.IU(.25,.666,.5,1),new c.IU(.25,0,.5,.333)]}}]);function b(){return window.innerWidth<=768}},71774:(i,e,s)=>{"use strict";s.d(e,{A:()=>y});var n=s(42969),r=s(63857),t=s(43081),a=s.n(t),l=s(14232),h=s(335),c=s(7536),d=s(13767),o=s(79279),p=s(71002),k=s(37876);function u(i,e){var s=Object.keys(i);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(i);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable})),s.push.apply(s,n)}return s}function x(i){for(var e=1;e<arguments.length;e++){var s=null!=arguments[e]?arguments[e]:{};e%2?u(Object(s),!0).forEach(function(e){(0,n.A)(i,e,s[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(s)):u(Object(s)).forEach(function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(s,e))})}return i}s(72091),s(21576),(0,c.h)();var g=function(){var i=(0,r.A)(a().mark(function i(e){return a().wrap(function(i){for(;;)switch(i.prev=i.next){case 0:e.createDefaultCameraOrLight(!0,void 0,!0);case 1:case"end":return i.stop()}},i)}));return function(e){return i.apply(this,arguments)}}();function j(){this.click()}

1let y=function(i){var e=i.children,s=i.canvasId,n=i.xrDefaultExperienceOptions,t=i.isPhysics,c=i.isAudio,u=i.forceWebGL,y=(0,l.useState)(),f=y[0],m=y[1],D=(0,l.useRef)(null);(0,l.useEffect)(function(){var i=!1,e=[];return(0,r.A)(a().mark(function s(){return a().wrap(function(s){for(;;)switch(s.prev=s.next){case 0:if(!t){s.next=4;break}return s.next=3,(0,p.A)();case 3:D.current=s.sent;case 4:if(!i){s.next=6;break}return s.abrupt("return");case 6:(e=Array.from(document.getElementsByTagName("canvas"))).forEach(function(i){i.addEventListener("pointerenter",j)}),m(e);case 9:case"end":return s.stop()}},s)}))(),function(){i=!0,e.forEach(function(i){i.removeEventListener("pointerenter",j)})}},[]);var b=function(){var i=(null==f?void 0:f.length)>1,p=l.Children.count(e)>1,j=window.__E2E__;return(0,k.jsx)(h.N,{forceWebGL:j?window.forceWebGL:u||!!n,canvasId:s,isMultipleCanvas:i,loadingScreenOptions:{component:o.A},engineOptions:{audioEngine:c},manualRenderLoop:j?function(i,e){var s;window.renderFrames=(s=(0,r.A)(a().mark(function s(n){var r;return a().wrap(function(s){for(;;)switch(s.prev=s.next){case 0:return r=e.scenes.map(function(i){return new Promise(function(e){i.useConstantAnimationDeltaTime=!0,i.deltaT

1ime=16.66,i.executeWhenReady(e)})}),s.next=3,Promise.all(r);case 3:return e.resize(),s.abrupt("return",new Promise(function(s){var r=0,t=e.onEndFrameObservable.add(function(){++r>=n&&(e.onEndFrameObservable.remove(t),e.stopRenderLoop(i),s({renderedFrames:r,engineName:e.name}))});e.runRenderLoop(i)}));case 5:case"end":return s.stop()}},s)})),function(i){return s.apply(this,arguments)})}:void 0,children:l.Children.map(e,function(i,e){return l.cloneElement(i,{xrDefaultExperienceOptions:n?x(x({},n),{},{handSupportOptions:x(x({},n.handSupportOptions),{},{jointMeshes:{invisible:!0}})}):void 0,canvas:p?f[e]:void 0,onSceneReady:i.props.onSceneReady||g,physicsOptions:t?{plugin:new d.P(!0,D.current)}:void 0})})})};return f?n?(0,k.jsx)("div",{style:{position:"relative"},children:b()}):b():null}},79279:(i,e,s)=>{"use strict";s.d(e,{A:()=>r}),s(14232);var n=s(37876);let r=function(){return(0,n.jsxs)("div",{className:"loader",style:{display:"flex",width:"100%",height:"100%",backgroundColor:"black",position:"relative"},children:[(0,n.jsx)("div",{style:{display:"flex",width:"100%",justifyContent:"center",alignItems:"center"},children:(0,n.jsx)("img",{src:"/logo.svg",width:190})}),(0,n.jsx)("div",{style:{width:300,gridArea:1,top:"50%",left:"50%",transform:"translate(-50%, -50%)",position:"absolute"},children:(0,n.jsx)("img",{src:"/spark.svg",style:{animation:"0.75s linear 0s infinite normal none running spin",transformOrigin:"50% 50%"}})})]})}},96254:(i,e,s)=>{"use strict";s.d(e,{A:()=>n});let n={src:"/_next/static/media/bump-wall.0d3de009.png",height:256,width:256,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAHlBMVEV+f+1/gO5+gPJ+hup+fe9+eut+f+p/fe1+fep+gvLhzDY2AAAACnRSTlO9q8iatKGAj23Xj2oufgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAADVJREFUeJwVxskRwEAQArEG5tr8E3ZZL9EzczfF3dbOBGxaKcQu3Y1Lxs/8pbrQe1YEiaIlHyb3AO+Je6iyAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:8}}},i=>{i.O(0,[46593,23891,28770,60683,202,50351,60390,71807,32900,75229,22160,19933,25277,46506,74341,14798,90636,38792],()=>i(i.s=34752)),_N_E=i.O()}]);