Bạn đang xem một đôi giày trực tuyến. Cửa hàng cung cấp cho bạn góc nhìn chính diện và góc nhìn nghiêng. Bạn phóng to với hy vọng thấy được kết cấu của da, nhưng hình ảnh lại biến thành một mảng pixel vỡ vụn. Bạn chuyển sang ảnh tiếp theo. Vẫn là đôi giày đó nhưng ở một bàn chân khác. Mười tấm ảnh sau, bạn vẫn không thể biết đế giày cứng hay mềm, hay màu sắc là xanh navy chuẩn hay là màu đen bạc màu. Đến bước thanh toán, bạn do dự. Rồi bạn đóng tab đó lại.
Điều này xảy ra hàng triệu lần mỗi ngày. Những hình ảnh phẳng yêu cầu khách hàng phải tiêu tốn sức lực trí óc để tưởng tượng ra vật thể thật. Công việc đó tạo ra sự ma sát, và sự ma sát sẽ giết chết các giao dịch mua hàng.
Bây giờ hãy tưởng tượng một tab khác. Cùng đôi giày đó được tải lên dưới dạng mô hình 3D ngay trong trang web. Bạn nhấp và kéo để xoay nó. Bạn phóng to, và các đường nét hình học vẫn sắc nét vì bạn đang nhìn vào một lưới (mesh), chứ không phải một tệp bitmap bị kéo giãn. Bạn thay đổi phối màu trong thời gian thực. Bạn kiểm tra các đường khâu dọc theo phần gót từ phía dưới, một góc độ mà không nhiếp ảnh gia sản phẩm nào thèm chụp. Vật thể tồn tại trên màn hình của bạn giống như cách nó tồn tại trong không gian thực. Bạn thêm vào giỏ hàng vì bạn cảm thấy như mình đã thực sự cầm nó trên tay.
Không có gì ở sản phẩm thay đổi cả. Chỉ có trải nghiệm là thay đổi.
Tại sao lại là Trình duyệt?
Cho đến gần đây, loại tương tác này đòi hỏi một ứng dụng chuyên dụng hoặc một plugin mà hầu hết người dùng đều từ chối cài đặt. Three.js đã thay đổi điều đó. Nó là một thư viện JavaScript chạy trên nền tảng trình render WebGL tích hợp sẵn của trình duyệt và cho phép các nhà phát triển xây dựng các cảnh 3D bằng chính mã nguồn đang vận hành phần còn lại của trang web. Người dùng không cần tải xuống phần mềm đặc biệt. Không có cửa sổ riêng biệt, không có tệp thực thi, không có hộp thoại xin quyền. Canvas được render giống như bất kỳ phần tử HTML nào khác.
Điều đó quan trọng vì khả năng tiếp cận quyết định sự phổ biến. Nếu một khách hàng có thể xem sản phẩm 3D trên điện thoại khi đang đi làm, trên một chiếc laptop cũ, hoặc trên một máy tính công ty bị quản lý chặt chẽ bởi bộ phận IT, thì công nghệ đó thực sự chạm đến mọi người. Three.js biến trình duyệt thành một khung nhìn (viewport) vạn năng.
Khi nào 3D thực sự xứng đáng được đầu tư
Việc thêm đồ họa ba chiều không hề miễn phí. Nó tiêu tốn thời gian phát triển, tài nguyên hiệu năng và thường là cả ngân sách sản xuất cho chính các tài nguyên (assets) đó. Bạn chỉ nên trả chi phí đó khi lợi nhuận mang lại là thực tế. Bốn lập luận phổ biến cho 3D trên web đều xứng đáng được xem xét kỹ lưỡng hơn là chỉ là những dòng gạch đầu dòng.
Tăng mức độ tương tác (Higher engagement) nghe có vẻ giống như một chỉ số marketing, nhưng nó có nguyên nhân từ cơ chế vận hành. Khi một khách truy cập có thể tương tác với một cảnh—xoay, phóng to, kích hoạt các hoạt ảnh—họ tự tạo ra nội dung cho riêng mình. Họ không còn thụ động tiếp nhận một lời chào hàng nữa. Họ đang khám phá. Trạng thái chủ động đó giữ họ ở lại trang lâu hơn vì họ vẫn còn những điều chưa khám phá hết ở mô hình. Họ muốn xem mặt sau. Họ muốn xem bên trong. Sự tương tác tạo ra những vòng lặp tò mò mà các lưới ảnh tĩnh không thể sao chép được.
Hiểu rõ hơn (Better understanding) là rõ rệt nhất trong thương mại điện tử. Một chiếc sofa được liệt kê dưới dạng hai chiều buộc người mua phải đọc kích thước từ bảng thông số và tưởng tượng độ sâu thông qua bóng đổ. Một mô hình 3D cho phép họ xoay quanh món đồ và xem phần tay vịn thu hẹp như thế nào. Họ có thể đặt nó vào phòng của mình bằng cách sử dụng thực tế tăng cường (AR) được xây dựng trên cùng một cảnh Three.js, kiểm tra khoảng trống dưới cửa sổ mà không cần dùng đến thước dây. Khi khách hàng nhìn thấy sản phẩm từ mọi góc độ, họ sẽ đưa ra quyết định một cách tự tin.
Kể chuyện (Storytelling) không chỉ dừng lại ở sản phẩm. Một nhà sản xuất có thể cho thấy cách một động cơ vận hành qua các chu kỳ đốt cháy mà không cần gửi một bản demo vật lý. Một kiến trúc sư có thể dẫn dắt khách hàng đi qua sơ đồ mặt bằng trước khi móng nhà được đổ. Chuyển động giải thích các mối quan hệ mà từ ngữ và các khung hình tĩnh gặp khó khăn trong việc