شما به یک جفت کفش در یک فروشگاه آنلاین نگاه میکنید. فروشگاه به شما یک نمای روبرو و یک نمای جانبی نشان میدهد. شما زوم میکنید به این امید که بافت چرم را ببینید، اما تصویر به موزاییکی از پیکسلها تبدیل میشود. به عکس بعدی میروید. همان کفش است، اما در پای دیگری. ده عکس بعد، هنوز نمیتوانید تشخیص دهید که زیره کفش سفت است یا منعطف، یا اینکه رنگ آن سرمهای واقعی است یا مشکی رنگورو رفته. هنگام پرداخت، تردید میکنید. سپس تب را میبندید.
این اتفاق روزانه میلیونها بار میافتد. تصاویر مسطح از مشتری میخواهند که کار ذهنیِ تصور کردن شیء واقعی را انجام دهد. این کار باعث ایجاد اصطکاک میشود و اصطکاک، خرید را از بین میبرد.
حالا یک تب متفاوت را تصور کنید. همان کفش به صورت یک مدل سهبعدی مستقیماً داخل صفحه بارگذاری میشود. شما برای چرخاندن آن، کلیک کرده و آن را میکشید. زوم میکنید و هندسه تصویر شفاف باقی میماند، زیرا شما در حال مشاهده یک mesh هستید، نه یک bitmap کشیده شده. شما ترکیب رنگی را در لحظه تغییر میدهید. از زیر، دوختهای قسمت پشتی پاشنه را بررسی میکنید؛ زاویهای که هیچ عکاس محصولی به خود زحمت عکاسی از آن را نداده است. شیء همانگونه که در فضا وجود دارد، روی صفحه نمایش شما نیز وجود دارد. شما آن را به سبد خرید اضافه میکنید، چون احساس میکنید از قبل آن را در دست گرفتهاید.
هیچ چیز در مورد محصول تغییر نکرد. تنها تجربه تغییر کرد.
چرا مرورگر؟
تا همین اواخر، این نوع تعامل به یک اپلیکیشن اختصاصی یا یک پلاگین نیاز داشت که اکثر کاربران از نصب آن خودداری میکردند. Three.js این وضعیت را تغییر داد. این یک کتابخانه JavaScript است که بر روی رندرکننده داخلی WebGL مرورگر قرار میگیرد و به توسعهدهندگان اجازه میدهد تا با استفاده از همان کدی که بقیه صفحه وب را تغذیه میکند، صحنههای سهبعدی بسازند. کاربر نرمافزار خاصی را دانلود نمیکند. هیچ پنجره جداگانه، فایل اجرایی یا دیالوگ اجازه دسترسی وجود ندارد. canvas درست مانند هر عنصر HTML دیگری رندر میشود.
این موضوع اهمیت دارد زیرا دسترسیپذیری، تعیینکننده میزان پذیرش است. اگر مشتری بتواند یک محصول سهبعدی را در حین رفتوآمد با گوشی خود، روی یک لپتاپ قدیمی یا روی یک دسکتاپ شرکتی که توسط بخش IT محدود شده است مشاهده کند، این فناوری واقعاً به دست مردم میرسد. Three.js مرورگر را به یک نمایشگر جهانی تبدیل میکند.
کجا سهبعدی جایگاه خود را مییابد
افزودن گرافیک سهبعدی رایگان نیست. این کار مستلزم صرف زمان توسعه، بودجه عملکرد (performance budget) و اغلب بودجه تولید برای خودِ داراییها (assets) است. شما تنها زمانی باید این هزینه را بپردازید که بازگشت آن واقعی باشد. چهار استدلال رایج برای استفاده از 3D در وب، هر کدام فراتر از یک نکته ساده هستند.
تعامل بیشتر شبیه به یک معیار بازاریابی به نظر میرسد، اما یک علت مکانیکی دارد. وقتی بازدیدکننده میتواند با یک صحنه تعامل داشته باشد — چرخاندن، زوم کردن، فعال کردن انیمیشنها — او محتوای خودش را تولید میکند. او دیگر صرفاً یک پیشنهاد تبلیغاتی را به صورت غیرفعال دریافت نمیکند، بلکه در حال کاوش است. این حالت فعال، او را برای مدت طولانیتری در صفحه نگه میدارد، زیرا کار ناتمام با مدل دارد. او میخواهد پشت آن را ببیند. میخواهد داخل آن را ببیند. این تعامل، حلقههای کنجکاوی ایجاد میکند که شبکههای ایستا (static grids) نمیتوانند آنها را بازسازی کنند.
درک بهتر در تجارت الکترونیک بسیار مشهود است. یک مبل که در دو بعد نمایش داده میشود، خریدار را مجبور میکند تا ابعاد را از یک برگه مشخصات بخواند و عمق را از روی یک سایه تصور کند. یک مدل سهبعدی به آنها اجازه میدهد تا به دور قطعه بچرخند و ببینند که دسته مبل چگونه باریک میشود. آنها میتوانند با استفاده از واقعیت افزوده (augmented reality) که بر پایه همان صحنه Three.js ساخته شده، آن را در اتاق خود قرار دهند و بدون نیاز به متر، فضای خالی زیر پنجره را بررسی کنند. وقتی مشتریان محصولات را از هر زاویهای میبینند، با اطمینان تصمیم میگیرند.
داستانسرایی فراتر از محصولات است. یک تولیدکننده میتواند نشان دهد که چگونه یک موتور چرخه احتراق را طی میکند، بدون اینکه نیاز به ارسال یک نمونه فیزیکی باشد. یک معمار میتواند پیش از ریختن فونداسیون، یک مشتری را در میان نقشه ساختمان راهنمایی کند. حرکت، روابطی را توضیح میدهد که کلمات و فریمهای ایستا در بیان آنها با دشواری روبرو هستند