فروش با واقعیت ترکیبی (WebAR): نمایش سه بعدی آجیل در خانه مشتری (مغازه را به خانه ببرید)

در فروش آنلاین خشکبار، بزرگترین مانع خرید چیست؟ “عدم لمس محصول”. مشتری عکس پسته را می‌بیند، اما نمی‌داند سایز واقعی‌اش چقدر است. نمی‌داند بسته‌بندی فلزی زعفران چقدر جا می‌گیرد. نمی‌داند بافت انجیر چقدر گوشتی است.

فناوری واقعیت ترکیبی (Mixed Reality) و به طور خاص WebAR (واقعیت افزوده تحت وب)، این دیوار را می‌شکند. این تکنولوژی به کاربر اجازه می‌دهد بدون نصب هیچ اپلیکیشنی، و فقط با مرورگر کروم یا سافاری، محصول را به صورت سه بعدی (3D) ببیند و آن را در محیط واقعی اتاق خود قرار دهد.

برای تو که طراح وب هستی، یادگیری این تکنیک یعنی ورود به نسل سوم وب (Web 3.0). در این مقاله، ما از صفر تا صدِ ساخت مدل، کدنویسی در سایت و مزایای آن را بررسی می‌کنیم.

چرا واقعیت ترکیبی برای خشکبار؟ (فراتر از سرگرمی)

شاید فکر کنید AR فقط برای فروش مبل و دکوراسیون است. اما برای خشکبار، کاربردهای حیاتی دارد:

۱. درک حجم واقعی (Volume Visualization)

مشتری نمی‌داند “۵۰۰ گرم چیپس میوه” چقدر می‌شود.

• با AR: او بسته مجازی ۵۰۰ گرمی را روی میز آشپزخانه می‌گذارد و می‌بیند که دقیقاً چقدر فضا اشغال می‌کند. این جلوی نارضایتی بعد از خرید (که فکر می‌کرد بسته بزرگتر است) را می‌گیرد.

۲. بررسی بافت (Texture Inspection)

در خشکبار، “کیفیت سطح” مهم است.

• با 3D: کاربر می‌تواند مدل سه بعدی گردو را بچرخاند، زوم کند و حتی خلل و فرج روی مغز گردو را ببیند. این حسِ “تازگی” را منتقل می‌کند.

۳. بسته‌بندی کادویی (Luxury Gifting)

برای پک‌های آجیل سازمانی یا یلدا که گران هستند، خریدار می‌خواهد ببیند جعبه چقدر شیک است.

• با AR: جعبه لوکس چوبی را روی میز مدیریتی‌اش می‌گذارد تا ببیند آیا به دکوراسیون دفتر می‌آید یا نه.

فاز اول: ساخت مدل سه بعدی (از پسته تا پیکسل)

برای نمایش سه بعدی، اول به یک فایل سه بعدی نیاز داریم. اما نترسید، لازم نیست “تری‌دی مکس” یا “مایا” بلد باشید. روش مدرن، فتوگرامتری (Photogrammetry) است.

فتوگرامتری چیست؟

یعنی گرفتن عکس‌های زیاد از یک جسم و تبدیل آن به مدل سه بعدی توسط هوش مصنوعی.

مراحل انجام کار (برای تو و مشتری):

1. عکاسی: محصول (مثلاً یک کاسه آجیل) را روی یک میز گردان بگذارید. با گوشی موبایل، حدود ۵۰ تا ۱۰۰ عکس از تمام زوایا (بالا، پایین، دور تا دور) بگیرید. نور باید یکدست و بدون سایه تند باشد.

2. پردازش: عکس‌ها را در اپلیکیشن‌هایی مثل Luma AI، Polycam یا Metascan آپلود کنید.

3. خروجی: نرم‌افزار به شما یک فایل سه بعدی می‌دهد.

   • فرمت اندروید و وب: .glb

   • فرمت آیفون (iOS): .usdz

فاز دوم: پیاده‌سازی فنی در وب‌سایت (The Code)

حالا که فایل .glb را داریم، چطور در ووکامرس نمایش دهیم؟ گوگل ابزاری جادویی به نام <model-viewer> ساخته است که یک کامپوننت وب (Web Component) است و روی تمام مرورگرها کار می‌کند.

۱. اسکریپت لازم

این کد را در header.php قالب یا فوتر سایت اضافه کن:

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>

۲. کد نمایش محصول (HTML)

در صفحه محصول (یا با استفاده از ابزار HTML در المنتور)، کد زیر را قرار بده:

<style>
  model-viewer {
    width: 100%;
    height: 400px;
    background-color: #f0f0f0;
    border-radius: 15px;
  }
</style>

<div class="ar-product-container">
  <model-viewer 
      src="https://your-site.com/wp-content/uploads/pistachio-bowl.glb" 
      ios-src="https://your-site.com/wp-content/uploads/pistachio-bowl.usdz"
      poster="https://your-site.com/wp-content/uploads/loading-image.jpg" 
      alt="مدل سه بعدی کاسه پسته"
      shadow-intensity="1"
      camera-controls
      auto-rotate
      ar>
      
      <button slot="ar-button" style="background-color: white; border-radius: 4px; border: none; position: absolute; top: 16px; right: 16px; padding: 10px;">
          👋 مشاهده در فضای اتاق
      </button>
      
  </model-viewer>
</div>

تحلیل کد:

• src: آدرس فایل مدل برای اندروید و دسکتاپ.

• ios-src: آدرس فایل برای آیفون (اپل فرمت خاص خودش را دارد).

• ar: این ویژگی جادویی است! دکمه‌ای اضافه می‌کند که با کلیک روی آن، دوربین گوشی باز می‌شود و محصول وارد دنیای واقعی می‌شود.

• auto-rotate: مدل به آرامی می‌چرخد تا جلب توجه کند.

• camera-controls: کاربر می‌تواند با موس یا انگشت، مدل را بچرخاند.

فاز سوم: بهینه‌سازی و سئو (SEO & Performance)

فایل‌های سه بعدی سنگین هستند (ممکن است ۱۰ مگابایت باشند). اگر حواستان نباشد، سرعت سایت نابود می‌شود.

۱. فشرده‌سازی (Draco Compression)

همیشه فایل‌های GLB را فشرده کنید. ابزارهای آنلاین مثل gltf-report می‌توانند حجم فایل را تا ۵۰٪ کاهش دهند بدون افت کیفیت ظاهری.

۲. لیزی لودینگ (Lazy Loading)

ویژگی loading="eager" را استفاده نکنید. اجازه دهید مدل زمانی لود شود که کاربر به آن اسکرول می‌کند. (تگ model-viewer خودش مدیریت هوشمندانه‌ای دارد، اما استفاده از poster (تصویر جایگزین قبل از لود) حیاتی است).

۳. متادیتای سئو

گوگل محتوای سه بعدی را می‌فهمد. حتماً ویژگی alt را در تگ مدل ویوور با کلمات کلیدی پر کنید (مثلاً: “مدل سه بعدی پسته اکبری اعلا”).

مزیت رقابتی برای طراح وب

امیررضا جان، وقتی این قابلیت را به مشتری پیشنهاد می‌دهی، در واقع داری به او می‌گویی: “من برای شما سایتی می‌سازم که مثل آمازون و IKEA است.”

• افزایش نرخ تبدیل (Conversion Rate): شاپیفای اعلام کرده محصولاتی که مدل سه بعدی دارند، ۹۴٪ نرخ تبدیل بالاتری نسبت به عکس معمولی دارند.

• کاهش مرجوعی: چون مشتری سایز واقعی را دیده، احتمال اینکه بگوید “فکر می‌کردم بزرگتر است” به صفر می‌رسد.

بخش پرسش و پاسخ فنی (FAQ)

۱. آیا این قابلیت روی همه گوشی‌ها کار می‌کند؟ روی اکثر گوشی‌های هوشمند تولید شده از ۲۰۱۸ به بعد (که از ARCore در اندروید و ARKit در iOS پشتیبانی می‌کنند) کار می‌کند. اگر گوشی قدیمی باشد، فقط مدل سه بعدی قابل چرخش را می‌بیند و دکمه AR کار نمی‌کند (که باز هم عالی است).

۲. هزینه ساخت مدل سه بعدی چقدر است؟ اگر خودتان با روش فتوگرامتری (Polycam) انجام دهید، تقریباً رایگان (فقط هزینه اشتراک اپلیکیشن). اما اگر بخواهید یک آرتیست 3D آن را بسازد، هزینه بالایی دارد. برای خشکبار، فتوگرامتری بهترین گزینه است چون بافت طبیعی غذا را حفظ می‌کند.

۳. آیا افزونه آماده‌ای برای ووکامرس هست؟ بله، افزونه‌هایی مثل CartMagician یا FibroSearch هستند، اما معمولاً گرانند. استفاده از روش کدنویسی دستی (که بالا گفتم) هم رایگان است، هم سرعتش بیشتر است و هم تو کنترل کامل روی استایل داری.

جمع‌بندی: آینده همین الان است

استفاده از واقعیت ترکیبی (MR) در سایت خشکبار، فقط “قشنگ کردن سایت” نیست؛ بلکه حل کردن مشکلِ “لمس نکردن محصول” است. به عنوان طراح وب، پیاده‌سازی این ویژگی نشان‌دهنده تسلط تو بر جدیدترین استانداردهای وب است.

پیشنهاد بعدی: آیا می‌خواهی یک آموزش کوتاه درباره “نحوه نورپردازی صحیح برای عکاسی فتوگرامتری از آجیل” (که مدل‌ها سوراخ یا کج نشوند) برایت بنویسم؟ این پاشنه آشیل کار است.