https://formlabs.com/_next/static/chunks/Meshy.56f033dc33bcd3fc.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[301],{36596:e=>{e.exports={container:"Output_container__JbKgf",canvas:"Output_canvas__aflxn",generateBtnContainer:"Output_generateBtnContainer__KpOMH",generateBtnIcon:"Output_generateBtnIcon__h3MUO"}},53347:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>N});var r=n(37876),a=n(14232),o=n(34846),l=n(47173),i=n(15039),s=n.n(i),c=n(48011),u=n(2644),m=n(73670),d=n(46971),p=n(36596),g=n.n(p);let h=function(e){let t=new u.NodeMaterial("node"),n=new u.InputBlock("position");n.visibleInInspector=!1,n.visibleOnFrame=!1,n.target=1,n.setAsAttribute("position");let r=new u.TransformBlock("worldPos");r.visibleInInspector=!1,r.visibleOnFrame=!1,r.target=1,r.complementZ=0,r.complementW=1;let a=new u.InputBlock("world");a.visibleInInspector=!1,a.visibleOnFrame=!1,a.target=1,a.setAsSystemValue(u.NodeMaterialSystemValues.World);let o=new u.TransformBlock("World normal");o.visibleInInspector=!1,o.visibleOnFrame=!1,o.target=1,o.complementZ=0,o.complementW=0;let l=new u.InputBlock("normal");l.visibleInInspector=!1,l.visibleOnFrame=!1,l.target=1,l.setAsAttribute("normal");let i=new u.TriPlanarBlock("TriPlanarTexture");i.visibleInInspector=!1,i.visibleOnFrame=!1,i.target=4,i.convertToGammaSpace=!1,i.convertToLinearSpace=!1,i.disableLevelMultiplication=!1,i.texture=e;let s=new u.ScaleBlock("Scale");s.visibleInInspector=!1,s.visibleOnFrame=!1,s.target=4;let c=new u.InputBlock("Texture Scale");c.visibleInInspector=!1,c.visibleOnFrame=!1,c.target=1,c.value=.03,c.min=0,c.max=10,c.isBoolean=!1,c.matrixMode=0,c.animationType=u.AnimatedInputBlockTypes.None,c.isConstant=!1;let m=new u.InputBlock("Texture Sharpness");m.visibleInInspector=!1,m.visibleOnFrame=!1,m.target=1,m.value=30,m.min=1,m.max=30,m.isBoolean=!1,m.matrixMode=0,m.animationType=u.AnimatedInputBlockTypes.None,m.isConstant=!1;let d=new u.ImageSourceBlock("ImageSource");d.visibleInInspector=!1,d.visibleOnFrame=!1,d.target=3,d.texture=e;let p=new u.ScaleBlock("Scale");p.visibleInInspector=!1,p.visibleOnFrame=!1,p.target=4;let g=new u.InputBlock("Texture Amplitude");g.visibleInInspector=!1,g.visibleOnFrame=!1,g.target=1,g.value=.3,g.min=0,g.max=1,g.isBoolean=!1,g.matrixMode=0,g.animationType=u.AnimatedInputBlockTypes.None,g.isConstant=!1;let h=new u.HeightToNormalBlock("HeightToNormal");h.visibleInInspector=!1,h.visibleOnFrame=!1,h.target=2,h.generateInWorldSpace=!0,h.automaticNormalizationNormal=!0,h.automaticNormalizationTangent=!0;let v=new u.TransformBlock("World tangent");v.visibleInInspector=!1,v.visibleOnFrame=!1,v.target=1,v.complementZ=0,v.complementW=0;let x=new u.InputBlock("tangent");x.visibleInInspector=!1,x.visibleOnFrame=!1,x.target=1,x.setAsAttribute("tangent");let f=new u.LightBlock("Lights");f.visibleInInspector=!1,f.visibleOnFrame=!1,f.target=3;let b=new u.InputBlock("cameraPosition");b.visibleInInspector=!1,b.visibleOnFrame=!1,b.target=1,b.setAsSystemValue(u.NodeMaterialSystemValues.CameraPosition);let T=new u.InputBlock("Glossiness");T.visibleInInspector=!0,T.visibleOnFrame=!1,T.target=1,T.value=.05,T.min=0,T.max=1,T.isBoolean=!1,T.matrixMode=0,T.animationType=u.AnimatedInputBlockTypes.None,T.isConstant=!1;let w=new u.InputBlock("Gloss Power");w.visibleInInspector=!1,w.visibleOnFrame=!1,w.target=1,w.value=512,w.min=0,w.max=0,w.isBoolean=!1,w.matrixMode=0,w.animationType=u.AnimatedInputBlockTypes.None,w.isConstant=!0;let I=new u.InputBlock("Diffuse Color");I.visibleInInspector=!0,I.visibleOnFrame=!1,I.target=1,I.value=u.Color3.FromHexString("#377eb8"),I.isConstant=!1;let y=new u.InputBlock("Specular Color");y.visibleInInspector=!0,y.visibleOnFrame=!1,y.target=1,y.value=new u.Color3(.6235294117647059,.6235294117647059,.6235294117647059),y.isConstant=!1;let B=new u.AddBlock("Add");B.visibleInInspector=!1,B.visibleOnFrame=!1,B.target=4;let k=new u.FragmentOutputBlock("fragmentOutput");k.visibleInInspector=!1,k.visibleOnFrame=!1,k.target=2,k.useLogarithmicDepth=!1;let S=new u.TransformBlock("worldPos * viewProjectionTransform");S.visibleInInspector=!1,S.visibleOnFrame=!1,S.target=1,S.complementZ=0,S.complementW=1;let A=new u.InputBlock("viewProjection");A.visibleInInspector=!1,A.visibleOnFrame=!1,A.target=1,A.setAsSystemV

1alue(u.NodeMaterialSystemValues.ViewProjection);let N=new u.VertexOutputBlock("vertexOutput");return N.visibleInInspector=!1,N.visibleOnFrame=!1,N.target=1,n.output.connectTo(r.vector),a.output.connectTo(r.transform),r.output.connectTo(S.vector),A.output.connectTo(S.transform),S.output.connectTo(N.vector),r.output.connectTo(f.worldPosition),n.output.connectTo(s.input),c.output.connectTo(s.factor),s.output.connectTo(i.position),l.output.connectTo(i.normal),m.output.connectTo(i.sharpness),d.source.connectTo(i.source),i.r.connectTo(p.input),g.output.connectTo(p.factor),p.output.connectTo(h.input),r.xyz.connectTo(h.worldPosition),l.output.connectTo(o.vector),a.output.connectTo(o.transform),o.xyz.connectTo(h.worldNormal),x.output.connectTo(v.vector),a.output.connectTo(v.transform),v.xyz.connectTo(h.worldTangent),h.output.connectTo(f.worldNormal),b.output.connectTo(f.cameraPosition),T.output.connectTo(f.glossiness),w.output.connectTo(f.glossPower),I.output.connectTo(f.diffuseColor),y.output.connectTo(f.specularColor),f.diffuseOutput.connectTo(B.left),f.specularOutput.connectTo(B.right),B.output.connectTo(k.rgb),t.addOutputNode(N),t.addOutputNode(k),t.build(),t};var v=n(5432);n(55556);var x=n(54259);let f=function(e,t,n,r,a,o){var l,i,s;let c=performance.now(),m=null==(l=e.getBlockByName("Texture Scale"))?void 0:l.value,d=null==(i=e.getBlockByName("Texture Amplitude"))?void 0:i.value,p=null==(s=e.getBlockByName("Texture Sharpness"))?void 0:s.value,g=function(e,t){let n=new x.rs(function(e,t){return t.maxEdgeLength-e.maxEdgeLength});function r(e,t,r){let a=u.Vector3.Distance(e,t),o=u.Vector3.Distance(t,r),l=Math.max(a,o,u.Vector3.Distance(r,e));n.push({v1:e,v2:t,v3:r,maxEdgeLength:l,maxEdgeIndex:a===l?0:o===l?1:2})}let a=e.getIndices()||[],o=e.getVerticesData(u.VertexBuffer.PositionKind);for(let e=0;e<a.length;e+=3){let t=u.Vector3.FromArray(o,3*a[e+0]);r(t,u.Vector3.FromArray(o,3*a[e+1]),u.Vector3.FromArray(o,3*a[e+2]))}let l=n.peek().maxEdgeLength+1;for(;n.length<t;)l=n.peek().maxEdgeLength,function(){let e=n.pop(),t=e.v1,a=e.v2,o=e.v3;if(0===e.maxEdgeIndex){let e=u.Vector3.Lerp(t,a,.5);r(o,t,e),r(a,o,e)}else if(1===e.maxEdgeIndex){let e=u.Vector3.Lerp(a,o,.5);r(t,a,e),r(o,t,e)}else{let e=u.Vector3.Lerp(o,t,.5);r(a,o,e),r(t,a,e)}}();return l}(t,a),h=function(e,t,n){let r=e.getIndices()||[],a=e.getVerticesData(u.VertexBuffer.PositionKind)||[];console.log(r.length/3);let o=[],l=[];for(let e=0;e<r.length;e+=3){let t=u.Vector3.FromArray(a,3*r[e+0]);!function e(t,r,a){let i=u.Vector3.Distance(t,r),s=u.Vector3.Distance(r,a),c=Math.max(i,s,u.Vector3.Distance(a,t));if(c<=n)l.push(t.x),l.push(t.y),l.push(t.z),l.push(r.x),l.push(r.y),l.push(r.z),l.push(a.x),l.push(a.y),l.push(a.z),o.push(o.length),o.push(o.length),o.push(o.length);else if(i===c){let n=u.Vector3.Lerp(t,r,.5);e(a,t,n),e(r,a,n)}else if(s===c){let n=u.Vector3.Lerp(r,a,.5);e(t,r,n),e(a,t,n)}else{let n=u.Vector3.Lerp(a,t,.5);e(r,a,n),e(t,r,n)}}(t,u.Vector3.FromArray(a,3*r[e+1]),u.Vector3.FromArray(a,3*r[e+2]))}let i=new u.Mesh("mesh",t),s=new u.VertexData;return s.positions=l,s.indices=o,s.applyToMesh(i,!0),i.createNormals(!1),i}(t,r,g);!function(e,t,n,r,a,o){var l,i,s,c;let m=e.getIndices()||[],d=e.getVerticesData(u.VertexBuffer.PositionKind)||[],p=e=>"".concat(e.x,"_").concat(e.y,"_").concat(e.z),g=new Map,h=new Map,v=new u.Vector3;for(let e=0;e<m.length;e+=3){let t=u.Vector3.FromArray(d,3*m[e+0]),n=u.Vector3.FromArray(d,3*m[e+1]),r=u.Vector3.FromArray(d,3*m[e+2]),a=t.subtract(n),o=r.subtract(t),c=a.cross(o).normalize(),x=p(t),f=p(n),b=p(r);g.set(x,(null!=(l=g.get(x))?l:v).add(c)),g.set(f,(null!=(i=g.get(f))?i:v).add(c)),g.set(b,(null!=(s=g.get(b))?s:v).add(c)),h.set(x,t),h.set(f,n),h.set(b,r)}let x=r*o,f=x-r;for(let[e,r]of g){let o=h.get(e);r=r.normalize();let l=o.scale(n),i=new u.Vector3(Math.pow(Math.abs(r.x),a),Math.pow(Math.abs(r.y),a),Math.pow(Math.abs(r.z),a));i=i.scale(1/(i.x+i.y+i.z));let s=t.bilinearSample(l.y,l.z)*i.x,c=s+t.bilinearSample(l.z,l.x)*i.y+t.bilinearSample(l.x,l.y)*i.z;isNaN(c)&&(c=0);let m=f+c*(x-f);g.set(e,o.add(r.scale(m)))}for(let e=0;e<d.length;e+=3){let t=u.Vector3.FromArray(d,e);t=null!=(c=g.get(p(t)))?c:t,d[e+0]=t.x,d[e+1]=t.y,d[e+2]=t.z}e.updateVerticesData(u.VertexBuffer.PositionKind,d),e.createNormals(!1)}(h,n,m,d,p,o),v.STLExport.CreateSTL([h],!0,"textured-mesh",!0),h.dispose(),console.log((performance.now()-c)/1e3)},b=function(e,t,n,r){u.SceneLoader.ImportMesh("",e,void 0,t,function(e){let t=e[0];t.material=n,r(t)},null,null,".stl")};class T{get(e,t){let n=t*this.width+e;return this.data[4*n]/255}bilinearSample(e,t){e-=Math.floor(e),t-=Math.floor(t);let n=e*(this.width-1),r=t*(this.height-1),a=Math.floor(n),o=Math.floor(r),l=a+1,i=o+1;n-=a,r-=o;let s=this.get(a,o),c=this.get(a,i),u=this.get(l,o),m=this.get(l,i);return 0+(1-n)*(1-r)*s+(1-n)*r*c+n*(1-r)*u+n*r*m}constructor(e,t,n){this.width=e,this.height=t,this.data=n}}async function w(e){let t=await e.readPixels(0,0),n=e.getSize();return new T(n.width,n.height,t)}let I=function(e,t,n,r){var a,o;let l=null==t||null==(o=t.getBlockByName)||null==(a=o.call(t,"TriPlanarTexture"))?void 0:a.texture;l&&l.dispose(),(l=new u.Texture(e,n)).wrapU=1,l.wrapV=1,l.uAng=0,l.vAng=0,l.wAng=0,l.uOffset=0,l.vOffset=0,l.uScale=1,l.vScale=1,l.coordinatesMode=7,t.getBlockByName("TriPlanarTexture").texture=l,t.getBlockByName("ImageSource").texture=l,l.onLoadObservable.addOnce(async()=>{r(await w(l))})},y=e=>{let{scale:t,amplitude:n,sharpness:i,textureSrc:s,meshSrc:p,maxTriangles:v,offset:x,demoOnly:T}=e,w=(0,c.useSelector)(e=>e.store.id),{t:y}=(0,o.Bd)(),B=(0,a.useRef)(null),k=(0,a.useRef)(),S=(0,a.useRef)(),A=(0,a.useRef)(),N=(0,a.useRef)(),_=(0,a.useRef)(),M=(0,a.useRef)();(0,a.useEffect)(()=>{(()=>{let{current:e}=B;if(!e)return;

1k.current=new u.Engine(e),S.current=new u.Scene(k.current),S.current&&(S.current.clearColor=u.Color4.FromHexString("#d4d9de")),N.current=new u.ArcRotateCamera("camera1",Math.PI/4,Math.PI/4,100,new u.Vector3(0,0,0),S.current),N.current.attachControl(e,!1),N.current.useFramingBehavior=!0,N.current.framingBehavior&&(N.current.framingBehavior.elevationReturnTime=-1,N.current.framingBehavior.elevationReturnWaitTime=-1,N.current.framingBehavior.framingTime=500);let t=new u.DirectionalLight("light1",new u.Vector3(0,-1,0),S.current);t.intensity=.7;let n=new u.DirectionalLight("light2",new u.Vector3(0,0,1),S.current);n.intensity=.7;let r=new u.DirectionalLight("light3",new u.Vector3(1,0,0),S.current);r.intensity=.7,t.parent=N.current,n.parent=N.current,r.parent=N.current,A.current=h(null),k.current.runRenderLoop(()=>{var e;null==(e=S.current)||e.render()})})();let e=()=>{var e;return null==(e=S.current)?void 0:e.getEngine().resize()};return window&&window.addEventListener("resize",e),()=>{var t;null==(t=S.current)||t.getEngine().dispose(),window&&window.removeEventListener("resize",e)}},[]),(0,a.useEffect)(()=>{A.current&&S.current&&I(s,A.current,S.current,e=>_.current=e)},[s]),(0,a.useEffect)(()=>{var e,t;A.current&&S.current&&N.current&&(null==(t=M.current)||null==(e=t.dispose)||e.call(t),b(p,S.current,A.current,e=>{M.current=e,setTimeout(()=>{var e;null==(e=N.current)||e.setTarget(M.current)},0)}))},[p]),(0,a.useEffect)(()=>{A.current&&(A.current.getBlockByName("Texture Scale").value=t,A.current.getBlockByName("Texture Amplitude").value=n,A.current.getBlockByName("Texture Sharpness").value=i)},[t,n,i]);let[V,E]=(0,a.useState)(!1);return(0,r.jsxs)("div",{className:g().container,children:[(0,r.jsx)("canvas",{className:g().canvas,ref:B}),(0,r.jsx)("div",{className:g().generateBtnContainer,children:T?(0,r.jsxs)(l.ZpM,{children:[(0,r.jsx)(l.EYj,{variant:"material-title",children:y("Your work is not saved!")}),(0,r.jsx)(l.EYj,{children:(0,r.jsxs)(o.x6,{t:y,children:["To generate textured meshes you must be logged in with your formlabs.com account! You don't have an account yet?"," ",(0,r.jsx)(m.N,{href:(0,d.Cf)(w),children:"Click here to register!"})]})})]}):(0,r.jsx)(l.$nd,{disabled:V,onClick:()=>{A.current&&M.current&&_.current&&S.current&&!V&&(E(!0),setTimeout(()=>{A.current&&M.current&&_.current&&S.current&&(f(A.current,M.current,_.current,S.current,v,x),E(!1))},100))},trackingLabel:"Generate",variant:"primary",children:V?y("Generating..."):(0,r.jsxs)(r.Fragment,{children:[y("Generate")," ",(0,r.jsx)(l.xuA,{className:g().generateBtnIcon})]})})})]})};var B=n(77131),k=n.n(B),S=n(98228);let A={SCALE:"Scale",AMPLITUDE:"Amplitude",SHARPNESS:"Sharpness",OFFSET:"Offset",MAX_TRIANGLES:"Max Triangles"},N=e=>{let{meshURL:t="/meshy/meshes/shader-ball.stl"}=e,n=Array(9).fill("").map((e,t)=>"/meshy/bumps/".concat(t+1,".png")),{t:i}=(0,o.Bd)(),u=(0,c.useSelector)(e=>e.auth.isAuthenticated),[m,d]=(0,a.useState)(n[0]),[p,g]=(0,a.useState)(t),h=[{id:A.SCALE,title:i("Scale"),description:i("Controls the size of the texture."),min:0,max:1,step:.001,initialValue:.03},{id:A.AMPLITUDE,title:i("Amplitude"),description:i("Controls how raised the texture is over the surface."),min:0,max:1,step:.001,initialValue:.3},{id:A.SHARPNESS,title:i("Sharpness"),description:i("Controls texture blending around curved surfaces."),min:0,max:30,step:.001,initialValue:30},{id:A.OFFSET,title:i("Offset"),description:i("Controls whether the texture cuts into the model or is strictly raised."),min:0,max:1,step:.1,initialValue:1},{id:A.MAX_TRIANGLES,title:i("Max Triangles"),description:i("Controls output detail by constraining the maximum number of triangles."),min:1e5,max:2e5,step:1e4,initialValue:1e5}],[v,x]=(0,a.useState)(h.reduce((e,t)=>(e[t.title]=t.initialValue,e),{})),f=(0,a.useRef)(null),b=(0,a.useRef)(null),[T,w]=(0,a.useState)(!1),I=e=>{let t=e.name.toLowerCase();if((0,S.zS)().track("Uploaded file",{extension:e.name.split(".").slice(-1)[0],filename:e.name}),t.endsWith(".stl")){let t=new FileReader;t.onload=e=>{var t;g("data: "+(null==(t=e.target)?void 0:t.result))}

1,t.readAsDataURL(e)}if(t.endsWith(".png")||t.endsWith(".jpg")){let t=new FileReader;t.onload=e=>{var t;d("data: "+(null==(t=e.target)?void 0:t.result))},t.readAsDataURL(e)}};return(0,a.useEffect)(()=>{let e=b.current,t=e=>{e.preventDefault(),e.stopPropagation(),"dragenter"===e.type?w(!0):"dragleave"===e.type&&w(!1)},n=e=>{var t;e.preventDefault(),e.stopPropagation(),w(!1),(null==e||null==(t=e.dataTransfer)?void 0:t.files)&&e.dataTransfer.files[0]&&I(e.dataTransfer.files[0])};return null==e||e.addEventListener("dragover",e=>{e.preventDefault(),e.stopPropagation()}),null==e||e.addEventListener("dragenter",t),null==e||e.addEventListener("dragleave",t),null==e||e.addEventListener("drop",n),()=>{null==e||e.removeEventListener("dragenter",t),null==e||e.removeEventListener("dragleave",t),null==e||e.removeEventListener("drop",n)}},[]),(0,r.jsxs)(l.azJ,{direction:"row",className:s()(k().main,T&&k().dragActive),ref:b,children:[(0,r.jsxs)(l.azJ,{direction:"column",spacing:4,className:k().sidebar,children:[(0,r.jsxs)(l.azJ,{direction:"column",spacing:2,children:[(0,r.jsx)(l.DZT,{variant:"big",children:i("Formlabs Texture Engine")}),(0,r.jsx)(l.EYj,{children:i("A powerful, web-based tool built to apply displacement maps to the surface of 3D models.")})]}),(0,r.jsxs)(l.azJ,{direction:"column",children:[(0,r.jsx)("input",{type:"file",hidden:!0,ref:f,onChange:e=>{e.target.files&&e.target.files[0]&&I(e.target.files[0])},accept:"image/png, image/jpeg, .stl"}),(0,r.jsx)(l.$nd,{className:k().uploadBtn,onClick:()=>(()=>{var e;null==(e=f.current)||e.click()})(),trackingLabel:"File select",variant:"primary",children:(0,r.jsx)(l.EYj,{variant:"card",as:"span",children:i("Upload 3D model or displacement map")})})]}),h.map(e=>{var t;return(0,r.jsxs)(l.azJ,{direction:"column",children:[(0,r.jsxs)(l.azJ,{alignItems:"center",justifyContent:"between",className:k().blockTitles,children:[(0,r.jsx)(l.EYj,{className:k().blockTitle,children:e.title}),(0,r.jsx)(l.EYj,{className:k().blockValue,children:v[e.title]})]}),(0,r.jsx)(l.Apm,{className:k().slider,max:e.max,min:e.min,onChange:t=>((e,t)=>{let n={...v};n[e]!==t&&(n[e]=Number(t.toFixed(3)),x(n))})(e.id,t),step:e.step,value:null!=(t=v[e.id])?t:e.max}),(0,r.jsx)(l.EYj,{className:k().blockDescription,children:e.description})]},e.id)}),(0,r.jsxs)(l.azJ,{direction:"column",children:[(0,r.jsx)(l.azJ,{children:(0,r.jsx)(l.EYj,{className:k().blockTitle,children:i("Displacement Map")})}),(0,r.jsx)(l.azJ,{children:(0,r.jsx)(l.EYj,{className:k().blockDescription,children:i("Use one of the below presets or drag and drop your own displacement map image (.png, .jpg) onto this window.")})}),(0,r.jsx)("div",{className:k().textureGrid,children:n.map(e=>(0,r.jsx)(l.$nd,{className:s()(e===m&&k().selectedTexture),onClick:()=>d(e),style:{backgroundImage:"url(".concat(e,")")},trackingContext:{displacementMap:e},trackingLabel:"Displacement map select",variant:"unstyled"},e))})]})]}),(0,r.jsx)(l.azJ,{className:k().canvasContainer,children:(0,r.jsx)(y,{scale:v[A.SCALE],amplitude:v[A.AMPLITUDE],sharpness:v[A.SHARPNESS],textureSrc:m,meshSrc:p,maxTriangles:v[A.MAX_TRIANGLES],offset:v[A.OFFSET],demoOnly:!u})})]})}},77131:e=>{e.exports={main:"Meshy_main__mOcKj",dragActive:"Meshy_dragActive__DwMeQ",uploadBtn:"Meshy_uploadBtn__sySa8",sidebar:"Meshy_sidebar__qbygX",blockTitles:"Meshy_blockTitles__iYto_",blockTitle:"Meshy_blockTitle__Usc8p",blockValue:"Meshy_blockValue__Eh3ZP",blockDescription:"Meshy_blockDescription__OYuGq",slider:"Meshy_slider__6PywF",textureGrid:"Meshy_textureGrid__crLAA",selectedTexture:"Meshy_selectedTexture__ncmbY",canvasContainer:"Meshy_canvasContainer__ZyJKj"}}}]);