[{"data":1,"prerenderedAt":186},["ShallowReactive",2],{"mdc--27xm8b-key":3,"mdc--746y7g-key":16,"mdc--5z86hh-key":25,"mdc-8r37nx-key":34,"mdc--pw8nek-key":43},{"data":4,"body":5},{},{"type":6,"children":7},"root",[8],{"type":9,"tag":10,"props":11,"children":12},"element","p",{},[13],{"type":14,"value":15},"text","Swarovski",{"data":17,"body":18},{},{"type":6,"children":19},[20],{"type":9,"tag":10,"props":21,"children":22},{},[23],{"type":14,"value":24},"J.Franc Studio, with Franc",{"data":26,"body":27},{},{"type":6,"children":28},[29],{"type":9,"tag":10,"props":30,"children":31},{},[32],{"type":14,"value":33},"Web development, navigation logic, catalogue and backend",{"data":35,"body":36},{},{"type":6,"children":37},[38],{"type":9,"tag":10,"props":39,"children":40},{},[41],{"type":14,"value":42},"Three.js, Vue, Node.js, Express and MySQL",{"data":44,"body":45},{},{"type":6,"children":46},[47,52,58,68,77,86,132,139],{"type":9,"tag":10,"props":48,"children":49},{},[50],{"type":14,"value":51},"In 2021 I worked with Franc on the Swarovski Retailer Day and Wonder Lab web experiences. The aim was to present collections inside a 3D space visitors could explore in their browser.",{"type":9,"tag":53,"props":54,"children":57},"media",{"alt":55,"src":56},"Render of the Milan store interior","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1400,q_auto\u002Fsw21-1_zubwsf.webp",[],{"type":9,"tag":59,"props":60,"children":62},"section",{"title":61},"From collection to space",[63],{"type":9,"tag":10,"props":64,"children":65},{},[66],{"type":14,"value":67},"The first version presented products in a 3D composition. Wonder Lab extended the experience into a virtual store, with navigation points and display cases to explore. Images of Milan and New York show the visual work that accompanied the project.",{"type":9,"tag":59,"props":69,"children":71},{"title":70},"My part: programming",[72],{"type":9,"tag":10,"props":73,"children":74},{},[75],{"type":14,"value":76},"I developed the experience with Three.js and Vue and the backend with Node.js, Express and MySQL. The system connected user access, product data and its presentation in the scene. The second version also included tools for managing content and placing collections in display cases.",{"type":9,"tag":59,"props":78,"children":80},{"title":79},"Preparing products for 3D",[81],{"type":9,"tag":10,"props":82,"children":83},{},[84],{"type":14,"value":85},"Product photographs were grouped into texture images for use on the displays. This process linked catalogue data to product positions in the model, avoiding manual preparation of each display case.",{"type":9,"tag":87,"props":88,"children":91},"grid",{"cols":89,"gap":90},3,"md",[92,97,102,107,112,117,122,127],{"type":9,"tag":53,"props":93,"children":96},{"alt":94,"src":95},"Golden octagonal niche wall, hero view","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1400,q_auto\u002Fsw21-_Wall_3-hero_cxjxrn.webp",[],{"type":9,"tag":53,"props":98,"children":101},{"alt":99,"src":100},"Milan wall elevation","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1400,q_auto\u002Fsw21-mialn-Wall-1_pncz2z.webp",[],{"type":9,"tag":53,"props":103,"children":106},{"alt":104,"src":105},"Material: quilted padding on a sphere","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1400,q_auto\u002Fsw21-Quilted_sd7cju.webp",[],{"type":9,"tag":53,"props":108,"children":111},{"alt":109,"src":110},"Material: velvet render test","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1400,q_auto\u002Fsw21-wip-FakeVelvet_bei26y.webp",[],{"type":9,"tag":53,"props":113,"children":116},{"alt":114,"src":115},"Material: carpet on a sphere","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1400,q_auto\u002Fsw21-carpet_uopywy.webp",[],{"type":9,"tag":53,"props":118,"children":121},{"alt":119,"src":120},"Corrected version: mirror depth and lines","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1400,q_auto\u002Fsw21-corrected_mirror_depth-lines_zcxx7i.webp",[],{"type":9,"tag":53,"props":123,"children":126},{"alt":124,"src":125},"Store facade on the Galleria Vittorio Emanuele II","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1400,q_auto\u002Fsw21-Facade_m6egqd.webp",[],{"type":9,"tag":53,"props":128,"children":131},{"alt":129,"src":130},"Panorama of the full NY SoHo storefront","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1400,q_auto\u002Fsw21-NY_SOHO_PANORAMA_sgayll.webp",[],{"type":9,"tag":133,"props":134,"children":136},"h2",{"id":135},"the-experience",[137],{"type":14,"value":138},"The experience",{"type":9,"tag":87,"props":140,"children":142},{"cols":141,"gap":90},2,[143,155,166,176],{"type":9,"tag":53,"props":144,"children":149},{"alt":145,"src":146,"effect":147,"poster":148},"Full showcase of the 2021 Swarovski 3D walkthrough","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fvc_h264,w_1280\u002FSw-2021-r2-showcase-full.mp4-hevc-c_g2inkx.mp4","none","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1280,q_auto\u002Fsw21-2_saq9r5.webp",[150],{"type":9,"tag":10,"props":151,"children":152},{},[153],{"type":14,"value":154},"Showcase 2021",{"type":9,"tag":53,"props":156,"children":160},{"alt":157,"src":158,"effect":147,"poster":159},"Real in-store recording of the walkthrough, part 1","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fvc_h264,w_1280\u002FSw-2021-r2-real-1.MOV-hevc-c_chtqal.mp4","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fimage\u002Fupload\u002Fw_1280,q_auto\u002Fsw21-4_aqnawk.webp",[161],{"type":9,"tag":10,"props":162,"children":163},{},[164],{"type":14,"value":165},"Real 1",{"type":9,"tag":53,"props":167,"children":170},{"alt":168,"src":169,"effect":147,"poster":159},"Real in-store recording of the walkthrough, part 2","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fvc_h264,w_1280\u002FSw-2021-r2-real-2.MOV-hevc-c_j6payu.mp4",[171],{"type":9,"tag":10,"props":172,"children":173},{},[174],{"type":14,"value":175},"Real 2",{"type":9,"tag":53,"props":177,"children":180},{"alt":178,"src":179,"effect":147,"poster":159},"Real in-store recording of the walkthrough, part 3","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fvc_h264,w_1280\u002FSw-2021-r2-real-3.MOV-hevc-c_yizzjd.mp4",[181],{"type":9,"tag":10,"props":182,"children":183},{},[184],{"type":14,"value":185},"Real 3",1794317809960]