lamina/lamina.cjs.js

🍰 An extensable, layer based shader material for ThreeJS.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),D=require("@react-three/fiber"),a=require("react"),O=require("react-dom/client"),h=require("leva"),C=require("three"),u=require("./vanilla-t_CDvKEO.cjs");function N(e){const t=u.LAYERS[e.constructor],f=new t;let r="";return Object.entries(e.properties).forEach(([s,n])=>{const o=t["u_"+s]??f[s];switch(s){case"name":n!==e.constructor&&(r+=` ${s}={${JSON.stringify(n)}}`);break;case"visible":n||(r+=` ${s}={${JSON.stringify(n)}}`);break;default:n!==o&&(r+=` ${s}={${JSON.stringify(n)}}`);break}}),r}function P(e,t){return`
    <LayerMaterial${N(t)}>
      ${e.map(s=>{const n=N(s);return`<${s.constructor}${n} />`}).join(`
	`)}
    </LayerMaterial>
    `}function E(e){const t=u.LAYERS[e.constructor],f=new t;let r="	";return Object.entries(e.properties).forEach(([n,o],g)=>{var L;const y=`
		`;if(n.includes("color")){const $=typeof o=="string"?o:"#"+o.getHexString();r+=`${n}: ${JSON.stringify($)},${y}`}else{const $=(L=t["u_"+n])!=null?L:f[n];switch(n){case"name":o!==e.constructor&&(r+=`${n}: ${JSON.stringify(o)},${y}`);break;case"visible":o||(r+=`${n}:${JSON.stringify(o)},${y}`);break;default:o!==$&&(r+=`${n}: ${JSON.stringify(o)},${y}`);break}}}),r}function q(e,t){const f=E(t),r=`${e.map(n=>`new ${n.constructor}({
      ${E(n)}
      })`).join(`,
		`)}`;return`
  new LayerMaterial({
    ${f}
    layers: [
      ${r}
    ]
  })`}D.extend({LayerMaterial:u.LayerMaterial});function z({name:e,layers:t,store:f,setUpdate:r}){return h.useControls(e,()=>{const s={};return t.forEach((n,o)=>{const g=`${n.label} ~${o}`;s[g]=n,s[g].onChange=()=>r([`${e}.${g}`,n.label])}),s},{store:f},[t,e]),null}const A=a.forwardRef(({children:e,...t},f)=>{var M,R,v;const r=a.useRef(null);a.useImperativeHandle(f,()=>r.current);const s=h.useCreateStore(),[n,o]=a.useState({}),[g,L]=a.useState(["",""]),y=a.useMemo(()=>new C.TextureLoader,[]);h.useControls({"Copy JSX":h.button(()=>{const i=r.current.layers.map(d=>d.serialize()),c=P(i,r.current.serialize());navigator.clipboard.writeText(c)}),"Copy JS":h.button(()=>{const i=r.current.layers.map(d=>d.serialize()),c=q(i,r.current.serialize());navigator.clipboard.writeText(c)})},{store:s});const{Lighting:$}=h.useControls("Base",{Color:{value:"#"+new C.Color(((M=r.current)==null?void 0:M.color)||(t==null?void 0:t.color)||"white").convertLinearToSRGB().getHexString(),onChange:i=>{r.current.color=i}},Alpha:{value:((R=r.current)==null?void 0:R.alpha)||(t==null?void 0:t.alpha)||1,min:0,max:1,onChange:i=>{r.current.alpha=i}},Lighting:{value:((v=r.current)==null?void 0:v.lighting)||(t==null?void 0:t.lighting)||"basic",options:Object.keys(u.ShadingTypes)}},{store:s}),[w,T]=a.useMemo(()=>u.getLayerMaterialArgs({...t,lighting:$}),[t,$]);return a.useEffect(()=>{const i=r.current.layers,c={};i.forEach((d,b)=>{d.getSchema&&(c[`${d.name} ~${b}`]=d.getSchema())}),o(c)},[e]),a.useEffect(()=>{const c=s.getData()[g[0]];if(c){const d=g[0].split("."),b=parseInt(d[0].split(" ~")[1]),x=g[1],J=r.current.layers[b].uuid,S=r.current.uniforms[`u_${J}_${x}`],j=r.current.layers[b];x!=="map"?(j[x]=c.value,S?S.value=u.getUniform(c.value):(j.buildShaders(j.constructor),r.current.refresh())):(async()=>{try{if(c.value){const _=await y.loadAsync(c.value);j[x]=_,S.value=_}else j[x]=void 0,S.value=void 0}catch(_){console.error(_)}})()}},[g]),a.useLayoutEffect(()=>{var i;r.current.layers=(i=r.current.__r3f.children)==null?void 0:i.map(c=>c.object),r.current.refresh()},[e,w]),a.useLayoutEffect(()=>{const i=document.body.querySelector("#root"),c=document.createElement("div");return i&&(i.appendChild(c),O.createRoot(c).render(l.jsx(h.LevaPanel,{titleBar:{title:t.name||r.current.name},store:s}))),()=>{c.remove()}},[t.name]),l.jsxs(l.Fragment,{children:[Object.entries(n).map(([i,c],d)=>l.jsx(z,{name:i,layers:c,store:s,setUpdate:L},`${i} ~${d}`)),l.jsx("layerMaterial",{args:[w],ref:r,...T,children:e})]})});D.extend({LayerMaterial:u.LayerMaterial,Depth_:u.Depth,Color_:u.Color,Noise_:u.Noise,Fresnel_:u.Fresnel,Gradient_:u.Gradient,Matcap_:u.Matcap,Texture_:u.Texture,Displace_:u.Displace,Normal_:u.Normal});const F=a.forwardRef(({children:e,...t},f)=>{const r=a.useRef(null);a.useImperativeHandle(f,()=>r.current),a.useLayoutEffect(()=>{var o;r.current.layers=(o=r.current.__r3f.children)==null?void 0:o.map(g=>g.object),r.current.refresh()},[e]);const[s,n]=a.useMemo(()=>u.getLayerMaterialArgs(t),[t]);return l.jsx("layerMaterial",{args:[s],ref:r,...n,children:e})});function m(e){return[{mode:e==null?void 0:e.mode,visible:e==null?void 0:e.visible,type:e==null?void 0:e.type,mapping:e==null?void 0:e.mapping,map:e==null?void 0:e.map,axes:e==null?void 0:e.axes}]}const G=a.forwardRef((e,t)=>l.jsx("depth_",{args:m(e),ref:t,...e})),H=a.forwardRef((e,t)=>l.jsx("color_",{ref:t,args:m(e),...e})),B=a.forwardRef((e,t)=>l.jsx("noise_",{ref:t,args:m(e),...e})),I=a.forwardRef((e,t)=>l.jsx("fresnel_",{ref:t,args:m(e),...e})),U=a.forwardRef((e,t)=>l.jsx("gradient_",{ref:t,args:m(e),...e})),V=a.forwardRef((e,t)=>l.jsx("matcap_",{ref:t,args:m(e),...e})),X=a.forwardRef((e,t)=>l.jsx("texture_",{ref:t,args:m(e),...e})),Y=a.forwardRef((e,t)=>l.jsx("displace_",{ref:t,args:m(e),...e})),K=a.forwardRef((e,t)=>l.jsx("normal_",{ref:t,args:m(e),...e}));exports.Color=H;exports.DebugLayerMaterial=A;exports.Depth=G;exports.Displace=Y;exports.Fresnel=I;exports.Gradient=U;exports.LayerMaterial=F;exports.Matcap=V;exports.Noise=B;exports.Normal=K;exports.Texture=X;
//# sourceMappingURL=lamina.cjs.js.map