Mỗi lần có một bản trình diễn WebGPU mới — biển sóng lấp lánh, hàng chục nghìn hạt bay, ánh sáng phản chiếu như ứng dụng cài đặt — lại có người hỏi: vậy ứng dụng giải trí trên web sắp đẹp ngang ứng dụng trong kho rồi phải không? Câu trả lời ngắn: trên máy tính và điện thoại cao cấp thì đang tiến rất gần. Trên chiếc điện thoại Android tầm trung mà phần đông người Việt đang cầm, câu chuyện khác hẳn — và cái giới hạn thật thường không nằm ở chỗ người ta nghĩ. Bài này kể từ góc của người đã phải làm cho năm ứng dụng chạy mượt trên đúng loại máy đó.
WebGPU là gì, nói trong một đoạn
WebGPU là cách mới để trang web ra lệnh trực tiếp cho chip đồ hoạ của máy. Thế hệ trước là WebGL, ra đời từ thời điện thoại còn yếu, được thiết kế theo lối cũ nên tốn nhiều công trung gian. WebGPU gần với cách các ứng dụng cài đặt hiện đại nói chuyện với chip đồ hoạ: chuẩn bị sẵn mọi thứ một lần, rồi mỗi khung hình chỉ việc bấm “chạy”. Nó còn cho phép dùng chip đồ hoạ để tính toán chứ không chỉ để vẽ — mô phỏng nước, vải, đám đông, thậm chí chạy mô hình trí tuệ nhân tạo nhỏ ngay trong trình duyệt.
Về độ phủ: Chrome trên máy tính bật WebGPU từ năm 2023, Chrome trên Android bật từ đầu năm 2024 nhưng chỉ cho máy chạy Android 12 trở lên với một số dòng chip đồ hoạ, và Safari bật từ thế hệ phiên bản 26 ra mắt năm 2025. Nghĩa là trên giấy, phần lớn máy mới đã có. Trên thực tế, “có” và “chạy nhanh” là hai chuyện.
Giới hạn thật số một: số điểm ảnh, không phải số hiệu ứng
Điện thoại tầm trung bây giờ có màn hình sắc nét đáng ngạc nhiên. Một màn hình mà ta thấy chỉ “to cỡ bàn tay” có thể chứa hơn hai triệu điểm ảnh thật, vì mỗi điểm ảnh ta nhìn thấy được hệ điều hành chia thành hai, ba điểm ảnh vật lý. Trình duyệt gọi con số chia này là tỉ lệ điểm ảnh thiết bị.
Chip đồ hoạ của máy tầm trung thường không đuối vì hình phức tạp, mà đuối vì phải tô màu từng ấy điểm ảnh sáu mươi lần mỗi giây. Nếu ứng dụng ngây thơ vẽ đúng bằng độ phân giải vật lý, máy nóng lên sau vài phút rồi tự hạ xung nhịp, và khung hình bắt đầu giật — dù từng hiệu ứng riêng lẻ đều nhẹ.
Cách chúng tôi xử lý trong bộ lõi dùng chung của năm ứng dụng AppGiaiTri là một ngân sách điểm ảnh cố định: khung vẽ không bao giờ vượt quá khoảng 2,4 triệu điểm ảnh, và tỉ lệ nét tối đa bị chặn ở 2,5. Máy nhỏ, màn hình dày điểm ảnh thì được vẽ gần đủ nét; máy tính bảng màn to thì tự hạ độ nét xuống để giữ tổng số điểm ảnh trong ngân sách. Khi người dùng chọn “Hiệu ứng: Giảm (máy yếu)” trong phần cài đặt, tỉ lệ nét rơi về 1 và số hạt trong mỗi vụ nổ, mỗi cú va chạm giảm còn một phần ba. Mắt thường nhìn trên màn hình nhỏ khó thấy khác biệt, nhưng chip đồ hoạ thì thấy rất rõ.
Bài học: WebGPU giúp mỗi lệnh vẽ rẻ hơn, nhưng không làm việc tô hai triệu điểm ảnh rẻ đi. Trên máy tầm trung, người làm vẫn phải quyết định vẽ ít điểm ảnh hơn, bất kể dùng công nghệ nào.
Giới hạn thật số hai: nhiệt, không phải sức mạnh đỉnh
Các bài chấm điểm tốc độ chạy vài chục giây. Một phiên giải trí kéo dài năm, mười phút. Trong khoảng đó, điện thoại tầm trung — thường không có buồng tản nhiệt, vỏ nhựa, sạc cùng lúc — sẽ nóng lên và tự giảm hiệu năng để bảo vệ pin và linh kiện. Ứng dụng mượt ở phút đầu có thể tụt khung hình rõ rệt ở phút thứ tám, nhất là trong phòng không điều hoà giữa trưa hè.
Hệ quả cho người thiết kế: đừng tính theo sức máy lúc mát. Chúng tôi chọn làm mọi hiệu ứng ở mức mà máy vẫn chạy mượt khi đã nóng, và dành phần dư cho máy mạnh chứ không ngược lại. Một ứng dụng đẹp ở phút đầu mà giật ở phút thứ năm sẽ bị nhớ là “giật”.
Giới hạn thật số ba: bộ nhớ và cái chết im lặng của thẻ trình duyệt
Ứng dụng cài đặt dùng quá nhiều bộ nhớ thì thường bị hệ điều hành đóng, người dùng biết là nó “văng”. Trang web dùng quá bộ nhớ thì trình duyệt lặng lẽ tải lại trang — trên iPhone đôi khi kèm dòng báo “đã xảy ra sự cố lặp lại”. Người dùng chỉ thấy đang chơi thì màn hình trắng rồi quay về đầu.
Thứ ngốn bộ nhớ nhất trong đồ hoạ không phải mã mà là ảnh bề mặt (texture). Một tấm ảnh nén vài trăm kilobyte khi nạp vào chip đồ hoạ được bung ra đầy đủ, mỗi điểm ảnh bốn byte. Một ảnh vuông cạnh 4.096 điểm chiếm 64 MB, dù tệp gốc chỉ nhỏ bằng một phần trăm. Trên máy 4 GB bộ nhớ mà trình duyệt còn phải chia với Zalo, Facebook đang mở nền, vài chục tấm như vậy là đủ để thẻ bị giết.
Đây cũng là lý do năm ứng dụng AppGiaiTri không dùng một tấm ảnh nào để dựng cảnh: máy bay, sân đấu, võ sĩ, đường đua đều được vẽ bằng mã theo từng khung hình. Cả thư mục của mỗi ứng dụng, tính cả biểu tượng, hiện dưới 1 MB. Cái giá phải trả là phong cách đồ hoạ phẳng, tươi, không giả ảnh chụp — một lựa chọn có chủ ý chứ không phải vì không biết làm khác.
Giới hạn thật số bốn: lần giật đầu tiên
Với WebGPU (và cả WebGL), mỗi kiểu hiệu ứng cần một chương trình nhỏ chạy trên chip đồ hoạ, gọi là bộ tô bóng (shader). Lần đầu gặp một hiệu ứng, trình duyệt phải biên dịch chương trình đó. Trên máy mạnh việc này gần như không nhận ra; trên máy tầm trung, nó gây một cú khựng đúng lúc hiệu ứng lần đầu xuất hiện — thường là lúc quan trọng nhất như vụ nổ đầu tiên, cú đánh đầu tiên.
Cách chữa của người làm có kinh nghiệm: “làm nóng” mọi hiệu ứng trong màn hình chờ, vẽ chúng một lần ra chỗ không ai thấy trước khi trận bắt đầu. Ứng dụng nào không làm việc này sẽ có cảm giác “lần đầu giật, lần sau mượt” mà người dùng khó gọi tên.
Vì sao chúng tôi vẫn chưa dùng WebGPU — và khi nào sẽ dùng
Năm ứng dụng hiện tại vẽ bằng khung vẽ hai chiều của trình duyệt (Canvas 2D), công nghệ cũ nhất trong ba. Có lý do:
| Tiêu chí | Canvas 2D | WebGL | WebGPU |
|---|---|---|---|
| Chạy trên gần như mọi máy | Có | Có | Chưa — phụ thuộc đời máy, chip, phiên bản |
| Cú khựng biên dịch lần đầu | Không | Có | Có |
| Hợp với đồ hoạ phẳng, nhiều hình vẽ bằng mã | Rất hợp | Phải tự dựng nhiều | Phải tự dựng nhiều |
| Hàng nghìn vật thể, ánh sáng, 3D thật | Đuối | Tốt | Tốt nhất |
| Chạy tính toán nặng trên chip đồ hoạ | Không | Rất hạn chế | Có |
Với ứng dụng phiên ngắn, đồ hoạ phẳng, số vật thể vừa phải, Canvas 2D vẫn là lựa chọn ít rủi ro nhất: không có máy nào “không chạy được”. Nhưng nó có trần. Khi chúng tôi muốn một đường đua có hàng trăm xe, một bầu trời có mây thể tích, hay đối thủ máy dùng mô hình học máy thật, lúc đó WebGPU mới đáng cái giá của nó — và ứng dụng phải có sẵn đường lui về WebGL hoặc Canvas 2D cho máy chưa hỗ trợ.
Một cái sai phổ biến: đo khung hình mà quên đo nhịp
Khi máy yếu không kịp vẽ, có hai cách hành xử. Cách thứ nhất: cho thế giới trong ứng dụng chạy theo thời gian thật, máy chậm thì mỗi bước nhảy xa hơn — bóng xuyên qua vợt, máy bay xuyên qua đạn. Cách thứ hai: thế giới luôn tính theo từng bước cố định một phần sáu mươi giây, máy chậm thì tính bù nhiều bước, nhưng có giới hạn để không rơi vào vòng xoáy càng chậm càng phải bù.
Bộ lõi của chúng tôi làm theo cách thứ hai, bù tối đa năm bước mỗi khung hình, và khi thẻ bị ẩn thì dừng hẳn vòng lặp lẫn âm thanh. Hệ quả là trên máy rất yếu, trận đấu hơi chậm lại chứ không bao giờ “ăn gian”: cú đỡ đúng thời điểm vẫn là đúng thời điểm. Với ứng dụng đòi phản xạ, công bằng quan trọng hơn mượt.
Tương lai gần, nói thận trọng
- Máy tầm trung sẽ có WebGPU đều hơn khi các đời máy cũ rời khỏi tay người dùng — nhưng việc đó tính bằng năm, không bằng tháng.
- Giới hạn sẽ chuyển từ “có hay không” sang “nóng hay không”. Người làm giỏi sẽ là người biết hạ hiệu ứng đúng lúc, không phải người nhồi được nhiều hiệu ứng nhất.
- Phong cách đồ hoạ sẽ tiếp tục là lựa chọn thiết kế. Đồ hoạ phẳng, rõ khối, màu tươi không phải bước lùi — nó là cách để chạy đều trên mọi máy và dễ nhìn trên màn hình nhỏ giữa trời nắng.
Câu hỏi thường gặp
Điện thoại của mình có hỗ trợ WebGPU không?
Phụ thuộc vào trình duyệt, phiên bản hệ điều hành và chip đồ hoạ. Chrome trên Android cần Android 12 trở lên và chỉ bật cho một số dòng chip; Safari cần thế hệ phiên bản 26. Ứng dụng làm cẩn thận sẽ tự kiểm tra và dùng cách vẽ khác nếu máy chưa có.
Vì sao ứng dụng web chạy mượt lúc đầu rồi giật dần?
Thường là do máy nóng lên và tự giảm hiệu năng sau vài phút, nhất là khi đang sạc hoặc để nơi nóng. Hãy thử chọn chế độ hiệu ứng giảm trong phần cài đặt, rút sạc và đóng bớt ứng dụng chạy nền.
Chế độ “hiệu ứng giảm” thật ra giảm những gì?
Trong các ứng dụng AppGiaiTri, nó hạ độ nét của khung vẽ về mức một điểm ảnh vật lý cho mỗi điểm ảnh hiển thị và cắt số hạt hiệu ứng còn một phần ba. Luật chơi, tốc độ và độ khó không đổi.
Vì sao đang chơi trên trình duyệt thì trang tự tải lại?
Thường là trang dùng quá nhiều bộ nhớ nên trình duyệt đóng rồi mở lại để cứu máy. Đóng bớt thẻ và ứng dụng đang mở nền sẽ đỡ; ứng dụng có lưu tiến độ thường xuyên thì bạn không mất nhiều.
WebGPU có làm điện thoại hao pin hơn không?
Bản thân WebGPU hiệu quả hơn WebGL cho cùng một việc. Hao pin hay không phụ thuộc ứng dụng vẽ bao nhiêu điểm ảnh và bao nhiêu hiệu ứng mỗi giây, không phụ thuộc tên công nghệ.
Ứng dụng giải trí trên web có bao giờ đẹp bằng ứng dụng cài đặt không?
Trên máy mạnh, khoảng cách đang hẹp lại nhanh nhờ WebGPU. Trên máy tầm trung, giới hạn nằm ở nhiệt, bộ nhớ và số điểm ảnh — những thứ ảnh hưởng cả ứng dụng cài đặt — nên chênh lệch ở phân khúc trải nghiệm vừa phải đã không còn lớn.
