DeepSee Commerce: Case Study Website 3D E-Commerce

Phần lớn "website 3D" trông cực ấn tượng trong video quay màn hình, nhưng sụp đổ ngay khi một người dùng thật mở nó trên chiếc laptop ba năm tuổi. DeepSee Commerce là đề bài ngược lại: một website 3D ecommerce vừa phải mang cảm giác điện ảnh, vừa phải mượt mà trên bất kỳ thiết bị nào khách hàng đang cầm trên tay. Bài case study DeepSee Commerce này phân tích cách site được dựng bằng Three.js, Next.js và GSAP — đề bài, phần thủ công WebGL, và chuyện "budget hiệu năng" đã giữ một scene 3D tương tác đủ mượt để mang về Awwwards Honorable Mention. Viết bởi chính lập trình viên đã xây nó.

Ai đã làm — và vì sao vai trò developer quan trọng

DeepSee Commerce là một agency e-commerce, và tôi xây site ở vai trò creative developer — kiến trúc front-end, scene Three.js, lớp chuyển động GSAP, và (phần không ai nhìn thấy) công việc tối ưu hiệu năng khiến tất cả những thứ trên trở nên khả thi. Đó là tôi, Hon Tran.

Tôi nói thẳng điều này vì một lý do rất đặc thù với đồ 3D: khoảng cách giữa một ý tưởng WebGL đẹp và một site thực sự chạy 60fps trên phần cứng tầm trung hoàn toàn là bài toán kỹ thuật. Tôi đã có hơn 11 năm xây dựng các trải nghiệm đoạt giải, ưu tiên hiệu năng, cho khách hàng tại Na Uy, Đan Mạch, Thụy Điển, Malta, Đức và Việt Nam; hai lần được vinh danh Awwwards "Independent of the Year" và là thành viên ban giám khảo Awwwards. Trên một website thương mại 3D, kinh nghiệm đó là khác biệt giữa một scene khiến người ta trầm trồ và một scene làm nóng máy điện thoại rồi bị tắt sau hai giây.

Đề bài: 3D bán được hàng, mà không "đánh thuế" hiệu năng

DeepSee định vị mình là đối tác chiến lược đưa các thương hiệu Amazon ra vùng nước sâu hơn — toàn bộ nhận diện xây trên ẩn dụ đại dương và tảng băng ("chart a winning course", "điều gì nằm bên dưới bề mặt"). Thiết kế đã chuyển ý tưởng đó thành một thế giới 3D dưới nước đúng nghĩa: những tảng băng trôi, chiều sâu, ánh sáng tán xạ qua làn nước, một khung cảnh bạn chìm dần vào khi cuộn trang.

Ý tưởng đó là một bãi mìn về hiệu năng. Ba ràng buộc định hình mọi quyết định:

• 3D phải "xứng đáng" với chỗ đứng của nó. Một scene WebGL chỉ để trang trí là gánh nặng vô ích. Ẩn dụ chiều sâu phải chính là điều hướng và cách kể chuyện, chứ không nằm phía sau nó.
• Phải nhanh ở mọi nơi. Đây là một site bán hàng. Một khách tiềm năng dùng Android tầm trung có giá trị đúng bằng một người dùng MacBook đời cao — và scene tảng băng phải trụ vững cho cả hai, nếu không toàn bộ thông điệp sẽ đổ vỡ.
• Ấn tượng đầu tiên là một scene 3D. Điều đó khiến lần tải đầu trở thành rủi ro lớn nhất. Một bundle WebGL nặng chặn first paint sẽ phá hỏng cả trải nghiệm lẫn Core Web Vitals.

Phần thủ công: Three.js, Next.js và GSAP phối hợp

Stack là Next.js + React ở front-end, Three.js cho scene WebGL, và GSAP điều phối toàn bộ — preloader, tiến trình cuộn, và chuyển cảnh giữa các section. Đây là cách những mảnh ghép chủ đạo được lắp lại với nhau.

Scene 3D dưới nước

Thế giới tảng băng là một scene Three.js gồm nhiều lớp mesh, sương mù chiều sâu (fog) và tán xạ ánh sáng để kể câu chuyện "bên dưới bề mặt". Bí quyết để 3D mang cảm giác là một phần của trang thay vì một canvas tách biệt là điều khiển camera bằng scroll — cuộn xuống trang chính là lặn sâu xuống làn nước:

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

// Ánh xạ tiến trình cuộn (0 → 1) thành độ lặn của camera xuống scene
const cam = { y: 0 }
ScrollTrigger.create({
  trigger: '#scene',
  start: 'top top',
  end: 'bottom bottom',
  scrub: 1, // làm mượt — camera tiến dần theo scroll, không giật
  onUpdate: (self) => {
    cam.y = -self.progress * DEPTH
    camera.position.y = cam.y
    fog.density = 0.02 + self.progress * 0.06 // càng xuống sâu, nước càng đục
  },
})

scrub: 1 đang âm thầm làm một việc quan trọng: nó tách camera khỏi giá trị scroll thô để chuyển động lặn được làm mượt thay vì giật từng frame — đó là thứ khiến một scene nặng vẫn cảm thấy mượt ngay cả khi thỉnh thoảng rớt một frame.

Budget hiệu năng: nơi website 3D thật sự thắng hay thua

Đây là phần ban giám khảo Awwwards không nhìn thấy nhưng chắc chắn cảm nhận được. Một website 3D ecommerce sống hay chết nhờ vài thói quen không thể thỏa hiệp.

Giới hạn device pixel ratio (DPR). Đây là nước đi đòn bẩy lớn nhất trên bất kỳ build WebGL nào. Một chiếc điện thoại ở DPR 3 đang render gấp ~9 lần số pixel so với DPR 1 — chi phí fill-rate mà GPU phải trả và gần như không ai nhìn ra khác biệt. Kẹp ở mức 2 thường giảm một nửa chi phí mỗi frame trên màn hình mật độ cao:

import * as THREE from 'three'

const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' })
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) // không bao giờ render trên 2×
renderer.setSize(innerWidth, innerHeight)

Khởi tạo scene "lười" và tạm dừng khi ngoài màn hình. WebGL không nên chạy trước khi cần, và không nên đốt chu kỳ GPU để render thứ không ai đang nhìn. Một IntersectionObserver kiểm soát cả việc khởi tạo lẫn vòng lặp render:

let rafId = 0
const tick = () => {
  renderer.render(scene, camera)
  rafId = requestAnimationFrame(tick)
}

const io = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) tick()                 // chỉ chạy khi đang hiển thị
  else cancelAnimationFrame(rafId)                 // dừng ngay khi cuộn khỏi tầm nhìn
})
io.observe(document.querySelector('#scene')!)

Riêng pattern này — chỉ render thứ đang hiển thị — thường là khác biệt giữa một chiếc laptop rú quạt và một scene ngồi yên, mát mẻ, nhàn rỗi.

Tính toán asset như thể nó tốn tiền. Texture nén (KTX2/Basis), hình học nén Draco, và số lượng đèn được tinh chỉnh giúp kiểm soát bộ nhớ và draw call của scene. Trên mobile, tôi giảm độ phân giải shadow và tắt hẳn các hiệu ứng post-processing đắt nhất thay vì gửi một scene nặng cho mọi thiết bị.

Tôi đi sâu hơn về phần đo lường — LCP, INP và CLS trên các build nhiều chuyển động — trong bài Core Web Vitals cho web nhiều chuyển động, và về nền tảng dựng scene React trong bài React Three Fiber cho người mới.

Preloader như một công cụ hiệu năng, không phải chiêu trò

Một hero ưu tiên 3D nghĩa là các asset nặng nhất phải tải trước khi bất cứ thứ gì có thể tương tác — nên preloader không phải trang trí, nó là nơi giấu chi phí tải. GSAP dàn dựng một bộ đếm tiến trình thật gắn với hàng đợi asset thực tế, rồi chuyển giao sang phần reveal scene để hành trình bước vào thế giới dưới nước cảm thấy như một chuyển động liền mạch thay vì đứng hình rồi "pop-in":

const tl = gsap.timeline()
tl.to(progress, { value: 100, duration: 1.2, ease: 'power2.out', onUpdate: paintCounter })
  .to('[data-preloader]', { yPercent: -100, ease: 'expo.inOut', duration: 1 })
  .from('#scene canvas', { opacity: 0, duration: 0.8 }, '<0.1')

Cốt lõi là sự trung thực: bộ đếm phản ánh tiến trình tải thật, và phần reveal chỉ kích hoạt khi scene Three.js thực sự sẵn sàng — nên không ai phải đáp xuống một thế giới mới xây dở.

Kết quả: một Awwwards Honorable Mention

DeepSee Commerce đạt Awwwards Honorable Mention — sự ghi nhận cho một build đẩy giới hạn tương tác 3D trên web cho một thương hiệu e-commerce mà vẫn giữ trải nghiệm mượt trên mọi thiết bị. Bạn có thể xem bản live tại deepseecommerce.com.

Kết quả đó nói gì với một người mua: đây là một site thực sự tham vọng về 3D nhưng vẫn tôn trọng phần cứng của người xem. Với một thương hiệu thương mại, sự kết hợp đó chính là toàn bộ giá trị — đủ đáng nhớ để nổi bật, đủ nhanh để việc nổi bật không bao giờ khiến bạn mất dù chỉ một khách tiềm năng. Sự cân bằng ấy không đến từ bản thiết kế; nó đến từ kỷ luật hiệu năng được đặt vào từng lớp của site.

FAQ

Website DeepSee Commerce được dựng bằng gì?

Next.js và React ở front-end, Three.js cho scene 3D WebGL, và GSAP cho lớp chuyển động — preloader, camera điều khiển bằng scroll, và chuyển cảnh giữa các section. Stack được chọn cho một trải nghiệm ưu tiên 3D mà vẫn tải nhanh và mượt trên mọi thiết bị.

Làm sao giữ một website Three.js ecommerce nhanh?

Giới hạn device pixel ratio (kẹp ở mức 2), khởi tạo scene WebGL "lười" và dừng vòng lặp render khi nó cuộn ra ngoài màn hình, nén texture (KTX2/Basis) và hình học (Draco), và giảm chất lượng trên mobile — ít đèn hơn, shadow độ phân giải thấp hơn, post-processing nhẹ hơn.

Website 3D có hại cho hiệu năng và SEO không?

Chỉ khi nó được dựng cẩu thả. Một scene 3D chặn first paint sẽ làm hỏng Core Web Vitals — nhưng với một preloader đúng cách, khởi tạo WebGL lười, DPR được kẹp và asset được tính toán, một website 3D ecommerce vẫn có thể giữ điểm LCP và INP tốt. Chính phần kỹ thuật mới quyết định, không phải mức độ tham vọng.

DeepSee Commerce đạt giải gì?

Một Awwwards Honorable Mention, ghi nhận thiết kế tương tác 3D và công việc tối ưu hiệu năng giúp nó mượt trên mọi thiết bị.

Cùng làm một sản phẩm tầm giải thưởng

Nếu bạn là founder, thương hiệu hay agency cần một website ecommerce 3D / WebGL thực sự chạy tốt — vừa điện ảnh vừa nhanh — thì đó chính là việc tôi làm với vai trò creative developer.

• Xem cách tôi làm việc và bắt đầu một dự án ở trang hire.
• Khám phá thêm các sản phẩm đã ship và đoạt giải trong kho dự án.
• Sẵn sàng trao đổi? Cùng trò chuyện →

---

Viết bởi Hon Tran — creative developer, người sáng lập hontran.dev, và thành viên ban giám khảo Awwwards. Hơn 11 năm xây dựng các trải nghiệm web đoạt giải, ưu tiên hiệu năng (Three.js / WebGL, GSAP, Next.js) cho khách hàng toàn cầu. Lập trình viên Việt Nam đầu tiên giành giải web quốc tế. hontran.dev · Behance.