diff --git a/assets/index-BfWpMAOv.js b/assets/index-CU26GGTl.js similarity index 99% rename from assets/index-BfWpMAOv.js rename to assets/index-CU26GGTl.js index 0bbb04b..6dc0029 100644 --- a/assets/index-BfWpMAOv.js +++ b/assets/index-CU26GGTl.js @@ -4106,4 +4106,4 @@ void main() { vec3 clampedHdrColor = max( HALF_FLOAT_MIN, min( HALF_FLOAT_MAX, hdrColor )); gl_FragColor = vec4( clampedHdrColor , 1.0 ); } -`;class h8 extends Yi{constructor({gamma:e,offsetHdr:t,offsetSdr:i,gainMapMin:r,gainMapMax:s,maxDisplayBoost:o,hdrCapacityMin:a,hdrCapacityMax:l,sdr:f,gainMap:h}){super({name:"GainMapDecoderMaterial",vertexShader:u8,fragmentShader:f8,uniforms:{sdr:{value:f},gainMap:{value:h},gamma:{value:new H(1/e[0],1/e[1],1/e[2])},offsetHdr:{value:new H().fromArray(t)},offsetSdr:{value:new H().fromArray(i)},gainMapMin:{value:new H().fromArray(r)},gainMapMax:{value:new H().fromArray(s)},weightFactor:{value:(Math.log2(o)-a)/(l-a)}},blending:xs,depthTest:!1,depthWrite:!1}),this._maxDisplayBoost=o,this._hdrCapacityMin=a,this._hdrCapacityMax=l,this.needsUpdate=!0,this.uniformsNeedUpdate=!0}get sdr(){return this.uniforms.sdr.value}set sdr(e){this.uniforms.sdr.value=e}get gainMap(){return this.uniforms.gainMap.value}set gainMap(e){this.uniforms.gainMap.value=e}get offsetHdr(){return this.uniforms.offsetHdr.value.toArray()}set offsetHdr(e){this.uniforms.offsetHdr.value.fromArray(e)}get offsetSdr(){return this.uniforms.offsetSdr.value.toArray()}set offsetSdr(e){this.uniforms.offsetSdr.value.fromArray(e)}get gainMapMin(){return this.uniforms.gainMapMin.value.toArray()}set gainMapMin(e){this.uniforms.gainMapMin.value.fromArray(e)}get gainMapMax(){return this.uniforms.gainMapMax.value.toArray()}set gainMapMax(e){this.uniforms.gainMapMax.value.fromArray(e)}get gamma(){const e=this.uniforms.gamma.value;return[1/e.x,1/e.y,1/e.z]}set gamma(e){const t=this.uniforms.gamma.value;t.x=1/e[0],t.y=1/e[1],t.z=1/e[2]}get hdrCapacityMin(){return this._hdrCapacityMin}set hdrCapacityMin(e){this._hdrCapacityMin=e,this.calculateWeight()}get hdrCapacityMax(){return this._hdrCapacityMax}set hdrCapacityMax(e){this._hdrCapacityMax=e,this.calculateWeight()}get maxDisplayBoost(){return this._maxDisplayBoost}set maxDisplayBoost(e){this._maxDisplayBoost=Math.max(1,Math.min(65504,e)),this.calculateWeight()}calculateWeight(){const e=(Math.log2(this._maxDisplayBoost)-this._hdrCapacityMin)/(this._hdrCapacityMax-this._hdrCapacityMin);this.uniforms.weightFactor.value=Math.max(0,Math.min(1,e))}}class kP extends Error{}class zP extends Error{}const Ku=(n,e,t)=>{var i;let r;const s=(i=n.attributes.getNamedItem(e))===null||i===void 0?void 0:i.nodeValue;if(s)r=s;else{const o=n.getElementsByTagName(e)[0];if(o){const a=o.getElementsByTagName("rdf:li");if(a.length===3)r=Array.from(a).map(l=>l.innerHTML);else throw new Error(`Gainmap metadata contains an array of items for ${e} but its length is not 3`)}else{if(t)return t;throw new Error(`Can't find ${e} in gainmap metadata`)}}return r},d8=n=>{var e,t;let i;typeof TextDecoder<"u"?i=new TextDecoder().decode(n):i=n.toString();let r=i.indexOf("",r);i.slice(r,o+10);const a=i.slice(r,o+10);try{const f=s.parseFromString(a,"text/xml").getElementsByTagName("rdf:Description")[0],h=Ku(f,"hdrgm:GainMapMin","0"),d=Ku(f,"hdrgm:GainMapMax"),p=Ku(f,"hdrgm:Gamma","1"),g=Ku(f,"hdrgm:OffsetSDR","0.015625"),y=Ku(f,"hdrgm:OffsetHDR","0.015625");let S=(e=f.attributes.getNamedItem("hdrgm:HDRCapacityMin"))===null||e===void 0?void 0:e.nodeValue;S||(S="0");const _=(t=f.attributes.getNamedItem("hdrgm:HDRCapacityMax"))===null||t===void 0?void 0:t.nodeValue;if(!_)throw new Error("Incomplete gainmap metadata");return{gainMapMin:Array.isArray(h)?h.map(m=>parseFloat(m)):[parseFloat(h),parseFloat(h),parseFloat(h)],gainMapMax:Array.isArray(d)?d.map(m=>parseFloat(m)):[parseFloat(d),parseFloat(d),parseFloat(d)],gamma:Array.isArray(p)?p.map(m=>parseFloat(m)):[parseFloat(p),parseFloat(p),parseFloat(p)],offsetSdr:Array.isArray(g)?g.map(m=>parseFloat(m)):[parseFloat(g),parseFloat(g),parseFloat(g)],offsetHdr:Array.isArray(y)?y.map(m=>parseFloat(m)):[parseFloat(y),parseFloat(y),parseFloat(y)],hdrCapacityMin:parseFloat(S),hdrCapacityMax:parseFloat(_)}}catch{}r=i.indexOf("{const r=this.options.debug,s=new DataView(e.buffer);if(s.getUint16(0)!==65496){i(new Error("Not a valid jpeg"));return}const o=s.byteLength;let a=2,l=0,f;for(;a250){i(new Error(`Found no marker after ${l} loops 😵`));return}if(s.getUint8(a)!==255){i(new Error(`Not a valid marker at offset 0x${a.toString(16)}, found: 0x${s.getUint8(a).toString(16)}`));return}if(f=s.getUint8(a+1),r&&console.log(`Marker: ${f.toString(16)}`),f===226){r&&console.log("Found APP2 marker (0xffe2)");const h=a+4;if(s.getUint32(h)===1297106432){const d=h+4;let p;if(s.getUint16(d)===18761)p=!1;else if(s.getUint16(d)===19789)p=!0;else{i(new Error("No valid endianness marker found in TIFF header"));return}if(s.getUint16(d+2,!p)!==42){i(new Error("Not valid TIFF data! (no 0x002A marker)"));return}const g=s.getUint32(d+4,!p);if(g<8){i(new Error("Not valid TIFF data! (First offset less than 8)"));return}const y=d+g,S=s.getUint16(y,!p),_=y+2;let m=0;for(let P=_;P<_+12*S;P+=12)s.getUint16(P,!p)===45057&&(m=s.getUint32(P+8,!p));const M=y+2+S*12+4,w=[];for(let P=M;P{const e=d8(n);if(!e)throw new zP("Gain map XMP metadata not found");const i=await new p8({extractFII:!0,extractNonFII:!0}).extract(n);if(i.length!==2)throw new kP("Gain map recovery image not found");return{sdr:new Uint8Array(await i[0].arrayBuffer()),gainMap:new Uint8Array(await i[1].arrayBuffer()),metadata:e}},bC=n=>new Promise((e,t)=>{const i=document.createElement("img");i.onload=()=>{e(i)},i.onerror=r=>{t(r)},i.src=URL.createObjectURL(n)});class HP extends ui{constructor(e,t){super(t),e&&(this._renderer=e),this._internalLoadingManager=new u0}setRenderer(e){return this._renderer=e,this}setRenderTargetOptions(e){return this._renderTargetOptions=e,this}prepareQuadRenderer(){this._renderer||console.warn("WARNING: An existing WebGL Renderer was not passed to this Loader constructor or in setRenderer, the result of this Loader will need to be converted to a Data Texture with toDataTexture() before you can use it in your renderer.");const e=new h8({gainMapMax:[1,1,1],gainMapMin:[0,0,0],gamma:[1,1,1],offsetHdr:[1,1,1],offsetSdr:[1,1,1],hdrCapacityMax:1,hdrCapacityMin:0,maxDisplayBoost:1,gainMap:new en,sdr:new en});return new m1({width:16,height:16,type:ei,colorSpace:Fr,material:e,renderer:this._renderer,renderTargetOptions:this._renderTargetOptions})}async render(e,t,i,r){const s=r?new Blob([r],{type:"image/jpeg"}):void 0,o=new Blob([i],{type:"image/jpeg"});let a,l,f=!1;if(typeof createImageBitmap>"u"){const p=await Promise.all([s?bC(s):Promise.resolve(void 0),bC(o)]);l=p[0],a=p[1],f=!0}else{const p=await Promise.all([s?createImageBitmap(s,{imageOrientation:"flipY"}):Promise.resolve(void 0),createImageBitmap(o,{imageOrientation:"flipY"})]);l=p[0],a=p[1]}const h=new en(l||new ImageData(2,2),Jo,Dn,Dn,$t,j_,Fn,Ji,1,Fr);h.flipY=f,h.needsUpdate=!0;const d=new en(a,Jo,Dn,Dn,$t,j_,Fn,Ji,1,nr);d.flipY=f,d.needsUpdate=!0,e.width=a.width,e.height=a.height,e.material.gainMap=h,e.material.sdr=d,e.material.gainMapMin=t.gainMapMin,e.material.gainMapMax=t.gainMapMax,e.material.offsetHdr=t.offsetHdr,e.material.offsetSdr=t.offsetSdr,e.material.gamma=t.gamma,e.material.hdrCapacityMin=t.hdrCapacityMin,e.material.hdrCapacityMax=t.hdrCapacityMax,e.material.maxDisplayBoost=Math.pow(2,t.hdrCapacityMax),e.material.needsUpdate=!0,e.render()}}class g8 extends HP{load([e,t,i],r,s,o){const a=this.prepareQuadRenderer();let l,f,h;const d=async()=>{if(l&&f&&h){try{await this.render(a,h,l,f)}catch(b){this.manager.itemError(e),this.manager.itemError(t),this.manager.itemError(i),typeof o=="function"&&o(b),a.disposeOnDemandRenderer();return}typeof r=="function"&&r(a),this.manager.itemEnd(e),this.manager.itemEnd(t),this.manager.itemEnd(i),a.disposeOnDemandRenderer()}};let p=!0,g=0,y=0,S=!0,_=0,m=0,A=!0,M=0,w=0;const P=()=>{if(typeof s=="function"){const b=g+_+M,C=y+m+w,U=p&&S&&A;s(new ProgressEvent("progress",{lengthComputable:U,loaded:C,total:b}))}};this.manager.itemStart(e),this.manager.itemStart(t),this.manager.itemStart(i);const T=new li(this._internalLoadingManager);T.setResponseType("arraybuffer"),T.setRequestHeader(this.requestHeader),T.setPath(this.path),T.setWithCredentials(this.withCredentials),T.load(e,async b=>{if(typeof b=="string")throw new Error("Invalid sdr buffer");l=b,await d()},b=>{p=b.lengthComputable,y=b.loaded,g=b.total,P()},b=>{this.manager.itemError(e),typeof o=="function"&&o(b)});const L=new li(this._internalLoadingManager);L.setResponseType("arraybuffer"),L.setRequestHeader(this.requestHeader),L.setPath(this.path),L.setWithCredentials(this.withCredentials),L.load(t,async b=>{if(typeof b=="string")throw new Error("Invalid gainmap buffer");f=b,await d()},b=>{S=b.lengthComputable,m=b.loaded,_=b.total,P()},b=>{this.manager.itemError(t),typeof o=="function"&&o(b)});const B=new li(this._internalLoadingManager);return B.setRequestHeader(this.requestHeader),B.setPath(this.path),B.setWithCredentials(this.withCredentials),B.load(i,async b=>{if(typeof b!="string")throw new Error("Invalid metadata string");h=JSON.parse(b),await d()},b=>{A=b.lengthComputable,w=b.loaded,M=b.total,P()},b=>{this.manager.itemError(i),typeof o=="function"&&o(b)}),a}}class v8 extends HP{load(e,t,i,r){const s=this.prepareQuadRenderer(),o=new li(this._internalLoadingManager);return o.setResponseType("arraybuffer"),o.setRequestHeader(this.requestHeader),o.setPath(this.path),o.setWithCredentials(this.withCredentials),this.manager.itemStart(e),o.load(e,async a=>{if(typeof a=="string")throw new Error("Invalid buffer, received [string], was expecting [ArrayBuffer]");const l=new Uint8Array(a);let f,h,d;try{const p=await m8(l);f=p.sdr,h=p.gainMap,d=p.metadata}catch(p){if(p instanceof zP||p instanceof kP)console.warn(`Failure to reconstruct an HDR image from ${e}: Gain map metadata not found in the file, HDRJPGLoader will render the SDR jpeg`),d={gainMapMin:[0,0,0],gainMapMax:[1,1,1],gamma:[1,1,1],hdrCapacityMin:0,hdrCapacityMax:1,offsetHdr:[0,0,0],offsetSdr:[0,0,0]},f=l;else throw p}try{await this.render(s,d,f,h)}catch(p){this.manager.itemError(e),typeof r=="function"&&r(p),s.disposeOnDemandRenderer();return}typeof t=="function"&&t(s),this.manager.itemEnd(e),s.disposeOnDemandRenderer()},i,a=>{this.manager.itemError(e),typeof r=="function"&&r(a)}),s}}const Yy={apartment:"lebombo_1k.hdr",city:"potsdamer_platz_1k.hdr",dawn:"kiara_1_dawn_1k.hdr",forest:"forest_slope_1k.hdr",lobby:"st_fagans_interior_1k.hdr",night:"dikhololo_night_1k.hdr",park:"rooitou_park_1k.hdr",studio:"studio_small_03_1k.hdr",sunset:"venice_sunset_1k.hdr",warehouse:"empty_warehouse_01_1k.hdr"},y8="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/",Np=n=>Array.isArray(n);function GP({files:n=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:e="",preset:t=void 0,encoding:i=void 0,extensions:r}={}){var s;let o=null,a=!1;if(t){if(!(t in Yy))throw new Error("Preset must be one of: "+Object.keys(Yy).join(", "));n=Yy[t],e=y8}const l=Np(n)&&n.length===6,f=Np(n)&&n.length===3&&n.some(_=>_.endsWith("json")),h=Np(n)?n[0]:n;a=Np(n);const d=l?"cube":f?"webp":h.startsWith("data:application/exr")?"exr":h.startsWith("data:application/hdr")?"hdr":h.startsWith("data:image/jpeg")?"jpg":(s=h.split(".").pop())==null||(s=s.split("?"))==null||(s=s.shift())==null?void 0:s.toLowerCase();if(o=d==="cube"?WI:d==="hdr"?n8:d==="exr"?i8:d==="jpg"||d==="jpeg"?v8:d==="webp"?g8:null,!o)throw new Error("useEnvironment: Unrecognized file extension: "+n);const p=tr(_=>_.gl);Ce.useLayoutEffect(()=>{if(d!=="webp"&&d!=="jpg"&&d!=="jpeg")return;function _(){fl.clear(o,a?[n]:n)}p.domElement.addEventListener("webglcontextlost",_,{once:!0})},[n,p.domElement]);const g=fl(o,a?[n]:n,_=>{(d==="webp"||d==="jpg"||d==="jpeg")&&_.setRenderer(p),_.setPath==null||_.setPath(e),r&&r(_)});let y=a?g[0]:g;if(d==="jpg"||d==="jpeg"||d==="webp"){var S;y=(S=y.renderTarget)==null?void 0:S.texture}return y.mapping=l?Es:zc,"colorSpace"in y?y.colorSpace=i??l?"srgb":"srgb-linear":y.encoding=i??l?l8:a8,y}const _8=n=>n.current&&n.current.isScene,x8=n=>_8(n)?n.current:n;function g1(n,e,t,i,r={}){var s,o,a,l,f;r={backgroundBlurriness:(s=r.blur)!==null&&s!==void 0?s:0,backgroundIntensity:1,backgroundRotation:[0,0,0],environmentIntensity:1,environmentRotation:[0,0,0],...r};const h=x8(e||t),d=h.background,p=h.environment,g={backgroundBlurriness:h.backgroundBlurriness,backgroundIntensity:h.backgroundIntensity,backgroundRotation:(o=(a=h.backgroundRotation)==null||a.clone==null?void 0:a.clone())!==null&&o!==void 0?o:[0,0,0],environmentIntensity:h.environmentIntensity,environmentRotation:(l=(f=h.environmentRotation)==null||f.clone==null?void 0:f.clone())!==null&&l!==void 0?l:[0,0,0]};return n!=="only"&&(h.environment=i),n&&(h.background=i),To(h,r),()=>{n!=="only"&&(h.environment=p),n&&(h.background=d),To(h,g)}}function v1({scene:n,background:e=!1,map:t,...i}){const r=tr(s=>s.scene);return Ce.useLayoutEffect(()=>{if(t)return g1(e,n,r,t,i)}),null}function VP({background:n=!1,scene:e,blur:t,backgroundBlurriness:i,backgroundIntensity:r,backgroundRotation:s,environmentIntensity:o,environmentRotation:a,...l}){const f=GP(l),h=tr(d=>d.scene);return Ce.useLayoutEffect(()=>g1(n,e,h,f,{blur:t,backgroundBlurriness:i,backgroundIntensity:r,backgroundRotation:s,environmentIntensity:o,environmentRotation:a})),null}function A8({children:n,near:e=1,far:t=1e3,resolution:i=256,frames:r=1,map:s,background:o=!1,blur:a,backgroundBlurriness:l,backgroundIntensity:f,backgroundRotation:h,environmentIntensity:d,environmentRotation:p,scene:g,files:y,path:S,preset:_=void 0,extensions:m}){const A=tr(B=>B.gl),M=tr(B=>B.scene),w=Ce.useRef(null),[P]=Ce.useState(()=>new Yc),T=Ce.useMemo(()=>{const B=new PA(i);return B.texture.type=ei,B},[i]);Ce.useLayoutEffect(()=>(r===1&&w.current.update(A,P),g1(o,g,M,T.texture,{blur:a,backgroundBlurriness:l,backgroundIntensity:f,backgroundRotation:h,environmentIntensity:d,environmentRotation:p})),[n,P,T.texture,g,M,o,r,A]);let L=1;return h1(()=>{(r===1/0||LfP({GroundProjectedEnvImpl:g4}),[]);const a=Ce.useMemo(()=>[o],[o]),l=(e=n.ground)==null?void 0:e.height,f=(t=n.ground)==null?void 0:t.radius,h=(i=(r=n.ground)==null?void 0:r.scale)!==null&&i!==void 0?i:1e3;return Ce.createElement(Ce.Fragment,null,Ce.createElement(v1,sg({},n,{map:o})),Ce.createElement("groundProjectedEnvImpl",{args:a,scale:h,height:l,radius:f}))}function M8(n){return n.ground?Ce.createElement(S8,n):n.map?Ce.createElement(v1,n):n.children?Ce.createElement(A8,n):Ce.createElement(VP,n)}function E8(n){const{nodes:e,materials:t}=wh("/pic-ar-catalog/earth.gltf"),i=Ce.useRef();return h1((r,s)=>{i.current.rotation.y+=.2*s}),kt.jsx("group",{...n,dispose:null,children:kt.jsx("mesh",{ref:i,geometry:e.Object_4.geometry,material:t["Scene_-_Root"],scale:2})})}wh.preload("/pic-ar-catalog/earth.gltf");const IC=Ce.forwardRef(function(n,e){return kt.jsxs(e4,{gl:{preserveDrawingBuffer:!0},...n,style:{width:"100%",background:"black",...n.style},ref:e,children:[kt.jsx("ambientLight",{}),kt.jsx(o8,{enableZoom:!0}),kt.jsx(Ce.Suspense,{fallback:null,children:kt.jsx(E8,{})}),kt.jsx(M8,{preset:"sunset"})]})});function w8(){const[n,e]=Ce.useState("3d"),[t,i]=Ce.useState(null),r=()=>{e(n==="camera"?"3d":"camera")},s=Ce.useRef(null),o=Ce.useRef(null),a=Ce.useRef(null),l=Ce.useRef(null),f=Ce.useRef(null),h=Ce.useCallback(()=>{const d=s.current.takePhoto(),p=o.current,g=a.current,y=l.current,S=p.getContext("2d"),_=y.getContext("2d"),m=new Image;m.src=d,m.onload=()=>{p.width=m.width,p.height=m.height,S.drawImage(m,0,0),y.width=m.width,y.height=m.height,_.drawImage(p,0,0),_.drawImage(g,0,0,m.width,m.height);const A=y.toDataURL("image/jpeg");i(A),f.current.href=A,f.current.download="captured_image.jpg"}},[s,o,a,l]);return kt.jsxs("div",{style:{height:"100%"},children:[kt.jsx("canvas",{ref:o,style:{display:"none"}}),kt.jsx("canvas",{ref:l,style:{display:"none"}}),kt.jsx("h3",{children:"Example of 3d model on the Canvas"}),kt.jsx("button",{onClick:r,children:"Open Camera"}),kt.jsxs("div",{style:{display:n==="camera"?"block":"none"},children:[kt.jsx(nb,{ref:s,errorMessages:{noCameraAccessible:"noCameraAccessible",permissionDenied:"noCameraAccessible",switchCamera:"switchCamera",canvas:"canvas"}}),kt.jsx("button",{style:{position:"fixed",bottom:"10px",zIndex:"1"},onClick:h,children:"Take photo"}),kt.jsxs("div",{style:{position:"absolute",width:"100px",right:"15px",top:"15px",zIndex:2,display:t?"block":"none"},children:[kt.jsx("img",{style:{width:"100%",height:"100%"},src:t||"",alt:"Taken photo"}),kt.jsx("a",{ref:f,style:{marginTop:"10px",display:"block"},children:"Download Image"})]}),kt.jsx(IC,{ref:a,style:{background:"none",width:"100%",height:"100%",position:"absolute",left:0,top:0}})]}),kt.jsx(IC,{style:{display:n==="3d"?"block":"none"}})]})}VR(document.getElementById("root")).render(kt.jsx(Ce.StrictMode,{children:kt.jsx(w8,{})})); +`;class h8 extends Yi{constructor({gamma:e,offsetHdr:t,offsetSdr:i,gainMapMin:r,gainMapMax:s,maxDisplayBoost:o,hdrCapacityMin:a,hdrCapacityMax:l,sdr:f,gainMap:h}){super({name:"GainMapDecoderMaterial",vertexShader:u8,fragmentShader:f8,uniforms:{sdr:{value:f},gainMap:{value:h},gamma:{value:new H(1/e[0],1/e[1],1/e[2])},offsetHdr:{value:new H().fromArray(t)},offsetSdr:{value:new H().fromArray(i)},gainMapMin:{value:new H().fromArray(r)},gainMapMax:{value:new H().fromArray(s)},weightFactor:{value:(Math.log2(o)-a)/(l-a)}},blending:xs,depthTest:!1,depthWrite:!1}),this._maxDisplayBoost=o,this._hdrCapacityMin=a,this._hdrCapacityMax=l,this.needsUpdate=!0,this.uniformsNeedUpdate=!0}get sdr(){return this.uniforms.sdr.value}set sdr(e){this.uniforms.sdr.value=e}get gainMap(){return this.uniforms.gainMap.value}set gainMap(e){this.uniforms.gainMap.value=e}get offsetHdr(){return this.uniforms.offsetHdr.value.toArray()}set offsetHdr(e){this.uniforms.offsetHdr.value.fromArray(e)}get offsetSdr(){return this.uniforms.offsetSdr.value.toArray()}set offsetSdr(e){this.uniforms.offsetSdr.value.fromArray(e)}get gainMapMin(){return this.uniforms.gainMapMin.value.toArray()}set gainMapMin(e){this.uniforms.gainMapMin.value.fromArray(e)}get gainMapMax(){return this.uniforms.gainMapMax.value.toArray()}set gainMapMax(e){this.uniforms.gainMapMax.value.fromArray(e)}get gamma(){const e=this.uniforms.gamma.value;return[1/e.x,1/e.y,1/e.z]}set gamma(e){const t=this.uniforms.gamma.value;t.x=1/e[0],t.y=1/e[1],t.z=1/e[2]}get hdrCapacityMin(){return this._hdrCapacityMin}set hdrCapacityMin(e){this._hdrCapacityMin=e,this.calculateWeight()}get hdrCapacityMax(){return this._hdrCapacityMax}set hdrCapacityMax(e){this._hdrCapacityMax=e,this.calculateWeight()}get maxDisplayBoost(){return this._maxDisplayBoost}set maxDisplayBoost(e){this._maxDisplayBoost=Math.max(1,Math.min(65504,e)),this.calculateWeight()}calculateWeight(){const e=(Math.log2(this._maxDisplayBoost)-this._hdrCapacityMin)/(this._hdrCapacityMax-this._hdrCapacityMin);this.uniforms.weightFactor.value=Math.max(0,Math.min(1,e))}}class kP extends Error{}class zP extends Error{}const Ku=(n,e,t)=>{var i;let r;const s=(i=n.attributes.getNamedItem(e))===null||i===void 0?void 0:i.nodeValue;if(s)r=s;else{const o=n.getElementsByTagName(e)[0];if(o){const a=o.getElementsByTagName("rdf:li");if(a.length===3)r=Array.from(a).map(l=>l.innerHTML);else throw new Error(`Gainmap metadata contains an array of items for ${e} but its length is not 3`)}else{if(t)return t;throw new Error(`Can't find ${e} in gainmap metadata`)}}return r},d8=n=>{var e,t;let i;typeof TextDecoder<"u"?i=new TextDecoder().decode(n):i=n.toString();let r=i.indexOf("",r);i.slice(r,o+10);const a=i.slice(r,o+10);try{const f=s.parseFromString(a,"text/xml").getElementsByTagName("rdf:Description")[0],h=Ku(f,"hdrgm:GainMapMin","0"),d=Ku(f,"hdrgm:GainMapMax"),p=Ku(f,"hdrgm:Gamma","1"),g=Ku(f,"hdrgm:OffsetSDR","0.015625"),y=Ku(f,"hdrgm:OffsetHDR","0.015625");let S=(e=f.attributes.getNamedItem("hdrgm:HDRCapacityMin"))===null||e===void 0?void 0:e.nodeValue;S||(S="0");const _=(t=f.attributes.getNamedItem("hdrgm:HDRCapacityMax"))===null||t===void 0?void 0:t.nodeValue;if(!_)throw new Error("Incomplete gainmap metadata");return{gainMapMin:Array.isArray(h)?h.map(m=>parseFloat(m)):[parseFloat(h),parseFloat(h),parseFloat(h)],gainMapMax:Array.isArray(d)?d.map(m=>parseFloat(m)):[parseFloat(d),parseFloat(d),parseFloat(d)],gamma:Array.isArray(p)?p.map(m=>parseFloat(m)):[parseFloat(p),parseFloat(p),parseFloat(p)],offsetSdr:Array.isArray(g)?g.map(m=>parseFloat(m)):[parseFloat(g),parseFloat(g),parseFloat(g)],offsetHdr:Array.isArray(y)?y.map(m=>parseFloat(m)):[parseFloat(y),parseFloat(y),parseFloat(y)],hdrCapacityMin:parseFloat(S),hdrCapacityMax:parseFloat(_)}}catch{}r=i.indexOf("{const r=this.options.debug,s=new DataView(e.buffer);if(s.getUint16(0)!==65496){i(new Error("Not a valid jpeg"));return}const o=s.byteLength;let a=2,l=0,f;for(;a250){i(new Error(`Found no marker after ${l} loops 😵`));return}if(s.getUint8(a)!==255){i(new Error(`Not a valid marker at offset 0x${a.toString(16)}, found: 0x${s.getUint8(a).toString(16)}`));return}if(f=s.getUint8(a+1),r&&console.log(`Marker: ${f.toString(16)}`),f===226){r&&console.log("Found APP2 marker (0xffe2)");const h=a+4;if(s.getUint32(h)===1297106432){const d=h+4;let p;if(s.getUint16(d)===18761)p=!1;else if(s.getUint16(d)===19789)p=!0;else{i(new Error("No valid endianness marker found in TIFF header"));return}if(s.getUint16(d+2,!p)!==42){i(new Error("Not valid TIFF data! (no 0x002A marker)"));return}const g=s.getUint32(d+4,!p);if(g<8){i(new Error("Not valid TIFF data! (First offset less than 8)"));return}const y=d+g,S=s.getUint16(y,!p),_=y+2;let m=0;for(let P=_;P<_+12*S;P+=12)s.getUint16(P,!p)===45057&&(m=s.getUint32(P+8,!p));const M=y+2+S*12+4,w=[];for(let P=M;P{const e=d8(n);if(!e)throw new zP("Gain map XMP metadata not found");const i=await new p8({extractFII:!0,extractNonFII:!0}).extract(n);if(i.length!==2)throw new kP("Gain map recovery image not found");return{sdr:new Uint8Array(await i[0].arrayBuffer()),gainMap:new Uint8Array(await i[1].arrayBuffer()),metadata:e}},bC=n=>new Promise((e,t)=>{const i=document.createElement("img");i.onload=()=>{e(i)},i.onerror=r=>{t(r)},i.src=URL.createObjectURL(n)});class HP extends ui{constructor(e,t){super(t),e&&(this._renderer=e),this._internalLoadingManager=new u0}setRenderer(e){return this._renderer=e,this}setRenderTargetOptions(e){return this._renderTargetOptions=e,this}prepareQuadRenderer(){this._renderer||console.warn("WARNING: An existing WebGL Renderer was not passed to this Loader constructor or in setRenderer, the result of this Loader will need to be converted to a Data Texture with toDataTexture() before you can use it in your renderer.");const e=new h8({gainMapMax:[1,1,1],gainMapMin:[0,0,0],gamma:[1,1,1],offsetHdr:[1,1,1],offsetSdr:[1,1,1],hdrCapacityMax:1,hdrCapacityMin:0,maxDisplayBoost:1,gainMap:new en,sdr:new en});return new m1({width:16,height:16,type:ei,colorSpace:Fr,material:e,renderer:this._renderer,renderTargetOptions:this._renderTargetOptions})}async render(e,t,i,r){const s=r?new Blob([r],{type:"image/jpeg"}):void 0,o=new Blob([i],{type:"image/jpeg"});let a,l,f=!1;if(typeof createImageBitmap>"u"){const p=await Promise.all([s?bC(s):Promise.resolve(void 0),bC(o)]);l=p[0],a=p[1],f=!0}else{const p=await Promise.all([s?createImageBitmap(s,{imageOrientation:"flipY"}):Promise.resolve(void 0),createImageBitmap(o,{imageOrientation:"flipY"})]);l=p[0],a=p[1]}const h=new en(l||new ImageData(2,2),Jo,Dn,Dn,$t,j_,Fn,Ji,1,Fr);h.flipY=f,h.needsUpdate=!0;const d=new en(a,Jo,Dn,Dn,$t,j_,Fn,Ji,1,nr);d.flipY=f,d.needsUpdate=!0,e.width=a.width,e.height=a.height,e.material.gainMap=h,e.material.sdr=d,e.material.gainMapMin=t.gainMapMin,e.material.gainMapMax=t.gainMapMax,e.material.offsetHdr=t.offsetHdr,e.material.offsetSdr=t.offsetSdr,e.material.gamma=t.gamma,e.material.hdrCapacityMin=t.hdrCapacityMin,e.material.hdrCapacityMax=t.hdrCapacityMax,e.material.maxDisplayBoost=Math.pow(2,t.hdrCapacityMax),e.material.needsUpdate=!0,e.render()}}class g8 extends HP{load([e,t,i],r,s,o){const a=this.prepareQuadRenderer();let l,f,h;const d=async()=>{if(l&&f&&h){try{await this.render(a,h,l,f)}catch(b){this.manager.itemError(e),this.manager.itemError(t),this.manager.itemError(i),typeof o=="function"&&o(b),a.disposeOnDemandRenderer();return}typeof r=="function"&&r(a),this.manager.itemEnd(e),this.manager.itemEnd(t),this.manager.itemEnd(i),a.disposeOnDemandRenderer()}};let p=!0,g=0,y=0,S=!0,_=0,m=0,A=!0,M=0,w=0;const P=()=>{if(typeof s=="function"){const b=g+_+M,C=y+m+w,U=p&&S&&A;s(new ProgressEvent("progress",{lengthComputable:U,loaded:C,total:b}))}};this.manager.itemStart(e),this.manager.itemStart(t),this.manager.itemStart(i);const T=new li(this._internalLoadingManager);T.setResponseType("arraybuffer"),T.setRequestHeader(this.requestHeader),T.setPath(this.path),T.setWithCredentials(this.withCredentials),T.load(e,async b=>{if(typeof b=="string")throw new Error("Invalid sdr buffer");l=b,await d()},b=>{p=b.lengthComputable,y=b.loaded,g=b.total,P()},b=>{this.manager.itemError(e),typeof o=="function"&&o(b)});const L=new li(this._internalLoadingManager);L.setResponseType("arraybuffer"),L.setRequestHeader(this.requestHeader),L.setPath(this.path),L.setWithCredentials(this.withCredentials),L.load(t,async b=>{if(typeof b=="string")throw new Error("Invalid gainmap buffer");f=b,await d()},b=>{S=b.lengthComputable,m=b.loaded,_=b.total,P()},b=>{this.manager.itemError(t),typeof o=="function"&&o(b)});const B=new li(this._internalLoadingManager);return B.setRequestHeader(this.requestHeader),B.setPath(this.path),B.setWithCredentials(this.withCredentials),B.load(i,async b=>{if(typeof b!="string")throw new Error("Invalid metadata string");h=JSON.parse(b),await d()},b=>{A=b.lengthComputable,w=b.loaded,M=b.total,P()},b=>{this.manager.itemError(i),typeof o=="function"&&o(b)}),a}}class v8 extends HP{load(e,t,i,r){const s=this.prepareQuadRenderer(),o=new li(this._internalLoadingManager);return o.setResponseType("arraybuffer"),o.setRequestHeader(this.requestHeader),o.setPath(this.path),o.setWithCredentials(this.withCredentials),this.manager.itemStart(e),o.load(e,async a=>{if(typeof a=="string")throw new Error("Invalid buffer, received [string], was expecting [ArrayBuffer]");const l=new Uint8Array(a);let f,h,d;try{const p=await m8(l);f=p.sdr,h=p.gainMap,d=p.metadata}catch(p){if(p instanceof zP||p instanceof kP)console.warn(`Failure to reconstruct an HDR image from ${e}: Gain map metadata not found in the file, HDRJPGLoader will render the SDR jpeg`),d={gainMapMin:[0,0,0],gainMapMax:[1,1,1],gamma:[1,1,1],hdrCapacityMin:0,hdrCapacityMax:1,offsetHdr:[0,0,0],offsetSdr:[0,0,0]},f=l;else throw p}try{await this.render(s,d,f,h)}catch(p){this.manager.itemError(e),typeof r=="function"&&r(p),s.disposeOnDemandRenderer();return}typeof t=="function"&&t(s),this.manager.itemEnd(e),s.disposeOnDemandRenderer()},i,a=>{this.manager.itemError(e),typeof r=="function"&&r(a)}),s}}const Yy={apartment:"lebombo_1k.hdr",city:"potsdamer_platz_1k.hdr",dawn:"kiara_1_dawn_1k.hdr",forest:"forest_slope_1k.hdr",lobby:"st_fagans_interior_1k.hdr",night:"dikhololo_night_1k.hdr",park:"rooitou_park_1k.hdr",studio:"studio_small_03_1k.hdr",sunset:"venice_sunset_1k.hdr",warehouse:"empty_warehouse_01_1k.hdr"},y8="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/",Np=n=>Array.isArray(n);function GP({files:n=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:e="",preset:t=void 0,encoding:i=void 0,extensions:r}={}){var s;let o=null,a=!1;if(t){if(!(t in Yy))throw new Error("Preset must be one of: "+Object.keys(Yy).join(", "));n=Yy[t],e=y8}const l=Np(n)&&n.length===6,f=Np(n)&&n.length===3&&n.some(_=>_.endsWith("json")),h=Np(n)?n[0]:n;a=Np(n);const d=l?"cube":f?"webp":h.startsWith("data:application/exr")?"exr":h.startsWith("data:application/hdr")?"hdr":h.startsWith("data:image/jpeg")?"jpg":(s=h.split(".").pop())==null||(s=s.split("?"))==null||(s=s.shift())==null?void 0:s.toLowerCase();if(o=d==="cube"?WI:d==="hdr"?n8:d==="exr"?i8:d==="jpg"||d==="jpeg"?v8:d==="webp"?g8:null,!o)throw new Error("useEnvironment: Unrecognized file extension: "+n);const p=tr(_=>_.gl);Ce.useLayoutEffect(()=>{if(d!=="webp"&&d!=="jpg"&&d!=="jpeg")return;function _(){fl.clear(o,a?[n]:n)}p.domElement.addEventListener("webglcontextlost",_,{once:!0})},[n,p.domElement]);const g=fl(o,a?[n]:n,_=>{(d==="webp"||d==="jpg"||d==="jpeg")&&_.setRenderer(p),_.setPath==null||_.setPath(e),r&&r(_)});let y=a?g[0]:g;if(d==="jpg"||d==="jpeg"||d==="webp"){var S;y=(S=y.renderTarget)==null?void 0:S.texture}return y.mapping=l?Es:zc,"colorSpace"in y?y.colorSpace=i??l?"srgb":"srgb-linear":y.encoding=i??l?l8:a8,y}const _8=n=>n.current&&n.current.isScene,x8=n=>_8(n)?n.current:n;function g1(n,e,t,i,r={}){var s,o,a,l,f;r={backgroundBlurriness:(s=r.blur)!==null&&s!==void 0?s:0,backgroundIntensity:1,backgroundRotation:[0,0,0],environmentIntensity:1,environmentRotation:[0,0,0],...r};const h=x8(e||t),d=h.background,p=h.environment,g={backgroundBlurriness:h.backgroundBlurriness,backgroundIntensity:h.backgroundIntensity,backgroundRotation:(o=(a=h.backgroundRotation)==null||a.clone==null?void 0:a.clone())!==null&&o!==void 0?o:[0,0,0],environmentIntensity:h.environmentIntensity,environmentRotation:(l=(f=h.environmentRotation)==null||f.clone==null?void 0:f.clone())!==null&&l!==void 0?l:[0,0,0]};return n!=="only"&&(h.environment=i),n&&(h.background=i),To(h,r),()=>{n!=="only"&&(h.environment=p),n&&(h.background=d),To(h,g)}}function v1({scene:n,background:e=!1,map:t,...i}){const r=tr(s=>s.scene);return Ce.useLayoutEffect(()=>{if(t)return g1(e,n,r,t,i)}),null}function VP({background:n=!1,scene:e,blur:t,backgroundBlurriness:i,backgroundIntensity:r,backgroundRotation:s,environmentIntensity:o,environmentRotation:a,...l}){const f=GP(l),h=tr(d=>d.scene);return Ce.useLayoutEffect(()=>g1(n,e,h,f,{blur:t,backgroundBlurriness:i,backgroundIntensity:r,backgroundRotation:s,environmentIntensity:o,environmentRotation:a})),null}function A8({children:n,near:e=1,far:t=1e3,resolution:i=256,frames:r=1,map:s,background:o=!1,blur:a,backgroundBlurriness:l,backgroundIntensity:f,backgroundRotation:h,environmentIntensity:d,environmentRotation:p,scene:g,files:y,path:S,preset:_=void 0,extensions:m}){const A=tr(B=>B.gl),M=tr(B=>B.scene),w=Ce.useRef(null),[P]=Ce.useState(()=>new Yc),T=Ce.useMemo(()=>{const B=new PA(i);return B.texture.type=ei,B},[i]);Ce.useLayoutEffect(()=>(r===1&&w.current.update(A,P),g1(o,g,M,T.texture,{blur:a,backgroundBlurriness:l,backgroundIntensity:f,backgroundRotation:h,environmentIntensity:d,environmentRotation:p})),[n,P,T.texture,g,M,o,r,A]);let L=1;return h1(()=>{(r===1/0||LfP({GroundProjectedEnvImpl:g4}),[]);const a=Ce.useMemo(()=>[o],[o]),l=(e=n.ground)==null?void 0:e.height,f=(t=n.ground)==null?void 0:t.radius,h=(i=(r=n.ground)==null?void 0:r.scale)!==null&&i!==void 0?i:1e3;return Ce.createElement(Ce.Fragment,null,Ce.createElement(v1,sg({},n,{map:o})),Ce.createElement("groundProjectedEnvImpl",{args:a,scale:h,height:l,radius:f}))}function M8(n){return n.ground?Ce.createElement(S8,n):n.map?Ce.createElement(v1,n):n.children?Ce.createElement(A8,n):Ce.createElement(VP,n)}function E8(n){const{nodes:e,materials:t}=wh("/pic-ar-catalog//earth.gltf"),i=Ce.useRef();return h1((r,s)=>{i.current.rotation.y+=.2*s}),kt.jsx("group",{...n,dispose:null,children:kt.jsx("mesh",{ref:i,geometry:e.Object_4.geometry,material:t["Scene_-_Root"],scale:2})})}wh.preload("/pic-ar-catalog//earth.gltf");const IC=Ce.forwardRef(function(n,e){return kt.jsxs(e4,{gl:{preserveDrawingBuffer:!0},...n,style:{width:"100%",background:"black",...n.style},ref:e,children:[kt.jsx("ambientLight",{}),kt.jsx(o8,{enableZoom:!0}),kt.jsx(Ce.Suspense,{fallback:null,children:kt.jsx(E8,{})}),kt.jsx(M8,{preset:"sunset"})]})});function w8(){const[n,e]=Ce.useState("3d"),[t,i]=Ce.useState(null),r=()=>{e(n==="camera"?"3d":"camera")},s=Ce.useRef(null),o=Ce.useRef(null),a=Ce.useRef(null),l=Ce.useRef(null),f=Ce.useRef(null),h=Ce.useCallback(()=>{const d=s.current.takePhoto(),p=o.current,g=a.current,y=l.current,S=p.getContext("2d"),_=y.getContext("2d"),m=new Image;m.src=d,m.onload=()=>{p.width=m.width,p.height=m.height,S.drawImage(m,0,0),y.width=m.width,y.height=m.height,_.drawImage(p,0,0),_.drawImage(g,0,0,m.width,m.height);const A=y.toDataURL("image/jpeg");i(A),f.current.href=A,f.current.download="captured_image.jpg"}},[s,o,a,l]);return kt.jsxs("div",{style:{height:"100%"},children:[kt.jsx("canvas",{ref:o,style:{display:"none"}}),kt.jsx("canvas",{ref:l,style:{display:"none"}}),kt.jsx("h3",{children:"Example of 3d model on the Canvas"}),kt.jsx("button",{onClick:r,children:"Open Camera"}),kt.jsxs("div",{style:{display:n==="camera"?"block":"none"},children:[kt.jsx(nb,{ref:s,errorMessages:{noCameraAccessible:"noCameraAccessible",permissionDenied:"noCameraAccessible",switchCamera:"switchCamera",canvas:"canvas"}}),kt.jsx("button",{style:{position:"fixed",bottom:"10px",zIndex:"1"},onClick:h,children:"Take photo"}),kt.jsxs("div",{style:{position:"absolute",width:"100px",right:"15px",top:"15px",zIndex:2,display:t?"block":"none"},children:[kt.jsx("img",{style:{width:"100%",height:"100%"},src:t||"",alt:"Taken photo"}),kt.jsx("a",{ref:f,style:{marginTop:"10px",display:"block"},children:"Download Image"})]}),kt.jsx(IC,{ref:a,style:{background:"none",width:"100%",height:"100%",position:"absolute",left:0,top:0}})]}),kt.jsx(IC,{style:{display:n==="3d"?"block":"none"}})]})}VR(document.getElementById("root")).render(kt.jsx(Ce.StrictMode,{children:kt.jsx(w8,{})})); diff --git a/index.html b/index.html index ba65252..f0fb0e4 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Vite + React + TS - +