1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9588],{9705:(e,n,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/voxcraft/highres",function(){return t(71027)}])},71027:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>m});var i=t(37876),o=t(14232),r=t(77328),a=t.n(r),s=t(41346),l=t(86732),d=t(48230),c=t.n(d);let m=()=>((0,o.useEffect)(()=>{let e=document.createElement("link");e.rel="preload",e.as="script",e.href="https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.min.js",e.crossOrigin="anonymous",document.head.appendChild(e);let n=document.createElement("link");n.rel="preload",n.as="script",n.href="https://cdn.jsdelivr.net/npm/@sparkjsdev/[email protected]/dist/spark.module.js",n.crossOrigin="anonymous",document.head.appendChild(n);let t=document.createElement("link");t.rel="prefetch",t.href="/api/splat/sofa_2.sog",document.head.appendChild(t);let i=setTimeout(async()=>{let e=document.createElement("script");e.type="importmap",e.textContent=JSON.stringify({imports:{three:"https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.min.js","@sparkjsdev/spark":"https://cdn.jsdelivr.net/npm/@sparkjsdev/[email protected]/dist/spark.module.js"}}),document.head.appendChild(e);let n=document.createElement("script");n.type="module",n.textContent="\n import * as THREE from \"three\";\n import { SplatMesh } from \"@sparkjsdev/spark\";\n\n // OPTIMIZATION 2: Load transforms and start model loading in parallel\n const [transformResponse] = await Promise.all([\n fetch('/api/splat/sofa_0_transforms.json'),\n // Start preloading the model immediately\n fetch('/api/splat/sofa_2.sog', { method: 'HEAD' })\n ]);\n const transforms = await transformResponse.json();\n \n console.log('=== LOADED TRANSFORMS ===');\n console.log('Position:', transforms.position);\n console.log('Rotation:', transforms.rotation);\n console.log('Scale:', transforms.scale);\n console.log('========================');\n\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xfafafa);\n \n const camera = new THREE.PerspectiveCamera(\n transforms.camera?.fov || 50, \n window.innerWidth / window.innerHeight * 0.6, \n 0.1, \n 1000\n );\n camera.position.set(\n transforms.camera?.position?.x || 3,\n transforms.camera?.position?.y || 2,\n transforms.camera?.position?.z || 5\n );\n camera.lookAt(0, 0, 0);\n \n // OPTIMIZATION 3: Reduce renderer overhead\n const renderer = new THREE.WebGLRenderer({ \n antialias: false, // Disable for 2x performance boost\n alpha: false,\n powerPreference: \"high-performance\",\n precision: \"mediump\", // Lower precision = faster\n logarithmicDepthBuffer: false, // Disable expensive depth buffer\n preserveDrawingBuffer: false // Halve memory usage\n });\n renderer.shadowMap.enabled = false; // Disable shadows for speed\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n renderer.toneMappingExposure = 1.0;\n renderer.outputEncoding = THREE.sRGBEncoding;\n \n // WebXR disabled for now\n \n const container = document.getElementById('viewer-container');\n // OPTIMIZATION 4: Adaptive quality based on device\n const isDeviceMobile = window.innerWidth < 768;\n const pixelRatio = isDeviceMobile ? 1 : Math.min(window.devicePixelRatio, 2);\n renderer.setPixelRatio(pixelRatio);\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n container.appendChild(renderer.domElement);\n\n // Shadow plane removed - using default settings only\n\n // OPTIMIZATION 5: Simplified lighting (no shadows)\n const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);\n scene.add(ambientLight);\n \n const keyLight = new THREE.DirectionalLight(0xffffff, 0.3);\n keyLight.position.set(5, 8, 5);\n keyLight.castShadow = false; // No shadows\n scene.add(keyLight);\n\n // Preload strategy: start loading immediately\n const splatURL = \"/api/splat/sofa_2.sog\";\n // OPTIMIZATION 6: Aggressive splat optimization\n const splatMesh = new SplatMesh({ \n url: splatURL,\n alphaTest: 0.1, // Higher alpha test = fewer fragments\n splatSize: 1.0,\n renderOrder: 0,\n frustumCulled: true, // Enable culling\n // Add performance hints if supported\n loadingPriority: 'high',\n streamingEnabled: true\n });\n \n // Apply transforms from config\n console.log('=== APPLYING ROTATIONS TO SPLAT ===');\n console.log('Setting X rotation to:', transforms.rotation.x, 'radians (', transforms.rotation.x * 180 / Math.PI, 'degrees)');\n console.log('Setting Y rotation to:', transforms.rotation.y, 'radians (', transforms.rotation.y * 180 / Math.PI, 'degrees)');\n console.log('Setting Z rotation to:', transforms.rotation.z, 'radians (', transforms.rotation.z * 180 / Math.PI, 'degrees)');\n \n splatMesh.rotation.set(\n transforms.rotation.x,\n 0, // Start with Y rotation at 0 (facing camera)\n transforms.rotation.z\n );\n splatMesh.position.set(\n transforms.position.x,\n transforms.position.y,\n transforms.position.z\n );\n // Scale down on mobile for better viewing\n const isMobile = window.innerWidth < 768;\n const mobileScale = isMobile ? 0.7 : 1.0; // 70% size on mobile\n splatMesh.scale.set(\n transforms.scale.x * mobileScale,\n transforms.scale.y * mobileScale,\n transforms.scale.z * mobileScale\n );\n splatMesh.castShadow = true;\n scene.add(splatMesh);\n \n console.log('=== ACTUAL SPLAT ROTATION AFTER SET ===');\n console.log('splatMesh.rotation.x:', splatMesh.rotation.x);\n console.log('splatMesh.rotation.y:', splatMesh.rotation.y);\n console.log('splatMesh.rotation.z:', splatMesh.rotation.z);\n console.log('=====================================');\n\n // Store initial rotations to preserve them\n const initialRotationX = transforms.rotation.x;\n const initialRotationZ = transforms.rotation.z;\n console.log('Stored initial rotations - X:', initialRotationX, 'Z:', initialRotationZ);\n\n // Mouse interaction for manual rotation\n let isDragging = false;\n let previousMouseX = 0;\n let targetRotation = 0; // Start aligned with camera\n let currentRotation = 0; // Start aligned with camera\n let autoRotationDirection = 1; // 1 for forward, -1 for backward\n const maxAutoRotation = Math.PI / 6; // 30 degrees in radians\n\n renderer.domElement.addEventListener('mousedown', (e) => {\n isDragging = true;\n previousMouseX = e.clientX;\n container.style.cursor = 'grabbing';\n });\n\n renderer.domElement.addEventListener('mousemove', (e) => {\n if (isDragging) {\n const deltaX = e.clientX - previousMouseX;\n targetRotation -= deltaX * 0.01;\n previousMouseX = e.clientX;\n }\n });\n\n renderer.domElement.addEventListener('mouseup', () => {\n isDragging = false;\n container.style.cursor = 'grab';\n });\n\n renderer.domElement.addEventListener('mouseleave', () => {\n isDragging = false;\n container.style.cursor = 'grab';\n });\n\n // Touch events for mobile\n renderer.domElement.addEventListener('touchstart', (e) => {\n isDragging = true;\n previousMouseX = e.touches[0].clientX;\n });\n\n renderer.domElement.addEventListener('touchmove', (e) => {\n if (isDragging) {\n const deltaX = e.touches[0].clientX - previousMouseX;\n targetRotation -= deltaX * 0.01;\n previousMouseX = e.touches[0].clientX;\n }\n });\n\n renderer.domElement.addEventListener('touchend', () => {\n isDragging = false;\n });\n\n // OPTIMIZATION 7: Optimize render loop\n let lastRenderTime = 0;\n const targetFPS = 30; // Limit to 30fps on mobile\n const frameInterval = 1000 / targetFPS;\n \n renderer.setAnimationLoop(function animate(time) {\n // Frame rate limiting for mobile\n if (isDeviceMobile && time - lastRenderTime < frameInterval) {\n return;\n }\n lastRenderTime = time;\n \n // Auto-rotation with +-30 degree limit\n if (!isDragging) {\n targetRotation += 0.001 * autoRotationDirection;\n // Check if we've hit the limits and reverse direction\n if (targetRotation > maxAutoRotation) {\n autoRotationDirection = -1;\n } else if (targetRotation < -maxAutoRotation) {\n autoRotationDirection = 1;\n }\n }\n \n // Smooth rotation with momentum\n currentRotation += (targetRotation - currentRotation) * 0.1;\n // Preserve X and Z rotations while updating Y\n splatMesh.rotation.set(initialRotationX, currentRotation, initialRotationZ);\n \n renderer.render(scene, camera);\n });\n\n // Handle window resize\n window.addEventListener('resize', () => {\n camera.aspect = container.offsetWidth / container.offsetHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.offsetWidth, container.offsetHeight);\n });\n\n // Hide loading indicator and add VR button\n const loadingIndicator = document.getElementById('loading-indicator');\n if (loadingIndicator) {\n setTimeout(() =>
1 {\n loadingIndicator.style.display = 'none';\n container.style.cursor = 'grab';\n // VR functionality removed\n }, 1000);\n }\n ",document.body.appendChild(n),window.initSecondViewer=()=>{let e=document.createElement("script");e.type="module",e.textContent="\n import * as THREE from \"three\";\n import { SplatMesh } from \"@sparkjsdev/spark\";\n\n // Load transforms data for second model\n const transformResponse = await fetch('/api/splat/sofa_1_transforms.json');\n const transforms = await transformResponse.json();\n \n const scene2 = new THREE.Scene();\n scene2.background = new THREE.Color(0xfafafa);\n \n const camera2 = new THREE.PerspectiveCamera(\n transforms.camera?.fov || 50, \n window.innerWidth / window.innerHeight * 0.6, \n 0.1, \n 1000\n );\n camera2.position.set(\n transforms.camera?.position?.x || 3,\n transforms.camera?.position?.y || 2,\n transforms.camera?.position?.z || 5\n );\n camera2.lookAt(0, 0, 0);\n \n const renderer2 = new THREE.WebGLRenderer({ \n antialias: true, \n alpha: false,\n powerPreference: \"high-performance\",\n precision: \"highp\",\n logarithmicDepthBuffer: true,\n preserveDrawingBuffer: true\n });\n renderer2.shadowMap.enabled = true;\n renderer2.shadowMap.type = THREE.PCFSoftShadowMap;\n renderer2.toneMapping = THREE.ACESFilmicToneMapping;\n renderer2.toneMappingExposure = 1.0;\n renderer2.outputEncoding = THREE.sRGBEncoding;\n \n // WebXR disabled for now\n \n const container2 = document.getElementById('viewer-container-2');\n renderer2.setPixelRatio(window.devicePixelRatio * 1.5);\n renderer2.setSize(container2.offsetWidth, container2.offsetHeight);\n container2.appendChild(renderer2.domElement);\n\n // Lighting for second viewer\n const ambientLight2 = new THREE.AmbientLight(0xffffff, 0.8);\n scene2.add(ambientLight2);\n \n const keyLight2 = new THREE.DirectionalLight(0xffffff, 0.3);\n keyLight2.position.set(5, 8, 5);\n keyLight2.castShadow = true;\n scene2.add(keyLight2);\n \n const fillLight2 = new THREE.DirectionalLight(0xffffff, 0.2);\n fillLight2.position.set(-3, 3, -3);\n scene2.add(fillLight2);\n\n // Load sofa_2 model with optimized settings\n const splatURL2 = \"/api/splat/sofa_3.sog\";\n const splatMesh2 = new SplatMesh({ \n url: splatURL2,\n alphaTest: 0.02, // Slightly higher for performance\n splatSize: 1.0,\n renderOrder: 0,\n frustumCulled: false\n });\n \n // Apply transforms\n splatMesh2.rotation.set(\n transforms.rotation.x,\n 0, // Start with Y rotation at 0 (facing camera)\n transforms.rotation.z\n );\n splatMesh2.position.set(\n transforms.position.x,\n transforms.position.y,\n transforms.position.z\n );\n // Scale down on mobile for better viewing\n const isMobile2 = window.innerWidth < 768;\n const mobileScale2 = isMobile2 ? 0.7 : 1.0; // 70% size on mobile\n splatMesh2.scale.set(\n transforms.scale.x * mobileScale2,\n transforms.scale.y * mobileScale2,\n transforms.scale.z * mobileScale2\n );\n splatMesh2.castShadow = true;\n scene2.add(splatMesh2);\n\n // Store initial rotations for animation\n const initialRotationX2 = transforms.rotation.x;\n const initialRotationZ2 = transforms.rotation.z;\n\n // Mouse interaction for second viewer\n let isDragging2 = false;\n let previousMouseX2 = 0;\n let targetRotation2 = 0; // Start aligned with camera\n let currentRotation2 = 0; // Start aligned with camera\n let autoRotationDirection2 = 1; // 1 for forward, -1 for backward\n const maxAutoRotation2 = Math.PI / 6; // 30 degrees in radians\n\n renderer2.domElement.addEventListener('mousedown', (e) => {\n isDragging2 = true;\n previousMouseX2 = e.clientX;\n container2.style.cursor = 'grabbing';\n });\n\n renderer2.domElement.addEventListener('mousemove', (e) => {\n if (isDragging2) {\n const deltaX = e.clientX - previousMouseX2;\n targetRotation2 -= deltaX * 0.01;\n previousMouseX2 = e.clientX;\n }\n });\n\n renderer2.domElement.addEventListener('mouseup', () => {\n isDragging2 = false;\n container2.style.cursor = 'grab';\n });\n\n renderer2.domElement.addEventListener('mouseleave', () => {\n isDragging2 = false;\n container2.style.cursor = 'grab';\n });\n\n // Touch events for mobile - SECOND VIEWER (was missing!)\n renderer2.domElement.addEventListener('touchstart', (e) => {\n isDragging2 = true;\n previousMouseX2 = e.touches[0].clientX;\n });\n\n renderer2.domElement.addEventListener('touchmove', (e) => {\n if (isDragging2) {\n const deltaX = e.touches[0].clientX - previousMouseX2;\n targetRotation2 -= deltaX * 0.01;\n previousMouseX2 = e.touches[0].clientX;\n }\n });\n\n renderer2.domElement.addEventListener('touchend', () => {\n isDragging2 = false;\n });\n\n // XR-compatible animation loop for second viewer\n renderer2.setAnimationLoop(function animate(time) {\n // Auto-rotation with +-30 degree limit\n if (!isDragging2) {\n targetRotation2 += 0.001 * autoRotationDirection2;\n // Check if we've hit the limits and reverse direction\n if (targetRotation2 > maxAutoRotation2) {\n autoRotationDirection2 = -1;\n } else if (targetRotation2 < -maxAutoRotation2) {\n autoRotationDirection2 = 1;\n }\n }\n \n // Smooth rotation with momentum\n currentRotation2 += (targetRotation2 - currentRotation2) * 0.1;\n splatMesh2.rotation.set(initialRotationX2, currentRotation2, initialRotationZ2);\n \n renderer2.render(scene2, camera2);\n });\n\n // Handle window resize for second viewer\n window.addEventListener('resize', () => {\n camera2.aspect = container2.offsetWidth / container2.offsetHeight;\n camera2.updateProjectionMatrix();\n renderer2.setSize(container2.offsetWidth, container2.offsetHeight);\n });\n\n // Hide loading indicator for second viewer and add VR button\n const loadingIndicator2 = document.getElementById('loading-indicator-2');\n if (loadingIndicator2) {\n setTimeout(() =>
1 {\n loadingIndicator2.style.display = 'none';\n container2.style.cursor = 'grab';\n // VR functionality removed\n }, 1000);\n }\n ",document.body.appendChild(e)}},100);return()=>{clearTimeout(i);let e=document.getElementById("viewer-container");e&&(e.innerHTML="")}},[]),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(a(),{children:[(0,i.jsx)("title",{children:"VUHD Digital Twins - Photorealistic E-Commerce at Light Speed | Voxel Redecorate"}),(0,i.jsx)("meta",{name:"description",content:"Revolutionary VUHD technology delivers luxury furniture photorealism in files the size of compressed images. Zero loading time, lower return rates."})]}),(0,i.jsx)(s.A,{}),(0,i.jsx)("div",{className:"about-area-two ptb-100",children:(0,i.jsx)("div",{className:"container",children:(0,i.jsxs)("div",{className:"row",children:[(0,i.jsx)("div",{className:"col-lg-6",children:(0,i.jsxs)("div",{className:"about-content",children:[(0,i.jsx)("span",{children:"The Innovation: VUHD Digital Twins"}),(0,i.jsx)("h2",{children:"Photorealism at the Speed of Light"}),(0,i.jsx)("p",{children:'Traditional 3D models look like "video games" with plastic textures. VUHD delivers true fabric grain and luxury finishes that load faster than a standard product photo.'}),(0,i.jsxs)("div",{className:"mt-4",children:[(0,i.jsx)("h3",{children:"The File Size Breakthrough"}),(0,i.jsxs)("p",{children:["While traditional 3D models weigh 5-15 MB, our VUHD Digital Twins are compressed to ",(0,i.jsx)("strong",{children:"the size of one compressed image"}),":"]}),(0,i.jsxs)("ul",{style:{listStyle:"none",paddingLeft:0},children:[(0,i.jsx)("li",{className:"mb-2",children:"⢠Zero waiting time for customers, even on mobile data"}),(0,i.jsx)("li",{className:"mb-2",children:"⢠Improves Shopify Core Web Vitals for SEO dominance"}),(0,i.jsx)("li",{className:"mb-2",children:"⢠100% fluid performance on any smartphone or tablet"}),(0,i.jsx)("li",{className:"mb-2",children:"⢠True fabric grain and luxury material accuracy"})]})]}),(0,i.jsxs)("div",{className:"mt-4",children:[(0,i.jsx)("h3",{children:"Business Impact Comparison"}),(0,i.jsx)("div",{className:"table-responsive",children:(0,i.jsxs)("table",{className:"table table-sm",children:[(0,i.jsx)("thead",{children:(0,i.jsxs)("tr",{children:[(0,i.jsx)("th",{children:"Feature"}),(0,i.jsx)("th",{children:"Traditional 3D Mesh"}),(0,i.jsx)("th",{children:"VUHD Digital Twins"})]})}),(0,i.jsxs)("tbody",{children:[(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:"Material Accuracy"}),(0,i.jsx)("td",{children:'Synthetic & "Flat"'}),(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"True Fabric Grain & Sheen"})})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:"File Weight"}),(0,i.jsx)("td",{children:"5-15 MB (Heavy)"}),(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"Size of 1 Compressed Image"})})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:"Customer Friction"}),(0,i.jsx)("td",{children:"High (Loading bars)"}),(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"Zero (Instant Interaction)"})})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:"Return Rates"}),(0,i.jsx)("td",{children:"High uncertainty"}),(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"Lower (100% Material Confidence)"})})]})]})]})})]}),(0,i.jsxs)("div",{className:"mt-4 p-3",style:{background:"#f5f5f5",borderRadius:"8px"},children:[(0,i.jsx)("h4",{children:"Multi-Asset Business Value"}),(0,i.jsx)("p",{className:"mb-2",children:"Every product becomes a complete digital ecosystem:"}),(0,i.jsxs)("ul",{className:"mb-0",style:{listStyle:"none",paddingLeft:0},children:[(0,i.jsxs)("li",{className:"mb-1",children:["⢠",(0,i.jsx)("strong",{children:"Interactive Web Viewer:"})," Fully integrated into Shopify stores"]}),(0,i.jsxs)("li",{className:"mb-1",children:["⢠",(0,i.jsx)("strong",{children:"AR-Ready Asset:"}),' Instant "View in Room" for mobile']}),(0,i.jsxs)("li",{className:"mb-1",children:["⢠",(0,i.jsx)("strong",{children:"Marketing Content:"})," Automated 360\xb0 loops for social ads"]}),(0,i.jsxs)("li",{className:"mb-0",children:["⢠",(0,i.jsx)("strong",{children:"Scalable Pipeline:"})," Process entire catalogs in days, not months"]})]})]}),(0,i.jsx)("div",{className:"mt-4",children:(0,i.jsx)("button",{onClick:()=>{let e=document.getElementById("viewer-container-2-wrapper");e&&(e.style.display="block"),window.initSecondViewer&&window.initSecondViewer()},className:"btn btn-link text-muted",style:{fontSize:"13px",padding:"4px 8px",textDecoration:"underline",border:"none",background:"none"},children:"View alternative model â"})})]})}),(0,i.jsxs)("div",{className:"col-lg-6",children:[(0,i.jsx)("div",{style:{background:"#f8f8f8",borderRadius:"8px",padding:"20px",position:"relative"},children:(0,i.jsx)("div",{id:"viewer-container",style:{width:"100%",height:"600px",position:"relative",borderRadius:"10px",overflow:"hidden",background:"#fafafa"},children:(0,i.jsxs)("div",{id:"loading-indicator",style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center",zIndex:1e3},children:[(0,i.jsx)("div",{className:"spinner-border text-primary mb-3",role:"status",children:(0,i.jsx)("span",{className:"visually-hidden",children:"Loading..."})}),(0,i.jsx)("p",{children:"Loading Voxel Ultra High-Resolution Model..."})]})})}),(0,i.jsx)("div",{id:"viewer-container-2-wrapper",className:"mt-4",style:{display:"none",background:"#f8f8f8",borderRadius:"8px",padding:"20px",position:"relative"},children:(0,i.jsx)("div",{id:"viewer-container-2",style:{width:"100%",height:"600px",position:"relative",borderRadius:"10px",overflow:"hidden",background:"#fafafa"},children:(0,i.jsxs)("div",{id:"loading-indicator-2",style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center",zIndex:1e3},children:[(0,i.jsx)("div",{className:"spinner-border text-primary mb-3",role:"status",children:(0,i.jsx)("span",{className:"visually-hidden",children:"Loading..."})}),(0,i.jsx)("p",{children:"Loading alternative view..."})]})})})]})]})})}
1),(0,i.jsx)("div",{className:"get-in-touch-area ptb-100",style:{background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",position:"relative"},children:(0,i.jsx)("div",{className:"container",children:(0,i.jsxs)("div",{className:"get-in-touch-content text-center",children:[(0,i.jsx)("h2",{className:"text-white",children:"Ready to Eliminate Customer Return Anxiety?"}),(0,i.jsx)("h3",{className:"text-white mb-4",children:"Join luxury retailers using VUHD Digital Twins to showcase true fabric quality at lightning speed."}),(0,i.jsx)(c(),{href:"/contact",className:"btn btn-light btn-lg px-5",children:"Get In Touch"})]})})}),(0,i.jsx)(l.A,{})]}))}},e=>{e.O(0,[8230,8403,5183,636,6593,8792],()=>e(e.s=9705)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.